@astryxdesign/core 0.7.7 → 0.7.8-canary.0b39b51

package/src/SegmentedControl/useSegmentedSelectionMotion.ts

@@ -25,7 +25,7 @@ import {
   type RefObject,
 } from 'react';
 import {
-  createAnimator,
+  createMotionAnimator,
   type AnimateOptions,
   type Animator,
   type MotionCurve,
@@ -539,7 +539,7 @@ export class SegmentedSelectionMotion {
   private readonly after: Animator;
 
   constructor(
-    private readonly animator: Animator = createAnimator(null, {
+    private readonly animator: Animator = createMotionAnimator(null, {
       pseudoElement: '::before',
     }),
     options: SegmentedSelectionMotionOptions = {},
@@ -552,7 +552,10 @@ export class SegmentedSelectionMotion {
     this.now = options.now ?? defaultNow;
     this.after =
       options.afterAnimator ??
-      createAnimator(null, {pseudoElement: '::after', initial: {opacity: 0}});
+      createMotionAnimator(null, {
+        pseudoElement: '::after',
+        initial: {opacity: 0},
+      });
   }
 
   /** Attaches the radiogroup whose pseudo-elements are the lens (null detaches). */

package/src/SelectableCard/SelectableCard.tsx

@@ -23,6 +23,8 @@
  * A hidden <input type="checkbox"> inside the card provides the accessible
  * role, label, and checked state — the card surface itself has no role/tabIndex.
  * Space toggles it natively; Enter is wired up as an additional toggle key.
+ * Inside a single-choice group (Lab's SelectableCardGroup, through an internal
+ * context) the input is a radio: the card selects and never deselects itself.
  *
  * For static display, use Card.
  * For navigation or action cards, use ClickableCard.
@@ -34,13 +36,14 @@ import {
   type KeyboardEvent,
   useRef,
   useCallback,
+  use,
   type Ref,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import type {Elevation, SizeValue, SpacingStep} from '../utils/types';
-import {mergeProps} from '../utils';
+import {isImeKeyEvent, mergeProps} from '../utils';
 import {Card} from '../Card/Card';
 import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
@@ -52,6 +55,7 @@ import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {SelectableCardInputContext} from './selectableCardInput';
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
 // =============================================================================
@@ -412,20 +416,34 @@ export function SelectableCard({
   const containerRef = useRef<HTMLDivElement | null>(null);
   const interactiveRef = useRef<HTMLInputElement | null>(null);
 
+  // A group can make the input a radio. A radio only selects: a native radio
+  // stays checked when it is clicked again.
+  const groupInput = use(SelectableCardInputContext);
+  const isRadio = groupInput?.type === 'radio';
+  const requestChange = useCallback(() => {
+    if (!isRadio) {
+      onChange(!isSelected);
+    } else if (!isSelected) {
+      onChange(true);
+    }
+  }, [isRadio, isSelected, onChange]);
+
   const handleClick = useCallback(
     (_event: MouseEvent<HTMLElement>) => {
       if (!isDisabled) {
-        onChange(!isSelected);
+        requestChange();
       }
     },
-    [isDisabled, isSelected, onChange],
+    [isDisabled, requestChange],
   );
 
-  // The focusable control is a native checkbox, which toggles on Space but
-  // ignores Enter. Add Enter as an extra toggle key; Space keeps its native
-  // handling, so we deliberately do not toggle on Space here (would double).
+  // A native checkbox or radio reacts to Space but not to Enter. This handler
+  // adds Enter. Space is not handled here, because it would act twice.
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLInputElement>) => {
+      if (isImeKeyEvent(event.nativeEvent)) {
+        return;
+      }
       if (isDisabled) {
         if (event.key === ' ' || event.key === 'Enter') {
           event.preventDefault();
@@ -434,10 +452,10 @@ export function SelectableCard({
       }
       if (event.key === 'Enter') {
         event.preventDefault();
-        onChange(!isSelected);
+        requestChange();
       }
     },
-    [isDisabled, isSelected, onChange],
+    [isDisabled, requestChange],
   );
 
   const {onClick, onMouseUp} = useClickableContainer({
@@ -523,7 +541,18 @@ export function SelectableCard({
       }>
       <input
         ref={interactiveRef}
-        type="checkbox"
+        type={isRadio ? 'radio' : 'checkbox'}
+        name={groupInput?.name}
+        value={groupInput?.value}
+        // Radios group by name and form owner, so every radio card leaves
+        // the form together and the group stays one tab stop. The group
+        // submits its choice itself. A disabled checkbox card submits
+        // nothing, so it leaves the form too.
+        form={
+          groupInput != null && (groupInput.type === 'radio' || isDisabled)
+            ? ''
+            : undefined
+        }
         checked={isSelected}
         aria-label={label}
         aria-disabled={isDisabled ? 'true' : undefined}
@@ -531,7 +560,7 @@ export function SelectableCard({
           if (isDisabled) {
             return;
           }
-          onChange(!isSelected);
+          requestChange();
         }}
         onKeyDown={handleKeyDown}
         {...stylex.props(styles.srOnly)}

package/src/SelectableCard/selectableCardInput.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file selectableCardInput.ts
+ * @input A card group's choice of native input for each card it renders
+ * @output SelectableCardInputContext: the input type, name and value a group
+ *   gives one SelectableCard
+ * @position Internal: Lab's SelectableCardGroup provides it through
+ *   `@astryxdesign/core/internal/selectable-card`. It is not public API, so
+ *   SelectableCard's public props do not change.
+ */
+
+import {createContext} from 'react';
+
+/** The native input a group gives one card. */
+export interface SelectableCardInput {
+  /** `radio` makes the card one choice of a single-choice set. */
+  readonly type: 'checkbox' | 'radio';
+  /** The input's `name`. Radios that share it form one native group. */
+  readonly name: string;
+  /** The input's `value`. A checkbox card submits it when it is selected. */
+  readonly value: string;
+}
+
+/** Without a provider, a card renders its own checkbox. */
+export const SelectableCardInputContext =
+  createContext<SelectableCardInput | null>(null);
+SelectableCardInputContext.displayName = 'SelectableCardInputContext';

package/src/Selector/Selector.tsx

@@ -1907,7 +1907,7 @@ export function Selector<T extends SelectorOptionType>(
         ref={attachListbox}
         id={listboxId}
         role="listbox"
-        aria-labelledby={triggerId}
+        aria-label={label}
         {...listboxPress.menuProps}
         {...stylex.props(
           styles.dropdown,
@@ -1927,17 +1927,10 @@ export function Selector<T extends SelectorOptionType>(
       id={listboxId}
       role="listbox"
       {...listboxPress.menuProps}
-      // The bottom sheet is a modal layer, so Chromium drops the trigger
-      // outside it from the accessibility tree and a reference to it yields
-      // no name. Name only this no-search sheet directly from the component's
-      // label; the searchable sheet and the popovers keep the trigger
-      // relationship.
-      aria-label={
-        surface.activePresentation === 'bottom-sheet' ? label : undefined
-      }
-      aria-labelledby={
-        surface.activePresentation === 'bottom-sheet' ? undefined : triggerId
-      }
+      // The trigger shows the value, so it cannot name the list.
+      // A modal sheet removes an outside label from the accessibility tree.
+      // The label element also holds the required marker and the tooltip.
+      aria-label={label}
       aria-activedescendant={
         surface.isOpen && highlightedIndex >= 0
           ? getItemId(highlightedIndex)

package/src/Slider/sliderTouchController.ts

@@ -29,7 +29,7 @@ import {TapGestureRecognizer} from '../gestures/TapGestureRecognizer';
 import type {PointerKind} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {
-  createAnimator,
+  createMotionAnimator,
   type Animator,
   type MotionCurve,
   type MotionHandle,
@@ -1186,7 +1186,7 @@ export class SliderTouchController {
   private animatorFor(element: HTMLElement): Animator {
     let animator = this.animators.get(element);
     if (animator == null) {
-      animator = createAnimator(element);
+      animator = createMotionAnimator(element);
       this.animators.set(element, animator);
     }
     return animator;

package/src/Spinner/Spinner.tsx

@@ -10,7 +10,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Spinner/Spinner.doc.mjs
- * - /packages/core/src/Spinner/Spinner.test.tsx
+ * - /packages/core/src/Spinner/Spinner.test.tsx and __tests__/SpinnerMotion.a11y.chromium.spec.ts (rotor timing)
  * - /packages/core/src/Spinner/index.ts
  * - /apps/storybook/stories/Spinner.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Spinner/ (showcase blocks)
@@ -153,60 +153,57 @@ function registerSpinnerVars(): void {
 registerSpinnerVars();
 
 /**
- * Pin every ring's dash motion to the document timeline's origin instead of
- * its own start time, so spinners mounted seconds apart stay in phase.
+ * Pin every ring's rotation to the document timeline's origin instead of its
+ * own start time, so spinners mounted seconds apart stay in phase.
  *
- * Setting `startTime` is exact where arithmetic on a clock read is not: a
+ * Setting `startTime` is exact where arithmetic on a clock read is not. A
  * negative `animation-delay` computed at mount is only as good as the gap
- * between reading the clock and the frame the animation starts in, which at
- * 10x CPU throttling measured 116deg of drift (from when this animated a
- * literal rotation; the same drift risk applies to the dash offset now).
+ * between the clock read and the frame the animation starts in. At 10x CPU
+ * throttling that gap measured 116 degrees of drift.
  *
- * Rings are collected and pinned in one frame because `getAnimations()`
- * resolves style and `startTime` dirties it again, so pinning them one at a
- * time makes each mount re-force what the previous one invalidated — 53 style
- * recalcs for 38 spinners against 19 batched.
+ * Rotors are collected and pinned in one frame. `getAnimations()` resolves
+ * style, and `startTime` dirties it again. So pinning them one at a time makes
+ * each mount re-force what the previous one invalidated: 53 style recalcs for
+ * 38 spinners, against 19 batched.
  */
-const pendingRings = new Set<SVGSVGElement>();
+const pendingRotors = new Set<HTMLSpanElement>();
 let flushScheduled = false;
 
-function pinRingsToTimelineOrigin(): void {
+function pinRotorsToTimelineOrigin(): void {
   flushScheduled = false;
   const animations: Animation[] = [];
-  for (const svg of pendingRings) {
-    // The animation now runs on the arc <circle>, a descendant of the ring
-    // this ref sits on (#6253), so it needs subtree:true to be found here.
-    animations.push(...svg.getAnimations({subtree: true}));
+  for (const rotor of pendingRotors) {
+    animations.push(...rotor.getAnimations());
   }
-  pendingRings.clear();
+  pendingRotors.clear();
   for (const animation of animations) {
     animation.startTime = 0;
   }
 }
 
 /**
- * Ref callback for the ring: the one place a mounted ring touches the DOM.
+ * Ref callback for the rotor: the one place a mounted ring touches the DOM.
  *
  * It reads nothing back — the geometry is resolved by the cascade, not in JS.
  */
 function syncRotationPhase(
-  svg: SVGSVGElement | null,
+  rotor: HTMLSpanElement | null,
 ): (() => void) | undefined {
-  if (svg == null) {
+  if (rotor == null) {
     return undefined;
   }
   // jsdom implements no Web Animations, and this runs in every consumer's
   // component tests.
-  if (typeof svg.getAnimations !== 'function') {
+  if (typeof rotor.getAnimations !== 'function') {
     return undefined;
   }
-  pendingRings.add(svg);
+  pendingRotors.add(rotor);
   if (!flushScheduled) {
     flushScheduled = true;
-    requestAnimationFrame(pinRingsToTimelineOrigin);
+    requestAnimationFrame(pinRotorsToTimelineOrigin);
   }
   return () => {
-    pendingRings.delete(svg);
+    pendingRotors.delete(rotor);
   };
 }
 
@@ -215,19 +212,13 @@ function syncRotationPhase(
 // =============================================================================
 
 /**
- * Moves the dash around a stationary circle instead of rotating the whole
- * ring. WebKit re-antialiases a rotating stroked shape's rounded cap
- * (`strokeLinecap: 'round'`, below) slightly differently at each intermediate
- * angle, which reads as a visible wobble on iOS Safari independent of
- * compositing (#6253) — confirmed by a real-device test against this exact
- * fix, since `willChange`/layer promotion alone (the earlier fix for #3617)
- * only smooths the rotation's motion, not the per-frame stroke rasterization.
- * A static circle with an animated `stroke-dashoffset` never rotates, so
- * WebKit never re-rasterizes the cap at an intermediate angle at all.
+ * A `transform` animation runs on the compositor, so the ring keeps turning
+ * while a script runs. A `stroke-dashoffset` animation would repaint the arc
+ * on the main thread every frame, so it would stop while a script runs.
  */
-const dashMotion = stylex.keyframes({
-  '0%': {strokeDashoffset: '0px'},
-  '100%': {strokeDashoffset: `calc(var(${RESOLVED_DIAMETER}) * -${PI})`},
+const rotation = stylex.keyframes({
+  '0%': {transform: 'rotate(0deg)'},
+  '100%': {transform: 'rotate(360deg)'},
 });
 
 // =============================================================================
@@ -283,6 +274,8 @@ const styles = stylex.create({
   ring: {
     backfaceVisibility: 'hidden',
     display: 'block',
+    // The track and the rotor share the one grid cell, stacked and centred.
+    gridArea: '1 / 1',
     // The frame is the box, read from the same composed var the span is sized
     // from — not from the size constant, which a theme cannot reach, and not
     // from a percentage, which needs the grid area to be a definite size in
@@ -300,6 +293,27 @@ const styles = stylex.create({
     // which put the ring 1.5-3.3px off across the four sizes.
     overflow: 'visible',
   },
+  // The rotor is the frame's size, so it turns about the ring's centre.
+  rotor: {
+    display: 'block',
+    gridArea: '1 / 1',
+    width: `var(${BOX_SIZE})`,
+    height: `var(${BOX_SIZE})`,
+    // Mobile Safari keeps a re-timed animation off the main thread only on an
+    // element with its own layer. So the rotor declares one before the start
+    // time is set (see `pinRotorsToTimelineOrigin`).
+    willChange: 'transform',
+    // Reduced motion slows the turn but never stops it: a still ring reads as
+    // broken. The status role and its name still say that work is busy.
+    animationDuration: {
+      // The loop reads the duration before a theme's tempo scales it.
+      default: `var(--_astryx-pre-tempo-duration-slow-min, ${durationVars['--duration-slow-min']})`,
+      '@media (prefers-reduced-motion: reduce)': '3s',
+    },
+    animationIterationCount: 'infinite',
+    animationName: rotation,
+    animationTimingFunction: 'linear',
+  },
   circle: {
     fill: 'none',
     // The ring is centred on the box (cx/cy 50%), so the arc's start offset
@@ -336,18 +350,6 @@ const styles = stylex.create({
   // `0` the way the registered length pair guards against, so it needs no
   // registration.
   arc: {
-    // Slow the motion dramatically under reduced-motion rather than freezing
-    // it (a frozen spinner reads as broken), matching ProgressBar's approach.
-    // The role="status" + "Loading" label still convey busy state (obs-6).
-    animationDuration: {
-      // The loop reads the duration before a theme's tempo scales it
-      // (spec:AST-108 FR4).
-      default: `var(--_astryx-pre-tempo-duration-slow-min, ${durationVars['--duration-slow-min']})`,
-      '@media (prefers-reduced-motion: reduce)': '3s',
-    },
-    animationIterationCount: 'infinite',
-    animationName: dashMotion,
-    animationTimingFunction: 'linear',
     stroke: 'var(--spinner-color)',
     transform: 'rotate(-90deg)',
     strokeDasharray: `calc(var(${RESOLVED_DIAMETER}) * ${PI} * var(--spinner-arc-fraction)) calc(var(${RESOLVED_DIAMETER}) * ${PI} * (1 - var(--spinner-arc-fraction)))`,
@@ -569,10 +571,12 @@ export function Spinner({
           height: `var(${BOX_SIZE}, ${frameSize}px)`,
         },
       )}>
+      {/* The track is zero-sized by attribute. With no stylesheet, the
+          rotor's arc alone fills the box, instead of two discs side by side.
+          `ring` sizes both to the box. */}
       <svg
-        ref={syncRotationPhase}
-        width={frameSize}
-        height={frameSize}
+        width={0}
+        height={0}
         aria-hidden="true"
         {...stylex.props(styles.ring)}>
         <circle
@@ -586,18 +590,28 @@ export function Spinner({
             trackOpacityStyles[shade],
           )}
         />
-        <circle
-          cx="50%"
-          cy="50%"
-          r={diameter / 2}
-          strokeWidth={border}
-          // The size's own dash, for the render with no stylesheet. The rule
-          // above composes the same lengths from the resolved diameter, so a
-          // themed ring keeps this fraction of arc rather than this length.
-          strokeDasharray={`${arcLength} ${circumference - arcLength}`}
-          {...stylex.props(styles.circle, styles.arc)}
-        />
       </svg>
+      <span
+        ref={syncRotationPhase}
+        aria-hidden="true"
+        {...stylex.props(styles.rotor)}>
+        <svg
+          width={frameSize}
+          height={frameSize}
+          {...stylex.props(styles.ring)}>
+          <circle
+            cx="50%"
+            cy="50%"
+            r={diameter / 2}
+            strokeWidth={border}
+            // The size's own dash, for the render with no stylesheet. The rule
+            // above composes the same lengths from the resolved diameter, so a
+            // themed ring keeps this fraction of arc rather than this length.
+            strokeDasharray={`${arcLength} ${circumference - arcLength}`}
+            {...stylex.props(styles.circle, styles.arc)}
+          />
+        </svg>
+      </span>
     </span>
   );
 

package/src/Switch/Switch.tsx

@@ -52,7 +52,6 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useAnnounce} from '../hooks/useAnnounce';
-import {useResolvedRequired} from '../hooks/useResolvedRequired';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {usePressFeedback} from '../hooks/usePressFeedback';
@@ -867,10 +866,6 @@ export function Switch({
   const pressable = usePressFeedback();
   const descriptionID = useId();
   const statusMessageID = useId();
-  // Announce the effective required state (form default included) while the
-  // native `required` stays bound to the explicit `isRequired` so a layout
-  // default never switches on browser validation.
-  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
 
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
@@ -1003,7 +998,8 @@ export function Switch({
         aria-disabled={isDisabled ? 'true' : undefined}
         form={isDisabled ? '' : undefined}
         required={isRequired}
-        aria-required={isEffectivelyRequired ? 'true' : undefined}
+        // A form's required default sets nothing here: an off switch is an answer.
+        aria-required={isRequired ? 'true' : undefined}
         onChange={e => {
           if (isDisabled || isBusy) {
             return;

package/src/Switch/useSwitchTouch.ts

@@ -23,7 +23,7 @@ import type {GestureTouch} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {
-  createAnimator,
+  createMotionAnimator,
   type Animator,
   type MotionCurve,
 } from '../motion/animator';
@@ -282,15 +282,15 @@ export class SwitchTouchController {
       return;
     }
     registerSwitchTable();
-    this.thumb = createAnimator(elements.thumb);
+    this.thumb = createMotionAnimator(elements.thumb);
     // The layer rests clear (its class's opacity 0) while the visuals show
     // the value; from here its opacity is the animator's.
-    this.fade = createAnimator(elements.track, {
+    this.fade = createMotionAnimator(elements.track, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });
     this.fade.set({opacity: 0});
-    this.shadow = createAnimator(elements.thumb, {
+    this.shadow = createMotionAnimator(elements.thumb, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });

package/src/Table/BaseTable.tsx

@@ -14,7 +14,14 @@
  * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
-import {memo, useRef, type ReactElement, type ReactNode, type Ref} from 'react';
+import {
+  memo,
+  useId,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react';
 import {isRenderable} from '../utils/isRenderable';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
@@ -423,6 +430,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
   } satisfies TableRenderProps);
 
   // --- Plugin pipeline: header cells ---
+  const headerLabelIdBase = useId();
   const headerCells = resolvedColumns.map((col, columnIndex) => {
     const headerContent = col.header ?? col.key;
 
@@ -477,28 +485,54 @@ function BaseTableInner<T extends Record<string, unknown>>({
     const hasSlots =
       before != null || after != null || overlay != null || below != null;
 
-    const headerInner = hasSlots ? (
+    const labelRow = isRenderable(after) ? (
+      <div {...stylex.props(styles.headerLabelRow)}>
+        {resolvedContent}
+        {after}
+      </div>
+    ) : (
+      resolvedContent
+    );
+
+    // The overlay is a control of its own. Keep its name and value out of the
+    // header's name.
+    const namesOwnHeader =
+      isRenderable(overlay) &&
+      mergedHtmlProps['aria-label'] == null &&
+      mergedHtmlProps['aria-labelledby'] == null;
+    const labelId = `${headerLabelIdBase}-label-${columnIndex}`;
+    const belowId = `${headerLabelIdBase}-below-${columnIndex}`;
+    const hasBelow = isRenderable(below);
+
+    const headerInner = !hasSlots ? (
+      resolvedContent
+    ) : namesOwnHeader ? (
+      <>
+        {/* Inline, so the cell's text-overflow still reaches the label. */}
+        <span id={labelId}>
+          {before}
+          {labelRow}
+        </span>
+        {overlay}
+        {hasBelow && <div id={belowId}>{below}</div>}
+      </>
+    ) : (
       <>
         {before}
-        {isRenderable(after) ? (
-          <div {...stylex.props(styles.headerLabelRow)}>
-            {resolvedContent}
-            {after}
-          </div>
-        ) : (
-          resolvedContent
-        )}
+        {labelRow}
         {overlay}
         {below}
       </>
-    ) : (
-      resolvedContent
     );
+    const headerNameProps = namesOwnHeader
+      ? {'aria-labelledby': hasBelow ? `${labelId} ${belowId}` : labelId}
+      : {};
 
     return (
       <HeaderCellComponent
         key={col.key}
         {...mergedHtmlProps}
+        {...headerNameProps}
         {...headerTitleProp}
         contextMenuActions={cellRenderProps.contextMenuActions}
         xstyle={cellRenderProps.xstyle}>

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -865,7 +865,7 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
     }
   }, []);
 
-  // Clean up observer on unmount
+  // Releases the table resize observer on unmount.
   useEffect(() => {
     return () => {
       unobserveTableRef.current?.();
@@ -934,6 +934,7 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
     };
   }, []);
 
+  // Releases the resize gate on unmount.
   useEffect(() => {
     return () => {
       gateCleanupRef.current?.();

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -820,6 +820,7 @@ function StringListFilterControl({
       }}
       size={size}
       hasClear={hasClear}
+      presentation="popover"
     />
   );
 }

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -439,6 +439,8 @@ function PanelDividerModeWatch({
   const {mode} = useTheme();
   const themeName = useThemeName();
   const lastRef = useRef({mode, themeName});
+  // Syncs the panel dividers with the computed theme CSS after a color mode or
+  // theme change.
   useLayoutEffect(() => {
     const last = lastRef.current;
     if (last.mode === mode && last.themeName === themeName) {
@@ -703,6 +705,8 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
       }
     }
   }, []);
+  // Syncs the chevron transitions with the `animatedLayout` handle. Without a
+  // handle, the chevrons use the theme's turn.
   useLayoutEffect(() => {
     if (animatedLayout == null) {
       resetChevrons();

package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx

@@ -432,6 +432,8 @@ function PinnedDividerModeWatch({
   const {mode} = useTheme();
   const themeName = useThemeName();
   const lastRef = useRef({mode, themeName});
+  // Syncs the pinned divider with the computed theme CSS after a color mode or
+  // theme change.
   useLayoutEffect(() => {
     const last = lastRef.current;
     if (last.mode !== mode || last.themeName !== themeName) {