@womp/kookie-ui 0.24.0 → 0.25.0

package/src/components/accordion.css

@@ -79,25 +79,27 @@
   cursor: pointer;
 }
 
-/* Size variants */
-:where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionTrigger {
-  padding: var(--space-3) var(--space-4);
-  font-size: var(--font-size-1);
-}
+/* Size variants, per breakpoint */
+@breakpoints {
+  :where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionTrigger {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--font-size-1);
+  }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-2)) .kui-AccordionTrigger {
-  padding: var(--space-4) var(--space-5);
-  font-size: var(--font-size-2);
-}
+  :where(.kui-AccordionRoot:where(.kui-r-size-2)) .kui-AccordionTrigger {
+    padding: var(--space-4) var(--space-5);
+    font-size: var(--font-size-2);
+  }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionTrigger {
-  padding: var(--space-5) var(--space-6);
-  font-size: var(--font-size-3);
-}
+  :where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionTrigger {
+    padding: var(--space-5) var(--space-6);
+    font-size: var(--font-size-3);
+  }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionTrigger {
-  padding: var(--space-6) var(--space-7);
-  font-size: var(--font-size-4);
+  :where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionTrigger {
+    padding: var(--space-6) var(--space-7);
+    font-size: var(--font-size-4);
+  }
 }
 
 /* Disclosure chevron: at the far end of the trigger, turned up while the section is open */
@@ -113,19 +115,27 @@
   rotate: 180deg;
 }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionChevron {
-  width: var(--icon-size-1);
-  height: var(--icon-size-1);
-}
+/* Chevron size, per breakpoint */
+@breakpoints {
+  :where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionChevron {
+    width: var(--icon-size-1);
+    height: var(--icon-size-1);
+  }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionChevron {
-  width: var(--icon-size-3);
-  height: var(--icon-size-3);
-}
+  :where(.kui-AccordionRoot:where(.kui-r-size-2)) .kui-AccordionChevron {
+    width: var(--icon-size-2);
+    height: var(--icon-size-2);
+  }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionChevron {
-  width: var(--icon-size-4);
-  height: var(--icon-size-4);
+  :where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionChevron {
+    width: var(--icon-size-3);
+    height: var(--icon-size-3);
+  }
+
+  :where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionChevron {
+    width: var(--icon-size-4);
+    height: var(--icon-size-4);
+  }
 }
 
 :where(.kui-AccordionTrigger[data-disabled]) .kui-AccordionChevron {
@@ -152,11 +162,6 @@
   }
 }
 
-:where(.kui-AccordionRoot:where(.kui-variant-raised):focus-within) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-
 @media (hover: hover) {
   :where(.kui-AccordionRoot:where(.kui-variant-soft)) :where(.kui-AccordionTrigger:hover) {
     background-color: var(--accent-4);
@@ -189,27 +194,6 @@
   outline-offset: var(--focus-outline-offset-inset);
 }
 
-/* Variant-specific focus styles */
-:where(.kui-AccordionRoot:where(.kui-variant-soft):focus-within) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-
-:where(.kui-AccordionRoot:where(.kui-variant-surface):focus-within) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-
-:where(.kui-AccordionRoot:where(.kui-variant-outline):focus-within) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-
-:where(.kui-AccordionRoot:where(.kui-variant-ghost):focus-within) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-
 /* Accordion Content */
 .kui-AccordionContent {
   overflow: hidden;
@@ -224,25 +208,27 @@
   padding: 0 var(--space-5) var(--space-4);
 }
 
-/* Size variants for content */
-:where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionContentInner {
-  padding: 0 var(--space-4) var(--space-3);
-  font-size: var(--font-size-1);
-}
+/* Size variants for content, per breakpoint */
+@breakpoints {
+  :where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionContentInner {
+    padding: 0 var(--space-4) var(--space-3);
+    font-size: var(--font-size-1);
+  }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-2)) .kui-AccordionContentInner {
-  padding: 0 var(--space-5) var(--space-4);
-  font-size: var(--font-size-2);
-}
+  :where(.kui-AccordionRoot:where(.kui-r-size-2)) .kui-AccordionContentInner {
+    padding: 0 var(--space-5) var(--space-4);
+    font-size: var(--font-size-2);
+  }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionContentInner {
-  padding: 0 var(--space-6) var(--space-5);
-  font-size: var(--font-size-3);
-}
+  :where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionContentInner {
+    padding: 0 var(--space-6) var(--space-5);
+    font-size: var(--font-size-3);
+  }
 
