@womp/kookie-ui 0.23.0 → 0.24.0

package/src/components/sidebar.tsx

@@ -97,6 +97,23 @@ function wrapTextNodes(node: React.ReactNode): React.ReactNode {
   return node;
 }
 
+// Arrow Up and Down move between the visible buttons of the same sidebar, as a
+// convenience on top of Tab. Sub-menu triggers take part, so the one-item Accordion
+// behind each sub-menu doesn't keep focus on its own trigger.
+function focusAdjacentSidebarButton(event: React.KeyboardEvent<HTMLElement>) {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+  const scope = event.currentTarget.closest('.kui-SidebarContent, .kui-SidebarSearchPopover');
+  const buttons = scope
+    ? Array.from(scope.querySelectorAll<HTMLElement>('.kui-SidebarMenuButton')).filter((el) => el.offsetParent !== null)
+    : [];
+  const index = buttons.indexOf(event.currentTarget);
+  const next = buttons[index + (event.key === 'ArrowDown' ? 1 : -1)];
+  if (index !== -1 && next) {
+    event.preventDefault();
+    next.focus();
+  }
+}
+
 const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
   ({ asChild = false, isActive = false, shortcut, badge, className, children, onKeyDown, ...props }, forwardedRef) => {
     const visual = useSidebarVisual();
@@ -105,22 +122,10 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
 
     const Comp = asChild ? Slot : 'button';
 
-    // Enter and Space are left to the native button or link. Arrow keys move between
-    // the visible buttons of the same sidebar, as a convenience on top of Tab.
+    // Enter and Space are left to the native button or link.
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLButtonElement>) => {
-        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-          const scope = event.currentTarget.closest('.kui-SidebarContent, .kui-SidebarSearchPopover');
-          const buttons = scope
-            ? Array.from(scope.querySelectorAll<HTMLElement>('.kui-SidebarMenuButton')).filter((el) => el.offsetParent !== null)
-            : [];
-          const index = buttons.indexOf(event.currentTarget);
-          const next = buttons[index + (event.key === 'ArrowDown' ? 1 : -1)];
-          if (index !== -1 && next) {
-            event.preventDefault();
-            next.focus();
-          }
-        }
+        focusAdjacentSidebarButton(event);
         onKeyDown?.(event);
       },
       [onKeyDown],
