@motion-proto/live-tokens 0.97.0 → 0.99.0

package/src/system/components/CornerBadge.svelte

@@ -73,7 +73,7 @@
     /* Per-variant color overrides. Default = inherit the same family/level the
        inner Badge uses; author can swap to a different level (e.g. -low) to
        reduce contrast against the host surface. */
-    --cornerbadge-brand-surface: var(--surface-brand);
+    --cornerbadge-brand-surface: var(--surface-brand-low);
     --cornerbadge-brand-border: var(--border-brand);
     --cornerbadge-brand-text: var(--text-brand);
     --cornerbadge-accent-surface: var(--surface-accent);
@@ -87,7 +87,7 @@
     --cornerbadge-alternate-text: var(--text-alternate);
     --cornerbadge-canvas-surface: var(--surface-canvas);
     --cornerbadge-canvas-border: var(--border-canvas);
-    --cornerbadge-canvas-text: var(--text-canvas);
+    --cornerbadge-canvas-text: var(--text-secondary);
     --cornerbadge-special-surface: var(--surface-special);
     --cornerbadge-special-border: var(--border-special);
     --cornerbadge-special-text: var(--text-special);
@@ -97,7 +97,7 @@
     --cornerbadge-warning-surface: var(--surface-warning);
     --cornerbadge-warning-border: var(--border-warning);
     --cornerbadge-warning-text: var(--text-warning);
-    --cornerbadge-danger-surface: var(--surface-danger);
+    --cornerbadge-danger-surface: var(--surface-danger-low);
     --cornerbadge-danger-border: var(--border-danger);
     --cornerbadge-danger-text: var(--text-danger);
     --cornerbadge-info-surface: var(--surface-info);

package/src/system/components/Dialog.svelte

@@ -15,6 +15,7 @@
   import { createEventDispatcher, tick } from 'svelte';
   import type { Snippet } from 'svelte';
   import { portal } from '../internal/portal';
+  import { tabbables, trapTab } from '../internal/focusTrap';
   import Button from './Button.svelte';
   import type { ButtonVariant, DialogButtonSpec } from './types';
 
@@ -64,6 +65,8 @@
     children,
   }: Props = $props();
 
+  const titleId = $props.id();
+
   let effectiveConfirmVariant = $derived(confirm?.variant ?? asVariant(confirmVarValue, 'primary'));
   let effectiveCancelVariant = $derived(cancel?.variant ?? asVariant(cancelVarValue, 'outline'));
 
@@ -75,6 +78,7 @@
   let confirmButtonRef: HTMLButtonElement = $state()!;
   let cancelButtonRef: HTMLButtonElement = $state()!;
   let closeButtonRef: HTMLButtonElement = $state()!;
+  let dialogEl: HTMLDivElement | undefined = $state();
 
   $effect(() => {
     if (typeof document === 'undefined') return;
@@ -86,21 +90,29 @@
     return () => obs.disconnect();
   });
 
-  // Focus the primary button when dialog opens (skip in inline mode so the editor doesn't steal focus).
+  // The inline preview stays out of the trap, so the editor keeps its focus.
   $effect(() => {
-    if (open && !inline) {
-      tick().then(() => {
-        if (confirm && confirmButtonRef && !confirm.disabled) {
-          confirmButtonRef.focus();
-        } else if (cancel && cancelButtonRef) {
-          cancelButtonRef.focus();
-        } else if (closeButtonRef) {
-          closeButtonRef.focus();
-        }
-      });
-    }
+    if (!open || inline) return;
+    const returnTo = document.activeElement as HTMLElement | null;
+    tick().then(() => {
+      const target =
+        (confirm && !confirm.disabled && confirmButtonRef) ||
+        (cancel && cancelButtonRef) ||
+        closeButtonRef ||
+        (dialogEl && tabbables(dialogEl)[0]) ||
+        dialogEl;
+      target?.focus();
+    });
+    return () => returnTo?.focus();
   });
 