-:where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionContentInner {
-  padding: 0 var(--space-7) var(--space-6);
-  font-size: var(--font-size-4);
+  :where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionContentInner {
+    padding: 0 var(--space-7) var(--space-6);
+    font-size: var(--font-size-4);
+  }
 }
 
 /* Content animations */

package/src/components/accordion.tsx

@@ -43,36 +43,11 @@ const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>
       typeof AccordionPrimitive.Root
     >;
 
-
     // Ensure single accordions can collapse by default unless explicitly set
     if (radixProps.type === 'single' && radixProps.collapsible === undefined) {
       radixProps.collapsible = true;
     }
 
-    // Handle Home/End key navigation for multi-item accordions
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent) => {
-        if (radixProps.type === 'multiple') {
-          const items = event.currentTarget.querySelectorAll('[data-radix-accordion-item]');
-
-          if (event.key === 'Home') {
-            event.preventDefault();
-            const firstTrigger = items[0]?.querySelector(
-              '[data-radix-accordion-trigger]',
-            ) as HTMLElement;
-            firstTrigger?.focus();
-          } else if (event.key === 'End') {
-            event.preventDefault();
-            const lastTrigger = items[items.length - 1]?.querySelector(
-              '[data-radix-accordion-trigger]',
-            ) as HTMLElement;
-            lastTrigger?.focus();
-          }
-        }
-      },
-      [radixProps.type],
-    );
-
     return (
       <AccordionPrimitive.Root
         {...radixProps}
@@ -80,7 +55,6 @@ const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>
         className={classNames('kui-AccordionRoot', className)}
         data-accent-color={color}
         data-radius={radius}
-        onKeyDown={handleKeyDown}
       />
     );
   },

package/src/components/alert-dialog.tsx

@@ -9,6 +9,7 @@ import { Theme } from './theme.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
+import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
 import type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
 import type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';
@@ -42,6 +43,9 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
 
   const { className, forceMount, container, onCloseAutoFocus, ...contentProps } = extractProps(props, contentPropDefs);
 
+  // Same stuck pointer-events fallback as Dialog and Sheet.
+  useBodyPointerEventsCleanup();
+
   return (
     <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
       <Theme asChild>

package/src/components/avatar.css

@@ -455,10 +455,14 @@
 .kui-AvatarBadge {
   position: absolute;
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
   z-index: 1;
-  /* Indicator partially leaks out of avatar corner */
+  /* Indicator partially leaks out of avatar corner, on the inline end */
   transform: translate(25%, 25%);
+
+  &:where(:dir(rtl)) {
+    transform: translate(-25%, 25%);
+  }
 }
 
 /* Status indicator - colored dot */

package/src/components/avatar.tsx

@@ -16,7 +16,33 @@ interface AvatarProps extends AvatarImplProps {}
 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, statusLabel, badge, ...imageProps } = extractProps(props, avatarPropDefs);
