Repository navigation
feat(TopNav): under a finger, the phone bar's end items sit on an iOS 26 capsule #8188
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
5840e0b
1910a64
8bc79c0
e134fff
b6869cf
ab343f5
ff306bc
ed0b174
1be6b6c
b4e0adb
06baf7e
2b264d3
13eceed
212dbb1
7c49488
ecb9f20
62ecda1
53c11ea
0e4d0fd
6b88169
ee3f21c
9525df5
822cd31
26345b2
8110543
7961f56
66c651f
3392d45
ee91c19
6cebf17
13ff537
8ba2f3c
a26bb66
938d35e
6ad0a37
8080044
967939a
5613501
a149b9c
852d55c
4099d7e
6ccd5b4
40c6be3
87e516b
c04c3e7
d4369f6
704fb38
572825b
60763a6
851525b
4c3df94
463dd67
89792ab
73bcd28
5c58ae5
bf6a6a0
c8d86ff
af65db2
bce5d90
7613c98
f79b8a9
a1e7176
ff365ff
97436b2
c27baac
bac4669
f1c5125
bd50829
f405e7f
959f1e1
4e19448
21a1df9
7455721
d0d7f6a
029e4fd
cd49a87
54b35c5
702529b
fda011c
8715133
15e8c24
bc90acb
7aba599
9f6748f
a103c43
07b3383
4012259
2a6b934
9f65026
3ca280f
2ec969c
8a1f2ca
b560c64
1ddea08
213e86e
6ef5186
c440ef6
70c70e4
67ff01b
6f4173c
915f9d9
d2c3c78
cc795a1
266fa0a
8b0cb36
a490ba1
4ec2b1a
6f73653
453149e
03d8794
ecb82db
8d59b3f
dbcfd32
cc0f99a
a4f63a8
8415bf3
d5958e0
ce103c7
25b468c
182ef2e
9e06328
da33639
2e60799
a13314f
e6e06dd
793c8db
6586b84
6dfa218
98803e9
b9c3b0b
27eeeb8
07920f1
dd1b124
c177659
4af2a04
33bff16
2b66ca5
bec2283
995eb32
e7ec6d1
885c7f1
0eafffd
a3e07d8
9adbe2d
584ee5a
cc9afb6
2d1a06e
00b7e03
25e5a8a
a503b58
9800eb5
9ac14dc
c3375f6
8ae6540
36a1037
5c59af1
479fe54
54901eb
08305ad
2d4b4bd
10abed5
cef87ea
b8d7f4c
71b9578
cba0ad9
050fb02
1a4eb1c
9f87f08
7c8c729
36c2669
c5b1e89
2850d32
2e0bf48
d3c39fa
46fb7be
d97753d
9affd96
13f603d
0567e2c
2c8edc3
54a4c27
3bfd7c3
abb3e0f
b87b40b
21347b3
528e3e1
ba11812
f626add
03d1dac
b5d6f34
a599fa5
523a415
2119cfa
d70e066
fbed9d2
9db6af5
999afb7
b57ac07
6cca0de
ea8531c
1b6e19f
94d3859
02983fb
1d846c0
790c65e
2fd9697
1aade8a
3d85c30
9d0f6f2
11dbebf
d9a1e1a
e6ab0b9
e7b5b3c
e718566
1e44dc3
9486526
03155c3
3d7fa2e
5fc8088
bf62e21
a40fdfa
e90fc8a
00ab452
1d43d0d
598be90
e19fef4
a03874d
5021c93
3fb31dd
170162d
58dbb1a
2e77071
3b1b26d
ca71fce
9175b27
4b9f2ed
36d0121
4f8d37b
cd3ad72
ae06884
fa99001
d2746e8
620fbfe
c3c119a
53a1e69
01482eb
4f519b0
4fe659b
8ba07f7
8f9b693
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [feat] AppShell accepts `height="adaptive"`: `fill` with a mouse or trackpad, `auto` under a finger (a coarse primary pointer, through the shared touch resolver). With `fill`, the main region scrolls inside a viewport-high shell, so a phone browser never sees the page scroll: its toolbar or address bar does not minimize, and on iOS a status-bar tap does not return to the top. `adaptive` lets the page scroll under the sticky header under a finger and keeps independent scroll regions with a mouse. The root now reports which element scrolls in `data-scroll-owner` (`content` for the main region, `document` for the page), for code that listens to or restores the scroll position. `fill` and `auto` are unchanged, and `fill` stays the default. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [feat] AppShell: under a finger (one touch model on every touch device), when the page scrolls (`height="auto"`, or `height="adaptive"` on a touch device), the pinned header looks like an iOS 26 bar. It paints no background of its own and draws no divider. Once the content has moved more than 10px under it, a veil of the header's colour fades in at its top on iOS's measured spring (0.29 s): strongest at the top, gone just below the header. It fades out (0.51 s) when the content comes back. A scroll the program drives (`scrollTo`, a status-bar tap) switches the veil at once instead: on iOS 26.2 a fade that starts on such a scroll makes WebKit drop the header's items for a frame or two. Under Reduce Motion the fades are the animator's 200 ms cross-fade. Where the browser supports `prefers-reduced-transparency` (Safari 26.2 does not yet), Reduce Transparency makes the veil an opaque band ending at the header's bottom edge. With a mouse nothing changes. The springs and the veil's shape are internal measured constants; the veil takes the header's theme colour. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/build': patch | ||
| --- | ||
|
|
||
| [fix] `astryxStylex` resolves `defineConsts` values read from another file. With the `{stylexOptions}` form (the one Storybook uses), a file that read only constants from a `.stylex.ts` module lost that import once StyleX compiled it, so the constants never reached the CSS: a constant used as a media-query key failed the build ("Invalid empty selector") and one used as a value shipped as a custom property nothing declares. In either form, a constant defined on the other side of the layer split, or in an Astryx package (compiled with the library class-name prefix) and read from an app file (compiled with its own), stayed unresolved. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Core's internal entries, reserved for Astryx's own packages, also give Lab components the pan recognizer, the gesture types, the touch presentation queries and the motion math and tuning tables that Core components use. Apps import nothing new. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: a gesture that cancels itself on a finger's move (a long press dragged past its tolerance) keeps that finger claimed until it lifts, so the page never takes the drag over midway; a resting finger is still given back when its gesture is cancelled. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: touch-action derivation, the native scroll probe and haptics for the gesture system. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: the gesture hooks call nothing back after unmount; `usePressTracker` brakes with the host by default and keeps one tracker, so an option change or a new ref never drops a press in progress; the recognizer's arena plumbing is `protected`. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: gesture host fixes from review. A page scroll under a still finger keeps the press and its click; watchers and touches nothing can claim get passive listeners only; a claimed pen holds only its own stylus touches; an element's own `touch-action` is never widened; slotted content scrolls with its shadow-tree scroller. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: the gesture host becomes the one document-level touch owner: the finger count, touch gates, and a kept press for continuous-tracking controls, whose element gets `touch-action: manipulation` where the pointer is coarse. A scroll lock's page hold and the finger-scroll watch keep their own listeners and ask the host only about the touches it owns. A second finger fails a one-finger pan that has not claimed, so the page can pinch. A scroll-edge pan holds a lone finger from the first move that pulls away from an edge every scroller under it is at, so those moves are cancelled before it begins; with a second finger anywhere on the screen the page keeps its pinch. Where the primary pointer is fine, the host attaches nothing and registers no listener, following the pointer when it changes; a recognizer that reads each event's pointer itself opts out with `perEventPointer`, and a press tracker with it paints a finger's press feedback only, with no control event and no mouse or pen press. A press tracker whose hold acts (a stepper's hold-repeat) can bring a selection lock for its presses, as a recognizer can. Internal, for the touch components that adopt them; not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: the gesture system's DOM host (claims, click suppression, the browser's takeover, the pointer behind a contact). Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: UIControl press tracking with control and cell profiles and the gesture hooks, with every press painter writing `data-astryx-press` through one internal writer in `utils/pressFeedback.ts`. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: the gesture system's README for component authors, with its browser proof in Chromium and WebKit. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: gesture recognizer and arena fixes from review; a pan claims nothing before it begins at 10 pt; one velocity tracker for every gesture (`spec:AST-100`: UIKit's measured blend, a scrolling surface's release through the pan's `scrollVelocity()`, and FR2's release rules). Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: swipe, pinch, rotation, screen-edge pan and hover gesture recognizers. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: a recognizer created with `claimsTouches: false` is a watcher: passive listeners only, simultaneous with every recognizer, and it follows a touch the browser takes for a scroll to the lift. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: Reduce Motion for the touch presentations follows design:reduced-motion beyond the animator too. `reducedMotionFade()` gives code beside the animator the animator's own fade (an opacity-only 200 ms cross-fade on a coarse pointer or after a touch release, at once on any other pointer), `animator.reducedMotion()` reports which form a change takes for feedback that plays no fade of its own, and `reducedMotion.stylex.ts` holds the fade's constants for StyleX transitions. The fade's length is not a theme motion role. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This commit also changes shipped |
||
| --- | ||
|
|
||
| [feat] TopNav's phone bar under a finger (one touch model on every touch device, iOS and Android alike) takes the iOS 26 bar's geometry, and its end items sit together on one capsule. The geometry comes from the theme's spacing and size tokens: with the defaults the bar is 54px tall, with its items on the top 44px and 16px from the screen's sides, and the capsule is 44px tall and fully rounded, placing each control where UIKit centres its 36px cells. The capsule paints the theme's `--color-background-surface`, with no shadow and nothing blurred. No token is added. With a mouse the bar is unchanged. | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
|
||
| @vjeux | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: the gesture host applies a recognizer's own `selectionLock` to that recognizer's contact and imports no lock itself; a long press brings one only when it has a hold (a `minimumPressDuration` above 0), and `selectionLock: null` opts out. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [fix] Where the primary pointer is fine (a mouse, a trackpad, a touchscreen laptop, a desktop pen tablet), the press feedback controller no longer registers a touch listener: it reads the primary pointer at the first finger or pen press and keeps its `touchcancel` listener only while that pointer is coarse. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: the touch presentations' animator drives a pseudo-element such as a dialog's ::backdrop: a static filling animation holds its value after a curve ends and after `set`, a custom property on its host promotes it, and a Reduce Motion dip borrows and hands back the pseudo-element's own opacity. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: useAnimator, a React wrapper around the touch presentations' animator that never re-renders per frame, and browser proofs on the interaction harness that the animator's motion keeps running through a blocked main thread in Chromium and WebKit. Not exported from the package entry point. | ||
|
|
||
| @vjeux |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [chore] Internal: `useFingerScroll(scroller)` tells a finger's scroll from the program's, and the gestures README gains a guide to migrating a raw-touch drag onto the recognizers. Internal to the touch components: not exported from the package entry point or the gestures barrel. | ||
|
|
||
| @vjeux |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The glass token also changes shipped
@astryxdesign/clifiles (packages/cli/assets/docs/tree/tokens-color.doc.mjs,tokens.doc.mjs,packages/cli/assets/theme.template.ts), and the lint job's Changeset coverage step fails because no Changeset names that package. Adding'@astryxdesign/cli'here would clear it; the text could also name the old touch bar (48px, 8px padding, bare end icons) and the token override as the way to restyle the capsule.