@womp/kookie-ui 0.23.0 → 0.25.0

package/src/components/avatar.tsx

@@ -13,7 +13,7 @@ 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 {
@@ -24,32 +24,54 @@ const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((ownProps, forwa
     color,
     radius,
     status,
+    statusLabel,
     badge,
-    ...imageProps
+    // Only these reach the <img>, which Radix renders once the picture has loaded.
+    fallback,
+    onLoadingStatusChange,
+    src,
+    alt,
+    srcSet,
+    sizes,
+    crossOrigin,
+    referrerPolicy,
+    loading,
+    decoding,
+    onLoad,
+    onError,
+    // Everything else (id, aria-*, data-*, handlers) goes on the root, so it is always rendered.
+    ...rootProps
   } = extractProps(props, avatarPropDefs);
+  const imageProps = { fallback, onLoadingStatusChange, src, alt, srcSet, sizes, crossOrigin, referrerPolicy, loading, decoding, onLoad, onError };
 
   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
+      {...(rootProps as React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>)}
+      ref={forwardedRef}
       data-accent-color={color}
       data-radius={radius}
       data-disabled={isDisabled || undefined}
@@ -58,67 +80,64 @@ 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');
+type AvatarImageProps = Pick<
+  AvatarImplProps,
+  'fallback' | 'onLoadingStatusChange' | 'src' | 'alt' | 'srcSet' | 'sizes' | 'crossOrigin' | 'referrerPolicy' | 'loading' | 'decoding' | 'onLoad' | 'onError'
+>;
 
-      const handleLoadingStatusChange = React.useCallback(
-        (newStatus: 'idle' | 'loading' | 'loaded' | 'error') => {
-          onLoadingStatusChange?.(newStatus);
-          setStatus(newStatus);
-        },
-        [onLoadingStatusChange],
-      );
+const AvatarImpl = React.memo(({ fallback, onLoadingStatusChange, ...imageProps }: AvatarImageProps) => {
+  const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
 
-      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,
+          })}
+          // Named from alt, like the picture it stands in for. Unnamed, it is decorative.
+          {...(imageProps.alt ? { role: 'img', 'aria-label': imageProps.alt } : { 'aria-hidden': true })}
+        >
+          {fallback}
+        </AvatarPrimitive.Fallback>
+      ) : null}
+
+      <AvatarPrimitive.Image className="kui-AvatarImage" {...imageProps} onLoadingStatusChange={handleLoadingStatusChange} />
+    </>
+  );
+});
 
 AvatarImpl.displayName = 'AvatarImpl';
 

package/src/components/blockquote.css

@@ -1,5 +1,5 @@
 .kui-Blockquote {
   box-sizing: border-box;
-  border-left: max(var(--space-2), 0.25em) solid var(--accent-a6);
-  padding-left: min(var(--space-6), max(var(--space-4), 0.5em));
+  border-inline-start: max(var(--space-2), 0.25em) solid var(--accent-a6);
+  padding-inline-start: min(var(--space-6), max(var(--space-4), 0.5em));
 }

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/button.tsx

@@ -88,14 +88,14 @@ type ButtonProps<C extends React.ElementType = 'button'> = ButtonOwnProps & {
 type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C> & { ref?: React.ForwardedRef<ButtonElement> }) => React.ReactElement | null;
 
 /**
- * An icon-only button must have an accessible name. Throws in development, logs otherwise.
+ * An icon-only button must have an accessible name. Logs an error, never throws: a name that is
+ * still loading (an empty `aria-label` while a translation loads) must not crash the tree.
  */
 function validateIconButtonName(props: Record<string, unknown>) {
   if (props['aria-label'] || props['aria-labelledby']) return;
   const errorMessage =
     'Button: an `iconOnly` button must have an accessible name. Pass `aria-label`, or ' +
     '`aria-labelledby` referencing a label element.';
-  if (process.env.NODE_ENV === 'development') throw new Error(errorMessage);
   console.error(errorMessage);
 }
 
@@ -151,16 +151,23 @@ const Button = React.forwardRef(
       (props as { fullWidth?: boolean }).fullWidth = false;
     }
 
