@womp/kookie-ui 0.24.0 → 0.25.1

package/src/components/slider.css

@@ -81,7 +81,7 @@
     inset: calc(var(--slider-thumb-inset-factor) * var(--slider-thumb-overshoot-base, var(--slider-track-size)) * -1);
     background-color: var(--accent-solid-thumb);
     border-radius: var(--slider-thumb-radius);
-    box-shadow: var(--shadow-2);
+    box-shadow: var(--slider-thumb-box-shadow, var(--shadow-2));
     cursor: pointer;
   }
 
@@ -173,10 +173,6 @@
   & :where(.kui-SliderRange) {
     background-color: var(--accent-solid);
   }
-
-  & :where(.kui-SliderThumb) {
-    --slider-thumb-box-shadow: var(--shadow-3);
-  }
 }
 
 /* outline */
@@ -190,32 +186,29 @@
   & :where(.kui-SliderRange) {
     background-color: var(--accent-solid);
   }
-
-  & :where(.kui-SliderThumb) {
-    --slider-thumb-box-shadow: var(--shadow-3);
-  }
 }
 
-/* all disabled Sliders: a colour remap, never opacity, and a default cursor */
+/* all disabled Sliders: 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-SliderRoot:where(&) {
     cursor: default;
   }
   .kui-SliderTrack:where(&) {
-    background-color: var(--neutral-a3) !important;
-    box-shadow: none !important;
+    background-color: var(--neutral-a3);
+    box-shadow: none;
   }
   .kui-SliderRange:where(&) {
-    background-color: var(--accent-a3) !important;
+    background-color: var(--accent-a3);
   }
   .kui-SliderThumb:where(&) {
     cursor: default;
   }
   .kui-SliderThumb:where(&)::after {
     cursor: default;
-    background-color: var(--neutral-3) !important;
-    box-shadow: none !important;
+    background-color: var(--neutral-3);
+    box-shadow: none;
   }
 }
 
@@ -226,16 +219,41 @@
  ***************************************************************************************************/
 
 .kui-SliderContainer {
+  --slider-ticks-size: 44px;
   position: relative;
+
+  /* A vertical slider fills the caller's height, so the wrapper has to as well. */
+  &:where([data-orientation='vertical']) {
+    display: flex;
+    width: fit-content;
+    height: stretch;
+  }
+
+  /* The ticks sit outside the track, so the wrapper keeps room for them. */
+  &:where([data-has-ticks][data-orientation='horizontal']) {
+    padding-bottom: calc(var(--space-3) + var(--slider-ticks-size));
+  }
+  &:where([data-has-ticks][data-orientation='vertical']) {
+    padding-right: calc(var(--space-3) + var(--slider-ticks-size));
+  }
 }
 
 .kui-SliderTicks {
   position: absolute;
-  top: calc(100% + var(--space-3));
-  left: 0;
-  right: 0;
   pointer-events: auto;
-  height: 44px;
+
+  &:where([data-orientation='horizontal']) {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--slider-ticks-size);
+  }
+  &:where([data-orientation='vertical']) {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: var(--slider-ticks-size);
+  }
 }
 
 .kui-SliderTick {
@@ -255,10 +273,21 @@
   border-radius: var(--radius-2);
   z-index: 1;
   pointer-events: auto;
+
+  /* A vertical tick points left at the track, with its label after the mark. */
+  :where(.kui-SliderTicks[data-orientation='vertical']) & {
+    left: 0;
+    transform: translateY(-50%);
+    flex-direction: row;
+  }
+
+  &:where(:disabled) {
+    cursor: default;
+  }
 }
 
 @media (hover: hover) {
-  .kui-SliderTick:where(:hover) {
+  .kui-SliderTick:where(:hover:not(:disabled)) {
     :where(.kui-SliderTickMark) {
       background-color: var(--neutral-12) !important;
     }
@@ -270,7 +299,7 @@
   }
 }
 
-.kui-SliderTick:where(:active) {
+.kui-SliderTick:where(:active:not(:disabled)) {
   :where(.kui-SliderTickMark) {
     background-color: var(--neutral-12) !important;
   }
@@ -291,6 +320,11 @@
   height: var(--space-3);
   background-color: var(--neutral-6);
   border-radius: 1px;
+
+  :where(.kui-SliderTicks[data-orientation='vertical']) & {
+    width: var(--space-3);
+    height: 1px;
+  }
 }
 
 .kui-SliderTickLabel {
@@ -304,3 +338,38 @@
   max-width: 60px;
   text-align: center;
 }
+
+/* Windows High Contrast drops box shadows and background colours, so the track, range and
+ * handle take system colours and a real border. */
+@media (forced-colors: active) {
+  .kui-SliderTrack {
+    box-sizing: border-box;
+    border: 1px solid CanvasText;
+  }
+  .kui-SliderRange {
+    background-color: Highlight;
+  }
+  .kui-SliderThumb::after {
+    border: 1px solid CanvasText;
+    background-color: Highlight;
+  }
+  .kui-SliderTickMark {
+    background-color: CanvasText;
+  }
+
+  [data-disabled] {
+    .kui-SliderTrack:where(&) {
+      border-color: GrayText;
+    }
+    .kui-SliderRange:where(&) {
+      background-color: GrayText;
+    }
+    .kui-SliderThumb:where(&)::after {
+      border-color: GrayText;
+      background-color: GrayText;
+    }
+  }
+  .kui-SliderTick:where(:disabled) :where(.kui-SliderTickMark) {
+    background-color: GrayText;
+  }
+}

package/src/components/slider.props.tsx

@@ -9,8 +9,8 @@ const variants = ['surface', 'soft', 'outline'] as const;
 const sliderPropDefs = {
   size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'surface' },
-  showTickLabels: { type: 'boolean', className: 'kui-show-tick-labels' },
-  snapToTicks: { type: 'boolean', className: 'kui-snap-to-ticks' },
+  showTickLabels: { type: 'boolean' },
+  snapToTicks: { type: 'boolean' },
   ...colorPropDef,
   ...radiusPropDef,
 } satisfies {

package/src/components/slider.tsx

@@ -1,34 +1,28 @@
 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';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 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/switch.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Switch as SwitchPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { switchPropDefs } from './switch.props.js';
 
 import type { GetPropDefTypes } from '../props/prop-def.js';

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 };