@womp/kookie-ui 0.24.0 → 0.25.1

package/src/components/message-scroller.tsx

@@ -24,7 +24,7 @@
  * The viewport is its own scroller. Kookie's `ScrollArea` is Radix's, and Radix cannot hand its
  * viewport element to another library, so the transcript scrolls natively with a thin scrollbar.
  *
- * Requires React 19, which the primitive needs.
+ * Requires React 19, which the primitive needs: it reads `ref` as a prop.
  */
 
 import * as React from 'react';
@@ -61,8 +61,8 @@ interface RootProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 /** Holds the scroll state. Everything else goes inside it. */
-const Root = React.forwardRef<HTMLDivElement, RootProps>(
-  ({ autoScroll = true, defaultScrollPosition = 'end', scrollEdgeThreshold, scrollMargin, className, children, ...props }, forwardedRef) => (
+const Root = React.forwardRef<HTMLDivElement, RootProps>(({ autoScroll = true, defaultScrollPosition = 'end', scrollEdgeThreshold, scrollMargin, className, children, ...props }, forwardedRef) => {
+  return (
     <Primitive.Provider
       autoScroll={autoScroll}
       defaultScrollPosition={defaultScrollPosition}
@@ -73,8 +73,8 @@ const Root = React.forwardRef<HTMLDivElement, RootProps>(
         {children}
       </Primitive.Root>
     </Primitive.Provider>
-  ),
-);
+  );
+});
 Root.displayName = 'MessageScroller.Root';
 
 interface ViewportProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -97,13 +97,7 @@ const Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(({ className, '
   return (
     // The primitive names an unnamed viewport "Messages", in English. An empty name is skipped by
     // accessible-name computation, so a transcript is only named when the app names it.
-    <Primitive.Viewport
-      aria-label={label ?? ''}
-      {...props}
-      ref={ref}
-      data-fade={fade ? '' : undefined}
-      className={classNames('kui-MessageScrollerViewport', className)}
-    />
+    <Primitive.Viewport aria-label={label ?? ''} {...props} ref={ref} data-fade={fade ? '' : undefined} className={classNames('kui-MessageScrollerViewport', className)} />
   );
 });
 Viewport.displayName = 'MessageScroller.Viewport';
@@ -131,23 +125,20 @@ Item.displayName = 'MessageScroller.Item';
 
 type ButtonProps = Omit<KuiButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis' | 'iconOnly' | 'fullWidth'> &
   ButtonRankProps & {
-  /** Accessible name, in your words. Default "Jump to the latest". */
-  'aria-label'?: string;
-  /** `end` jumps to the latest message (default); `start` to the first. */
-  direction?: 'start' | 'end';
-  /** Scroll behaviour of the jump. Default `smooth`. */
-  behavior?: ScrollBehavior;
-};
+    /** Accessible name, in your words. Default "Jump to the latest". */
+    'aria-label'?: string;
+    /** `end` jumps to the latest message (default); `start` to the first. */
+    direction?: 'start' | 'end';
+    /** Scroll behaviour of the jump. Default `auto`, an instant jump with no long animation. */
+    behavior?: ScrollBehavior;
+  };
 
 /**
  * Jumps back to the latest message. It renders only while the reader is away from the end.
  * Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { direction = 'end', behavior = 'smooth', className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, onClick, ...props },
-    forwardedRef,
-  ) => {
+  ({ direction = 'end', behavior = 'auto', className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, onClick, ...props }, forwardedRef) => {
     const { scrollToEnd, scrollToStart } = useMessageScroller();
 
     // The primitive blurs the button on click, which drops keyboard focus to the page. Kookie
@@ -156,9 +147,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       onClick?.(event);
       if (event.defaultPrevented) return;
       event.preventDefault();
-      const viewport = event.currentTarget
-        .closest('.kui-MessageScrollerRoot')
-        ?.querySelector<HTMLElement>('.kui-MessageScrollerViewport');
+      const viewport = event.currentTarget.closest('.kui-MessageScrollerRoot')?.querySelector<HTMLElement>('.kui-MessageScrollerViewport');
       viewport?.focus({ preventScroll: true });
       if (direction === 'start') scrollToStart({ behavior });
       else scrollToEnd({ behavior });

package/src/components/navbar.css

@@ -61,7 +61,15 @@
   min-width: 0;
 }
 
-/* Ensure Actions always stays in the right column */
+/* Each slot keeps its column, so Navigation stays centred with no Logo beside it */
+.kui-NavbarLogo {
+  grid-column: 1;
+}
+
+.kui-NavbarNavigation {
+  grid-column: 2;
+}
+
 .kui-NavbarActions {
   grid-column: 3;
 }

package/src/components/navbar.tsx

@@ -12,7 +12,7 @@ type NavbarSlotFlexProps = Omit<FlexProps, keyof MarginProps>;
 
 import { navbarRootPropDefs } from './navbar.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/notice.tsx

@@ -23,7 +23,7 @@ import classNames from 'classnames';
 
 import { Button } from './button.js';
 import { Text } from './text.js';
-import { ThemeSizeContext, useThemeSize } from '../helpers/theme-size.js';
+import { ThemeSizeContext, useThemeSize } from '../hooks/theme-size.js';
 import { accentColorPropDef } from '../props/color.prop.js';
 
 type NoticeSize = '1' | '2' | '3' | '4';

package/src/components/popover.css

@@ -15,19 +15,16 @@
   box-sizing: border-box;
 
   transform-origin: var(--radix-popover-content-transform-origin);
-
-  /* Toolbar integration */
-  &:where([data-has-toolbar]) {
-    /* When toolbar is present, top padding equals toolbar height */
-    padding-top: var(--popover-toolbar-offset, var(--popover-content-padding));
-  }
 }
 
