Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
|
AI review status for this pull request.
|
github-actions
Bot
added
the
needs:design-review
PR Analysis Report📚 Storybook Preview🧪 Sandbox PreviewNew ComponentsCircleCheckIndicator (@astryxdesign/lab) · View in Storybook
Modified ComponentsCheckboxInput (@astryxdesign/core) · View in Storybook
Component Size
Sizes are gzip. Import counts the JavaScript the import loads eagerly; CSS counts the package stylesheet rules referenced by the modules it can load from its own package, lazily loaded ones included. Bundle Size SummaryGzip figures measure each package's entry file, not the code an import pulls in.
Accessibility AuditStatus: No accessibility violations detected. Visual Regression55 of 502 shot(s) changed. A change here is a question, not a failure: check whether the after is the
and 35 more. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
This pull request is on hold for a spec decision. CircleCheckIndicator, its selection.multiselectCircle table entry and the one-frame touch timing of the core checkbox and radio marks rest only on the draft spec:AST-094 (FR1, FR2 and FR4, including FR4's narrowing of architecture:theme-tokens). An engineering owner needs to approve those claims, or name the spec that governs them, by commenting /approve-spec <full head SHA> on this pull request; the author may do so as an engineering owner. These changes are needed either way:
- Rebase or retarget once #8076, #8226 and their predecessors land, so this pull request carries only its own commit (about 1,270 lines) instead of 28,039 authored lines.
- CheckboxInput's press layer stays a 24 px rounded square over the 21.8 px circle, so every press tints past the circle; paint it on the indicator element or clip it to the indicator's radius.
CircleCheckIndicator.doc.mjsdocuments 20/24 px, but the circle draws at 18/21.8 px..changeset/selection-marks-touch-one-frame.mdshould be[feat], since it changes visual direction rather than restoring it.
[Automated review]
| { | ||
| name: 'size', | ||
| type: "'sm' | 'md'", | ||
| description: 'Control size: 20px or 24px.', |
There was a problem hiding this comment.
The circle draws at 18 px (sm) and 21.8 px (md) (circleCheck.stylex.ts:42, :52), not 20/24 px. The same text is repeated at :109 and :198.
| { | ||
| guidance: true, | ||
| description: | ||
| 'Map it with defineTheme({indicators: {checkbox: CircleCheckIndicator}}) so CheckboxInput and CheckboxList keep their semantics and focus ring.', |
There was a problem hiding this comment.
Mapped into CheckboxInput (and CheckboxList rows, which render one), the host still paints its 24 px, 4 px-radius press layer (CheckboxInput.tsx:88-119). Every mouse or touch press therefore tints a rounded square past the 21.8 px circle. Painting that layer on the indicator element, as the focus ring already is, or clipping it to the indicator's radius would keep the press round.
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [fix] Under a finger, a checkbox or radio mark now changes in the frame the selection lands, the way iOS shows a selection mark. The box or circle used to fade between its two colors over the theme duration, so a tap first showed half-filled frames. With a mouse the marks keep the theme duration and easing, and Reduce Motion is unchanged. |
There was a problem hiding this comment.
spec:AST-017 FR3 uses [fix] for a change that restores current visual authority and [feat] for one that intentionally changes visual direction. No current record states one-frame touch marks, so this should be [feat].
There was a problem hiding this comment.
Approval of this pull request waits on an owner decision. The new lab CircleCheckIndicator, its selection.multiselectCircle table entry and the one-frame touch timing of core's checkbox and radio marks rest only on draft spec:AST-094 FR1, FR2 and FR4, including FR4's narrowing of architecture:theme-tokens to pointer presentations, and no engineering owner has approved them. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, or names the spec that should govern instead; the author may do so if they are an engineering owner. Whatever the decision, please land the predecessor pull requests and rebase so only this change remains (the compare carries about 28,000 authored lines), then fix:
- CheckboxInput's 24 px press layer shows as a square around the 21.8 px circle (
CheckboxInput.tsx:88-119). - The docs give 20px and 24px, but the circle draws 18 px and 21.8 px (
CircleCheckIndicator.doc.mjs:32,:109,:198). uikit.selectionneeds@experimental(selection.ts:33), and the one-frame marks changeset should be[feat], not[fix].
[Automated review]
| { | ||
| name: 'size', | ||
| type: "'sm' | 'md'", | ||
| description: 'Control size: 20px or 24px.', |
There was a problem hiding this comment.
The circle draws 21.8 px at md and 18 px at sm (circleCheck.stylex.ts:42, :52), but this line, :109 and :198 say 20px or 24px. Please state the drawn diameters.
| { | ||
| guidance: true, | ||
| description: | ||
| 'Map it with defineTheme({indicators: {checkbox: CircleCheckIndicator}}) so CheckboxInput and CheckboxList keep their semantics and focus ring.', |
There was a problem hiding this comment.
Mapped hosts do keep their focus ring. However, CheckboxInput's press layer (CheckboxInput.tsx:88-119) is a 24 px rounded square, with a 6 px radius in the Storybook theme, so pressing tints a square around the 21.8 px circle. Painting the press on the indicator, or rounding the layer with the indicator's radius, would keep this promise.
| * circleCheck.test.tsx checks it). | ||
| */ | ||
|
|
||
| export const selection = { |
There was a problem hiding this comment.
Every other declaration the uikit namespace re-exports carries @experimental, motion/experimental.ts:14-15 promises it, and AST-017 FR21 requires it ("Declarations carry @experimental"). Please add a JSDoc block with @experimental here.
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [fix] Under a finger, a checkbox or radio mark now changes in the frame the selection lands, the way iOS shows a selection mark. The box or circle used to fade between its two colors over the theme duration, so a tap first showed half-filled frames. With a mouse the marks keep the theme duration and easing, and Reduce Motion is unchanged. |
There was a problem hiding this comment.
AST-017 FR3 uses [fix] for a change that restores current visual authority and [feat] for one that intentionally changes visual direction. No current record states one-frame touch marks, so this should be [feat].
| }); | ||
| }, [ref, recognizer, manageStyle]); | ||
|
|
||
| useIsomorphicLayoutEffect(() => { |
There was a problem hiding this comment.
Turning a live recognizer off cancels it (GestureRecognizer.ts:557-561), which calls onGesture from this layout effect. architecture:react-component-runtime INV3 asks the effect to name the external system it synchronizes; a comment here would cover it.
1ccf210 to
8b5b198
Compare
|
Posted by Cindy's agent on her behalf. Parts of this PR re-implement behavior that already exists, or is being specified, as a shared part of core. Converging keeps one implementation per behavior:
This is about where the behavior lives, not about the PR's intent. |
|
Agreed: one implementation.
|
8b5b198 to
4295e04
Compare
|
Pushed in 4295e04: the circle's mark keys on |
4295e04 to
5023c80
Compare
5023c80 to
6bcc609
Compare
…llowance under every primary pointer The useMenuPress record's FR9 puts the trigger's held finger under spec:AST-094 FR29 under every primary pointer (FR43), so a finger on a touchscreen laptop may drift 13 pt before the open, as on a phone. The trigger read (pointer: coarse) as its press started and took the long press's 10 px where the pointer was fine. Three cases fail until it does not: a 12 pt drift opens under a fine pointer too, a (12, 12) settle opens there, and nothing reads a pointer query, the trigger's press included.
…lowance under every primary pointer The useMenuPress record's FR9 governs the trigger's held finger by spec:AST-094 FR29 under every primary pointer (FR43). The trigger now hands the long press FR29's 13 px drift allowance whatever the primary pointer, so it no longer reads (pointer: coarse) as its press starts, and the menus drop their coarsePointer import. ContextMenu keeps the long press's own allowable movement. The changeset says the same.
Strict ESLint reported six unused bindings in files this pull request carries: the host's HAPTIC_SWITCH_ATTRIBUTE import, two unused imports in the pan's tests (scrollProbe, ScreenEdgePanGestureRecognizer), the swipe test's drift, the presented-hit-testing test's gestures, and a GestureHost test's before, which now asserts what it was read for: a second finger's moves leave the pan where it was.
…eal angular speed The release velocity of a rotation whose listener sets rotation = 0 on each change, at 2 degrees every 16 ms, read 4.363 rad/s against the 2.182 rad/s of the same stream without a re-base: the test asserted only more than 1.5. It now asserts the 2.18 rad/s (spec:AST-100 FR2), and fails.
The rotation's velocity tracker samples the raw unwrapped angle, which setting rotation does not move, so the setter's shift of the samples read each re-base as extra turn and doubled the release velocity of a listener that re-bases on every change. The setter no longer touches the tracker.
…mates while it runs The proof read the element's animations 230 ms in, after the dip had ended, and asserted only that every animated key is opacity, which an empty list passes: with the cross-fade removed from the plan (the move still landing), the proof still passed. It now reads the keyframe keys right after the call starts and asserts they include opacity and nothing else; the same mutant fails it. Chromium and WebKit pass. (F1's in-flight read from c648034.)
…roller, and its claimed moves are cancelled under pointer events Two comparisons stop at the shadow boundary, each failing a case: - once the host's listener on a recognizer's inner node has seen the finger, isFingerDownIn reads it as outside a light-DOM scroller around that root, so a scroll under it is not the finger's (FR20); - under inputMode 'pointer-events', a claimed pan on a shadow host cancels none of its finger's moves over the inner content, since the finger's target is the inner node and its touches reach the host retargeted (FR19).
…the flat tree isFingerDownIn and the pointer-events finger match compare with containsAlongFlatTree, as the scroll watch already does: a finger on content inside an open shadow root is down in the scroller around that root, and its touches, retargeted to the shadow host, match its pointer finger, so a claimed pan cancels its moves there (spec:AST-094 FR19, FR20).
…achments asks, and only then The host let the last attachment decide whether an element is an action group (useGestureRecognizer always passes the option), and never recomputed it at a detach: a plain attachment after the group's turned the group off, and a group's attachment released left a recognizer that never asked taking presses under a fine pointer. Fails until the host counts the attachments that ask.
…ents asks The host counts the attachments that pass actionGroup: true and keeps the element a group while one remains, recomputed at each detach. An attachment that passes false, as useGestureRecognizer does by default, no longer turns a group off, and a group's last asking attachment taking its leave ends the group.
… that content The presented hit test takes the document's elementFromPoint, which answers a shadow host for anything inside its open root, and compares with Node.contains, which stops at the boundary: a recognizer on a control inside a moving sheet's shadow root gets no finger, and the tap's click goes to the host. Fails until the hit test descends into open roots and compares along the flat tree.
Where a moving element is drawn away from its layout box, the host hit-tests what is drawn under the finger with the document's elementFromPoint, which answers a shadow host for anything inside its open root. The hit test now descends through each open root's own elementFromPoint and compares with the movers along the flat tree, so a recognizer on a control inside a moving sheet's shadow root gets its finger and the tap clicks that control.
…nt lets go The host's touch-action rules sit in an adopted sheet or a style element per document or shadow root, and were never removed, so a page whose last recognizer detached kept them, against spec:AST-094 FR24 (nothing touch-related remains after the last instance unmounts). Fails until a root's rules go with its last marked element.
…th its last marked element The touch-action writer records which elements it marked in each document or shadow root, and when the last one is unmarked (its last recognizer detached) it removes that root's adopted sheet or style element, so nothing touch-related remains after the last instance unmounts (spec:AST-094 FR24). A later mark writes the rules again; an element marked in another root first lets go of the old one.
… the inline style it reads - The motion registry, the host's engine gate and the README name the presented hit test as an engine workaround (spec:AST-013 FR6) with its review condition (re-measure on each iOS release; remove it once iOS WebKit hit-tests a compositor-moved element where it is drawn) and its regression fixture. - While a curve runs the animator holds the value it starts from inline, so presentation.ts and the README no longer say the inline style holds the end.
…core/internal/touch Core ships the internal entry @astryxdesign/core/internal/touch, which re-exports the gesture primitives for Astryx's own packages, and the Lab-import guard fails a Lab import of core outside core's exports (architecture:react-component-runtime INV13). The README and the barrel's header named internal workspace imports and said nothing here is exported; they now name that entry.
…ill needs the element, and the listeners that cancel The release note, the stream's header, the host's comment and the README said the stream is one passive listener per event type and that a document-capture stopPropagation no longer starves the recognizers. Such a stop never hid a listener on the same node, and some subscriptions cancel. They now say what changed: an app's window-capture stopPropagation, or a document-capture stopImmediatePropagation registered before core, no longer hides a touch; a recognizer that must claim still needs the touch to reach its element; the gesture host's touchend, click and contextmenu cancel while a claimer is attached and the page hold's touchmove while it holds; and the stream stays ahead of an app's window-capture listener only until a type's listener is re-added. The README's list of blocking touchmove listeners gains the claimed touch's target and the document while a claiming element moves.
…default it moves
The {stylexOptions} form of astryxStylex now passes StyleX
treeshakeCompensation: true unless the caller sets it. spec:AST-017 FR3
asks the release note to name the old and new default and the option
that restores the old one; it now does.
…er and for the two stops the input stream fixes - A still finger with sub-pixel jitter over a scroll view keeps its tap and scrolls nothing (spec:AST-094 FR18–FR22). - A tap is still recognized under an app's window-capture stopPropagation, and under a document-capture stopImmediatePropagation registered before core's: the recognizers hear touches on the window's capture phase. Chromium and WebKit pass.
…s once Where nothing that claims is attached, the host's touchend listener is passive and cannot cancel the engine's own click after a retargeted tap clicks what is drawn. The shared click guard swallows that late click whatever is attached; this case pins it, as asked on meta#8293.
This pull request sat on meta#8073's old head and carried old copies of the harness meta#8045 and meta#8046 landed on main. meta#8360 carries that foundation with main's harness, so after the merge this pull request's own diff is its three commits (the touch style keys, internal, and the press paint's priority over the coarse-pointer :active reset). The merge is clean.
The touch keys are internal, and core spells these conditions as literal keys wherever a style needs them. The stylex file's header called it the one place core spells them and cited spec:AST-012 FR2, and a test title said "for other packages": the header now names the keys as the reference spellings each literal is pinned to (spec:AST-094 FR13, spec:AST-012 FR9), and the test holds the same keys the resolver defines.
…r, not the devices A changeset tells consumers what changes, so it names the condition (a coarse primary pointer) and no longer claims "every touch device"; the simulator and emulator evidence stays in the pull request's description.
There was a problem hiding this comment.
Approval is on hold for an engineering owner's spec decision: no current record governs the Lab CircleCheckIndicator (its name, iOS look and measured geometry), its indicatorPressScope seam lets an indicator switch off CheckboxInput's pressed overlay and paint from CheckboxInput's private variables against component:CheckboxInput AV1 and architecture:component-theming-surface INV11, and the circle's 0 ms mark needs a ruling under spec:AST-094 FR4. An engineering owner records that decision by commenting /approve-spec followed by the full head SHA, and the author may do so as one. Whatever the decision, these changes are needed:
- Rebase once #8226 and #8562 land, so the pull request carries only its own 20 files; today 28,693 of its 30,389 authored lines come from those two.
- Scope the circle's touch press image to its CheckboxInput row (
CircleCheckIndicator.tsx:98-101): a mapped DropdownMenuCheckboxItem paints the press twice inside the ring. - Pass a
modeto the nestedThemein both mapped stories, and correct the cross-package reason inCircleCheckIndicator.tsx:59-62andCheckboxInput.tsx:77-81, since Lab's StyleX resolution lets it match core's markers.
[Automated review]
| backgroundImage: { | ||
| default: null, | ||
| '@media (pointer: coarse)': 'var(--_press-paint-image, none)', | ||
| }, |
There was a problem hiding this comment.
This paints whatever --_press-paint-image an ancestor declares, not only CheckboxInput's. With the circle mapped to checkbox, a DropdownMenuCheckboxItem row (an interactive Item styled with interactionOverlayStyles.backgroundColor) paints its own press and this layer paints the same image again over the unchecked ring's clear interior, so the ring reads two coats where the rest of the row reads one. CheckboxInput's own layer keys its image on its row (stylex.when.ancestor('[data-astryx-press="on"]', indicatorScope)); handing down a dedicated image variable, as the row already does for the mouse fill, or keying this to the CheckboxInput row would keep it to one coat. A mapped menu row in the browser spec would hold it.
| // Hover and press come from the host as inherited private properties | ||
| // (CheckboxInput's indicatorStateVars): an ancestor selector on core's | ||
| // scope marker compiles to a different class in this package, so it never | ||
| // matches. |
There was a problem hiding this comment.
Lab compiles core's .stylex imports through scripts/stylex-module-resolution.cjs (packages/lab/babel.config.cjs), which exists so that a compile-time stylex.when.ancestor() on a core marker does match, so an ancestor selector on indicatorScope from this file would match. The private variables matter only for indicators compiled as app code; this comment (and CheckboxInput.tsx:77-81) should name that constraint, or the circle can read hover and press through indicatorScope as CheckboxIndicator does.
| render: function MappedCheckboxListStory() { | ||
| const [value, setValue] = useState<string[]>(['beach']); | ||
| return ( | ||
| <Theme theme={circleTheme}> |
There was a problem hiding this comment.
This nested Theme has no mode, so it defaults to 'system' (colorScheme: 'light dark') and follows the operating system rather than Storybook's colour-mode toolbar: in dark mode on a light system this story and MappedCheckboxInput (line 88) render light-theme ink on the dark canvas. Passing the toolbar's mode (or a pinned one) fixes both.
| content: { | ||
| default: '""', | ||
| [stylex.when.descendant( | ||
| '[data-astryx-indicator-press="self"]', | ||
| indicatorPressScope, | ||
| )]: 'none', | ||
| }, |
There was a problem hiding this comment.
Over a marked indicator CheckboxInput stops painting its pressed overlay. component:CheckboxInput AV1 (current) says a theme may replace the indicator but "CheckboxInput still paints focus and pressed feedback on the resolved root", and the comment above this layer says it exists so "a theme replacement cannot accidentally drop the component's pressed contract". An indicator that carries the marker and paints nothing now drops it. This needs an engineering owner's ruling (amend the record, or keep the owner painting) before it can land.
| /** | ||
| * Marks a theme indicator that paints its own press layer, for a shape the | ||
| * owner's rounded-square layer would tint past (a circle). | ||
| * | ||
| * The indicator applies this marker together with | ||
| * `data-astryx-indicator-press="self"` and paints the press itself from what | ||
| * the owner hands down as inherited private properties (CheckboxInput: | ||
| * `--_indicator-press-fill` for a mouse press, `--_press-paint-image` for a | ||
| * touch press, `--_indicator-hover` for hover). The owner finds it with | ||
| * `stylex.when.descendant()` and leaves its own layer off. | ||
| */ | ||
| export const indicatorPressScope: ReturnType<typeof stylex.defineMarker> = | ||
| stylex.defineMarker(); |
There was a problem hiding this comment.
This ships on the stable @astryxdesign/core/Indicator/indicator.markers.stylex subpath with no experimental boundary, and its contract tells theme indicators to read CheckboxInput's private: true variables, which architecture:component-theming-surface INV11 says "must not be authored directly or relied on by consumers". Once indicators outside Astryx rely on it, renaming those variables breaks them; the owner ruling on the open spec question decides whether this lands, and in what form.
Depends on #8226. Review only this PR's change: vjeux/astryx@bf74a5b...32cc71b (it also lists #8562's commits). Carries #8562 (Core's internal entries) as a dependency; if the entries land differently, this follows her decision.
User need
iOS marks multiple selection with a circle (Mail and Files edit modes,
.multiselect()lists). Astryx only has the box, so iOS products hand-roll one.Evidence
iOS 26.2 Mobile Safari: a finger (magenta ring) toggling rows; each circle changes in one frame. Below, UIKit's circle and ours at 3×:
A held finger on a mapped CheckboxInput, iOS 26.2: a square before, round after. Android 15 Chrome: that press (½ speed) and a row tap (¼ speed):
Both sizes, every state:
Problem and solution fit
CircleCheckIndicator(lab), a multiSelection-family indicator, draws an empty ring, or a filled circle with a checkmark (a bar when partial).circleCheck.table.ts):mdat Large text,smat xSmall, mirrored for StyleX and held to the table by a test.TOUCH_QUERY), on every touch device; with a mouse the theme fade, instant under Reduce Motion.indicatorPressScope+data-astryx-indicator-press="self".Current specification
spec:AST-094FR1, FR2, FR13; lab first, on Core's public subpaths.design:reduced-motion(current) DR3.indicatorsby name; core's API is unchanged.Public delta and caller burden
CircleCheckIndicator(IndicatorProps<'multiSelection'>). Opting in is one theme line; hosts keep semantics and focus:indicatorPressScopemarker; lab: the harness as a dev dependency.analyze-pr.js).Design and alternatives
shapeprop (the registry swaps visuals by name) and a rounded box.Scope
Testing
CI=true pnpm lint0 errors;pnpm buildthen rootpnpm typecheckclean; the full core suite (16 workers) passes with no failure (687 files, 16,786 tests); CircleCheckIndicator and SelectionMarks pass in Chromium (16) and CircleCheckIndicator in WebKit (9); the registry contract passes over 1,037 items; the Lab internal-imports codemod moves nothing; a mouse click still selects a card. The node project's only reds are main's:story-tree.test.ts(main's A11y story titles, fixed in test(storybook): run the story-tree check where Storybook is built, and bring the tree back to its shape #8509) andcache.test.mjs's two npm-lock cases (a Node started under another file name, fixed in fix(cli): a crashed run's release install is recognized by the Node it ran on, whatever its name #8520).CI=true pnpm lint0 errors;pnpm buildthen rootpnpm typecheckclean; CircleCheckIndicator Chromium 16 passed with SelectionMarks, WebKit 9/9; registry-contract (preview): generate-data, thenverify-full-catalogover 1,036 items, passes; the Lab-import codemod moves nothing; units 16,126 underCI=true, with load timeouts that pass alone (test(Selector, MultiSelector): wait for the on-demand sheet module before the first open #8642's sheet first loads; a cold import of the root barrel); mouse clicks still activate.CI=true pnpm lint0 errors;pnpm buildthen rootpnpm typecheckclean; CircleCheckIndicator Chromium 16 passed with SelectionMarks, WebKit 9/9; registry-contract (preview): generate-data, thenverify-full-catalogover 1,036 items, passes; the Lab-import codemod moves nothing; units 16,088, with load timeouts that pass alone (test(Selector, MultiSelector): wait for the on-demand sheet module before the first open #8642's sheet, test(Item): wait for the swipe layer's module, not a one-second window #8352's swipe warm-up); mouse clicks still activate.selection.multiselectCircle: the geometry lives in Lab, so Core's table gains nothing (Lab takes no changeset).check:changesetspasses;CI=true pnpm lint0 errors.circleCheck.table.ts, moved unchanged from Core's selection table: Core's table-imports rule keeps a component's table out of Core's internal entries, and the circle's test can no longer read Core by module path), and merges the instant-marks change at f23d22d and chore(core): Lab reaches Core's pan recognizer, gesture types, touch presentation and motion through internal entries #8562 abb3e0f: units 16,074 (lab included); CircleCheckIndicator Chromium 16 passed with SelectionMarks, WebKit 9/9;lab-core-imports,core-internal-entriesand the table-imports test pass; registry-contract (preview): generate-data, thenverify-full-catalogover 1,036 items, passes;pnpm buildthen rootpnpm typecheckclean;CI=true pnpm lint0 errors; mouse clicks still toggle. A touch-support-bundle "is absent from the root entry" red on heads carrying feat(core): the internal touch foundation: press tracking and the animator #8076 with chore(core): Lab reaches Core's pan recognizer, gesture types, touch presentation and motion through internal entries #8562 is settled by test(core): a touch component's import carries its gesture code, and nothing else does #8671, not here; a MultiSelector bottom-sheet unit timeout, when one shows, is test(Selector, MultiSelector): wait for the on-demand sheet module before the first open #8642's.pnpm buildthen rootpnpm typecheckclean;CI=true pnpm lint0 errors; mouse clicks still toggle.pnpm vitest run packages/lab/src/CircleCheckIndicator: 14 pass. They cover the states, the decorative semantics, children replacing the mark, the theme mapping into CheckboxInput and CheckboxList, the mirror against the table, the shipped diameters and ring, and the durations: the coarse-pointer arm with no platform gate, the mouse's theme token, and the policy's instant key for a mouse under Reduce Motion.pnpm test:interaction CircleCheckIndicator, Chromium 9/9 and WebKit 9/9 (the official Playwright image). Under a finger: a tap fills the circle in the frame the selection lands while the row stays a checkbox; every rAF sample of a tap is wholly empty or filled (storyboard); the mouse control keeps the fade. Under Reduce Motion: a finger keeps the one-frame change and a mouse changes at once. Press and hover: a held row and a mouse press paint the circle's own round layer while the host's layer is off, and a mouse hover tints the ring (all three failed before the inherited properties). Forced colors: the ring comes back as a 1px border, and a checked circle keeps its check.