+  function holdTab(event: KeyboardEvent) {
+    if (event.key !== 'Tab' || !open || inline || !dialogEl) return;
+    if (trapTab(dialogEl, event)) return;
+    event.preventDefault();
+    dialogEl.focus();
+  }
+
   function handleConfirm() {
     if (confirm && !confirm.disabled) {
       confirm.onClick();
@@ -116,17 +128,34 @@
       open = false;
     }
   }
+
+  function closeOnEscape(event: KeyboardEvent) {
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    handleCancel();
+  }
 </script>
 
+<svelte:document onkeydown={holdTab} />
+
 {#if open}
   <!-- The fixed backdrop portals to <body> to escape transformed/isolated
        ancestors; the inline preview variant stays in flow. -->
   <div class="dialog-backdrop" class:inline use:portal={!inline}>
-    <div class="dialog" style="width: {width}; max-width: {width};">
+    <div
+      bind:this={dialogEl}
+      class="dialog"
+      role="dialog"
+      aria-modal={inline ? undefined : true}
+      aria-labelledby={title ? titleId : undefined}
+      tabindex="-1"
+      style="width: {width}; max-width: {width};"
+      onkeydown={closeOnEscape}
+    >
       <div class="dialog-content">
         {#if title}
           <div class="dialog-header">
-            <h3 class="dialog-title">{title}</h3>
+            <h3 class="dialog-title" id={titleId}>{title}</h3>
             <button
               bind:this={closeButtonRef}
               class="dialog-close"

package/src/system/components/IconButton.svelte

@@ -5,7 +5,7 @@
     description: 'An action that an icon alone carries.',
     whenToUse: 'an action whose meaning is plain from the glyph, such as close, edit, or delete.',
     whenNotToUse: [
-      { when: 'the action needs a word to be unambiguous.', use: 'button' },
+      { when: 'the trigger needs a word to be unambiguous.', use: 'button' },
       { when: 'the pair confirms or cancels an inline edit.', use: 'inlineeditactions' },
     ],
     props: {

package/src/system/components/Image.svelte

@@ -144,4 +144,11 @@
   .image.force-hover img {
     transform: var(--image-zoom-enabled);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .image,
+    img {
+      transition: none;
+    }
+  }
 </style>

package/src/system/components/ImageLightbox.svelte

@@ -21,6 +21,7 @@
 <script lang="ts">
   import { onMount, tick, type Snippet } from 'svelte';
   import { portal } from '../internal/portal';
+  import { trapTab } from '../internal/focusTrap';
 
   interface GalleryImage {
     src: string;
@@ -45,6 +46,8 @@
     thumbSrc?: string | undefined;
     /** Closed-thumbnail object-fit. `cover` crops the thumbnail to fill its box;
         the expanded modal always uses `contain` so the whole image stays visible.
+        Unset, it follows the theme's `--imagelightbox-tile-object-fit`, which
+        defaults to `contain`.
         `cover` only crops when the thumbnail box differs from the image's shape
         (a `thumbAspect`, or a CSS-constrained container). */
     fit?: 'contain' | 'cover';
@@ -111,7 +114,7 @@
     maxWidth = undefined,
     thumbAspect = undefined,
     thumbSrc = undefined,
-    fit = 'contain',
+    fit = undefined,
     shadow = 'box',
     surface = undefined,
     border = undefined,
@@ -607,29 +610,12 @@
     if (!isGallery && scale <= MIN_SCALE) closeLightbox();
   }
 
-  // Keep Tab inside the open dialog. The stage (tabindex -1) is excluded, so an
-  // image-only lightbox holds focus on its close button.
-  function trapTab(e: KeyboardEvent) {
-    if (!modalEl) return;
-    const f = [
-      ...modalEl.querySelectorAll<HTMLElement>('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'),
-    ];
-    if (f.length === 0) {
-      e.preventDefault();
-      stageEl?.focus();
-      return;
-    }
-    const first = f[0];
-    const last = f[f.length - 1];
-    const active = document.activeElement as HTMLElement | null;
-    const inside = active && modalEl.contains(active);
-    if (e.shiftKey && (!inside || active === first)) {
-      e.preventDefault();
-      last.focus();
-    } else if (!e.shiftKey && (!inside || active === last)) {
-      e.preventDefault();
-      first.focus();
-    }
+  // The stage (tabindex -1) is no tab stop, so an image-only lightbox holds
+  // focus on its close button.
+  function onTab(e: KeyboardEvent) {
+    if (!modalEl || trapTab(modalEl, e)) return;
+    e.preventDefault();
+    stageEl?.focus();
   }
 
   onMount(() => {
@@ -638,7 +624,7 @@
       if (e.key === 'Escape') {
         closeLightbox();
       } else if (e.key === 'Tab') {
-        trapTab(e);
+        onTab(e);
       } else if (isGallery && e.key === 'ArrowRight') {
         e.preventDefault();
         next();
@@ -920,6 +906,13 @@
     transition: none;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .image-lightbox-thumb,
+    .image-lightbox-attached {
+      transition: none;
+    }
+  }
+
   .image-lightbox-thumb:focus-visible {
     outline: 2px solid var(--border-brand-medium);
     outline-offset: 2px;

package/src/system/components/InlineEditActions.svelte

@@ -92,7 +92,7 @@
 
       /* Cancel (hover) */
       --inlineeditactions-cancel-hover-surface: var(--surface-danger-high);
-      --inlineeditactions-cancel-hover-text: var(--text-danger);
+      --inlineeditactions-cancel-hover-text: var(--text-primary);
       --inlineeditactions-cancel-hover-border: var(--border-danger);
       --inlineeditactions-cancel-hover-border-width: var(--border-width-0);
       --inlineeditactions-cancel-hover-radius: var(--radius-md);

package/src/system/components/Input.svelte

@@ -165,7 +165,7 @@
 
     /* Default */
     --input-default-surface: var(--surface-neutral-lower);
-    --input-default-border: var(--border-neutral);
+    --input-default-border: var(--border-neutral-medium);
     --input-default-text: var(--text-primary);
     --input-default-text-font-family: var(--font-sans);
     --input-default-text-font-size: var(--font-size-sm);
@@ -177,7 +177,7 @@
 
     /* Focused — applied as a CSS outline so the layout doesn't shift on focus */
     --input-focused-surface: var(--surface-neutral-lower);
-    --input-focused-border: var(--border-brand);
+    --input-focused-border: var(--border-brand-strong);
     --input-focused-border-width: var(--border-width-2);
     --input-focused-text: var(--text-primary);
     --input-focused-text-font-family: var(--font-sans);
@@ -305,6 +305,13 @@
     outline: var(--input-error-border-width) solid var(--input-error-border);
   }
 
+  /* The red outline stays put on focus, so focus adds a neutral ring outside
+     it. The spread covers the outline's width, which paints over the shadow. */
+  .input-field.invalid .input-control:focus,
+  .input-field.invalid.force-focus .input-control {
+    box-shadow: 0 0 0 calc(var(--input-error-border-width) + var(--border-width-2)) var(--border-neutral-strong);
+  }
+
   .input-icon {
     color: var(--input-default-icon);
     font-size: var(--input-default-icon-size);

package/src/system/components/MenuSelect.svelte

@@ -40,6 +40,8 @@
     minWidth?: string;
     /** ARIA role on the wrapper. `listbox` for select-like menus; `menu` for command menus. */
     role?: 'listbox' | 'menu';
+    /** The list's accessible name, such as the text of the Button that opens it. */
+    ariaLabel?: string;
     /** Selection callback. */
     onchange?: (value: string) => void;
   }
@@ -51,6 +53,7 @@
     forceHoverValue = null,
     minWidth = undefined,
     role = 'listbox',
+    ariaLabel = undefined,
     onchange,
   }: Props = $props();
 
@@ -67,16 +70,38 @@
     onchange?.(v);
     dispatch('change', v);
   }
+
+  const buttons: HTMLButtonElement[] = $state([]);
+
+  // Roving tab stop: the list takes one Tab press, on the selected item.
+  let tabStop = $derived(
+    items.find((i) => i.value === value && !i.disabled)?.value ?? items.find((i) => !i.disabled)?.value,
+  );
+
+  function moveFocus(event: KeyboardEvent, from: number) {
+    const enabled = items.flatMap((item, i) => (item.disabled ? [] : [i]));
+    const at = enabled.indexOf(from);
+    const to = {
+      ArrowDown: enabled[(at + 1) % enabled.length],
+      ArrowUp: enabled[(at - 1 + enabled.length) % enabled.length],
+      Home: enabled[0],
+      End: enabled[enabled.length - 1],
+    }[event.key];
+    if (to === undefined) return;
+    event.preventDefault();
+    buttons[to].focus();
+  }
 </script>
 
 <ul
   style:--menuselect-hover-tint-enabled={hoverTintValue}
   class="menuselect"
   {role}
+  aria-label={ariaLabel}
   style:min-width={minWidth}
 >
-  {#each items as item (item.value)}
-    <li>
+  {#each items as item, i (item.value)}
+    <li role="none">
       <button
         type="button"
         class="menuselect-item"
@@ -85,7 +110,10 @@
         disabled={item.disabled}
         role={role === 'listbox' ? 'option' : 'menuitem'}
         aria-selected={role === 'listbox' ? value === item.value : undefined}
+        tabindex={item.value === tabStop ? 0 : -1}
+        bind:this={buttons[i]}
         onclick={() => select(item.value)}
+        onkeydown={(event) => moveFocus(event, i)}
       >
         {#if item.icon}<i class="menuselect-icon {item.icon}" aria-hidden="true"></i>{/if}
         <span class="menuselect-label">{item.label}</span>
@@ -130,7 +158,7 @@
     --menuselect-default-icon-size: var(--icon-size-sm);
 
     /* Hover item */
-    --menuselect-hover-surface: var(--surface-neutral-higher);
+    --menuselect-hover-surface: var(--surface-neutral-high);
     --menuselect-hover-text: var(--text-primary);
     --menuselect-hover-text-font-family: var(--font-sans);
     --menuselect-hover-text-font-size: var(--font-size-sm);

package/src/system/components/Notification.svelte

@@ -188,7 +188,7 @@
       --notification-warning-text-line-height: var(--line-height-normal);
 
       /* Danger */
-      --notification-danger-surface: var(--surface-danger);
+      --notification-danger-surface: var(--surface-danger-low);
       --notification-danger-action-surface: var(--surface-neutral-lowest);
       --notification-danger-border: var(--border-danger);
       --notification-danger-border-width: var(--border-width-1);

package/src/system/components/ProgressBar.svelte

@@ -65,7 +65,7 @@
     --progressbar-track-border-width: var(--border-width-1);
     --progressbar-track-height: var(--space-16);
     --progressbar-radius: var(--radius-full);
-    --progressbar-fill: var(--surface-special-highest);
+    --progressbar-fill: var(--border-special-medium);
     --progressbar-label-gap: var(--space-6);
     --progressbar-label: var(--text-secondary);
     --progressbar-label-font-family: var(--font-sans);
@@ -135,4 +135,10 @@
     border-radius: var(--progressbar-radius);
     transition: width 0.4s ease;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-fill {
+      transition: none;
+    }
+  }
 </style>

package/src/system/components/RadioButton.svelte

@@ -38,13 +38,46 @@
     onclick?.();
     dispatch('click');
   }
+
+  let button: HTMLButtonElement;
+
+  // Each option renders alone, so the group is read from the DOM: the nearest
+  // radiogroup, else the parent the options share.
+  function groupOf(radio: HTMLButtonElement): HTMLButtonElement[] {
+    const scope = radio.closest('[role="radiogroup"]') ?? radio.parentElement;
+    return scope ? [...scope.querySelectorAll<HTMLButtonElement>('.radio-button')] : [radio];
+  }
+
+  // Roving tab stop: the group takes one Tab press, on the checked option.
+  $effect(() => {
+    void selected;
+    const group = groupOf(button);
+    const stop = group.find((radio) => radio.getAttribute('aria-checked') === 'true') ?? group[0];
+    for (const radio of group) radio.tabIndex = radio === stop ? 0 : -1;
+  });
+
+  const ARROW_STEPS: Record<string, number> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+  function moveSelection(event: KeyboardEvent) {
+    const step = ARROW_STEPS[event.key];
+    if (step === undefined) return;
+    event.preventDefault();
+    const group = groupOf(button);
+    const next = group[(group.indexOf(button) + step + group.length) % group.length];
+    next.focus();
+    next.click();
+  }
 </script>
 
 <button
   class="radio-button {className}"
   class:selected
+  role="radio"
+  aria-checked={selected}
   style={color ? `--radiobutton-color: ${color};` : ''}
+  bind:this={button}
   onclick={fireClick}
+  onkeydown={moveSelection}
 >
   <span class="radio-dot"><span class="radio-dot-fill"></span></span>
   <span class="radio-label">{label}</span>
@@ -53,7 +86,7 @@
 <style lang="scss">
   :global(:root) {
     /* Default */
-    --radiobutton-default-dot-border-color: var(--border-neutral);
+    --radiobutton-default-dot-border-color: var(--border-neutral-medium);
     --radiobutton-default-dot-border-width: var(--border-width-2);
     --radiobutton-default-dot-fill: var(--text-secondary);
     --radiobutton-default-dot-size: var(--dot-size-0);
@@ -64,7 +97,7 @@
     --radiobutton-default-label-line-height: var(--line-height-none);
 
     /* Hover */
-    --radiobutton-hover-dot-border-color: var(--border-neutral);
+    --radiobutton-hover-dot-border-color: var(--border-neutral-medium);
     --radiobutton-hover-dot-border-width: var(--border-width-2);
     --radiobutton-hover-dot-fill: var(--text-secondary);
     --radiobutton-hover-dot-size: var(--dot-size-50);
@@ -75,7 +108,7 @@
     --radiobutton-hover-label-line-height: var(--line-height-none);
 
     /* Selected */
-    --radiobutton-selected-dot-border-color: var(--border-neutral);
+    --radiobutton-selected-dot-border-color: var(--border-neutral-medium);
     --radiobutton-selected-dot-border-width: var(--border-width-2);
     --radiobutton-selected-dot-fill: var(--text-secondary);
     --radiobutton-selected-dot-size: var(--dot-size-50);

package/src/system/components/SegmentedControl.svelte

@@ -59,6 +59,29 @@
     onchange?.(v);
     dispatch('change', v);
   }
+
+  const buttons: HTMLButtonElement[] = $state([]);
+
+  // Roving tab stop: the group takes one Tab press, on the checked segment.
+  let tabStop = $derived(
+    segments.find((s) => s.value === value && !s.disabled)?.value ?? segments.find((s) => !s.disabled)?.value,
+  );
+
+  const ARROW_STEPS: Record<string, number> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+  function moveSelection(event: KeyboardEvent, from: number) {
+    const step = ARROW_STEPS[event.key];
+    if (step === undefined) return;
+    event.preventDefault();
+    const count = segments.length;
+    for (let n = 1; n < count; n++) {
+      const i = (((from + step * n) % count) + count) % count;
+      if (segments[i].disabled) continue;
+      buttons[i].focus();
+      select(segments[i].value);
+      return;
+    }
+  }
 </script>
 
 <div
@@ -77,7 +100,10 @@
       disabled={disabled || seg.disabled}
       role="radio"
       aria-checked={value === seg.value}
+      tabindex={seg.value === tabStop ? 0 : -1}
+      bind:this={buttons[i]}
       onclick={() => select(seg.value)}
+      onkeydown={(event) => moveSelection(event, i)}
     >
       {#if seg.icon}<i class={seg.icon}></i>{/if}
       <span>{seg.label}</span>
@@ -96,7 +122,7 @@
 
     /* Bar (outer wrapper) */
     --segmentedcontrol-bar-surface: color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent);
-    --segmentedcontrol-bar-border: var(--border-neutral);
+    --segmentedcontrol-bar-border: var(--border-neutral-medium);
     --segmentedcontrol-bar-border-width: var(--border-width-1);
     --segmentedcontrol-bar-radius: var(--radius-lg);
     --segmentedcontrol-bar-padding: var(--space-4);
@@ -138,7 +164,7 @@
     --segmentedcontrol-selected-text-font-weight: var(--font-weight-normal);
     --segmentedcontrol-selected-text-line-height: var(--line-height-normal);
     --segmentedcontrol-selected-icon: var(--text-secondary);
-    --segmentedcontrol-selected-border: var(--border-brand);
+    --segmentedcontrol-selected-border: var(--border-brand-medium);
     --segmentedcontrol-selected-border-width: var(--border-width-1);
     --segmentedcontrol-selected-radius: var(--radius-md);
 
@@ -245,6 +271,7 @@
     @include themed-padding(--segmentedcontrol-option-padding, $h: 2);
     background: transparent;
     border: 0;
+    outline: none;
     border-radius: var(--segmentedcontrol-selected-radius);
     color: var(--_text-color);
     font-family: var(--_text-family);
@@ -308,6 +335,13 @@
     outline-offset: calc(var(--segmentedcontrol-selected-border-width) * -1);
   }
 
+  /* A ring outside the box, in a neutral that reads apart from the selected
+     option's brand outline. It is a shadow because the selected option
+     already owns the outline. */
+  .segment:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-2) var(--border-neutral-strong);
+  }
+
   .segment:disabled {
     --_text-color: var(--segmentedcontrol-disabled-text);
     --_text-family: var(--segmentedcontrol-disabled-text-font-family);

package/src/system/components/SlidePager.svelte

@@ -298,7 +298,7 @@
 
     --slidepager-control-hover-surface: var(--surface-brand-high);
     --slidepager-control-hover-border: var(--border-brand);
-    --slidepager-control-hover-icon: var(--text-inverted);
+    --slidepager-control-hover-icon: var(--text-primary);
 
     --slidepager-control-disabled-surface: var(--surface-neutral-lower);
     --slidepager-control-disabled-border: var(--border-neutral-subtle);
@@ -357,7 +357,7 @@
 
   .slidepager-stage:focus-visible {
     outline: none;
-    box-shadow: var(--ring-focus-md);
+    box-shadow: 0 0 0 var(--border-width-2) var(--border-neutral-strong);
   }
 
   .slidepager-stage img {
@@ -438,7 +438,7 @@
 
   .slidepager-control:focus-visible {
     outline: none;
-    box-shadow: var(--ring-focus-md);
+    box-shadow: 0 0 0 var(--border-width-2) var(--border-neutral-strong);
   }
 
   .slidepager-counter {

package/src/system/components/Slider.svelte

@@ -131,18 +131,18 @@
        to one moves the other until the designer unlinks it. */
     /* Single: one thumb. */
     --slider-single-track-surface: var(--surface-neutral-lowest);
-    --slider-single-track-border: var(--border-neutral-subtle);
+    --slider-single-track-border: var(--border-neutral-medium);
     --slider-single-track-border-width: var(--border-width-1);
     --slider-single-track-height: var(--space-8);
     --slider-single-track-radius: var(--radius-full);
-    --slider-single-fill: var(--surface-brand-high);
-    --slider-single-thumb-surface: var(--surface-neutral-highest);
-    --slider-single-thumb-border: var(--border-brand);
+    --slider-single-fill: var(--border-brand-medium);
+    --slider-single-thumb-surface: var(--text-primary);
+    --slider-single-thumb-border: var(--border-brand-medium);
     --slider-single-thumb-border-width: var(--border-width-2);
     --slider-single-thumb-size: var(--font-size-lg);
     --slider-single-thumb-radius: var(--radius-full);
     --slider-single-thumb-shadow: var(--shadow-sm);
-    --slider-single-hover-thumb-surface: var(--surface-brand-high);
+    --slider-single-hover-thumb-surface: var(--text-primary);
     --slider-single-hover-thumb-border: var(--border-brand-strong);
     --slider-single-disabled-track-surface: var(--surface-neutral-lower);
     --slider-single-disabled-fill: var(--surface-neutral);
@@ -151,18 +151,18 @@
 
     /* Range: two thumbs bounding a fill. */
     --slider-range-track-surface: var(--surface-neutral-lowest);
-    --slider-range-track-border: var(--border-neutral-subtle);
+    --slider-range-track-border: var(--border-neutral-medium);
     --slider-range-track-border-width: var(--border-width-1);
     --slider-range-track-height: var(--space-8);
     --slider-range-track-radius: var(--radius-full);
-    --slider-range-fill: var(--surface-brand-high);
-    --slider-range-thumb-surface: var(--surface-neutral-highest);
-    --slider-range-thumb-border: var(--border-brand);
+    --slider-range-fill: var(--border-brand-medium);
+    --slider-range-thumb-surface: var(--text-primary);
+    --slider-range-thumb-border: var(--border-brand-medium);
     --slider-range-thumb-border-width: var(--border-width-2);
     --slider-range-thumb-size: var(--font-size-lg);
     --slider-range-thumb-radius: var(--radius-full);
     --slider-range-thumb-shadow: var(--shadow-sm);
-    --slider-range-hover-thumb-surface: var(--surface-brand-high);
+    --slider-range-hover-thumb-surface: var(--text-primary);
     --slider-range-hover-thumb-border: var(--border-brand-strong);
     --slider-range-disabled-track-surface: var(--surface-neutral-lower);
     --slider-range-disabled-fill: var(--surface-neutral);
@@ -224,6 +224,10 @@
     margin-block: calc((var(--_thumb-size) - var(--_track-height)) / 2);
     border-style: solid;
     transition: background var(--duration-150), border-color var(--duration-150);
+    /* WCAG 2.2 SC 2.5.8: the native thumb takes the pointer over 24px or
+       more. A cap smaller than that sits up to half the difference off the
+       native thumb's centre at either end of the travel. */
+    --_hit-size: max(var(--_thumb-size), var(--space-24));
     --_origin: calc(var(--_thumb-size) / 2 - var(--_track-border-width));
     --_travel: calc(100% + var(--_track-border-width) * 2 - var(--_thumb-size));
   }
@@ -287,7 +291,7 @@
     top: 50%;
     left: calc(-1 * var(--_track-border-width));
     width: calc(100% + var(--_track-border-width) * 2);
-    height: var(--_thumb-size);
+    height: var(--_hit-size);
     margin: 0;
     padding: 0;
     transform: translateY(-50%);
@@ -299,14 +303,14 @@
   .thumb:disabled { cursor: not-allowed; }
   .thumb::-webkit-slider-thumb {
     appearance: none;
-    width: var(--_thumb-size);
-    height: var(--_thumb-size);
+    width: var(--_hit-size);
+    height: var(--_hit-size);
     opacity: 0;
     pointer-events: auto;
   }
   .thumb::-moz-range-thumb {
-    width: var(--_thumb-size);
-    height: var(--_thumb-size);
+    width: var(--_hit-size);
+    height: var(--_hit-size);
     border: 0;
     opacity: 0;
     pointer-events: auto;