@@ -262,7 +267,7 @@ interface SidebarMenuSubTriggerProps extends React.ComponentPropsWithoutRef<type
 }
 
 const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion.Trigger>, SidebarMenuSubTriggerProps>(
-  ({ asChild = false, className, children, ...props }, forwardedRef) => {
+  ({ asChild = false, className, children, onKeyDown, ...props }, forwardedRef) => {
     const mode = React.useContext(SidebarSubMenuModeContext);
 
     if (mode === 'dropdown') {
@@ -270,6 +275,7 @@ const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion
         <DropdownMenu.Trigger>
           <button
             {...(props as any)}
+            onKeyDown={onKeyDown}
             ref={forwardedRef as any}
             type="button"
             aria-haspopup="menu"
@@ -286,6 +292,11 @@ const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion
         <div>
           <Accordion.Trigger
             {...props}
+            onKeyDown={(event) => {
+              // Runs before the Accordion's own arrow handling, which would keep focus here.
+              focusAdjacentSidebarButton(event);
+              onKeyDown?.(event);
+            }}
             ref={forwardedRef}
             asChild={asChild}
             className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-SidebarMenuButton', 'kui-SidebarMenuSubTrigger', className)}
@@ -357,7 +368,7 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
 
   return (
     <Accordion.Content {...props} ref={forwardedRef} className={classNames('kui-SidebarMenuSubContent', className)}>
-      <div className="kui-SidebarMenuSubList">{children}</div>
+      <ul className="kui-SidebarMenuSubList">{children}</ul>
     </Accordion.Content>
   );
 });

package/src/components/slider.tsx

@@ -26,18 +26,34 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
     props,
     sliderPropDefs,
   );
-  const { ticks, showTickLabels, snapToTicks, unit } = props;
-
-  const min = sliderProps.min ?? 0;
-  const max = sliderProps.max ?? 100;
-
-  // Current value for accessibility
-  const currentValue = sliderProps.value ?? sliderProps.defaultValue ?? [min];
-  const isRange = Array.isArray(currentValue) && currentValue.length > 1;
+  const {
+    ticks,
+    unit,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onValueCommit,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    ...rootProps
+  } = sliderProps;
+  const { showTickLabels, snapToTicks } = props;
+
+  const min = rootProps.min ?? 0;
+  const max = rootProps.max ?? 100;
+
+  // The slider keeps its own copy of the value when uncontrolled, so the handles, their
+  // labels and a tick press all read the current value rather than the first one.
+  const [uncontrolledValue, setUncontrolledValue] = React.useState<number[]>(
+    () => defaultValue ?? [min],
+  );
+  const isControlled = valueProp !== undefined;
+  const currentValue = isControlled ? valueProp : uncontrolledValue;
+  const tickIdPrefix = React.useId();
 
   // For snapping to ticks, we need to handle this differently
   // Radix slider doesn't support arbitrary step values, so we'll handle snapping in the onValueChange
-  const step = sliderProps.step;
+  const step = rootProps.step;
 
   // Optimized snap-to-ticks with memoized sorted ticks
   const sortedTicks = React.useMemo(
@@ -108,7 +124,6 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
   const announceRef = React.useRef<HTMLDivElement>(null);
   const announceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const { onValueChange } = sliderProps;
   // Handle value changes with snapping
   const handleValueChange = React.useCallback(
     (newValue: number[]) => {
@@ -131,9 +146,10 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         }, 1000);
       }
 
+      if (!isControlled) setUncontrolledValue(finalValue);
       onValueChange?.(finalValue);
     },
-    [snapToTicks, ticks, snapToNearestTick, formatValueText, onValueChange],
+    [snapToTicks, ticks, snapToNearestTick, formatValueText, onValueChange, isControlled],
   );
 
   // Cleanup timeout on unmount
@@ -159,35 +175,30 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         data-accent-color={color}
         data-radius={radius}
         ref={forwardedRef}
-        {...sliderProps}
+        {...rootProps}
+        value={currentValue}
         step={step}
         onValueChange={handleValueChange}
+        onValueCommit={onValueCommit}
         asChild={false}
         className={classNames('kui-SliderRoot', className)}
-        // Essential ARIA attributes for WCAG 2.2 AA compliance
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={Array.isArray(currentValue) ? currentValue[0] : (currentValue as number)}
-        aria-valuetext={formatValueText(currentValue as number[])}
-        aria-label={props['aria-label'] || `${isRange ? 'Range' : 'Value'} slider`}
       >
         <SliderPrimitive.Track className="kui-SliderTrack">
           <SliderPrimitive.Range
             className="kui-SliderRange"
-            data-inverted={sliderProps.inverted ? '' : undefined}
+            data-inverted={rootProps.inverted ? '' : undefined}
           />
         </SliderPrimitive.Track>