+/* The toolbar sits in flow and sticks to the top of the panel's scroll area, so it stays put
+   while the content scrolls. Negative margins pull it over the panel's padding to its edges;
+   the negative top matches, because sticky offsets count from inside the panel's padding. */
 .kui-PopoverToolbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+  position: sticky;
+  top: calc(-1 * var(--popover-content-padding));
+  margin-top: calc(-1 * var(--popover-content-padding));
+  margin-inline: calc(-1 * var(--popover-content-padding));
   z-index: 1;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
@@ -38,16 +35,18 @@
 }
 
 .kui-PopoverToolbarSection {
+  /* Each section owns a column on the one row, whichever sections are present and in any order. */
+  grid-row: 1;
   display: flex;
   align-items: center;
   gap: var(--space-3);
 }
 
-.kui-PopoverToolbarLeft { justify-self: start; }
+.kui-PopoverToolbarLeft { grid-column: 1; justify-self: start; }
 
 .kui-PopoverToolbarCenter { grid-column: 2; justify-self: center; min-width: 0; text-align: center; }
 
-.kui-PopoverToolbarRight { justify-self: end; }
+.kui-PopoverToolbarRight { grid-column: 3; justify-self: end; }
 
 .kui-PopoverToolbarTitle {
   display: inline-block;
@@ -86,3 +85,10 @@
     }
   }
 }
+
+/* High contrast mode drops shadows, so give the panel a real edge. */
+@media (forced-colors: active) {
+  .kui-PopoverContent {
+    border: 1px solid CanvasText;
+  }
+}

package/src/components/popover.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { Theme } from './theme.js';
@@ -105,7 +105,8 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             collisionPadding={10}
             {...contentProps}
             ref={combinedRef}
-            aria-labelledby={labelId}
+            // A Toolbar.Title names the panel; without one, the caller's own value stands.
+            aria-labelledby={labelId ?? contentProps['aria-labelledby']}
             className={classNames('kui-PopperContent', 'kui-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={React.useMemo(() => ({ contentRef, setToolbarOffset, setLabelId }), [setToolbarOffset])}>
@@ -135,9 +136,7 @@ type PopoverAnchorElement = React.ElementRef<typeof PopoverPrimitive.Anchor>;
 interface PopoverAnchorProps
   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor> {}
 const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <PopoverPrimitive.Anchor {...props} ref={forwardedRef} />
-  ),
+  (props, forwardedRef) => <PopoverPrimitive.Anchor {...props} ref={forwardedRef} />,
 );
 
 PopoverAnchor.displayName = 'Popover.Anchor';
