@astryxdesign/core 0.4.6-canary.cea9ecd → 0.4.6-canary.f30c604

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAc7C,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AA2DhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AA4WxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
1
+ {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAc7C,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAyEhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AA6WxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
@@ -185,28 +185,52 @@ function StandaloneBottomSheet({
185
185
  0: {
186
186
  className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz"
187
187
  },
188
- 4: {
188
+ 8: {
189
189
  className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq"
190
190
  },
191
- 2: {
191
+ 4: {
192
192
  className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
193
193
  },
194
- 6: {
194
+ 12: {
195
195
  className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
196
196
  },
197
+ 2: {
198
+ className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x1cz9k3x"
199
+ },
200
+ 10: {
201
+ className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x1cz9k3x"
202
+ },
203
+ 6: {
204
+ className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x"
205
+ },
206
+ 14: {
207
+ className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x"
208
+ },
197
209
  1: {
198
210
  className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x47corl xfo81ep xh8yej3 x5yr21d"
199
211
  },
200
- 5: {
212
+ 9: {
201
213
  className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x47corl xfo81ep xh8yej3 x5yr21d"
202
214
  },
203
- 3: {
215
+ 5: {
204
216
  className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
205
217
  },
206
- 7: {
218
+ 13: {
207
219
  className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w x47corl xfo81ep xh8yej3 x5yr21d"
220
+ },
221
+ 3: {
222
+ className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
223
+ },
224
+ 11: {
225
+ className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
226
+ },
227
+ 7: {
228
+ className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
229
+ },
230
+ 15: {
231
+ className: "xixxii4 x10a8y8t x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f xni466t xxiuuzi xc0dz0a xft5bk6 x142juwg x1viac0w x1cz9k3x x47corl xfo81ep xh8yej3 x5yr21d"
208
232
  }
209
- }[!!shouldPresent << 2 | !!hasScrim << 1 | !!!hasScrim << 0],
233
+ }[!!shouldPresent << 3 | !!hasScrim << 2 | !!(hasScrim && !isOpen && isPresented) << 1 | !!!hasScrim << 0],
210
234
  ref: dialogRef,
211
235
  "aria-label": label,
212
236
  "aria-hidden": !isOpen && isPresented ? 'true' : undefined,
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AAwKnC,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA+GD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyQvB;yBA3Re,gBAAgB"}
1
+ {"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAIvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA2LnC,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA+GD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyQvB;yBA3Re,gBAAgB"}
@@ -109,6 +109,7 @@ const styles = {
109
109
  },
110
110
  sheetClosing: {
111
111
  k3aq6I: "x1weeur4",
112
+ kAMwcw: "xv2sgk5",
112
113
  $$css: true
113
114
  },
114
115
  sheetFading: {
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2H5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5E,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,iEAAiE;IACjE,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,mBAAmB,EACnB,QAAe,EACf,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA4Z1B;yBAzae,mBAAmB"}
1
+ {"version":3,"file":"BottomSheetSwitcher.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetSwitcher.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmI5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5E,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;;OAKG;IACH,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,iEAAiE;IACjE,mBAAmB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEtD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,mBAAmB,EACnB,QAAe,EACf,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA6Z1B;yBA1ae,mBAAmB"}
@@ -72,6 +72,10 @@ const styles = {
72
72
  kwHxkk: "x142juwg",
73
73
  k4oj2o: "x1viac0w",
74
74
  $$css: true
75
+ },
76
+ scrimClosing: {
77
+ kb4ib: "x1cz9k3x",
78
+ $$css: true
75
79
  }
76
80
  };
77
81
  const IDLE_TRANSITION = {
@@ -386,7 +390,7 @@ export function BottomSheetSwitcher({
386
390
  dismissOnLightInteraction();
387
391
  }
388
392
  }, [dismissOnLightInteraction, hasScrim]);
389
- const dialogStyleProps = stylex.props(styles.dialog, isFlowVisible && styles.dialogOpen, hasScrim && styles.scrim, !hasScrim && styles.dialogNonModal, xstyle);
393
+ const dialogStyleProps = stylex.props(styles.dialog, isFlowVisible && styles.dialogOpen, hasScrim && styles.scrim, hasScrim && isFlowVisible && activeSheet == null && styles.scrimClosing, !hasScrim && styles.dialogNonModal, xstyle);
390
394
  const dialogPresentationProps = mergeProps(dialogStyleProps, className, style);
391
395
  const ariaLabel = props['aria-label'] ?? (props['aria-labelledby'] == null ? activeLabel : undefined);
392
396
  return /*#__PURE__*/_jsx(BottomSheetSwitcherContext, {
@@ -1 +1 @@
1
- {"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACd,KAAK,OAAO,IAAI,YAAY,EAC7B,MAAM,OAAO,CAAC;AA8If,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gFAAgF;IAChF,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC7B,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,0EAA0E;IAC1E,YAAY,EAAE,iBAAiB,CAAC;IAChC,gEAAgE;IAChE,WAAW,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,SAAS,EAAE,cAAc,CAAC;IAC1B;;;;;OAKG;IACH,cAAc,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,kFAAkF;IAClF,UAAU,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,uBAAuB,EAAE,MAAM,CAAC;IAChC,qEAAqE;IACrE,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC;;;;;;;OAOG;IACH,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AASD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,UAAiB,EACjB,sBAA0B,EAC1B,SAAS,EACT,WAAW,EACX,MAAM,EACN,cAAc,GACf,EAAE,uBAAuB,GAAG,sBAAsB,CAyoClD"}
@@ -95,6 +95,20 @@ const OVERSCROLL_MAX = 48;
95
95
  // the scroll, large enough that a swipe merely coming to rest on the last pixel
96
96
  // doesn't start a drag on jitter.
97
97
  const CONTENT_END_HANDOFF_SLOP = 4;
98
+ // How far a finger resting on the body must travel before the pull becomes a
99
+ // sheet drag rather than a tap.
100
+ //
101
+ // This used to be zero: any downward movement promoted. A finger is never
102
+ // still, so tapping a control inside the sheet drifted a pixel or two and
103
+ // started a drag -- which suppresses the panel's transition, correctly, for as
104
+ // long as the sheet is tracking the finger. The close that the tap triggered
105
+ // then landed inside that window and cut instead of animating. A deliberate
106
+ // pull was unaffected; only a tap, and only a tap inside the sheet, since the
107
+ // scrim is outside the body and arms nothing.
108
+ //
109
+ // 8px is the conventional tap slop, a shade over iOS's own recognizer, and
110
+ // well under what a real pull covers in its first frames.
111
+ const DRAG_PROMOTION_SLOP = 8;
98
112
 
99
113
  // Short haptic tick on detent settle where supported. iOS Safari doesn't
100
114
  // expose navigator.vibrate, so this is a no-op there; skipped under
@@ -754,7 +768,7 @@ export function useSheetGestures({
754
768
  return;
755
769
  }
756
770
  const delta = event.clientY - armed.startCoord;
757
- if (delta > 0 && armed.scroller.scrollTop <= 0) {
771
+ if (delta > DRAG_PROMOTION_SLOP && armed.scroller.scrollTop <= 0) {
758
772
  // Downward pull at the top: promote to a sheet drag, anchored at the
759
773
  // original pointer-down position so the pull distance carries over.
760
774
  armedBodyRef.current = null;
@@ -883,8 +897,8 @@ export function useSheetGestures({
883
897
  // no longer scroll that way: at the top, a downward pull (delta > 0)
884
898
  // collapses; at the bottom, an upward pull (delta < 0) expands. The
885
899
  // opposite direction is a real scroll, so disarm and let it through.
886
- const pullDownAtTop = armed.top && delta > 0 && atTop(scroller);
887
- const pullUpAtBottom = armed.bottom && delta < 0 && atBottom(scroller);
900
+ const pullDownAtTop = armed.top && delta > DRAG_PROMOTION_SLOP && atTop(scroller);
901
+ const pullUpAtBottom = armed.bottom && delta < -DRAG_PROMOTION_SLOP && atBottom(scroller);
888
902
  if (pullDownAtTop || pullUpAtBottom) {
889
903
  event.preventDefault();
890
904
  touchDragRef.current = null;
@@ -993,11 +1007,15 @@ export function useSheetGestures({
993
1007
  const contentProps = useMemo(() => ({
994
1008
  style: {
995
1009
  transform: activeOffset !== 0 ? `translateY(${activeOffset}px)` : undefined,
996
- transition: isDragging || isScrollAreaReconciling || reducedMotion ? 'none' : undefined,
1010
+ // Gated on the sheet being up: suppression must not outlive the sheet
1011
+ // it was suppressing for. The host swaps the panel to its closing
1012
+ // state in whatever frame the dismissal lands, and a stale `none`
1013
+ // would apply to that transform too, cutting the exit.
1014
+ transition: isOpen && (isDragging || isScrollAreaReconciling || reducedMotion) ? 'none' : undefined,
997
1015
  touchAction: 'none',
998
1016
  overscrollBehavior: 'contain'
999
1017
  }
1000
- }), [activeOffset, isDragging, isScrollAreaReconciling, reducedMotion]);
1018
+ }), [activeOffset, isDragging, isOpen, isScrollAreaReconciling, reducedMotion]);
1001
1019
  const handleProps = useMemo(() => ({
1002
1020
  style: {
1003
1021
  touchAction: 'none',
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA2GV;yBAzHe,GAAG"}
1
+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAMrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmID;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,QAAQ,qBA+GV;yBA7He,GAAG"}
@@ -186,7 +186,11 @@ export function Tab({
186
186
  } : {}),
187
187
  [EDGE_COMP_ATTR]: '',
188
188
  'data-tab-value': value,
189
- 'aria-current': isSelected ? 'page' : undefined,
189
+ // Generic `true` ("the current item within a set"), not `page`: the strip
190
+ // switches views in place at least as often as it navigates, and claiming
191
+ // "current page" when no page changed is a false statement to a screen
192
+ // reader. Stays truthful for the `href` case too, just less specific.
193
+ 'aria-current': isSelected ? 'true' : undefined,
190
194
  // Roving tabindex: the tab strip is a single Tab stop. The selected tab is
191
195
  // the tabbable one; the rest are reachable via arrow keys (handled by
192
196
  // TabList's onKeyDown). When no tab is selected, TabList's repair effect
package/dist/astryx.css CHANGED
@@ -1187,6 +1187,7 @@
1187
1187
  .x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
1188
1188
  .x74b7sa:not(#\#):not(#\#):not(#\#){transition-property:visibility}
1189
1189
  .xxrbq2n:not(#\#):not(#\#):not(#\#){transition-property:width}
1190
+ .xv2sgk5:not(#\#):not(#\#):not(#\#){transition-timing-function:cubic-bezier(.3,0,.6,.6)}
1190
1191
  .x9lcvmn:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-out}
1191
1192
  .xcj1dhv:not(#\#):not(#\#):not(#\#){transition-timing-function:linear}
1192
1193
  .xlr8y92:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--ease-standard)}
@@ -1761,6 +1762,7 @@
1761
1762
  .xxcwgru:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-property:background-color}
1762
1763
  .xc0dz0a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-property:opacity,display}
1763
1764
  .x167zut7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-property:opacity}
1765
+ .x1cz9k3x:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-timing-function:linear}
1764
1766
  .x15h3t91:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-timing-function:var(--ease-standard)}
1765
1767
  .x1dlmc9c:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-timing-function:var(--ease-standard)}
1766
1768
  .xa5v58t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-timing-function:var(--ease-standard)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/core",
3
- "version": "0.4.6-canary.cea9ecd",
3
+ "version": "0.4.6-canary.f30c604",
4
4
  "displayName": "Astryx Core",
5
5
  "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
6
6
  "author": "Meta Open Source",
@@ -656,7 +656,7 @@
656
656
  "react-dom": ">=19.0.0"
657
657
  },
658
658
  "devDependencies": {
659
- "@astryxdesign/cli": "0.4.6-canary.cea9ecd",
659
+ "@astryxdesign/cli": "0.4.6-canary.f30c604",
660
660
  "@babel/cli": "^8.0.4",
661
661
  "@babel/core": "^7.29.7",
662
662
  "@babel/preset-react": "^8.0.1",
@@ -93,6 +93,20 @@ const styles = stylex.create({
93
93
  },
94
94
  },
95
95
  },
96
+ /**
97
+ * The dim leaves with the sheet, on a curve that matches.
98
+ *
99
+ * A fade covers no distance, so the decelerate token front-loads its
100
+ * progress and simply ends it early: `--ease-standard` puts the scrim at 90%
101
+ * faded in 163ms of a 410ms close, leaving an undimmed page under a sheet
102
+ * that is still sliding across it. `linear` spends the duration it is given.
103
+ * Same reasoning the touch date picker's surface swap already carries.
104
+ */
105
+ scrimClosing: {
106
+ '::backdrop': {
107
+ transitionTimingFunction: 'linear',
108
+ },
109
+ },
96
110
  positioner: {
97
111
  position: 'absolute',
98
112
  insetInline: 0,
@@ -327,6 +341,7 @@ function StandaloneBottomSheet({
327
341
  styles.dialog,
328
342
  shouldPresent && styles.dialogOpen,
329
343
  hasScrim && styles.scrim,
344
+ hasScrim && !isOpen && isPresented && styles.scrimClosing,
330
345
  !hasScrim && styles.dialogNonModal,
331
346
  )}
332
347
  ref={dialogRef}
@@ -328,4 +328,70 @@ describe('BottomSheetPanel', () => {
328
328
  "backgroundColor: colorVars['--color-background-surface']",
329
329
  );
330
330
  });
331
+
332
+ /**
333
+ * The exit is not the entrance played backwards.
334
+ *
335
+ * `--ease-standard` is a decelerate curve: on it the sheet was half gone in
336
+ * 59ms of a 410ms transition and 90% gone in 163ms, so the close was over
337
+ * before it could be seen. The closing state therefore carries its own
338
+ * accelerating curve, and only the closing state does.
339
+ */
340
+ it('closes on an accelerating curve of its own, not the entrance timing', () => {
341
+ const declarationsFor = (element: HTMLElement) => {
342
+ const classes = new Set(element.className.split(/\s+/));
343
+ const out: string[] = [];
344
+ for (const styleSheet of Array.from(document.styleSheets)) {
345
+ let rules: CSSRuleList;
346
+ try {
347
+ rules = styleSheet.cssRules;
348
+ } catch {
349
+ continue;
350
+ }
351
+ for (const rule of Array.from(rules)) {
352
+ const selector = (rule as CSSStyleRule).selectorText;
353
+ const owner = selector?.match(/^\.([\w-]+)/)?.[1];
354
+ if (owner != null && classes.has(owner)) {
355
+ out.push(rule.cssText);
356
+ }
357
+ }
358
+ }
359
+ return out.join('\n');
360
+ };
361
+
362
+ const {container: closing} = render(
363
+ <BottomSheetPanel
364
+ state={{kind: 'exiting'}}
365
+ height="hug"
366
+ onDismiss={() => {}}
367
+ onScrimOpacity={() => {}}>
368
+ Panel content
369
+ </BottomSheetPanel>,
370
+ );
371
+ const closingRules = declarationsFor(
372
+ closing.querySelector('.astryx-bottom-sheet') as HTMLElement,
373
+ );
374
+ // An accelerating curve: no vertical rise at the start (y1 = 0), so the
375
+ // travel lands inside the duration instead of ahead of it.
376
+ expect(closingRules).toContain(
377
+ 'transition-timing-function: cubic-bezier(.3,0,.6,.6)',
378
+ );
379
+
380
+ const {container: resting} = render(
381
+ <BottomSheetPanel
382
+ state={{kind: 'open', entering: false}}
383
+ height="hug"
384
+ onDismiss={() => {}}
385
+ onScrimOpacity={() => {}}>
386
+ Panel content
387
+ </BottomSheetPanel>,
388
+ );
389
+ const restingRules = declarationsFor(
390
+ resting.querySelector('.astryx-bottom-sheet') as HTMLElement,
391
+ );
392
+ expect(restingRules).toContain(
393
+ 'transition-timing-function: var(--ease-standard)',
394
+ );
395
+ expect(restingRules).not.toContain('cubic-bezier(.3,0,.6,.6)');
396
+ });
331
397
  });
@@ -149,8 +149,27 @@ const styles = stylex.create({
149
149
  transitionDuration: '0.01s',
150
150
  },
151
151
  },
152
+ /**
153
+ * The exit is its own motion, not the entrance played backwards.
154
+ *
155
+ * `--ease-standard` is `cubic-bezier(0.24, 1, 0.4, 1)`, a decelerate curve:
156
+ * it spends its speed immediately and coasts. That is right for an entrance,
157
+ * where the sheet arrives fast and settles, and wrong for an exit. Measured
158
+ * on device, it put the sheet half off-screen in 59ms of a 410ms close and
159
+ * 90% off in 163ms -- the travel is over before the eye has followed it, and
160
+ * the rest of the duration moves pixels already below the fold.
161
+ *
162
+ * An exit accelerates instead: away from rest, gathering speed, quickest as
163
+ * it leaves the screen. The curve is deliberately gentle rather than a hard
164
+ * `ease-in` -- it is moving within ~50ms, so the close reads as one
165
+ * departure rather than a hesitation and a snap. The duration is the
166
+ * entrance's own band, so only the curve differs between the two
167
+ * directions; a shorter band leaves too little visible travel once a theme
168
+ * scales the motion scale down (neutral's medium is 300ms against 410ms).
169
+ */
152
170
  sheetClosing: {
153
171
  transform: 'translateY(100%)',
172
+ transitionTimingFunction: 'cubic-bezier(0.3, 0, 0.6, 0.6)',
154
173
  },
155
174
  sheetFading: {
156
175
  opacity: 0,
@@ -103,6 +103,14 @@ const styles = stylex.create({
103
103
  },
104
104
  },
105
105
  },
106
+ // The flow's dim leaves with its last panel. Same rule, same reasoning, as
107
+ // a standalone sheet's -- see `scrimClosing` in BottomSheet.tsx. A handoff
108
+ // between two sheets is not a close, and keeps the entrance curve.
109
+ scrimClosing: {
110
+ '::backdrop': {
111
+ transitionTimingFunction: 'linear',
112
+ },
113
+ },
106
114
  });
107
115
 
108
116
  type RetainedSheetPhase = 'covered' | 'aligning' | 'fading' | 'exiting';
@@ -593,6 +601,7 @@ export function BottomSheetSwitcher({
593
601
  styles.dialog,
594
602
  isFlowVisible && styles.dialogOpen,
595
603
  hasScrim && styles.scrim,
604
+ hasScrim && isFlowVisible && activeSheet == null && styles.scrimClosing,
596
605
  !hasScrim && styles.dialogNonModal,
597
606
  xstyle,
598
607
  );
@@ -530,6 +530,33 @@ describe('useSheetGestures', () => {
530
530
  expect(hook.result.current.dragOffset).toBe(40);
531
531
  });
532
532
 
533
+ /**
534
+ * A finger is never still. Tapping a control inside the sheet drifts a
535
+ * pixel or two, and with no slop that drift promoted to a sheet drag —
536
+ * which wrote `transition: none` onto the panel across the release, so the
537
+ * close the tap triggered cut instead of animating. That is the "the sheet
538
+ * closes with no animation" report: only on a tap, and only on a tap
539
+ * inside the sheet (the scrim never arms a drag).
540
+ */
541
+ it('treats a few pixels of finger drift as a tap, not a drag', () => {
542
+ const {hook} = setup({snapHeights: () => [200]});
543
+ const body = makeBody(0); // at the top, where a pull-down would promote
544
+ bodyDown(hook, 0, 0, body);
545
+ bodyMove(hook, 3, 40, body); // the drift of a finger tapping a button
546
+ expect(hook.result.current.isDragging).toBe(false);
547
+ // and nothing suppressed the panel's transition, so a close that lands
548
+ // now still animates
549
+ expect(hook.result.current.contentProps.style.transition).toBeUndefined();
550
+ });
551
+
552
+ it('still promotes once the pull passes the tap slop', () => {
553
+ const {hook} = setup({snapHeights: () => [200]});
554
+ const body = makeBody(0);
555
+ bodyDown(hook, 0, 0, body);
556
+ bodyMove(hook, 9, 40, body); // just past the 8px slop
557
+ expect(hook.result.current.isDragging).toBe(true);
558
+ });
559
+
533
560
  it('does not hijack scrolling when the body is scrolled down', () => {
534
561
  const {hook} = setup({snapHeights: () => [200]});
535
562
  const body = makeBody(120); // scrolled, not at the top
@@ -118,6 +118,20 @@ const OVERSCROLL_MAX = 48;
118
118
  // the scroll, large enough that a swipe merely coming to rest on the last pixel
119
119
  // doesn't start a drag on jitter.
120
120
  const CONTENT_END_HANDOFF_SLOP = 4;
121
+ // How far a finger resting on the body must travel before the pull becomes a
122
+ // sheet drag rather than a tap.
123
+ //
124
+ // This used to be zero: any downward movement promoted. A finger is never
125
+ // still, so tapping a control inside the sheet drifted a pixel or two and
126
+ // started a drag -- which suppresses the panel's transition, correctly, for as
127
+ // long as the sheet is tracking the finger. The close that the tap triggered
128
+ // then landed inside that window and cut instead of animating. A deliberate
129
+ // pull was unaffected; only a tap, and only a tap inside the sheet, since the
130
+ // scrim is outside the body and arms nothing.
131
+ //
132
+ // 8px is the conventional tap slop, a shade over iOS's own recognizer, and
133
+ // well under what a real pull covers in its first frames.
134
+ const DRAG_PROMOTION_SLOP = 8;
121
135
 
122
136
  // Short haptic tick on detent settle where supported. iOS Safari doesn't
123
137
  // expose navigator.vibrate, so this is a no-op there; skipped under
@@ -1140,7 +1154,7 @@ export function useSheetGestures({
1140
1154
  return;
1141
1155
  }
1142
1156
  const delta = event.clientY - armed.startCoord;
1143
- if (delta > 0 && armed.scroller.scrollTop <= 0) {
1157
+ if (delta > DRAG_PROMOTION_SLOP && armed.scroller.scrollTop <= 0) {
1144
1158
  // Downward pull at the top: promote to a sheet drag, anchored at the
1145
1159
  // original pointer-down position so the pull distance carries over.
1146
1160
  armedBodyRef.current = null;
@@ -1302,8 +1316,10 @@ export function useSheetGestures({
1302
1316
  // no longer scroll that way: at the top, a downward pull (delta > 0)
1303
1317
  // collapses; at the bottom, an upward pull (delta < 0) expands. The
1304
1318
  // opposite direction is a real scroll, so disarm and let it through.
1305
- const pullDownAtTop = armed.top && delta > 0 && atTop(scroller);
1306
- const pullUpAtBottom = armed.bottom && delta < 0 && atBottom(scroller);
1319
+ const pullDownAtTop =
1320
+ armed.top && delta > DRAG_PROMOTION_SLOP && atTop(scroller);
1321
+ const pullUpAtBottom =
1322
+ armed.bottom && delta < -DRAG_PROMOTION_SLOP && atBottom(scroller);
1307
1323
  if (pullDownAtTop || pullUpAtBottom) {
1308
1324
  event.preventDefault();
1309
1325
  touchDragRef.current = null;
@@ -1433,15 +1449,19 @@ export function useSheetGestures({
1433
1449
  style: {
1434
1450
  transform:
1435
1451
  activeOffset !== 0 ? `translateY(${activeOffset}px)` : undefined,
1452
+ // Gated on the sheet being up: suppression must not outlive the sheet
1453
+ // it was suppressing for. The host swaps the panel to its closing
1454
+ // state in whatever frame the dismissal lands, and a stale `none`
1455
+ // would apply to that transform too, cutting the exit.
1436
1456
  transition:
1437
- isDragging || isScrollAreaReconciling || reducedMotion
1457
+ isOpen && (isDragging || isScrollAreaReconciling || reducedMotion)
1438
1458
  ? 'none'
1439
1459
  : undefined,
1440
1460
  touchAction: 'none',
1441
1461
  overscrollBehavior: 'contain',
1442
1462
  },
1443
1463
  }),
1444
- [activeOffset, isDragging, isScrollAreaReconciling, reducedMotion],
1464
+ [activeOffset, isDragging, isOpen, isScrollAreaReconciling, reducedMotion],
1445
1465
  );
1446
1466
 
1447
1467
  const handleProps = useMemo<SheetHandleProps>(
@@ -260,7 +260,11 @@ export function Tab({
260
260
  ...(isLabelHidden ? {'aria-label': label} : {}),
261
261
  [EDGE_COMP_ATTR]: '',
262
262
  'data-tab-value': value,
263
- 'aria-current': isSelected ? ('page' as const) : undefined,
263
+ // Generic `true` ("the current item within a set"), not `page`: the strip
264
+ // switches views in place at least as often as it navigates, and claiming
265
+ // "current page" when no page changed is a false statement to a screen
266
+ // reader. Stays truthful for the `href` case too, just less specific.
267
+ 'aria-current': isSelected ? ('true' as const) : undefined,
264
268
  // Roving tabindex: the tab strip is a single Tab stop. The selected tab is
265
269
  // the tabbable one; the rest are reachable via arrow keys (handled by
266
270
  // TabList's onKeyDown). When no tab is selected, TabList's repair effect
@@ -106,7 +106,7 @@ describe('TabList', () => {
106
106
  );
107
107
  });
108
108
 
109
- it('marks selected tab with aria-current', () => {
109
+ it('marks selected tab with a generic aria-current, not "page"', () => {
110
110
  render(
111
111
  <TabList value="home" onChange={() => {}}>
112
112
  <Tab value="home" label="Home" />
@@ -116,13 +116,30 @@ describe('TabList', () => {
116
116
 
117
117
  expect(screen.getByRole('button', {name: 'Home'})).toHaveAttribute(
118
118
  'aria-current',
119
- 'page',
119
+ 'true',
120
120
  );
121
121
  expect(screen.getByRole('button', {name: 'Settings'})).not.toHaveAttribute(
122
122
  'aria-current',
123
123
  );
124
124
  });
125
125
 
126
+ it('marks a selected link tab with the same generic aria-current', () => {
127
+ render(
128
+ <TabList value="home" onChange={() => {}}>
129
+ <Tab value="home" label="Home" href="/home" />
130
+ <Tab value="settings" label="Settings" href="/settings" />
131
+ </TabList>,
132
+ );
133
+
134
+ expect(screen.getByRole('link', {name: 'Home'})).toHaveAttribute(
135
+ 'aria-current',
136
+ 'true',
137
+ );
138
+ expect(screen.getByRole('link', {name: 'Settings'})).not.toHaveAttribute(
139
+ 'aria-current',
140
+ );
141
+ });
142
+
126
143
  it('calls onChange when a tab is clicked', async () => {
127
144
  const user = userEvent.setup();
128
145
  const handleChange = vi.fn();
@@ -148,7 +165,7 @@ describe('TabList', () => {
148
165
 
149
166
  expect(screen.getByRole('button', {name: 'Home'})).toHaveAttribute(
150
167
  'aria-current',
151
- 'page',
168
+ 'true',
152
169
  );
153
170
 
154
171
  rerender(
@@ -163,7 +180,7 @@ describe('TabList', () => {
163
180
  );
164
181
  expect(screen.getByRole('button', {name: 'Settings'})).toHaveAttribute(
165
182
  'aria-current',
166
- 'page',
183
+ 'true',
167
184
  );
168
185
  });
169
186