@womp/kookie-ui 0.23.0 → 0.24.0

package/src/components/index.tsx

@@ -55,11 +55,18 @@ export {
   ToolbarButton,
   ToolbarSeparator,
   ToolbarTitle,
+  ToolbarOverflow,
+  ToolbarSlot,
+  ToolbarFill,
+  useToolbarOverflow,
   type ToolbarProps,
   type ToolbarGroupProps,
   type ToolbarButtonProps,
   type ToolbarSeparatorProps,
   type ToolbarTitleProps,
+  type ToolbarOverflowProps,
+  type ToolbarSlotProps,
+  type ToolbarFillProps,
 } from './toolbar.js';
 export { Tooltip, type TooltipProps } from './tooltip.js';
 export { VirtualMenu, type VirtualMenuProps, type VirtualMenuItemProps, type VirtualMenuRenderItemProps } from './virtual-menu.js';

package/src/components/message-scroller.tsx

@@ -144,32 +144,54 @@ type ButtonProps = Omit<KuiButtonProps, 'aria-label' | 'aria-labelledby' | 'vari
  * Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ direction = 'end', behavior, className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
-    <Primitive.Button
-      direction={direction}
-      {...(behavior ? { behavior } : {})}
-      render={
-        <KuiButton
-          iconOnly
-          {...props}
-          ref={forwardedRef}
-          size={size}
-          {...(emphasis ? { emphasis } : { variant })}
-          color={color}
-          radius={radius}
-          aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
-          className={classNames('kui-MessageScrollerButton', className)}
-          data-direction={direction}
-        >
-          {children ?? (
-            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden style={direction === 'start' ? { transform: 'rotate(180deg)' } : undefined}>
-              <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          )}
-        </KuiButton>
-      }
-    />
-  ),
+  (
+    { direction = 'end', behavior = 'smooth', 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
+    // jumps itself and moves focus to the viewport instead, since the button hides at the end.
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      const viewport = event.currentTarget
+        .closest('.kui-MessageScrollerRoot')
+        ?.querySelector<HTMLElement>('.kui-MessageScrollerViewport');
+      viewport?.focus({ preventScroll: true });
+      if (direction === 'start') scrollToStart({ behavior });
+      else scrollToEnd({ behavior });
+    };
+
+    return (
+      <Primitive.Button
+        direction={direction}
+        behavior={behavior}
+        onClick={handleClick}
+        render={
+          <KuiButton
+            iconOnly
+            {...props}
+            ref={forwardedRef}
+            size={size}
+            {...(emphasis ? { emphasis } : { variant })}
+            color={color}
+            radius={radius}
+            aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
+            className={classNames('kui-MessageScrollerButton', className)}
+            data-direction={direction}
+          >
+            {children ?? (
+              <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden style={direction === 'start' ? { transform: 'rotate(180deg)' } : undefined}>
+                <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            )}
+          </KuiButton>
+        }
+      />
+    );
+  },
 );
 Button.displayName = 'MessageScroller.Button';
 

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

@@ -22,6 +22,9 @@ 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;
+
   return (
     <ProgressPrimitive.Root
       data-accent-color={color}
@@ -30,9 +33,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 ? progressProps.value : undefined,
+          '--progress-max': progressProps.max ?? undefined,
         },
         style
       )}

package/src/components/scroll-area.css

@@ -129,10 +129,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 +142,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"

package/src/components/segmented-control.css

@@ -186,6 +186,9 @@
   left: 0;
   height: 100%;
   pointer-events: none;
+  /* Width and position come from the item count and selected index, set by the root. */
+  width: calc(100% / var(--segmented-control-count, 1));
+  transform: translateX(calc(var(--segmented-control-index, 0) * 100%));
 
   &::before {
     inset: var(--border-width-standard); /* 1px */
@@ -200,7 +203,8 @@
     display: block;
   }
 
-  :where(.kui-SegmentedControlItem[disabled]) ~ & {
+  /* Greyed only when the selected segment is disabled, not when any other segment is. */
+  :where(.kui-SegmentedControlItem[data-state='on'][disabled]) ~ & {
     --segmented-control-indicator-background-color: var(--neutral-a3);
 
     &::before {
@@ -208,139 +212,13 @@
       box-shadow: none;
     }
   }
-
-  /* Horizontal orientation (default) - width based on number of items */
-  &:where(:nth-child(2)) {
-    width: calc(100% / 1);
-  }
-  &:where(:nth-child(3)) {
-    width: calc(100% / 2);
-  }
-  &:where(:nth-child(4)) {
-    width: calc(100% / 3);
-  }
-  &:where(:nth-child(5)) {
-    width: calc(100% / 4);
-  }
-  &:where(:nth-child(6)) {
-    width: calc(100% / 5);
-  }
-  &:where(:nth-child(7)) {
-    width: calc(100% / 6);
-  }
-  &:where(:nth-child(8)) {
-    width: calc(100% / 7);
-  }
-  &:where(:nth-child(9)) {
-    width: calc(100% / 8);
-  }
-  &:where(:nth-child(10)) {
-    width: calc(100% / 9);
-  }
-  &:where(:nth-child(11)) {
-    width: calc(100% / 10);
-  }
-
-  /* Horizontal transforms (default) */
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(1)) ~ & {
-    transform: translateX(0%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(2)) ~ & {
-    transform: translateX(100%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(3)) ~ & {
-    transform: translateX(200%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(4)) ~ & {
-    transform: translateX(300%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(5)) ~ & {
-    transform: translateX(400%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(6)) ~ & {
-    transform: translateX(500%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(7)) ~ & {
-    transform: translateX(600%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(8)) ~ & {
-    transform: translateX(700%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(9)) ~ & {
-    transform: translateX(800%);
-  }
-  :where(.kui-SegmentedControlItem[data-state='on']:nth-child(10)) ~ & {
-    transform: translateX(900%);
-  }
 }
 
-/* Vertical orientation - indicator height based on number of items */
+/* Vertical orientation */
 :where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator {
   width: 100%;
-  height: unset;
-}
-
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(2) {
-  height: calc(100% / 1);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(3) {
-  height: calc(100% / 2);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(4) {
-  height: calc(100% / 3);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(5) {
-  height: calc(100% / 4);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(6) {
-  height: calc(100% / 5);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(7) {
-  height: calc(100% / 6);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(8) {
-  height: calc(100% / 7);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(9) {
-  height: calc(100% / 8);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(10) {
-  height: calc(100% / 9);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(11) {
-  height: calc(100% / 10);
-}
-
-/* Vertical transforms */
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(1) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(0%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(2) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(100%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(3) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(200%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(4) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(300%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(5) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(400%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(6) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(500%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(7) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(600%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(8) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(700%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(9) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(800%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(10) ~ .kui-SegmentedControlIndicator {
-  transform: translateY(900%);
+  height: calc(100% / var(--segmented-control-count, 1));
+  transform: translateY(calc(var(--segmented-control-index, 0) * 100%));
 }
 
 /* * * * * * * * * * * * * * * * * * * */