@@ -187,11 +186,11 @@ const PopoverToolbarBase = React.forwardRef<PopoverToolbarElement, PopoverToolba
     );
   },
 );
-(PopoverToolbarBase as any).displayName = 'Popover.Toolbar';
+PopoverToolbarBase.displayName = 'Popover.Toolbar';
 
-type SectionProps = React.ComponentPropsWithoutRef<'div'>;
+type PopoverToolbarSectionProps = React.ComponentPropsWithoutRef<'div'>;
 
-const PopoverToolbarLeft = React.forwardRef<HTMLDivElement, SectionProps>(
+const PopoverToolbarLeft = React.forwardRef<HTMLDivElement, PopoverToolbarSectionProps>(
   ({ className, ...props }, ref) => (
     <div
       {...props}
@@ -202,7 +201,7 @@ const PopoverToolbarLeft = React.forwardRef<HTMLDivElement, SectionProps>(
 );
 PopoverToolbarLeft.displayName = 'Popover.Toolbar.Left';
 
-const PopoverToolbarCenter = React.forwardRef<HTMLDivElement, SectionProps>(
+const PopoverToolbarCenter = React.forwardRef<HTMLDivElement, PopoverToolbarSectionProps>(
   ({ className, ...props }, ref) => (
     <div
       {...props}
@@ -213,7 +212,7 @@ const PopoverToolbarCenter = React.forwardRef<HTMLDivElement, SectionProps>(
 );
 PopoverToolbarCenter.displayName = 'Popover.Toolbar.Center';
 
-const PopoverToolbarRight = React.forwardRef<HTMLDivElement, SectionProps>(
+const PopoverToolbarRight = React.forwardRef<HTMLDivElement, PopoverToolbarSectionProps>(
   ({ className, ...props }, ref) => (
     <div
       {...props}
@@ -224,8 +223,8 @@ const PopoverToolbarRight = React.forwardRef<HTMLDivElement, SectionProps>(
 );
 PopoverToolbarRight.displayName = 'Popover.Toolbar.Right';
 
-type TitleProps = React.ComponentPropsWithoutRef<'span'>;
-const PopoverToolbarTitle = React.forwardRef<HTMLSpanElement, TitleProps>(
+type PopoverToolbarTitleProps = React.ComponentPropsWithoutRef<'span'>;
+const PopoverToolbarTitle = React.forwardRef<HTMLSpanElement, PopoverToolbarTitleProps>(
   ({ className, id: idProp, ...props }, ref) => {
     const ctx = usePopoverContentContext('Popover.Toolbar.Title');
     const reactId = React.useId();
@@ -276,4 +275,7 @@ export type {
   PopoverTriggerProps as TriggerProps,
   PopoverCloseProps as CloseProps,
   PopoverAnchorProps as AnchorProps,
+  PopoverToolbarProps as ToolbarProps,
+  PopoverToolbarSectionProps as ToolbarSectionProps,
+  PopoverToolbarTitleProps as ToolbarTitleProps,
 };

package/src/components/progress.css

@@ -28,7 +28,15 @@
    * `.kui-ProgressRoot` clips the overhang. `max()` keeps a sliver of the bar
    * visible at very low values, as the width form did.
    */
-  transform: translateX(calc(-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))));
+  /* In RTL the bar fills from the right: --progress-direction flips the slide. */
+  --progress-direction: 1;
+  transform: translateX(
+    calc(var(--progress-direction) * (-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))))
+  );
+
+  &:where(:dir(rtl)) {
+    --progress-direction: -1;
+  }
 
   &:where([data-state='indeterminate']) {
     animation-name: kui-progress-indicator-indeterminate-grow;
@@ -41,20 +49,27 @@
 
 @keyframes kui-progress-indicator-indeterminate-grow {
   0% {
-    transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-initial) * 100%)));
   }
   20% {
-    transform: translateX(calc(-100% + var(--progress-scale-step-1) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-step-1) * 100%)));
   }
   30% {
-    transform: translateX(calc(-100% + var(--progress-scale-step-2) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-step-2) * 100%)));
   }
   40%,
   50% {
-    transform: translateX(calc(-100% + var(--progress-scale-step-3) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-step-3) * 100%)));
   }
   100% {
-    transform: translateX(calc(-100% + var(--progress-scale-final) * 100%));
+    transform: translateX(calc(var(--progress-direction) * (-100% + var(--progress-scale-final) * 100%)));
+  }
+}
+
+/* A busy indicator keeps moving when motion is reduced, more slowly. */
+@media (prefers-reduced-motion: reduce) {
+  .kui-ProgressIndicator:where([data-state='indeterminate']) {
+    animation-duration: calc(var(--progress-duration) * 3);
   }
 }
 
