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
Generated by PR Enrichment workflow | View current CI run |
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
Approval waits on an engineering owner's decision. The calendar toggle's timing moves from the theme's motion tokens to UIKit constants under draft AST-094 (FR1, FR4), which would narrow the current theme-tokens architecture (INV3) for touch presentations, and the reading-direction chevron that turns down has no governing spec yet. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request once the records say what is approved; the author may do so as an engineering owner. Whatever is decided, these need changing:
- Land the stacked predecessors first, so this pull request's compare holds its own 371-line commit instead of 36,310 lines.
- Make the
lintcheck pass: ESLint runs out of memory on this head but passes onmain. - Add real-browser evidence for DateTimeInput's new cross-fade and chevron turn and for the RTL chevron (AST-013 FR10), since the browser spec covers only the DateInput story in LTR.
- Tag
.changeset/calendar-toggle-uidatepicker-timing.md[feat]rather than[fix]and name the old chevron, because it changes visual direction (AST-017 FR3).
[Automated review]
856179f to
93d2ed7
Compare
There was a problem hiding this comment.
Approval waits on an engineering owner's decision: the calendar toggle's timing moves from the theme's motion tokens to UIKit constants under draft AST-094 (FR1, FR4), which would narrow the current theme-tokens architecture (INV3) for touch presentations, and the reading-direction chevron that turns down has no governing spec yet. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request once the records say what is approved; the author may do so as an engineering owner. Whatever is decided, these still need changing:
- Land the stacked predecessors first, so this pull request's compare holds its own 371-line commit instead of 36,158 lines.
- Tag
.changeset/calendar-toggle-uidatepicker-timing.md[feat]rather than[fix]and name the old chevron, because it changes visual direction (AST-017 FR3). - AST-094 FR7 cites AST-090, which only #8003 proposes, so land that first or qualify the sentence.
[Automated review]
93d2ed7 to
b2a1fa4
Compare
b2a1fa4 to
f80dc69
Compare
There was a problem hiding this comment.
Approval waits on an engineering owner's decision: the calendar toggle's timing moves from the theme's motion tokens to UIKit constants under draft AST-094 (FR1, FR4), which would narrow the current theme-tokens architecture (INV3) for touch presentations, while the reading-direction chevron and keeping the full 250 ms fade and 90° turn under Reduce Motion (draft FR8) have no governing spec yet. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request once the records say what is approved; the author may do so as an engineering owner. Whatever is decided, these still need changing:
- Land the stacked predecessors first, so this pull request's compare holds its own 671-line commit instead of 36,863 lines.
- Tag
.changeset/calendar-toggle-uidatepicker-timing.md[feat]rather than[fix]and name the old chevron and the old 0.01 s Reduce Motion timing, because it changes visual direction (AST-017 FR3). - AST-094 FR7 cites AST-090, which only #8003 proposes, so land that first or qualify the sentence.
[Automated review]
There was a problem hiding this comment.
Approval waits on an engineering owner's decision: the calendar toggle's timing moves from the theme's motion tokens to UIKit constants under draft AST-094 (FR1, FR4), which would narrow the current theme-tokens architecture (INV3) for touch presentations, while the reading-direction chevron and keeping the full 250 ms fade and 90° turn under Reduce Motion (draft FR8) have no governing spec yet. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request once the records say what is approved; the author may do so as an engineering owner. Whatever is decided, these still need changing:
- Land the stacked predecessors first, so this pull request's compare holds its own 1,001 lines instead of 37,193.
- Attach an iOS simulator recording of the CSS fade jumping after a busy commit, or keep the fades as CSS transitions, because moving them into an Effect needs that Mobile Safari evidence (component-style-authoring INV2, AST-013 FR10).
- Tag
.changeset/calendar-toggle-uidatepicker-timing.md[feat]rather than[fix]and name the old chevron and the old 0.01 s Reduce Motion timing (AST-017 FR3). - AST-094 FR7 cites AST-090, which only #8003 proposes, so land that first or qualify the sentence.
[Automated review]
c4eeaa3 to
0fbbb07
Compare
0fbbb07 to
09bc4ee
Compare
The pager's track carried data-month-track, a new public data attribute that only the browser proofs read. The pager already holds the track through trackRef, so the attribute goes. The proofs reach the track as the months viewport's only child, and the mouse case tells the snap scroller from the pager by its overflow.
The DateInput sheet over two centuries and the DateTimeInput sheet sit on a raw page that scrolls with the document. A phone check of their month and year toggle runs on this page instead of Storybook.
|
/approve-spec 8ddf2ae |
There was a problem hiding this comment.
Changes requested. Every record edit here carries an engineering owner's approval for this head; three things still need fixing:
- #8200's description no longer carries the
Stack: #8200 → #8206line and #8200's head is not part of this branch, so this pull request is reviewed alone and its 7,177 authored lines frommainhave no size exemption; restore the identical line in #8200's description and merge #8200's head here so the two are judged as a stack. - The Android emulator evidence that
spec:AST-094Platform support, DEC-27 and DEC-31 require at the exact head is missing, because the cited run is at an earlier head andmainhas since changed the shared pager, animator and layer modules beneath this one, so please rerun the DEC-27 set (Chrome with Gboard at normal speed, at 4× CPU and with animations removed) against this head. - Newly live check: the real-iPhone run is also at an earlier head and cannot carry under
spec:AST-094DEC-31 for the same reason, as the description notes, so please repeat it at this head and record the result.
Browser checks of the chevron in both reading directions and of a tap on Done during the fade match the records. Non-blocking: DateInput's wheels panel and Done still flip the inherited pointer-events on each toggle (TouchDateField.tsx:663), which the browser case named "flips no inherited property" cannot catch, and the repeated toggle-token comment could live once beside TOGGLE_DURATION.
|
/approve-spec 184de63 |
There was a problem hiding this comment.
Changes requested on this stack; a pull request lands only when it and every pull request below it are approved.
#8200
Approved pending CI: CI has not run on this draft head yet; it runs once the pull request is marked ready for review. No blocking findings.
#8206
Changes requested:
- The Android emulator evidence that
spec:AST-094Platform support and DEC-27 require for the toggle's touch claims (the cross-fade, the tap shield, the chevron and a finger's day tap) is not at this head, because the cited set ran at an earlier head thatmainhas since changed beneath and this head merges #8200 rather thanmain, so please run the DEC-27 set (Chrome with Gboard in the emulator at normal speed, with animations removed and on a slow-device profile) against this head and record it in the description.
Every record edit carries an engineering owner's approval for this head, and the real-iPhone run recorded at the previous head carries because this head's code is byte-identical. Non-blocking: DateInput's wheels panel and Done still flip the inherited pointer-events on each toggle (TouchDateField.tsx:663), which the "flips no inherited property" browser case cannot catch.
Whole stack
Passes: the two pull requests agree on the records, the changesets and the code, with no public API change.
MonthPane, monthGridKeyTarget and useMonthGridFocus move back into MonthScroller.tsx, and MonthPager imports them from there. No behavior changes.
useMonthYearToggle replaces useFadeInert and useChevronDip: it swaps inert at the fade's end, hands focus over and dips the chevron, and `toggle` does all three. The wheels no longer lay out ahead of the toggle, and the chevron's quarter turn is a literal in both fields.
A Reduced Motion case's comment named two pull requests. It now names only the animator default it relies on. Five comment sentences ran past 25 words, or past 20 for an instruction. Each now reads as two or more sentences, with the same meaning.
MonthScroller.tsx now exports MonthPane, monthGridKeyTarget and useMonthGridFocus, with their types, and MonthPager imports them. DateInput's record names them in its Ownership boundary, as the one month grid both calendars render.
Under a finger, DateTimeInput's month/year toggle faded its calendar out while the wheels faded in. DateInput fades only the wheels: they sit on an opaque layer in the sheet's color, and the calendar stays drawn beneath them. DateTimeInput now does the same. Its wheels surface takes the opaque layer and its own stacking context. Under a finger its calendar keeps its style, and aria-hidden and inert keep it out of reach. With a mouse it still hides when the wheels show. A new interaction test runs on both fields. Before this change it failed for DateTimeInput, whose calendar ran an opacity fade from 1 to 0.
Four comment sentences in the month/year toggle's code and tests ran past 25 words. Each now reads as two sentences, with the same meaning. The toggle spec's header also names the new case on the calendar beneath the wheels.
FR25 now states that in both touch fields the wheels fade over the calendar, on an opaque layer in the sheet's color. The calendar stays drawn beneath them, hidden from assistive technology. The FR25 verification row names the new test for both fields. The DateTimeInput FR15 row follows the renamed toggle test.
There was a problem hiding this comment.
Changes requested on both pull requests in this stack, and #8206's approval also waits on an engineering owner's decision. A pull request lands only when it and every pull request below it are approved.
#8200
Changes requested:
- The Android emulator evidence that
spec:AST-094Platform support and DEC-27 require for the pager's touch claims is not at this head: the recorded sets ran at earlier heads, and this head changes the pager's own code and merges amainthat changed the shared pager and layer modules, so DEC-31 cannot carry them; please run the DEC-27 set (Chrome with Gboard in the emulator at normal speed, with animations removed and on a slow-device profile) against this head and record it in the description.
#8206
Approval waits on an engineering owner: this head rewrites the draft component:DateInput FR25 (the wheels over an opaque plate with the calendar drawn beneath in both fields, and the shared useMonthYearToggle hook), and FR9's finger sentence, FR24 and component:DateTimeInput FR15 also need approval at this head. An engineering owner records the decision by commenting /approve-spec <full head SHA> on this pull request; the author may do so as an engineering owner.
Changes requested:
packages/core/src/DateInput/useMonthYearToggle.tsis a new internal shared module, imported byTouchDateField.tsxandTouchDateTimeField.tsx, that no current record names, so it needs an owner API decision that says why existing modules are not enough, which an approval of FR25 at this head would record.- The device evidence that
spec:AST-094Platform support, DEC-27 and DEC-31 require for the toggle's touch claims is not at this head: the description marks both the iPhone run and the Android emulator set pending, and this head changes the toggle's code, so the earlier runs do not carry.
Non-blocking: DateInput's wheels panel and Done still flip the inherited pointer-events on each toggle (TouchDateField.tsx:662), and one import sits below a statement (TouchDateField.tsx:152).
Whole stack
Passes: the two pull requests agree on the records, the changesets and the code, with no public API change.
| * <button ref={titleRef} onClick={() => toggle(!isWheelOpen)} /> | ||
| * ``` | ||
| */ | ||
| export function useMonthYearToggle({ |
There was a problem hiding this comment.
This hook is a new internal shared module: TouchDateField.tsx and ../DateTimeInput/TouchDateTimeField.tsx both import it, and no current record names it (architecture:knowledge-contracts DEC-22). Only FR25's new sentence at this head does, and no engineering owner has approved it here yet. An /approve-spec for this head that covers FR25 settles it; the description already shows the usage and why useFocusTrap, useEntryAnimation, useSettledOpen and motion/reducedMotion.ts do not fit.
The reduced-motion constants' import sat below the module's first statement. It now sits with the other imports. No behavior change.
|
/approve-spec 6c86a5a |
|
/revoke-spec 6c86a5a |
There was a problem hiding this comment.
Changes requested on both pull requests in this stack, and #8206 also waits on an engineering owner's decision; a pull request lands only when it and every pull request below it are approved.
#8200
Changes requested:
- The Android emulator evidence that
spec:AST-094Platform support and DEC-27 require for the pager's touch claims is not at this head, because the recorded sets ran at earlier heads that DEC-31 cannot carry, so please run the DEC-27 set (Chrome with Gboard in the emulator at normal speed, with animations removed and on a slow-device profile) against this head and record it in the description.
#8206
Approval waits on an engineering owner, who records the decision by commenting /approve-spec <full head SHA> on this pull request (the author may do so as an engineering owner): the draft component:DateInput FR9 finger sentence, FR24 and FR25 and component:DateTimeInput FR15 need approval at this head, since the approval posted for it was withdrawn.
Changes requested:
packages/core/src/DateInput/useMonthYearToggle.tsis a new internal shared module, imported byTouchDateField.tsxandTouchDateTimeField.tsx, that no current record names, so it needs an owner API decision that says why existing modules are not enough, which an approval of FR25 at this head would record.- The Android emulator set that
spec:AST-094Platform support and DEC-27 require for the toggle's touch claims is still pending at this head, while the iPhone side-by-side now in the description covers the real-device part.
Non-blocking: DateInput's wheels panel and Done still flip the inherited pointer-events on each toggle (TouchDateField.tsx:662).
Whole stack
Passes: the two pull requests agree on the records, the changesets and the code, with no public API change.
There was a problem hiding this comment.
Changes requested on both pull requests in this stack, and #8206 also waits on an engineering owner's decision; a pull request lands only when it and every pull request below it are approved.
#8200
Changes requested:
- The Android emulator set that
spec:AST-094Platform support and DEC-27 require for the pager's touch claims is not at this head, since the recorded sets ran at earlier heads with different code, so please run the DEC-27 set (normal speed, animations removed and a slow-device profile) against this head and record it in the description. - Regression: the merge with
mainchangedmotion/uikit/gestures.ts, which the pager imports, andmotion/MEASUREMENTS.md, which this pull request changes, so under DEC-31 the iPhone run has to be taken again at this head, and the description marks it pending.
#8206
Approval waits on an engineering owner, who records the decision by commenting /approve-spec <full head SHA> on this pull request (the author may do so as an engineering owner): the draft component:DateInput FR9 finger sentence, FR24 and FR25 and component:DateTimeInput FR15 need approval at this head.
Changes requested:
packages/core/src/DateInput/useMonthYearToggle.tsis a new internal shared module, imported byTouchDateField.tsxandTouchDateTimeField.tsx, that no current record names, so it needs an owner API decision that says why existing modules are not enough, which an approval of FR25 at this head would record.- The Android emulator set that
spec:AST-094Platform support and DEC-27 require for the toggle's touch claims is still pending at this head. - Regression: the merge with
mainchangedmotion/MEASUREMENTS.md, which this pull request changes, andhooks/focusableSelector.ts, whichuseMonthYearToggle.tsimports, so under DEC-31 the earlier iPhone run no longer carries and has to be taken again at this head.
Non-blocking: DateInput's wheels panel and Done still flip the inherited pointer-events on each toggle (TouchDateField.tsx:662).
Whole stack
Passes: the two pull requests agree on the records, the changesets and the code, with no public API change.
Batch: B4 · DateInput and DateTimeInput calendar toggle and selection
Stack: #8200 → #8206
Depends on #8200. Review only this pull request's change: https://github.com/vjeux/astryx/compare/f34d87f74a9519db204c719ea68f44d1c908470c..65a8bb1c0fe963b241c5051862c5de96b519059a
User impact
Under a finger, DateInput's month/year toggle fades linearly with a 180° flip, and DateTimeInput's swaps at once. Now in both, the wheels fade over the calendar on
--duration-medium-min, and the calendar stays drawn beneath them. The chevron points along the reading direction and turns a quarter. A finger's tap selects a day at once. A mouse keeps the current toggle.Visual authority
spec:AST-094FR45: "In a component whose main interaction is a tap", a tap-started motion with a measured duration "plays the theme duration token whose value in the Storybook theme (neutral) is nearest that measurement, with the easing for its kind (entrance, exit or move)"; "an in-place toggle cross-fade is not an exit". The toggle plays--duration-medium-min(225 ms in neutral; UIKit's 250 ms stays the reference), arriving on--ease-entrance, leaving on--ease-exit; the chevron turns on--ease-move. The day-tap rule is a specs decision (FR9).For the owner:
component:DateInputFR24 records the chevron's direction, quarter turn, Reduce Motion dip and FR45 timing. FR9 records the day-tap rule. FR25 records the tap shield, the focus hand-off, the internaluseMonthYearTogglehook and one look for both fields (Specs decision, Nov 11 2026).component:DateTimeInputFR15 follows FR24 and FR25 and records Done's focus hand-off. All need/approve-specat this head.Commit 7, the tab-stop fix, changes the month pane in #8200's
MonthScroller.tsxand turns FR15's test green.State matrix
playReducedMotionDip) whose turn lands mid-dip; with a mouse, at once.Writing rubric results
Over
component:DateInputFR9, FR24 and FR25,component:DateTimeInputFR15 and their verification rows: R1 narration, R2 research, R4 rejected alternatives, R5 change references, R6 open questions: none. R3 evidence: test names only.Scope
Testing
This head, 65a8bb1, merges #8200's new head f34d87f, which merges
main4245f38 (through d9d7b10). Git merged every file with no conflict. The sandbox's page list and export routes keep main's two new pages and this pull request's page, andmotion/MEASUREMENTS.mdkeeps both sides' lines. Main also changed the gesture code under both sheets: a tap that wobbles at a scroll edge (#10829) and the menu press (#8078). Its Popover fix (#11177) changeshooks/focusableSelector.ts, whose selectoruseMonthYearToggleimports.pnpm typecheck0, afterpnpm buildas CI runs it;pnpm lint:strict,check:repoincluded, 0 errors, and no warning in this pull request's files; Changeset coverage passes;pnpm review:pre0 findings; the whole vitestuiproject, 993 files, 24,478 tests passed. Every DateInput and Calendar interaction spec, against Storybook built at this head, at one worker: Chromium 69 passed, 4 skipped. WebKit throughwebkit-container.mjswith CI's four CPUs: 64 passed, 9 skipped. The DateInput and Calendar accessibility contracts: 111 passed.uiproject had one failure. A MultiSelector case ran past its 30 s deadline, at 32.1 s, at a load average near 70. This pull request doesn't touch MultiSelector; at this head the case took 7.2 s.Below it, 6c86a5a moves one import in
TouchDateField.tsxup with the other imports, above the module's first statement. No behavior changes.Below that, 6113b9d merges #8200's earlier head f26df1b, which merges
mainf27380a, rewrites six comments and namesMonthScroller.tsx's exports in DateInput's record. Git stopped on two files. In DateTimeInput's record, FR14 and its verification row take main's looping minute wheel (#10953), and FR15 keeps this pull request's rows. Themotion/uikit/datePicker.tsheader keeps this pull request's calendar sentence and #8200's shorter sentences. Every other file merged with no conflict.Below the merge, af33cf0 follows a specs decision (Nov 11 2026): DateTimeInput keeps its calendar drawn under the wheels, as DateInput does. It gives DateTimeInput's wheels surface an opaque layer in the sheet's color, with its own stacking context. Under a finger its calendar no longer fades or hides, and
aria-hiddenandinertkeep it out of reach. With a mouse it still hides when the wheels show. a277007 splits four comment sentences that ran past 25 words. 0295280 states the one look in DateInput FR25 and updates two verification rows, docs only.Red first: the new case "the wheels fade in on an opaque plate, and the calendar stays drawn beneath them" runs on both fields. Against Storybook built at 6404e3d, DateInput passed and DateTimeInput failed: its calendar ran an opacity fade from 1 to 0. At this head both pass, in Chromium and in WebKit.
6404e3d applied the review of new internal modules. 6300c56 merges #8200's head e0fc1d6, which keeps the month pane and its grid focus in
MonthScroller.tsx. This pull request's edits toMonthPane.tsxmove there unchanged. 1eba81b foldsuseFadeInertanduseChevronDipinto one hook,useMonthYearToggle. It dropsuseWheelsWarmUp: in WebKit, the wheels' early layout made no measurable difference. It writes the chevron's quarter turn as a literal, and a test holds it to the UIKit table. 6404e3d names the hook in DateInput FR25, docs only.TouchDateField.tsx0 warnings;pnpm typecheck0; the DateInput and DateTimeInput unit tests: 25 files, 1,080 tests passed.pnpm check:repo0, knowledge and changesets included; Changeset coverage passes;pnpm review:pre0 findings; the whole vitestuiproject, 992 files, 24,419 tests passed.pnpm typecheck0;pnpm lint:strict0 errors, and no warning in this pull request's files.webkit-container.mjswith CI's four CPUs: 64 passed, 9 skipped.uiproject, 24,244 passed; Chromium 69 passed, 4 skipped; WebKit 64 passed, 9 skipped.The head before, 184de63, merges #8200's head b5a487a into 8ddf2ae, so the two form a stack. No file changes: the tree stays 8ddf2ae's.
8ddf2ae merges
mainebb9dde into 947120e with no conflict. Thatmaincarries #11135, which removes an extra commit a focus move inside the sheet's scroll area cost. Without it, this pull request's two focus hand-off cases fail. Then a sandbox page puts both sheets on a page the document scrolls, for the phone check.check:knowledge0;check:changesets0;pnpm -F @astryxdesign/core typecheck0;pnpm lint:strict0 errors.webkit-container.mjswith CI's four CPUs: 208 passed, 19 skipped. They ran against Storybook built at 305e50b, whose tree differs from this head only in the sandbox page./pages/month-year-toggle/. In Chromium as an iPhone 13, the document scrolls. Each sheet's month title opens and closes its month and year wheels.947120e merges
main18af3dc into dc2e1fc, then drops the month track's data attribute, as #8200's head b5a487a does. Git merged every file with no conflict. The merge makes #8200's one hand edit inMonthScroller.interaction.browser.spec.ts, and that file ends up the same in both heads.dc2e1fc replays a03bf99's 15 commits onto #8200's head 7ea993f, which merges
main3918a54 into #8200. Two commits change only in their context: main's #10400 sits next to the first commit'sTouchDateFieldimport, and next to the seventh commit's new line in the month pane, which keeps #10400's null-today guard. Its diff against #8200's head equals the earlier head's own diff, line for line.check:knowledge0;check:changesets0;pnpm -F @astryxdesign/core typecheck0;CI=true pnpm lint0 errors; Prettier clean over the stack's files; the DateInput, DateTimeInput, Calendar, motion, TimeInput, utils, hooks and SnapPaging unit tests: 4,691 passed.MonthYearWheels,MonthPager,MonthYearToggle,MonthScroller,MonthScrollerStepsand fix(DateInput, DateTimeInput): the sheet's calendar waits for today, so hydration matches #10400'sCalendarTodayHydrationagainst Storybook built at dc2e1fc: Chromium 48 passed, 2 skipped; WebKit (--cpus=4,LP_NUM_THREADS=4) 47 passed, 3 skipped.a03bf99 restacks the earlier head e4c6e2b's 15 commits onto #8200's restack 6f62fc8, on
mained2fd36 after #8209's squash 9d55076. It drops the three merges (b1fb87b, a712d60, 74c78b7), so each of their resolutions now sits in the commit that first changes the code it resolves (see "Changed for #10231" below). Its diff against #8200's head equals the earlier head's own diff, line for line.check:knowledge0;check:changesets0;pnpm -F @astryxdesign/core typecheck0;CI=true pnpm lint0 errors; Prettier clean over the stack's files; the DateInput, DateTimeInput, Calendar, motion, TimeInput, utils and hooks unit tests: 4,652 passed.MonthYearWheels,MonthPager,MonthYearToggle,MonthScrollerandMonthScrollerStepsagainst Storybook built at that head: Chromium 44 passed, 2 skipped; WebKit (--cpus=4,LP_NUM_THREADS=4) 43 passed, 3 skipped.The earlier head e4c6e2b merged #8200's merge with
main24d845b into the head before it, d84ec6e, then added one test commit and the changeset commit.handleVisibleMonthChangereads the wheels' state through its ref and runs fix(DateInput): a focused sheet month arrow that hides at the range end hands focus on first #10231'smoveMonth, with[moveMonth]deps; the memoized arrows take fix(DateInput): a focused sheet month arrow that hides at the range end hands focus on first #10231's refs andstepMonthFromArrow; the title button takes both refs throughuseMergedRefs. Main's auto-mergedrefhad duplicated the chevron ref there:tsccaught it, and at run time the last attribute won, so fix(DateInput): a focused sheet month arrow that hides at the range end hands focus on first #10231's focus target was never attached.stepMonth(no hand-off), the arrows memoized onisWheelOpen, the callback readingisWheelOpenwith it in its deps, and the callback withoutmoveMonth. The commit also has the toggle storyboard's hold judge the wheels' opacity (test(interaction-harness): an armed hold names the motion it judges #10386).check:knowledge0;check:changesets0;pnpm -F @astryxdesign/core typecheck0;CI=true pnpm lint0 errors; Prettier clean over the stack's files; the DateInput, DateTimeInput, Calendar, motion, TimeInput, utils and hooks unit tests: 4,604 passed.MonthYearWheels,MonthPager,MonthYearToggle,MonthScrollerandMonthScrollerStepsagainst Storybook built at e4c6e2b: Chromium 44 passed, 2 skipped; WebKit (--cpus=4,LP_NUM_THREADS=4) 43 passed, 3 skipped.The pre-merge head d84ec6e sits on #8200's head c6b74ea. It holds the earlier head 664ed1a's twelve commits, rebased past #9643/#9842 (see "Changed by the rebase onto #9643/#9842" below), then two merges with
main(one hand edit:DateTimeInputTouch.test.tsxkeeps this pull request's testing-library import besidemain'sgetOnlyButtonimport), then one changeset commit.The pre-merge changeset commit narrowed one line: the wheels' warm-up lays them out once the sheet settles. This head's changeset commit ends it "so a toggle after that does not lay them out": DateInput's panel also flips pointer-events with the toggle. It no longer says the fade shows from near its start; see "The fade on iOS" below.
At d84ec6e's merge, b1fb87b (the same tree as a712d60):
pnpm -F @astryxdesign/core typecheck0;CI=true pnpm lint0 errors; Prettier clean over the stack's files; the DateInput and DateTimeInput unit tests: 1,024 passed. At d84ec6e:check:changesets0.Measured on d84ec6e's preview (Chromium, a touch pointer, a tap on the title, the neutral theme at its default tempo): every toggle transition runs 225 ms; start to end 217.5–217.7 ms in DateInput and 221.2–221.3 ms in DateTimeInput.
MonthYearWheels,MonthPager,MonthYearToggle,MonthScrollerandMonthScrollerStepsagainst Storybook built at de6c245, this product code on main e657e2e: Chromium 44 passed, 2 skipped; WebKit (--cpus=4,LP_NUM_THREADS=4) 43 passed, 3 skipped.The FR45 timing,
useFadeInert's red-first case, the toggle spec's waits, the per-pointer day-tap rule and the focus hand-off's two red-first tests are as in their commits; the rebase changed none of them.Public and internal API delta
Public: none. No package export, public prop, type or default changes, and no new
data-*attribute.Internal: one new module, and two changes.
useMonthYearToggle, a new hook inpackages/core/src/DateInput/, used by both touch sheets:const {isCalendarInert, isWheelsInert, isFading, titleRef, toggle} = useMonthYearToggle({isWheelOpen, setIsWheelOpen, isTouch, calendarRef, wheelsRef});. Why: both sheets swapinertwhen the cross-fade ends, hand focus to the incoming panel and dip the chevron under Reduce Motion. The title and Done call onetoggle. Existing modules considered, and why they don't fit:useFocusTrapkeeps Tab in one region,useEntryAnimationanimates mounts,useSettledOpensettles hydration, andmotion/reducedMotion.tshas no React. None swapsinertbetween two mounted panels. In WebKit at 6404e3d, deferring the swap brings the first frame after a title tap 3–6× sooner. First frame: 34 ms (DateInput) and 21 ms (DateTimeInput), against 97 ms and 131 ms wheninertflips with the toggle. The longest frame gap in the fade's first 300 ms grows: DateInput 93/111 ms against 75/51 ms (open/close), DateTimeInput 155 ms against 123 ms (open). DateTimeInput's figures predate af33cf0, which gave its wheels the opaque plate.MonthPane(inMonthScroller.tsx) takes a new optional prop,hasSelectionFade(defaultfalse):<MonthPane {...paneProps} hasSelectionFade />. Why: the mouse calendar keeps its selection fade, and a finger's tap selects at once, as in UIDatePicker.datePickertable (motion/uikit/datePicker.ts) gainscalendar.selection.tapAnimatesandcalendar.monthYearToggle:datePicker.calendar.monthYearToggle.fadeMs // 250. Why: it records UIKit's measured tap and toggle, and tests hold the styles to it.useChevronDipanduseWheelsWarmUp, andmonthYearToggle.stylex.ts, whose one constant is now the literal turn.component:DateInputFR25 namesuseMonthYearToggle.Size: +3,431/−169 lines (f34d87f..65a8bb1); product code (
packages/core/src, no tests) +980/−134. At app level (gzip, a production app with DateInput and DateTimeInput): JS at start +0 B, all JS +1,965 B, CSS +211 B. The sandbox page's +2,232 B stays in the sandbox app and ships in no package.Before and after
real-device iOS: the run on an iPhone passed at d84ec6e. 8ddf2ae merges main's change to
Layer/useLayer, a shared layer module, so that run does not carry (DEC-31). The run on an iPhone at 8ddf2ae, on the sandbox page/pages/month-year-toggle/, passed. This head changes the toggle's code. A real-device side-by-side of 6c86a5a against 8ddf2ae ran on the same page. It shows no major difference in the open and close, and no visible hitch on the iPhone. In it, DateTimeInput's toggle differs on purpose: its calendar now stays drawn under the wheels, as in DateInput. This head merges main's changes to the gesture code under the sheets, and to the focusable selector the toggle imports. So the iPhone runs are taken again at this head, with #8200's: pending. Android: the Android emulator set DEC-27 asks for (normal, Remove animations, 4× CPU) passed at e4c6e2b (below). The set at this head is pending.Android, at e4c6e2b (the Android emulator set DEC-27 asks for). Chrome 133 with Gboard on the Android 16 emulator, against that head's own deployment (its
version.jsonchecked), on thecore-dateinput--bottom-sheet-calendarstory; the Japanese case is oncalendar-system-presentations. Each claim ran at normal speed, at 4× CPU and with the system's Remove animations on.This pull request's own change, the day tap under a finger: a tap on 18 moved the value from October 15 to October 18, 2026 with exactly one trusted click and no second change, in 6 of 6 takes (two at each setting), and the sheet opened on the first tap in every take.
A take counts only when its gesture is valid: the 1/3 drag takes 400 ms or more, and the flick is one 80 ms swipe (150 ms or less from down to up, 60 ms or less from the last move to up). An interleaved flick-back comparison against #8200's head feca481, on the same story and emulator, shows the same threshold on both heads: the month pages when a flick is released at about 0.8 px/ms or more (from the last two pointer moves), and stays below about 0.6 px/ms or when the swipe reaches the page with 0–1 moves (#8200: 6 of 6 at 0.77 px/ms or more paged; #8206: 7 of 7 at 0.95 px/ms or more paged). So the flick row counts only flicks released at 0.8 px/ms or more; one earlier miss on e4c6e2b, at 0.78 px/ms, sits at that threshold.
At d84ec6e, before the merge with
main24d845b, on the iOS 26.2 Simulator (iPhone 17 Pro, Mobile Safari), againstmainddedd4c; a red ring marks the finger:mainRecorded on the iOS 26.2 simulator and the Android emulator at an earlier head, with UIKit's 0.25 s ease-in-ease-out. This head plays the theme's tokens below.
The fade on iOS. Mobile Safari clocks a transition from the style change, so the toggle's commit flips no inherited property on the panels. Their
inertswaps when the fade ends,aria-hiddenand focus move with the toggle, and a shield takes touches meanwhile. The toggle's commit still holds the main thread for about 45 ms on the iOS Simulator, as onmain:BottomSheetPanelreadswindow.innerHeightin the commit, which forces a layout. So the fade's first frame shows it partly done. The figures below come from an earlier head that also laid the hidden wheels out early. Share of the change shown in the first frame, on the Simulator at low load, 3 takes each, againstmain:mainThe toggle's timing on Android. Chrome 133 with Gboard on the Android 16 emulator ran 6c86a5a's preview, on the sandbox page
month-year-toggle, with the host's load at 3–5. It compares this code, which defers theinertswap, with 184de63, which also laid the hidden wheels out early. The pull request has no switch for either, so this is not a with/without comparison. Times run from the tap'spointerdown, two takes each. The longest task runs between the tap and the fade's end; 184de63's probe recorded none.With two takes each, this code's range is wholly lower than 184de63's in 11 of 24 compared cells, and overlaps it in the other 13. None is higher. Wholly lower: every cell of normal DateInput close and of 4× DateTimeInput open. Also 4× DateTimeInput close's first frame and fade end, and 4× DateInput open's fade end. Also 4× DateInput close's first frame, and normal DateTimeInput close's worst gap.
Focus. The toggle's own handler decides the focus hand-off (
useMonthYearToggle'stoggle), so focus inside the outgoing panel moves in the toggle's commit; no Effect decides it afterwards. Done hands it to the shown month's tab stop, retrying each frame until the calendar can take focus.Changed for #10231
Main's #10231 took DateInput FR22 for the touch sheet's month arrows and gave them a focus hand-off at the range end. This pull request's records renumber again, with their text unchanged: the chevron is FR24 and the tap shield and focus hand-off FR25 (#8209's wheel rule is FR23), and DateTimeInput FR15 cites FR24 and FR25.
In
TouchDateField, the hand-off runs through what the toggle keeps. The memoized month arrows take #10231's refs and its focus-handing step, and the month grid's callback, still read through a ref, runs #10231's hand-off on a settled month. The title button takes #10231's ref and this pull request's chevron ref throughuseMergedRefs. Two tests check the hand-off after a toggle; each fails if the toggle re-renders what it keeps or if the hand-off is lost.Changed by the rebase onto #9643/#9842
Main took DateInput FR20 and FR21 and DateTimeInput FR11–FR13 (#9643/#9842), so this pull request's records renumber, with their text unchanged. The memoized month/year wheels also take main's
monthModelandkeptDay.