-    if (emphasis !== undefined && variant !== undefined) {
-      throw new Error('Button: pass `emphasis` or `variant`, not both. They set the same thing.');
+    // Both set the same thing. The types forbid it; an untyped spread that sets both logs and
+    // `emphasis` wins, rather than crashing the tree.
+    if (emphasis !== undefined && variant !== undefined && process.env.NODE_ENV !== 'production') {
+      console.error('Button: pass `emphasis` or `variant`, not both. They set the same thing; `emphasis` wins.');
     }
     const resolvedVariant = emphasis !== undefined ? EMPHASIS_VARIANT[emphasis] : variant;
 
+    // The tooltip's description joins the caller's aria-describedby rather than replacing it.
+    const callerDescribedBy = (props as { 'aria-describedby'?: string })['aria-describedby'];
+    const tooltipDescribedBy = (tooltipAccessibilityProps as { 'aria-describedby'?: string })['aria-describedby'];
+    const ariaDescribedBy = [callerDescribedBy, tooltipDescribedBy].filter(Boolean).join(' ') || undefined;
+
     const button = (
       <BaseButton
         {...props}
         variant={resolvedVariant}
-        {...tooltipAccessibilityProps}
+        aria-describedby={ariaDescribedBy}
         ref={forwardedRef}
         data-icon-only={iconOnly || undefined}
         className={classNames('kui-Button', className)}

package/src/components/card.css

@@ -35,10 +35,10 @@
 
 /*
  * A CHOSEN card: a card that holds a checked Checkbox or Radio reads as picked, as in v2, so a
- * Card holding a choice replaces CheckboxCards and RadioCards. Only the card's own control
- * counts as a checkbox or radio; a Card holding a whole form of them is a form, not a choice.
+ * Card holding a choice replaces CheckboxCards and RadioCards. Only a Card that is the label
+ * of its control counts; a plain Card holding a form of them is a form, not a choice.
  */
-.kui-Card:where(:has(:is([role='checkbox'], [role='radio'])[data-state='checked'], input:is([type='checkbox'], [type='radio']):checked)) {
+.kui-Card:where(label:has(:is([role='checkbox'], [role='radio'])[data-state='checked'], input:is([type='checkbox'], [type='radio']):checked)) {
   &::before {
     background-image: linear-gradient(var(--accent-a2), var(--accent-a2));
   }
@@ -46,3 +46,14 @@
     box-shadow: inset 0 0 0 1px var(--accent-a8);
   }
 }
+
+/* Forced colors: the edge is a box-shadow, which the browser drops, so draw a real border */
+@media (forced-colors: active) {
+  .kui-Card:where(:not(.kui-variant-ghost)) {
+    border: 1px solid CanvasText;
+  }
+
+  .kui-Card:where(label:has(:is([role='checkbox'], [role='radio'])[data-state='checked'], input:is([type='checkbox'], [type='radio']):checked)) {
+    border-color: Highlight;
+  }
+}

package/src/components/chatbar.css

@@ -118,7 +118,7 @@
   box-sizing: border-box;
   max-width: 240px;
   padding: var(--chatbar-item-padding);
-  padding-right: calc(var(--chatbar-item-padding) + var(--space-2));
+  padding-inline-end: calc(var(--chatbar-item-padding) + var(--space-2));
   border: 1px solid var(--neutral-a5);
   border-radius: calc(var(--chatbar-item-lead-radius) + var(--chatbar-item-padding));
   background-color: var(--color-surface);
@@ -174,7 +174,7 @@
   /* A hosted control: as tall as the lead tile, so a pill with × is as tall as one without. */
   --base-button-height: var(--chatbar-item-lead);
   flex-shrink: 0;
-  margin-left: calc(var(--space-2) * -1);
+  margin-inline-start: calc(var(--space-2) * -1);
 }
 
 @breakpoints {
@@ -410,6 +410,23 @@
   }
 }
 
