@womp/kookie-ui 0.23.0 → 0.25.0

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,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,72 +11,74 @@ 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 { 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 { className, color, radius, tabIndex, ...sliderProps } = extractProps(props, sliderPropDefs);
+  const {
+    ticks,
+    unit,
+    showTickLabels,
+    snapToTicks,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onValueCommit,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    ...rootProps
+  } = sliderProps;
+  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(
-    () => (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 => {
@@ -93,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);
 
-  const { onValueChange } = sliderProps;
+  // 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],
+    [snapToTicks, sortedTicks, snapKeyStep, snapToNearestTick, currentValue, onValueChange, isControlled],
   );
 
   // Cleanup timeout on unmount
@@ -146,78 +150,80 @@ 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}
         data-radius={radius}
         ref={forwardedRef}
-        {...sliderProps}
+        {...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)}
-        // 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}
-          />
+          <SliderPrimitive.Range className="kui-SliderRange" 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>
       {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={() => {
-                  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);
+
+                  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 : `tick-${tick.index}-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={`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.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

@@ -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" />
@@ -33,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>
   );
 
@@ -40,12 +52,12 @@ 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`
          */}
-        <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;
+  }
 }