-        {(sliderProps.value ?? sliderProps.defaultValue ?? []).map((value, index) => (
+        {currentValue.map((value, index) => (
           <SliderPrimitive.Thumb
             key={index}
             className="kui-SliderThumb"
             {...(tabIndex !== undefined ? { tabIndex } : undefined)}
-            aria-label={
-              isRange
-                ? `${index === 0 ? 'Minimum' : index === 1 ? 'Maximum' : `Thumb ${index + 1}`} value: ${unit ? `${value} ${unit}` : value}`
-                : `Slider value: ${unit ? `${value} ${unit}` : value}`
-            }
-            aria-valuetext={unit ? `${value} ${unit}` : value.toString()}
+            // The caller's name goes to every handle. Without one, Radix names the two
+            // handles of a range "Minimum" and "Maximum".
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-valuetext={unit ? `${value} ${unit}` : undefined}
           />
         ))}
       </SliderPrimitive.Root>
@@ -201,15 +212,23 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
                 // Only `left` varies per tick; the centring transform lives in `.kui-SliderTick`.
                 style={{ left: `${tick.percentage}%` }}
                 onClick={() => {
-                  const currentValues = sliderProps.value ?? sliderProps.defaultValue ?? [min];
-                  const newValue = Array.isArray(currentValues)
-                    ? currentValues.map(() => tick.value)
-                    : [tick.value];
+                  // Move only the handle nearest the tick. When handles share a value, a
+                  // tick above it moves the last of them and a tick below moves the first.
+                  let nearest = 0;
+                  currentValue.forEach((v, i) => {
+                    const distance = Math.abs(v - tick.value);
+                    const best = Math.abs(currentValue[nearest] - tick.value);
+                    if (distance < best || (distance === best && tick.value > v)) nearest = i;
+                  });
+                  const newValue = currentValue
+                    .map((v, i) => (i === nearest ? tick.value : v))
+                    .sort((x, y) => x - y);
 
                   handleValueChange(newValue);
+                  onValueCommit?.(newValue);
                 }}
                 aria-label={`Set to ${tick.label || (unit ? `${tick.value} ${unit}` : tick.value)}`}
-                aria-describedby={tick.label ? undefined : `tick-${tick.index}-value`}
+                aria-describedby={tick.label ? undefined : `${tickIdPrefix}-tick-${tick.index}`}
                 type="button"
               >
                 <div className="kui-SliderTickMark" />
@@ -217,7 +236,7 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
                   <div className="kui-SliderTickLabel">{tick.label}</div>
                 )}
                 {!tick.label && (
-                  <span id={`tick-${tick.index}-value`} className="sr-only">
+                  <span id={`${tickIdPrefix}-tick-${tick.index}`} className="kui-sr-only">
                     {unit ? `${tick.value} ${unit}` : tick.value}
                   </span>
                 )}

package/src/components/spinner.tsx

@@ -21,8 +21,16 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
 
   if (!loading) return children;
 
+  // Decorative unless named: a named spinner is a status message, an unnamed one is hidden.
+  const named =
+    spinnerProps['aria-label'] !== undefined || spinnerProps['aria-labelledby'] !== undefined;
+
   const spinner = (
-    <span {...spinnerProps} ref={forwardedRef} className={classNames('kui-Spinner', className)}>
+    <span
+      role={named ? 'status' : undefined}
+      aria-hidden={named ? undefined : true}
+      {...spinnerProps}
+      ref={forwardedRef} className={classNames('kui-Spinner', className)}>
       <span className="kui-SpinnerWheel">
         <span className="kui-SpinnerLeaf" />
         <span className="kui-SpinnerLeaf" />
@@ -40,7 +48,7 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
 
   return (
     <Flex asChild position="relative" align="center" justify="center">
-      <span>
+      <span aria-busy="true">
         {/**
          * `display: contents` removes the content from the accessibility tree in some browsers,
          * so we force remove it with `aria-hidden`

package/src/components/table.tsx

@@ -18,10 +18,16 @@ interface TableRootProps
 const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, tableRootPropDefs.size);
   const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
-  const { className, children, layout, ...rootProps } = extractProps(
-    props,
-    rootPropDefs
-  );
+  const {
+    className,
+    children,
+    layout,
+    // The table is what gets named, not the scroll wrapper around it.
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    ...rootProps
+  } = extractProps(props, rootPropDefs);
   const tableLayoutClassNames = getResponsiveClassNames({
     value: layout,
     className: tableRootPropDefs.layout.className,
@@ -30,7 +36,14 @@ const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps,
   return (
     <div ref={forwardedRef} className={classNames('kui-TableRoot', className)} {...rootProps}>
       <ScrollArea>
-        <table className={classNames('kui-TableRootTable', tableLayoutClassNames)}>{children}</table>
+        <table
+          className={classNames('kui-TableRootTable', tableLayoutClassNames)}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+        >
+          {children}
+        </table>
       </ScrollArea>
     </div>
   );

package/src/components/tabs.css

@@ -9,3 +9,37 @@
   outline: var(--focus-ring-width, 2px) solid var(--focus-8);
   outline-offset: var(--focus-ring-offset, 2px);
 }
+
+/*
+ * Vertical: the list is a column beside the panels, its hairline on the inline end, and the
+ * active line runs down that edge.
+ */
+.kui-TabsRoot:where([data-orientation='vertical']) {
+  display: flex;
+}
+
+.kui-TabsList:where([data-orientation='vertical']) {
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-shadow: inset calc(-1 * var(--border-width-standard)) 0 0 0 var(--neutral-a5);
+
+  &:where(:dir(rtl)) {
+    box-shadow: inset var(--border-width-standard) 0 0 0 var(--neutral-a5);
+  }
+
+  :where(&) .kui-TabsTrigger {
+    justify-content: flex-start;
+  }
+
+  :where(&) .kui-TabsTrigger:where([data-state='active'])::before {
+    top: 0;
+    bottom: 0;
+    left: auto;
+    right: auto;
+    inset-inline-end: 0;
+    width: var(--focus-ring-width, 2px);
+    height: auto;
+  }
+}

package/src/components/tabs.tsx

@@ -86,8 +86,6 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
         {...contentProps}
         ref={forwardedRef}
         className={classNames('kui-TabsContent', className)}
-        aria-live="polite"
-        aria-atomic="true"
       />
     );
   },

package/src/components/text-area.css

@@ -28,8 +28,9 @@
   font-style: normal;
   text-align: start;
 
-  /* Allows the `resize` property to work on the div */
+  /* Allows the `resize` property to work on the div. Vertical by default, as in v2; the `resize` prop overrides it. */
   overflow: hidden;
+  resize: vertical;
 
   isolation: isolate;
 

package/src/components/text-area.tsx

@@ -52,7 +52,6 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, for
   const {
     error,
     errorMessage,
-   
     required,
     'aria-describedby': _ariaDescribedby,
     'aria-labelledby': _ariaLabelledby,
@@ -72,6 +71,7 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, for
         className="kui-reset kui-TextAreaInput"
         ref={forwardedRef}
         {...nativeTextAreaProps}
+        required={required || undefined}
         {...ariaProps}
       />
       {textAreaProps.errorMessage && (

package/src/components/text-field.tsx

@@ -91,7 +91,7 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
       })}
       onPointerDown={handlePointerDown}
     >
-      <input spellCheck="false" {...nativeInputProps} {...ariaProps} ref={composeRefs(inputRef, forwardedRef)} className="kui-reset kui-TextFieldInput" />
+      <input {...nativeInputProps} required={required || undefined} {...ariaProps} ref={composeRefs(inputRef, forwardedRef)} className="kui-reset kui-TextFieldInput" />
       {children}
       {inputProps.errorMessage && (
         <div id={errorId} className="kui-TextFieldErrorMessage" role="alert">

package/src/components/toggle.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import { Toggle as TogglePrimitive } from 'radix-ui';
 import { Button } from './button.js';
 import type { ButtonIconOnlyProps, ButtonProps, ButtonRankProps } from './button.js';
-import { useToggleState } from '../hooks/use-toggle-state.js';
 
 type ToggleOwnProps = {
   /** Whether the toggle is on. The controlled counterpart of `defaultPressed`. */
@@ -15,10 +14,11 @@ type ToggleOwnProps = {
 };
 
 /**
- * Toggle takes every `Button` prop except `as`. Set `iconOnly` for a square toggle holding only
+ * Toggle takes every `Button` prop except `as` and `done`: a toggle's state is `pressed`, and a
+ * tick in place of its icon would read as a second state. Set `iconOnly` for a square toggle holding only
  * an icon; the type then requires `aria-label` or `aria-labelledby`.
  */
-type ToggleProps = Omit<ButtonProps<'button'>, 'as' | 'variant' | 'emphasis' | 'iconOnly'> &
+type ToggleProps = Omit<ButtonProps<'button'>, 'as' | 'variant' | 'emphasis' | 'iconOnly' | 'done'> &
   ButtonRankProps &
   ButtonIconOnlyProps &
   ToggleOwnProps;
@@ -43,46 +43,28 @@ type ToggleElement = React.ElementRef<typeof Button>;
  */
 const Toggle = React.forwardRef<ToggleElement, ToggleProps>(
   ({ pressed, onPressedChange, defaultPressed, children, className, ...buttonProps }, forwardedRef) => {
-    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = buttonProps as {
-      'aria-label'?: string;
-      'aria-labelledby'?: string;
-    };
-
-    // The label behind aria-labelledby is read once per id, not on every press.
-    const cachedLabelRef = React.useRef<string | null>(null);
+    // `done` is not a Toggle prop; a call that slips past the type drops it rather than showing a tick.
+    delete (buttonProps as { done?: boolean }).done;
+    // aria-pressed is the whole announcement: a screen reader reads the new state on its own.
+    const warnedRef = React.useRef(false);
     React.useEffect(() => {
-      cachedLabelRef.current = null;
-    }, [ariaLabelledBy]);
-
-    /**
-     * The name announced when the pressed state changes: aria-label, then the label
-     * aria-labelledby points at, then visible text.
-     */
-    const getAccessibleName = React.useCallback(() => {
-      if (ariaLabel) return ariaLabel;
-      if (ariaLabelledBy) {
-        if (cachedLabelRef.current === null) {
-          cachedLabelRef.current = document.getElementById(ariaLabelledBy)?.textContent || 'Toggle';
-        }
-        return cachedLabelRef.current;
+      if (
+        process.env.NODE_ENV === 'development' &&
+        pressed !== undefined &&
+        onPressedChange === undefined &&
+        !warnedRef.current
+      ) {
+        warnedRef.current = true;
+        console.warn(
+          'Toggle: You provided a `pressed` prop without an `onPressedChange` handler. ' +
+            'This will result in a read-only toggle button. If you want the button to be interactive, ' +
+            'you should provide an `onPressedChange` handler.',
+        );
       }
-      if (typeof children === 'string') return children;
-      if (React.isValidElement(children) && typeof (children.props as { children?: unknown })?.children === 'string') {
-        return (children.props as { children: string }).children;
-      }
-      return 'Toggle';
-    }, [ariaLabel, ariaLabelledBy, children]);
-
-    // Shared toggle state hook: accessibility announcements and controlled-state warnings.
-    const { handlePressedChange } = useToggleState({
-      pressed,
-      onPressedChange,
-      getAccessibleName,
-      componentName: 'Toggle',
-    });
+    }, [pressed, onPressedChange]);
 
     return (
-      <TogglePrimitive.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>
+      <TogglePrimitive.Root pressed={pressed} onPressedChange={onPressedChange} defaultPressed={defaultPressed} asChild>
         <Button {...(buttonProps as ButtonProps)} ref={forwardedRef} className={classNames('kui-Toggle', className)}>
           {children}
         </Button>

package/src/components/toolbar.css

@@ -90,6 +90,40 @@
   border-radius: max(0px, calc(var(--toolbar-radius) - var(--toolbar-group-inset)));
 }
 
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*              Overflow               */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+/* Takes the room the row leaves and packs its controls at the end, so the ones that don't fit
+   move into the "More" menu from the end. The empty part of it lets clicks through. */
+.kui-ToolbarOverflow {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--toolbar-gap);
+  flex: 1 1 0%;
+  min-width: 0;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+}
+
+/* One seat per child, so a child that renders nothing keeps every index in place. A seat never
+   shrinks, because its width is the measurement; an empty one leaves the layout and its gaps. */
+.kui-ToolbarOverflowSeat {
+  display: flex;
+  align-items: center;
+  flex: none;
+
+  &:where(:empty) {
+    display: none;
+  }
+}
+
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
 /*              Separator              */