+  const {
+    asChild,
+    children,
+    className,
+    style,
+    color,
+    radius,
+    status,
+    statusLabel,
+    badge,
+    // 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) {
@@ -44,6 +70,7 @@ const Avatar = React.forwardRef<AvatarElement, AvatarProps>((ownProps, forwarded
 
   return (
     <AvatarPrimitive.Root
+      {...(rootProps as React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>)}
       ref={forwardedRef}
       data-accent-color={color}
       data-radius={radius}
@@ -74,7 +101,12 @@ interface AvatarImplProps extends ComponentPropsWithout<typeof AvatarPrimitive.I
   fallback: NonNullable<AvatarOwnProps['fallback']>;
 }
 
-const AvatarImpl = React.memo(({ fallback, onLoadingStatusChange, ...imageProps }: AvatarImplProps) => {
+type AvatarImageProps = Pick<
+  AvatarImplProps,
+  'fallback' | 'onLoadingStatusChange' | 'src' | 'alt' | 'srcSet' | 'sizes' | 'crossOrigin' | 'referrerPolicy' | 'loading' | 'decoding' | 'onLoad' | 'onError'
+>;
+
+const AvatarImpl = React.memo(({ fallback, onLoadingStatusChange, ...imageProps }: AvatarImageProps) => {
   const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
 
   const handleLoadingStatusChange = React.useCallback(
@@ -95,7 +127,8 @@ const AvatarImpl = React.memo(({ fallback, onLoadingStatusChange, ...imageProps
             'kui-one-letter': typeof fallback === 'string' && fallback.length === 1,
             'kui-two-letters': typeof fallback === 'string' && fallback.length === 2,
           })}
-          delayMs={0}
+          // 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>

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/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,6 +1,6 @@
 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';
@@ -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}

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.css

@@ -1,13 +1,9 @@
 @import './_internal/base-checkbox.css';
 
-/* The disabled cursor lives in the base mark. */
+/* The disabled cursor and colours live in the base mark, per variant. */
 .kui-CheckboxRoot {
   &: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);
-  }
 }

package/src/components/chip.css

@@ -14,9 +14,6 @@
   /* Fix Chrome background bleeding on rounded corners */
   background-clip: padding-box;
 
-  /* Force Chrome to recalculate styles when radius changes */
-  will-change: border-radius;
-
   isolation: isolate;
 
   /* An icon is one line tall, so it never changes the chip's height. */

package/src/components/combobox.tsx

@@ -28,6 +28,7 @@ import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
 import { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
+import { Spinner } from './spinner.js';
 import { Theme, useThemeContext } from './theme.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import * as Popover from './popover.js';
@@ -365,36 +366,25 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
   const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     onKeyDown?.(event);
     if (event.defaultPrevented || isBlocked || isDisabled) return;
-    if (event.key === 'ArrowDown') {
+    // Both arrows open the list, as on Select (APG select-only combobox).
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
       ctx.setOpen(true);
     }
   };
 
+  const loadingIcon = (
+    <span className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
+      <Spinner />
+    </span>
+  );
+
   const defaultContent = (
     <>
       <span className="kui-SelectTriggerInner">
         <span className="kui-ComboboxValue">{ctx.displayValue ?? ctx.value ?? placeholder ?? ctx.placeholder}</span>
       </span>
-      {loading ? (
-        <div className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <circle
-              cx="8"
-              cy="8"
-              r="7"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeDasharray="32"
-              strokeDashoffset="32"
-              className="kui-SelectLoadingIconCircle"
-            />
-          </svg>
-        </div>
-      ) : (
-        <ChevronDownIcon className="kui-SelectIcon" />
-      )}
+      {loading ? loadingIcon : <ChevronDownIcon className="kui-SelectIcon" />}
     </>
   );
 
@@ -413,10 +403,11 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
         {...triggerProps}
         // eslint-disable-next-line jsx-a11y/role-has-required-aria-props -- Popover.Trigger (Slot) adds aria-expanded and aria-controls
         role="combobox"
-        aria-disabled={isDisabled || undefined}
-        aria-readonly={readOnly || undefined}
-        aria-invalid={error || undefined}
-        aria-busy={loading || undefined}
+        // The props win when set; otherwise a caller's own aria-* (a form library's aria-invalid) stays, as on Select.
+        aria-disabled={isDisabled || triggerProps['aria-disabled']}
+        aria-readonly={readOnly || triggerProps['aria-readonly']}
+        aria-invalid={error || triggerProps['aria-invalid']}
+        aria-busy={loading || triggerProps['aria-busy']}
         type={buttonType ?? 'button'}
         disabled={isDisabled}
         onClick={handleClick}
@@ -424,7 +415,15 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
         ref={composedRef}
         className={classNames('kui-reset', 'kui-SelectTrigger', 'kui-ComboboxTrigger', className)}
       >
-        {children ? requireReactElement(children) : defaultContent}
+        {/* Custom children replace the value and chevron; the spinner still shows while loading. */}
+        {children ? (
+          <>
+            {requireReactElement(children)}
+            {loading ? loadingIcon : null}
+          </>
+        ) : (
+          defaultContent
+        )}
       </button>
     </Popover.Trigger>
   );
@@ -774,7 +773,7 @@ const ComboboxItem = React.forwardRef<ComboboxItemElement, ComboboxItemProps>(
     const searchKeywords = text ? (keywords ? [text, ...keywords] : [text]) : keywords;
     // cmdk stores keywords only when `value` changes. Remount the cmdk item when
     // they change so a new label or keyword list is picked up.
-    const keywordsKey = searchKeywords ? searchKeywords.join('') : '';
+    const keywordsKey = searchKeywords ? searchKeywords.join('\u0000') : '';
 
     const isDisabled = disabled ?? rootDisabled ?? false;