+/*
+ * Forced colors drop box-shadows, which draw the box's boundary in every variant and the raised
+ * focus ring, so the box gets a real border and the raised variant a real focus outline there.
+ */
+@media (forced-colors: active) {
+  .kui-ChatbarBox {
+    border: 1px solid CanvasText;
+  }
+  .kui-ChatbarBox:where(.kui-variant-raised):where(:focus-within) {
+    outline: 2px solid Highlight;
+    outline-offset: -1px;
+  }
+  .kui-ChatbarRoot:where([data-disabled]) .kui-ChatbarBox {
+    border-color: GrayText;
+  }
+}
+
 /***************************************************************************************************
  *                                                                                                 *
  * DISABLED / READ-ONLY STATES                                                                     *
@@ -510,7 +527,7 @@
   align-items: center;
   gap: var(--space-3);
   flex-shrink: 0;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 /* Size-based font sizing for chatbar */

package/src/components/chatbar.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { useComposedRefs } from 'radix-ui/internal';
+import { useComposedRefs, useLayoutEffect } 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';
@@ -18,9 +18,6 @@ import type { accentColors } from '../props/color.prop.js';
 import type { radii } from '../props/radius.prop.js';
 import type { ButtonProps, ButtonRankProps } from './button.js';
 
-// Avoid SSR warnings by using an isomorphic layout effect
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 /**
  * Runs `measure` with the placeholder taken out of layout, so a height read
  * reflects the value alone.
@@ -814,7 +811,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
 
   const sizingRef = React.useRef({ open, minLines, maxLines });
   // Declared before the sizing effect so it runs first in the same commit
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     sizingRef.current = { open, minLines, maxLines };
   }, [open, minLines, maxLines]);
 
@@ -841,12 +838,12 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
   }, []);
 
   // Typography depends on size
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     recomputeMetrics();
   }, [recomputeMetrics, size]);
 
   // Single place for sizing and overflow auto-open: one height reset, one scrollHeight read
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
     if (lineHeightRef.current === 0) recomputeMetrics();
@@ -888,9 +885,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
   // Dev-only warning if no accessible name is provided
   React.useEffect(() => {
     if (process.env.NODE_ENV === 'production') return;
-    const hasLabel = textareaProps['aria-label'] != null || textareaProps['aria-labelledby'] != null;
+    // Read the DOM, not the props: a `<label htmlFor>` or an asChild child's own label counts too.
+    const el = textareaRef.current;
+    const hasLabel =
+      textareaProps['aria-label'] != null ||
+      textareaProps['aria-labelledby'] != null ||
+      Boolean(el?.getAttribute('aria-label') || el?.getAttribute('aria-labelledby') || el?.labels?.length);
     if (!hasLabel) {
-      console.warn('[Chatbar.Textarea] Provide aria-label or aria-labelledby to ensure the control has an accessible name.');
+      console.warn('[Chatbar.Textarea] Provide aria-label, aria-labelledby or a <label htmlFor> to ensure the control has an accessible name.');
     }
     // warn only on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -960,11 +962,12 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
 
   const Comp = asChild ? Slot : 'textarea';
   return (
-    <div className={classNames('kui-ChatbarField', 'kui-ChatbarTextarea', className)}>
+    // className and style both reach the textarea, like every other textarea attribute.
+    <div className="kui-ChatbarField kui-ChatbarTextarea">
       <Comp
         {...textareaProps}
         ref={composedRef}
-        className="kui-ChatbarInput"
+        className={classNames('kui-ChatbarInput', className)}
         value={value}
         onChange={handleChange}
         onFocus={handleFocus}
@@ -1216,28 +1219,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.css

@@ -12,16 +12,12 @@
   width: fit-content;
 }
 
-/* The disabled cursor lives in the base mark. */
+/* The disabled cursor and colours live in the base mark, per variant. */
 .kui-CheckboxGroupItemCheckbox {
   &:where(:focus-visible)::before {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-ring-offset, 2px);
   }
-
-  &:where(:disabled)::before {
-    background-color: var(--neutral-a3);
-  }
 }
 
 .kui-CheckboxGroupItemInner {

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);
+          }
+        }}
+      />
     );
   },
 );