@womp/kookie-ui 0.23.0 → 0.25.0

package/src/components/navbar.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Flex } from './flex.js';
-import { Slot } from './slot.js';
 
 import type { FlexProps } from './flex.js';
 import type { MarginProps } from '../props/margin.props.js';
@@ -70,29 +69,18 @@ type NavbarLogoProps = NavbarSlotFlexProps & {
   asChild?: boolean;
 };
 
+// With `asChild`, Flex renders the child, so the layout props become classes on it, not attributes.
 const NavbarLogo = React.forwardRef<HTMLDivElement, NavbarLogoProps>(
-  ({ asChild, gap = '2', align = 'center', justify = 'start', className, ...props }, ref) => {
-    if (asChild) {
-      return (
-        <Slot
-          ref={ref}
-          className={classNames('kui-NavbarLogo', className)}
-          {...props}
-        />
-      );
-    }
-
-    return (
-      <Flex
-        ref={ref}
-        gap={gap}
-        align={align}
-        justify={justify}
-        className={classNames('kui-NavbarLogo', className)}
-        {...props}
-      />
-    );
-  }
+  ({ gap = '2', align = 'center', justify = 'start', className, ...props }, ref) => (
+    <Flex
+      ref={ref}
+      gap={gap}
+      align={align}
+      justify={justify}
+      className={classNames('kui-NavbarLogo', className)}
+      {...props}
+    />
+  ),
 );
 NavbarLogo.displayName = 'Navbar.Logo';
 
@@ -102,30 +90,19 @@ type NavbarNavigationProps = NavbarSlotFlexProps & {
 };
 
 const NavbarNavigation = React.forwardRef<HTMLDivElement, NavbarNavigationProps>(
-  ({ asChild, gap = '4', align = 'center', justify = 'center', className, ...props }, ref) => {
-    if (asChild) {
-      return (
-        <Slot
-          ref={ref}
-          className={classNames('kui-NavbarNavigation', className)}
-          role="navigation"
-          {...props}
-        />
-      );
-    }
-
-    return (
-      <Flex
-        ref={ref}
-        gap={gap}
-        align={align}
-        justify={justify}
-        className={classNames('kui-NavbarNavigation', className)}
-        role="navigation"
-        {...props}
-      />
-    );
-  }
+  ({ gap = '4', align = 'center', justify = 'center', className, ...props }, ref) => (
+    <Flex
+      ref={ref}
+      gap={gap}
+      align={align}
+      justify={justify}
+      className={classNames('kui-NavbarNavigation', className)}
+      role="navigation"
+      // A landmark needs a name to be told apart from other navigation on the page.
+      aria-label={props['aria-labelledby'] === undefined ? 'Main' : undefined}
+      {...props}
+    />
+  ),
 );
 NavbarNavigation.displayName = 'Navbar.Navigation';
 
@@ -135,28 +112,16 @@ type NavbarActionsProps = NavbarSlotFlexProps & {
 };
 
 const NavbarActions = React.forwardRef<HTMLDivElement, NavbarActionsProps>(
-  ({ asChild, gap = '4', align = 'center', justify = 'end', className, ...props }, ref) => {
-    if (asChild) {
-      return (
-        <Slot
-          ref={ref}
-          className={classNames('kui-NavbarActions', className)}
-          {...props}
-        />
-      );
-    }
-
-    return (
-      <Flex
-        ref={ref}
-        gap={gap}
-        align={align}
-        justify={justify}
-        className={classNames('kui-NavbarActions', className)}
-        {...props}
-      />
-    );
-  }
+  ({ gap = '4', align = 'center', justify = 'end', className, ...props }, ref) => (
+    <Flex
+      ref={ref}
+      gap={gap}
+      align={align}
+      justify={justify}
+      className={classNames('kui-NavbarActions', className)}
+      {...props}
+    />
+  ),
 );
 NavbarActions.displayName = 'Navbar.Actions';
 

package/src/components/notice.tsx