@@ -95,3 +110,15 @@
     background-color: var(--accent-solid);
   }
 }
+
+/* Forced colors drop the track's shadow and paint both backgrounds as Canvas: outline the track
+   and fill the bar with Highlight so the progress shows. Last, so it wins over the variants. */
+@media (forced-colors: active) {
+  .kui-ProgressRoot {
+    border: 1px solid CanvasText;
+  }
+
+  .kui-ProgressIndicator {
+    background-color: Highlight;
+  }
+}

package/src/components/progress.tsx

@@ -22,8 +22,10 @@ const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwar
     progressPropDefs
   );
 
-  // `null` and `undefined` both mean indeterminate, as in Radix, so both keep a custom duration.
-  const isDeterminate = progressProps.value != null;
+  // Radix treats `null`, `undefined` and a value outside 0 to max as indeterminate, so all of
+  // them keep a custom duration.
+  const { value, max } = progressProps;
+  const isDeterminate = value != null && value >= 0 && value <= (max ?? 100);
 
   return (
     <ProgressPrimitive.Root
@@ -34,7 +36,7 @@ const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwar
       style={mergeStyles(
         {
           '--progress-duration': isDeterminate ? undefined : duration,
-          '--progress-value': isDeterminate ? progressProps.value : undefined,
+          '--progress-value': isDeterminate ? value : undefined,
           '--progress-max': progressProps.max ?? undefined,
         },
         style

package/src/components/radio-group.tsx

@@ -8,7 +8,7 @@ import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import { radioGroupRootPropDefs } from './radio-group.props.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/radio.tsx

@@ -6,7 +6,7 @@ import { composeEventHandlers } from 'radix-ui/internal';
 
 import { radioPropDefs } from './radio.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { NotInputRadioAttributes } from '../helpers/input-attributes.js';

package/src/components/scroll-area.css

@@ -1,3 +1,32 @@
+/*
+ * The scroll-edges hook writes these on the viewport every scroll frame. Registered as
+ * non-inherited so a write restyles the viewport only, not every row inside it. Only the
+ * viewport's own mask reads them.
+ */
+@property --scroll-overflow-start {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-overflow-end {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-overflow-x-start {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-overflow-x-end {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
 .kui-theme {
   --scrollarea-scrollbar-horizontal-margin-top: var(--space-2);
   --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-2);
@@ -34,11 +63,12 @@
     outline: 2px solid var(--focus-8);
     outline-offset: -2px;
   }
+}
 
-  /* Stop Chrome back/forward two-finger swipe when there is a horizontal scrollbar */
-  &:where(:has(.kui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
-    overscroll-behavior-x: contain;
-  }
+/* Stop Chrome back/forward two-finger swipe when there is a horizontal scrollbar. The scrollbar is
+   the viewport's sibling, and the child combinator keeps a nested area's scrollbar out of it. */
+:where(.kui-ScrollAreaRoot:has(> .kui-ScrollAreaScrollbar[data-orientation='horizontal'])) > .kui-ScrollAreaViewport {
+  overscroll-behavior-x: contain;
 }
 
 .kui-ScrollAreaViewport > * {