@womp/kookie-ui 0.24.0 → 0.25.0

package/src/components/slider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Slider as SliderPrimitive } from 'radix-ui';
+import { Direction, Slider as SliderPrimitive } from 'radix-ui';
 
 import { sliderPropDefs } from './slider.props.js';
 import { extractProps } from '../helpers/extract-props.js';
@@ -11,24 +11,18 @@ import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type SliderElement = React.ElementRef<typeof SliderPrimitive.Root>;
 type SliderOwnProps = GetPropDefTypes<typeof sliderPropDefs>;
-interface SliderProps
-  extends ComponentPropsWithout<
-      typeof SliderPrimitive.Root,
-      'asChild' | 'color' | 'children' | 'defaultChecked'
-    >,
-    SliderOwnProps {
+interface SliderProps extends ComponentPropsWithout<typeof SliderPrimitive.Root, 'asChild' | 'color' | 'children' | 'defaultChecked'>, SliderOwnProps {
   ticks?: Array<{ value: number; label?: string }>;
   unit?: string;
 }
 const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, sliderPropDefs.size);
-  const { className, color, radius, tabIndex, ...sliderProps } = extractProps(
-    props,
-    sliderPropDefs,
-  );
+  const { className, color, radius, tabIndex, ...sliderProps } = extractProps(props, sliderPropDefs);
   const {
     ticks,
     unit,
+    showTickLabels,
+    snapToTicks,
     value: valueProp,
     defaultValue,
     onValueChange,
@@ -37,16 +31,12 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
     '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 [uncontrolledValue, setUncontrolledValue] = React.useState<number[]>(() => defaultValue ?? [min]);
   const isControlled = valueProp !== undefined;
   const currentValue = isControlled ? valueProp : uncontrolledValue;
   const tickIdPrefix = React.useId();
@@ -56,43 +46,39 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
   const step = rootProps.step;
 
   // Optimized snap-to-ticks with memoized sorted ticks
-  const sortedTicks = React.useMemo(
-    () => (ticks ? [...ticks].sort((a, b) => a.value - b.value) : []),
-    [ticks],
-  );
+  const sortedTicks = React.useMemo(() => (ticks ? [...ticks].sort((a, b) => a.value - b.value) : []), [ticks]);
 
-  // Function to snap value to nearest tick (optimized)
+  // The nearest tick to a value.
   const snapToNearestTick = React.useCallback(
     (value: number): number => {
-      if (!snapToTicks || !sortedTicks.length) return value;
-
-      // Binary search for closest tick
-      let left = 0;
-      let right = sortedTicks.length - 1;
-
-      if (value <= sortedTicks[left].value) return sortedTicks[left].value;
-      if (value >= sortedTicks[right].value) return sortedTicks[right].value;
-
-      while (left <= right) {
-        const mid = Math.floor((left + right) / 2);
-        if (sortedTicks[mid].value === value) return value;
-
-        if (sortedTicks[mid].value < value) {
-          left = mid + 1;
-        } else {
-          right = mid - 1;
-        }
+      let nearest = sortedTicks[0].value;
+      for (const tick of sortedTicks) {
+        if (Math.abs(tick.value - value) < Math.abs(nearest - value)) nearest = tick.value;
       }
+      return nearest;
+    },
+    [sortedTicks],
+  );
 
-      // Find closest between left and right
-      const leftDistance = Math.abs(value - sortedTicks[right].value);
-      const rightDistance = Math.abs(value - sortedTicks[left].value);
-
-      return leftDistance <= rightDistance ? sortedTicks[right].value : sortedTicks[left].value;
+  // A key press moves the handle one step, which the nearest tick would undo. So a key press
+  // that does not reach another tick goes on to the next tick the way it moved.
+  const snapKeyStep = React.useCallback(
+    (value: number, previous: number): number => {
+      const nearest = snapToNearestTick(value);
+      if (value > previous && nearest <= previous) {
+        return sortedTicks.find((tick) => tick.value > previous)?.value ?? previous;
+      }
+      if (value < previous && nearest >= previous) {
+        return [...sortedTicks].reverse().find((tick) => tick.value < previous)?.value ?? previous;
+      }
+      return nearest;
     },
-    [snapToTicks, sortedTicks],
+    [snapToNearestTick, sortedTicks],
   );
 
+  // Whether the change under way came from the keyboard, so snapping knows how to read it.
+  const keyboardChangeRef = React.useRef(false);
+
   // Format value text for accessibility
   const formatValueText = React.useCallback(
     (values: number[]): string => {
@@ -109,47 +95,49 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
     [unit, max],
   );
 
-  // Memoize tick elements for performance
+  // Ticks sit where the handle sits for their value. Radix flips the handle for a right to
+  // left slider and for `inverted`, and runs a vertical slider from the bottom.
+  const direction = Direction.useDirection(rootProps.dir);
+  const orientation = rootProps.orientation ?? 'horizontal';
+  const flipped = orientation === 'vertical' ? !rootProps.inverted : (direction === 'rtl') !== Boolean(rootProps.inverted);
+
   const tickElements = React.useMemo(() => {
     if (!ticks) return null;
 
-    return ticks.map((tick, index) => ({
-      ...tick,
-      percentage: ((tick.value - min) / (max - min)) * 100,
-      index,
-    }));
-  }, [ticks, min, max]);
+    return ticks.map((tick, index) => {
+      const percentage = ((tick.value - min) / (max - min)) * 100;
+      return { ...tick, percentage: flipped ? 100 - percentage : percentage, index };
+    });
+  }, [ticks, min, max, flipped]);
 
   // Live region ref for accessibility announcements (no state = no re-renders)
   const announceRef = React.useRef<HTMLDivElement>(null);
   const announceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // Says the new value after a tick press. Focus stays on the tick, so nothing else reports
+  // it. The handle reports its own value on key presses and drags.
+  const announce = React.useCallback(
+    (values: number[]) => {
+      if (!announceRef.current) return;
+      announceRef.current.textContent = formatValueText(values);
+      if (announceTimeoutRef.current) clearTimeout(announceTimeoutRef.current);
+      announceTimeoutRef.current = setTimeout(() => {
+        if (announceRef.current) announceRef.current.textContent = '';
+      }, 1000);
+    },
+    [formatValueText],
+  );
+
   // Handle value changes with snapping
   const handleValueChange = React.useCallback(
     (newValue: number[]) => {
-      const finalValue =
-        snapToTicks && ticks ? newValue.map((v) => snapToNearestTick(v)) : newValue;
-
-      // Update live region for screen readers (direct DOM update, no React state)
-      if (announceRef.current) {
-        const valueText = formatValueText(finalValue);
-        announceRef.current.textContent = valueText;
-
-        // Clear after delay to prevent spam
-        if (announceTimeoutRef.current) {
-          clearTimeout(announceTimeoutRef.current);
-        }
-        announceTimeoutRef.current = setTimeout(() => {
-          if (announceRef.current) {
-            announceRef.current.textContent = '';
-          }
-        }, 1000);
-      }
+      const snapping = snapToTicks && sortedTicks.length > 0;
+      const finalValue = !snapping ? newValue : newValue.map((v, i) => (keyboardChangeRef.current && currentValue[i] !== undefined ? snapKeyStep(v, currentValue[i]) : snapToNearestTick(v)));
 
       if (!isControlled) setUncontrolledValue(finalValue);
       onValueChange?.(finalValue);
     },
-    [snapToTicks, ticks, snapToNearestTick, formatValueText, onValueChange, isControlled],
+    [snapToTicks, sortedTicks, snapKeyStep, snapToNearestTick, currentValue, onValueChange, isControlled],
   );
 
   // Cleanup timeout on unmount
@@ -162,14 +150,9 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
   }, []);
 
   return (
-    <div className="kui-SliderContainer">
+    <div className="kui-SliderContainer" data-orientation={orientation} data-has-ticks={tickElements ? '' : undefined}>
       {/* Live region for screen reader announcements */}
-      <div
-        ref={announceRef}
-        aria-live="polite"
-        aria-atomic="true"
-        className="kui-sr-only"
-      />
+      <div ref={announceRef} aria-live="polite" aria-atomic="true" className="kui-sr-only" />
 
       <SliderPrimitive.Root
         data-accent-color={color}
@@ -178,16 +161,21 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         {...rootProps}
         value={currentValue}
         step={step}
+        onKeyDown={(event) => {
+          keyboardChangeRef.current = true;
+          rootProps.onKeyDown?.(event);
+        }}
+        onPointerDown={(event) => {
+          keyboardChangeRef.current = false;
+          rootProps.onPointerDown?.(event);
+        }}
         onValueChange={handleValueChange}
         onValueCommit={onValueCommit}
         asChild={false}
         className={classNames('kui-SliderRoot', className)}
       >
         <SliderPrimitive.Track className="kui-SliderTrack">
-          <SliderPrimitive.Range
-            className="kui-SliderRange"
-            data-inverted={rootProps.inverted ? '' : undefined}
-          />
+          <SliderPrimitive.Range className="kui-SliderRange" data-inverted={rootProps.inverted ? '' : undefined} />
         </SliderPrimitive.Track>
         {currentValue.map((value, index) => (
           <SliderPrimitive.Thumb
@@ -203,14 +191,15 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         ))}
       </SliderPrimitive.Root>
       {tickElements && (
-        <div className="kui-SliderTicks" role="group" aria-label="Slider tick marks">
+        <div className="kui-SliderTicks" data-orientation={orientation} role="group" aria-label="Slider tick marks">
           {tickElements.map((tick) => {
             return (
               <button
                 key={tick.index}
                 className="kui-SliderTick"
-                // Only `left` varies per tick; the centring transform lives in `.kui-SliderTick`.
-                style={{ left: `${tick.percentage}%` }}
+                // Only the offset varies per tick; the centring transform lives in `.kui-SliderTick`.
+                style={orientation === 'vertical' ? { top: `${tick.percentage}%` } : { left: `${tick.percentage}%` }}
+                disabled={rootProps.disabled}
                 onClick={() => {
                   // 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.
@@ -220,21 +209,19 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
                     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);
+                  const newValue = currentValue.map((v, i) => (i === nearest ? tick.value : v)).sort((x, y) => x - y);
 
+                  keyboardChangeRef.current = false;
                   handleValueChange(newValue);
                   onValueCommit?.(newValue);
+                  announce(newValue);
                 }}
                 aria-label={`Set to ${tick.label || (unit ? `${tick.value} ${unit}` : tick.value)}`}
                 aria-describedby={tick.label ? undefined : `${tickIdPrefix}-tick-${tick.index}`}
                 type="button"
               >
                 <div className="kui-SliderTickMark" />
-                {tick.label && showTickLabels !== false && (
-                  <div className="kui-SliderTickLabel">{tick.label}</div>
-                )}
+                {tick.label && showTickLabels !== false && <div className="kui-SliderTickLabel">{tick.label}</div>}
                 {!tick.label && (
                   <span id={`${tickIdPrefix}-tick-${tick.index}`} className="kui-sr-only">
                     {unit ? `${tick.value} ${unit}` : tick.value}

package/src/components/spinner.css

@@ -6,8 +6,9 @@
 .kui-Spinner {
   display: block;
   position: relative;
-  width: var(--space-5);
-  height: var(--space-5);
+  /* A host (a loading Button) can set --spinner-size to fit its icon box. */
+  width: var(--spinner-size, var(--space-5));
+  height: var(--spinner-size, var(--space-5));
   /* The rotation runs on the inner wheel, clipped here. Unclipped, a running transform animation
      makes Chrome give its own layer to everything painted after it that it might overlap. The
      leaves stay inside this box at every step; the margin keeps their anti-aliased edges on the
@@ -90,6 +91,13 @@
   }
 }
 
+/* Forced colors repaint backgrounds as Canvas, which would erase the leaves. */
+@media (forced-colors: active) {
+  .kui-SpinnerLeaf::before {
+    background-color: CanvasText;
+  }
+}
+
 /* Children of a Spinner keep their space but are not shown while it spins. A class, not an inline style. */
 .kui-SpinnerHiddenChildren {
   display: contents;

package/src/components/spinner.tsx

@@ -41,6 +41,10 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
         <span className="kui-SpinnerLeaf" />
         <span className="kui-SpinnerLeaf" />
       </span>
+      {/* A live region reads its text, not its aria-label, so the name is also its content. */}
+      {typeof spinnerProps['aria-label'] === 'string' ? (
+        <span className="kui-sr-only">{spinnerProps['aria-label']}</span>
+      ) : null}
     </span>
   );
 
@@ -53,7 +57,7 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
          * `display: contents` removes the content from the accessibility tree in some browsers,
          * so we force remove it with `aria-hidden`
          */}
-        <span aria-hidden className="kui-SpinnerHiddenChildren" inert={undefined}>
+        <span aria-hidden className="kui-SpinnerHiddenChildren">
           {children}
         </span>
 

package/src/components/switch.css

@@ -32,7 +32,7 @@
 .kui-SwitchThumb {
   background-color: white;
   position: absolute;
-  left: var(--switch-thumb-inset);
+  inset-inline-start: var(--switch-thumb-inset);
   width: var(--switch-thumb-size);
   height: var(--switch-thumb-size);
   border-radius: 9999px;
@@ -42,6 +42,11 @@
     background-color: var(--accent-solid-thumb);
     transform: translateX(var(--switch-thumb-translate-x));
   }
+
+  /* Right to left, "on" is the left end. */
+  &:where(:dir(rtl)) {
+    --switch-thumb-translate-x: calc((var(--switch-width) - var(--switch-height)) * -1);
+  }
 }
 
 /***************************************************************************************************
@@ -152,7 +157,8 @@
   }
 }
 
-/* all disabled Switches: a colour remap, never opacity, and a default cursor */
+/* all disabled Switches: a colour remap, never opacity, and a default cursor.
+ * These come after every variant at the same specificity, so they win by order. */
 
 [data-disabled] {
   .kui-SwitchRoot:where(&) {
@@ -160,18 +166,44 @@
   }
   .kui-SwitchRoot:where(&)::before {
     cursor: default;
-    background-color: var(--neutral-a3) !important;
-    box-shadow: none !important;
-    outline: none !important;
+    background-color: var(--neutral-a3);
+    box-shadow: none;
+    outline: none;
   }
   .kui-SwitchThumb:where(&) {
     cursor: default;
-    box-shadow: none !important;
-    outline: none !important;
+    box-shadow: none;
+    outline: none;
   }
 }
 
 /* Disabled checked state - lighter accent color */
 .kui-SwitchRoot:where([data-disabled][data-state='checked'])::before {
-  background-color: var(--accent-a3) !important;
+  background-color: var(--accent-a3);
+}
+
+/* Windows High Contrast drops box shadows and background colours, so the track and thumb take
+ * system colours and a real border. */
+@media (forced-colors: active) {
+  .kui-SwitchRoot::before {
+    box-sizing: border-box;
+    border: 1px solid CanvasText;
+  }
+  .kui-SwitchThumb {
+    background-color: CanvasText;
+  }
+  .kui-SwitchRoot:where([data-state='checked'])::before {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .kui-SwitchThumb:where([data-state='checked']) {
+    background-color: HighlightText;
+  }
+  .kui-SwitchRoot:where([data-disabled])::before {
+    border-color: GrayText;
+    background-color: Canvas;
+  }
+  .kui-SwitchThumb:where([data-disabled]) {
+    background-color: GrayText;
+  }
 }

package/src/components/table.css

@@ -3,7 +3,7 @@
   --table-row-box-shadow: inset 0 -1px var(--neutral-a5);
 
   width: 100%;
-  text-align: left;
+  text-align: start;
   vertical-align: top;
   border-collapse: collapse;
   border-radius: calc(var(--table-border-radius) - 1px);
@@ -35,6 +35,10 @@
   /* A cell hugs its line: the inset above and below, the wider inset at the sides. */
   padding: var(--table-cell-py) var(--table-cell-px);
 }
+/* Header cells follow the table's start alignment, not the browser's centred default */
+:where(.kui-TableCell) {
+  text-align: inherit;
+}
 .kui-TableColumnHeaderCell {
   font-weight: 600;
 }

package/src/components/table.props.tsx

@@ -63,7 +63,6 @@ const tableCellPropDefs = {
     type: 'enum',
     className: 'kui-r-ta',
     values: justifyValues,
-    parseValue: parseJustifyValue,
     responsive: true,
   },
   ...widthPropDefs,
@@ -72,12 +71,4 @@ const tableCellPropDefs = {
   justify: PropDef<(typeof justifyValues)[number]>;
 };
 
-function parseJustifyValue(value: string) {
-  return {
-    start: 'left',
-    center: 'center',
-    end: 'right',
-  }[value];
-}
-
 export { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs };

package/src/components/table.tsx

@@ -35,7 +35,8 @@ const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps,
   });
   return (
     <div ref={forwardedRef} className={classNames('kui-TableRoot', className)} {...rootProps}>
-      <ScrollArea>
+      {/* An overflowing scroller is a tab stop, so it carries the table's name and reads as a region. */}
+      <ScrollArea aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>
         <table
           className={classNames('kui-TableRootTable', tableLayoutClassNames)}
           aria-label={ariaLabel}

package/src/components/tabs.tsx

@@ -56,6 +56,11 @@ interface TabsTriggerProps
 const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(
   (props, forwardedRef) => {
     const { className, children, ...triggerProps } = props;
+    // A hidden bold copy reserves the active width. Only plain text is copied: copying elements
+    // would duplicate their ids and mount them twice.
+    const isText = React.Children.toArray(children).every(
+      (child) => typeof child === 'string' || typeof child === 'number',
+    );
     return (
       <TabsPrimitive.Trigger
         {...triggerProps}
@@ -64,9 +69,11 @@ const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(
         className={classNames('kui-reset', 'kui-BaseTabListTrigger', 'kui-TabsTrigger', className)}
       >
         <span className="kui-BaseTabListTriggerInner kui-TabsTriggerInner">{children}</span>
-        <span className="kui-BaseTabListTriggerInnerHidden kui-TabsTriggerInnerHidden">
-          {children}
-        </span>
+        {isText ? (
+          <span className="kui-BaseTabListTriggerInnerHidden kui-TabsTriggerInnerHidden" aria-hidden>
+            {children}
+          </span>
+        ) : null}
       </TabsPrimitive.Trigger>
     );
   },

package/src/components/text-area.css

@@ -19,8 +19,6 @@
 .kui-TextAreaRoot {
   display: flex;
   flex-direction: column;
-  /* The root spaces its parts: the gap sits between the text and an error message under it. */
-  gap: var(--space-2);
   box-sizing: border-box;
 
   font-family: var(--default-font-family);
@@ -481,7 +479,11 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* A sibling of the root, below the box: it takes the field's type itself. */
 .kui-TextAreaErrorMessage {
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-regular);
+  padding-top: var(--space-2);
   color: var(--red-11);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
@@ -496,3 +498,16 @@
   font-size: var(--font-size-1);
   line-height: 1;
 }
+
+/*
+ * Forced colors drop box-shadows, which draw every variant's boundary, so the box gets a real
+ * border there, as BaseButton does.
+ */
+@media (forced-colors: active) {
+  .kui-TextAreaRoot {
+    border: 1px solid CanvasText;
+  }
+  .kui-TextAreaRoot:where(:has(.kui-TextAreaInput:disabled)) {
+    border-color: GrayText;
+  }
+}

package/src/components/text-area.tsx

@@ -58,28 +58,32 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, for
     ...nativeTextAreaProps
   } = textAreaProps;
 
+  // The message is a sibling of the painted root, so it sits below the box rather than inside it.
   return (
-    <div
-      data-accent-color={color}
-      data-radius={radius}
-      className={classNames('kui-TextAreaRoot', className, {
-        'kui-error': isInvalid,
-      })}
-      style={style}
-    >
-      <textarea
-        className="kui-reset kui-TextAreaInput"
-        ref={forwardedRef}
-        {...nativeTextAreaProps}
-        required={required || undefined}
-        {...ariaProps}
-      />
+    <>
+      <div
+        data-accent-color={color}
+        data-radius={radius}
+        className={classNames('kui-TextAreaRoot', className, {
+          // Not used by the library's CSS (invalid styling keys on aria-invalid); kept as a hook for app styles.
+          'kui-error': isInvalid,
+        })}
+        style={style}
+      >
+        <textarea
+          className="kui-reset kui-TextAreaInput"
+          ref={forwardedRef}
+          {...nativeTextAreaProps}
+          required={required || undefined}
+          {...ariaProps}
+        />
+      </div>
       {textAreaProps.errorMessage && (
         <div id={errorId} className="kui-TextAreaErrorMessage" role="alert">
           {textAreaProps.errorMessage}
         </div>
       )}
-    </div>
+    </>
   );
 });