@@ -23,7 +23,7 @@ import classNames from 'classnames';
 
 import { Button } from './button.js';
 import { Text } from './text.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { ThemeSizeContext, useThemeSize } from '../helpers/theme-size.js';
 import { accentColorPropDef } from '../props/color.prop.js';
 
 type NoticeSize = '1' | '2' | '3' | '4';
@@ -50,7 +50,10 @@ interface StripProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'
 interface NoticeProps extends StripProps {
   /** An icon before the message. It is hidden from assistive technology. */
   icon?: React.ReactNode;
-  /** One action that fixes the condition, such as `<Button>Add credits</Button>`. */
+  /**
+   * One action that fixes the condition, such as `<Button>Add credits</Button>`. A control in it
+   * that sets no `size` takes the notice's size.
+   */
   action?: React.ReactNode;
   /**
    * Called when the person presses the dismiss button, which shows only when this is set.
@@ -105,7 +108,7 @@ const Notice = React.forwardRef<HTMLDivElement, NoticeProps>(({ icon, action, on
   const trailing =
     action || onDismiss ? (
       <span className="kui-NoticeActions">
-        {action}
+        {action ? <ThemeSizeContext.Provider value={size}>{action}</ThemeSizeContext.Provider> : null}
         {onDismiss ? (
           <Button iconOnly size={size} variant="ghost" color="gray" aria-label={dismissLabel} className="kui-NoticeDismiss" onClick={onDismiss}>
             <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden>

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;
@@ -86,3 +83,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

@@ -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,6 +22,11 @@ const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwar
     progressPropDefs
   );
 
+  // 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
       data-accent-color={color}
@@ -30,9 +35,9 @@ const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwar
       className={classNames('kui-ProgressRoot', className)}
       style={mergeStyles(
         {
-          '--progress-duration': 'value' in progressProps ? undefined : duration,
-          '--progress-value': 'value' in progressProps ? progressProps.value : undefined,
-          '--progress-max': 'max' in progressProps ? progressProps.max : undefined,
+          '--progress-duration': isDeterminate ? undefined : duration,
+          '--progress-value': isDeterminate ? value : undefined,
+          '--progress-max': progressProps.max ?? undefined,
         },
         style
       )}

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 > * {
@@ -129,10 +159,9 @@
  * with nothing past it fades over 0px, and the fade ramps in over the first pixels of scrolling.
  * A floating band over an edge sets `--scroll-fade-start` or `--scroll-fade-end` to its height.
  *
- * Shared by ScrollArea (on its viewport) and MessageScroller (on its viewport). Scrollbars are
+ * Shared by ScrollArea (on its viewport, both axes) and MessageScroller (on its viewport, block axis only). Scrollbars are
  * siblings of the viewport, outside the mask, so the thumb stays crisp.
  */
-:where(.kui-ScrollAreaRoot[data-fade]) > .kui-ScrollAreaViewport,
 .kui-MessageScrollerViewport:where([data-fade]) {
   mask-image: linear-gradient(
     to bottom,
@@ -143,6 +172,33 @@
   );
 }
 
+/* ScrollArea scrolls both ways, so it fades on both axes: one layer each, intersected, so a corner
+   with content hidden both ways fades both ways. The inline layer runs from the inline start, so
+   right-to-left flips its direction. */
+:where(.kui-ScrollAreaRoot[data-fade]) > .kui-ScrollAreaViewport {
+  --scroll-fade-x-direction: to right;
+  mask-image:
+    linear-gradient(
+      var(--scroll-fade-x-direction),
+      transparent 0%,
+      black min(var(--scroll-overflow-x-start, 0px), var(--scroll-fade-size)),
+      black calc(100% - min(var(--scroll-overflow-x-end, 0px), var(--scroll-fade-size))),
+      transparent 100%
+    ),
+    linear-gradient(
+      to bottom,
+      transparent 0%,
+      black min(var(--scroll-overflow-start, 0px), var(--scroll-fade-start, var(--scroll-fade-size))),
+      black calc(100% - min(var(--scroll-overflow-end, 0px), var(--scroll-fade-end, var(--scroll-fade-size)))),
+      transparent 100%
+    );
+  mask-composite: intersect;
+
+  &:where(:dir(rtl)) {
+    --scroll-fade-x-direction: to left;
+  }
+}
+
 :root,
 .kui-theme {
   --scroll-fade-size: var(--space-7);

package/src/components/scroll-area.tsx

@@ -7,16 +7,56 @@ import { scrollAreaPropDefs } from './scroll-area.props.js';
 import { useScrollEdges } from '../hooks/use-scroll-edges.js';
 import { useThumbSync } from '../hooks/use-thumb-sync.js';
 import { getSubtree } from '../helpers/get-subtree.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { widthPropDefs } from '../props/width.props.js';
+import { heightPropDefs } from '../props/height.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
+import type { WidthProps } from '../props/width.props.js';
+import type { HeightProps } from '../props/height.props.js';
 
 type ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Viewport>;
 type ScrollAreaOwnProps = GetPropDefTypes<typeof scrollAreaPropDefs>;
 interface ScrollAreaProps
   extends ComponentPropsWithout<typeof ScrollAreaPrimitive.Root, RemovedProps>,
     ComponentPropsWithout<typeof ScrollAreaPrimitive.Viewport, RemovedProps | 'dir'>,
-    ScrollAreaOwnProps {}
+    ScrollAreaOwnProps,
+    WidthProps,
+    HeightProps {}
+
+/** Menus and listboxes move focus between their items, so a scroller inside one stays out of the tab order. */
+const OWNS_FOCUS = '[role="menu"], [role="listbox"]';
+
+/**
+ * Puts the viewport in the tab order while it has something to scroll, so a keyboard can reach it
+ * and scroll it with the arrow keys. A `tabIndex` the caller set wins.
+ */
+function useFocusableWhileScrollable(element: HTMLDivElement | null, enabled: boolean) {
+  React.useEffect(() => {
+    if (!enabled || !element || element.closest(OWNS_FOCUS)) return;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const scrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+      if (scrollable) element.setAttribute('tabindex', '0');
+      else element.removeAttribute('tabindex');
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    update();
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+    observer?.observe(element);
+    for (const child of Array.from(element.children)) observer?.observe(child);
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      // The attribute stays: a caller who now sets `tabIndex` has already written it.
+      observer?.disconnect();
+    };
+  }, [element, enabled]);
+}
+
 const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props, forwardedRef) => {
   const {
     asChild,
@@ -30,15 +70,20 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     scrollbars = scrollAreaPropDefs.scrollbars.default,
     fade = scrollAreaPropDefs.fade.default,
     ...viewportProps
-  } = props;
+  } = extractProps(props, widthPropDefs, heightPropDefs);
+  const [viewport, setViewport] = React.useState<HTMLDivElement | null>(null);
   const setEdgesElement = useScrollEdges<HTMLDivElement>(fade);
   const setThumbViewport = useThumbSync<HTMLDivElement>();
-  const viewportRef = useComposedRefs(forwardedRef, setEdgesElement, setThumbViewport);
+  const viewportRef = useComposedRefs(forwardedRef, setEdgesElement, setThumbViewport, setViewport);
+  useFocusableWhileScrollable(viewport, viewportProps.tabIndex === undefined);
+  // A named scroller is a region, so a screen reader can find it and say what it holds.
+  const named = viewportProps['aria-label'] !== undefined || viewportProps['aria-labelledby'] !== undefined;
 
   return (
     <ScrollAreaPrimitive.Root
       type={type}
       scrollHideDelay={scrollHideDelay}
+      dir={dir}
       className={classNames('kui-ScrollAreaRoot', className)}
       data-fade={fade ? '' : undefined}
       style={style}
@@ -47,6 +92,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
       {getSubtree({ asChild, children }, (children) => (
         <>
           <ScrollAreaPrimitive.Viewport
+            role={named ? 'region' : undefined}
             {...viewportProps}
             ref={viewportRef}
             className="kui-ScrollAreaViewport"