@womp/kookie-ui 0.22.1 → 0.24.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/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%));
 }
 
 /* * * * * * * * * * * * * * * * * * * */

package/src/components/segmented-control.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
-import { useControllableState } from 'radix-ui/internal';
+import { useComposedRefs, useControllableState } from 'radix-ui/internal';
 
 import { segmentedControlRootPropDefs } from './segmented-control.props.js';
 import { extractProps } from '../helpers/extract-props.js';
@@ -23,6 +22,8 @@ interface SegmentedControlRootProps
   onValueChange?(value: string): void;
 }
 
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
 const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRootProps>(
   (ownProps, forwardedRef) => {
     const props = useThemeSizeProps(ownProps, segmentedControlRootPropDefs.size);
@@ -33,6 +34,7 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       value: valueProp,
       defaultValue: defaultValueProp,
       onValueChange: onValueChangeProp,
+      style,
       ...rootProps
     } = extractProps(props, segmentedControlRootPropDefs);
 
@@ -42,11 +44,39 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       defaultProp: defaultValueProp ?? '',
     });
 
+    // The indicator is sized and placed from the item count and the selected index, written
+    // as custom properties. They are read from the children on render, so the server markup
+    // is right, then corrected from the DOM, which also sees items inside fragments or
+    // wrapper components.
+    const rootRef = React.useRef<HTMLDivElement>(null);
+    const composedRef = useComposedRefs(forwardedRef, rootRef);
+    const items = React.Children.toArray(children).filter(React.isValidElement);
+    const renderedCount = items.length;
+    const renderedIndex = Math.max(
+      0,
+      items.findIndex((child) => (child.props as { value?: unknown }).value === value),
+    );
+    useIsomorphicLayoutEffect(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const domItems = Array.from(root.querySelectorAll(':scope > .kui-SegmentedControlItem'));
+      const index = domItems.findIndex((item) => item.getAttribute('data-state') === 'on');
+      root.style.setProperty('--segmented-control-count', String(domItems.length || 1));
+      root.style.setProperty('--segmented-control-index', String(Math.max(0, index)));
+    });
+
     return (
       <ToggleGroupPrimitive.Root
         data-disabled={props.disabled || undefined}
         data-radius={radius}
-        ref={forwardedRef}
+        ref={composedRef}
+        style={
+          {
+            '--segmented-control-count': renderedCount || 1,
+            '--segmented-control-index': renderedIndex,
+            ...style,
+          } as React.CSSProperties
+        }
         className={classNames('kui-SegmentedControlRoot', className)}
         onValueChange={(value) => {
           if (value) {
@@ -70,6 +100,8 @@ SegmentedControlRoot.displayName = 'SegmentedControl.Root';
 
 interface SegmentedControlItemOwnProps {
   value: string;
+  /** When true, this segment can't be selected. */
+  disabled?: boolean;
   /** When true, applies fixed square width for icon-only segments */
   iconOnly?: boolean;
 }
@@ -77,7 +109,7 @@ interface SegmentedControlItemOwnProps {
 interface SegmentedControlItemProps
   extends ComponentPropsWithout<
       typeof ToggleGroupPrimitive.Item,
-      RemovedProps | 'disabled' | 'type' | 'value'
+      RemovedProps | 'type' | 'value'
     >,
     SegmentedControlItemOwnProps {}
 
@@ -88,7 +120,6 @@ const SegmentedControlItem = React.forwardRef<HTMLButtonElement, SegmentedContro
       className={classNames('kui-reset', 'kui-SegmentedControlItem', className)}
       data-icon-only={iconOnly || undefined}
       {...props}
-      disabled={false}
       asChild={false}
     >
       <span className="kui-SegmentedControlItemSeparator" />