@mindlogic-ai/logician-ui 4.0.0-alpha.42 → 4.0.0-alpha.44
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.
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +14 -3
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.mjs +14 -3
- package/dist/components/Button/Button.mjs.map +1 -1
- package/dist/components/Button/Button.styles.d.ts.map +1 -1
- package/dist/components/Button/Button.styles.js +6 -2
- package/dist/components/Button/Button.styles.js.map +1 -1
- package/dist/components/Button/Button.styles.mjs +6 -2
- package/dist/components/Button/Button.styles.mjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.styles.js +1 -1
- package/dist/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.styles.mjs +1 -1
- package/dist/components/Checkbox/Checkbox.styles.mjs.map +1 -1
- package/dist/components/ErrorFallback/ErrorFallback.d.ts.map +1 -1
- package/dist/components/ErrorFallback/ErrorFallback.js +4 -1
- package/dist/components/ErrorFallback/ErrorFallback.js.map +1 -1
- package/dist/components/ErrorFallback/ErrorFallback.mjs +4 -1
- package/dist/components/ErrorFallback/ErrorFallback.mjs.map +1 -1
- package/dist/components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton/IconButton.js +6 -1
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/IconButton/IconButton.mjs +6 -1
- package/dist/components/IconButton/IconButton.mjs.map +1 -1
- package/dist/components/InfoSprinkle/InfoSprinkle.d.ts.map +1 -1
- package/dist/components/InfoSprinkle/InfoSprinkle.js +1 -1
- package/dist/components/InfoSprinkle/InfoSprinkle.js.map +1 -1
- package/dist/components/InfoSprinkle/InfoSprinkle.mjs +1 -1
- package/dist/components/InfoSprinkle/InfoSprinkle.mjs.map +1 -1
- package/dist/components/Loaders/PageLoader.d.ts.map +1 -1
- package/dist/components/Loaders/PageLoader.js +4 -1
- package/dist/components/Loaders/PageLoader.js.map +1 -1
- package/dist/components/Loaders/PageLoader.mjs +4 -1
- package/dist/components/Loaders/PageLoader.mjs.map +1 -1
- package/dist/components/Loaders/SectionLoader.d.ts.map +1 -1
- package/dist/components/Loaders/SectionLoader.js +1 -1
- package/dist/components/Loaders/SectionLoader.js.map +1 -1
- package/dist/components/Loaders/SectionLoader.mjs +1 -1
- package/dist/components/Loaders/SectionLoader.mjs.map +1 -1
- package/dist/components/Menu/MenuItem.d.ts.map +1 -1
- package/dist/components/Menu/MenuItem.js +3 -1
- package/dist/components/Menu/MenuItem.js.map +1 -1
- package/dist/components/Menu/MenuItem.mjs +3 -1
- package/dist/components/Menu/MenuItem.mjs.map +1 -1
- package/dist/components/Menu/MenuList.js +2 -2
- package/dist/components/Menu/MenuList.js.map +1 -1
- package/dist/components/Menu/MenuList.mjs +2 -2
- package/dist/components/Menu/MenuList.mjs.map +1 -1
- package/dist/components/Popover/PopoverContent.js +2 -2
- package/dist/components/Popover/PopoverContent.js.map +1 -1
- package/dist/components/Popover/PopoverContent.mjs +2 -2
- package/dist/components/Popover/PopoverContent.mjs.map +1 -1
- package/dist/components/Select/Combobox.js +1 -1
- package/dist/components/Select/Combobox.js.map +1 -1
- package/dist/components/Select/Combobox.mjs +1 -1
- package/dist/components/Select/Combobox.mjs.map +1 -1
- package/dist/components/Select/Select.js +1 -1
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/Select.mjs +1 -1
- package/dist/components/Select/Select.mjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +10 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.mjs +10 -1
- package/dist/components/Tooltip/Tooltip.mjs.map +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.d.ts.map +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.js +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.js.map +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.mjs +1 -1
- package/dist/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.mjs.map +1 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +2 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/index.mjs +2 -0
- package/dist/theme/index.mjs.map +1 -1
- package/dist/theme/motion.d.ts +74 -2
- package/dist/theme/motion.d.ts.map +1 -1
- package/dist/theme/motion.js +41 -8
- package/dist/theme/motion.js.map +1 -1
- package/dist/theme/motion.mjs +41 -9
- package/dist/theme/motion.mjs.map +1 -1
- package/dist/theme/recipes/accordion.d.ts +12 -0
- package/dist/theme/recipes/accordion.d.ts.map +1 -0
- package/dist/theme/recipes/accordion.js +25 -0
- package/dist/theme/recipes/accordion.js.map +1 -0
- package/dist/theme/recipes/accordion.mjs +23 -0
- package/dist/theme/recipes/accordion.mjs.map +1 -0
- package/dist/utils/focusRing.d.ts +7 -6
- package/dist/utils/focusRing.d.ts.map +1 -1
- package/dist/utils/focusRing.js +7 -4
- package/dist/utils/focusRing.js.map +1 -1
- package/dist/utils/focusRing.mjs +7 -4
- package/dist/utils/focusRing.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/Accordion/Accordion.presence.test.tsx +54 -0
- package/src/components/Button/Button.cursor.test.tsx +60 -0
- package/src/components/Button/Button.styles.ts +6 -2
- package/src/components/Button/Button.tsx +18 -3
- package/src/components/Checkbox/Checkbox.styles.ts +1 -1
- package/src/components/Collapsible/Collapsible.presence.test.tsx +2 -2
- package/src/components/ErrorFallback/ErrorFallback.tsx +3 -1
- package/src/components/IconButton/IconButton.tsx +7 -0
- package/src/components/InfoSprinkle/InfoSprinkle.tsx +0 -1
- package/src/components/Loaders/PageLoader.tsx +5 -2
- package/src/components/Loaders/SectionLoader.tsx +2 -1
- package/src/components/Menu/MenuItem.tsx +2 -0
- package/src/components/Menu/MenuList.tsx +2 -2
- package/src/components/Popover/PopoverContent.tsx +2 -2
- package/src/components/Select/Combobox.tsx +1 -1
- package/src/components/Select/Select.tsx +1 -1
- package/src/components/Tooltip/Tooltip.instant.test.tsx +43 -0
- package/src/components/Tooltip/Tooltip.tsx +11 -2
- package/src/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.tsx +6 -3
- package/src/theme/Motion.stories.tsx +16 -10
- package/src/theme/animationStyles.test.ts +25 -9
- package/src/theme/claude.md +4 -2
- package/src/theme/index.ts +2 -0
- package/src/theme/motion.ts +43 -9
- package/src/theme/motionGuards.test.ts +2 -0
- package/src/theme/recipes/accordion.ts +20 -0
- package/src/utils/focusRing.ts +7 -4
package/dist/theme/motion.d.ts
CHANGED
|
@@ -159,6 +159,51 @@ export declare const easings: {
|
|
|
159
159
|
value: string;
|
|
160
160
|
};
|
|
161
161
|
};
|
|
162
|
+
/**
|
|
163
|
+
* Enter and exit are not the same length, and that is a policy rather than a
|
|
164
|
+
* per-component taste.
|
|
165
|
+
*
|
|
166
|
+
* An enter has to be *read* — something new arrived and the reader has to find
|
|
167
|
+
* it — so it gets the full `motion.base` and the `emphasized` curve that covers
|
|
168
|
+
* most of the distance early and settles. An exit has already been decided:
|
|
169
|
+
* the reader dismissed the thing and is looking at what is behind it, so every
|
|
170
|
+
* millisecond the leaving element still owns the screen is a millisecond of
|
|
171
|
+
* waiting. Half the time, on the same ease-out — a symmetric curve would
|
|
172
|
+
* start the exit slowly, which is the one place a dismissal must not lag.
|
|
173
|
+
*
|
|
174
|
+
* Only the *clock* is here, never `animation-name`. Each Chakra recipe already
|
|
175
|
+
* names the right movement for its part — the menu slides from its trigger,
|
|
176
|
+
* the popover scales from its origin, the collapsible interpolates the `--height`
|
|
177
|
+
* Ark measures — and those names are the one thing a shared policy must not
|
|
178
|
+
* overwrite. Declaring the timing and nothing else lets the same preset sit on
|
|
179
|
+
* six unrelated parts: our longhands land in the `styles` layer and beat the
|
|
180
|
+
* recipe's per property, while `animation-name`, which we never declare, falls
|
|
181
|
+
* through untouched. A preset that also set the name would have flattened the
|
|
182
|
+
* collapsible's height animation into a fade.
|
|
183
|
+
*
|
|
184
|
+
* Reduced motion keeps a plain fade rather than zeroing the duration, for the
|
|
185
|
+
* reason the Modal already had one: a surface that appears with no transition
|
|
186
|
+
* at all reads as a page swap. The movement is what has to go, not the fact
|
|
187
|
+
* that something changed.
|
|
188
|
+
*/
|
|
189
|
+
export declare const PRESENCE_TIMING: {
|
|
190
|
+
readonly _open: {
|
|
191
|
+
readonly animationDuration: "motion.base";
|
|
192
|
+
readonly animationTimingFunction: "emphasized";
|
|
193
|
+
};
|
|
194
|
+
readonly _closed: {
|
|
195
|
+
readonly animationDuration: "fast";
|
|
196
|
+
readonly animationTimingFunction: "emphasized";
|
|
197
|
+
};
|
|
198
|
+
readonly _motionReduce: {
|
|
199
|
+
readonly _open: {
|
|
200
|
+
readonly animationName: "fade-in";
|
|
201
|
+
};
|
|
202
|
+
readonly _closed: {
|
|
203
|
+
readonly animationName: "fade-out";
|
|
204
|
+
};
|
|
205
|
+
};
|
|
206
|
+
};
|
|
162
207
|
/**
|
|
163
208
|
* Dash length for the `checkmark-draw` keyframe. Declared once so the pattern
|
|
164
209
|
* the tick is hidden behind and the offset the keyframe animates away are the
|
|
@@ -192,7 +237,7 @@ export declare const animationStyles: {
|
|
|
192
237
|
};
|
|
193
238
|
transitionProperty: "scale";
|
|
194
239
|
transitionDuration: "motion.press";
|
|
195
|
-
transitionTimingFunction: "
|
|
240
|
+
transitionTimingFunction: "emphasized";
|
|
196
241
|
};
|
|
197
242
|
};
|
|
198
243
|
feedback: {
|
|
@@ -261,7 +306,32 @@ export declare const animationStyles: {
|
|
|
261
306
|
};
|
|
262
307
|
_closed: {
|
|
263
308
|
readonly animationDuration: "fast";
|
|
264
|
-
readonly animationTimingFunction: "
|
|
309
|
+
readonly animationTimingFunction: "emphasized";
|
|
310
|
+
};
|
|
311
|
+
_motionReduce: {
|
|
312
|
+
readonly _open: {
|
|
313
|
+
readonly animationName: "fade-in";
|
|
314
|
+
};
|
|
315
|
+
readonly _closed: {
|
|
316
|
+
readonly animationName: "fade-out";
|
|
317
|
+
};
|
|
318
|
+
};
|
|
319
|
+
};
|
|
320
|
+
};
|
|
321
|
+
/**
|
|
322
|
+
* `presence` for a part anchored to its trigger — menu, select, combobox,
|
|
323
|
+
* popover and tooltip content. 200ms in, 100ms out; see
|
|
324
|
+
* {@link ANCHORED_PRESENCE_TIMING}.
|
|
325
|
+
*/
|
|
326
|
+
'presence-anchored': {
|
|
327
|
+
value: {
|
|
328
|
+
_open: {
|
|
329
|
+
readonly animationDuration: "moderate";
|
|
330
|
+
readonly animationTimingFunction: "emphasized";
|
|
331
|
+
};
|
|
332
|
+
_closed: {
|
|
333
|
+
readonly animationDuration: "faster";
|
|
334
|
+
readonly animationTimingFunction: "emphasized";
|
|
265
335
|
};
|
|
266
336
|
_motionReduce: {
|
|
267
337
|
readonly _open: {
|
|
@@ -346,9 +416,11 @@ export declare const keyframes: {
|
|
|
346
416
|
'dot-pop': {
|
|
347
417
|
from: {
|
|
348
418
|
scale: string;
|
|
419
|
+
opacity: string;
|
|
349
420
|
};
|
|
350
421
|
to: {
|
|
351
422
|
scale: string;
|
|
423
|
+
opacity: string;
|
|
352
424
|
};
|
|
353
425
|
};
|
|
354
426
|
'checkmark-draw': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/theme/motion.ts"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH;;;GAGG;AACH,eAAO,MAAM,SAAS;;QAMlB,uEAAuE;;;;QAEvE;;;;;;WAMG;;;;QAEH,+EAA+E;;;;QAE/E,kDAAkD;;;;QAElD,yDAAyD;;;;QAEzD,yCAAyC;;;;QAEzC;;;;;;;;;;;;WAYG;;YAED,uEAAuE;;;;YAEvE;;;;;eAKG;;;;;QAGL;;;;;;;;;;WAUG;;YAED,4EAA4E;;;;YAE5E,0DAA0D;;;;;;YAI1D;;;;;;;;;eASG;;;;;;CAIR,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;CAInB,CAAC;
|
|
1
|
+
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/theme/motion.ts"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH;;;GAGG;AACH,eAAO,MAAM,SAAS;;QAMlB,uEAAuE;;;;QAEvE;;;;;;WAMG;;;;QAEH,+EAA+E;;;;QAE/E,kDAAkD;;;;QAElD,yDAAyD;;;;QAEzD,yCAAyC;;;;QAEzC;;;;;;;;;;;;WAYG;;YAED,uEAAuE;;;;YAEvE;;;;;eAKG;;;;;QAGL;;;;;;;;;;WAUG;;YAED,4EAA4E;;;;YAE5E,0DAA0D;;;;;;YAI1D;;;;;;;;;eASG;;;;;;CAIR,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;CAInB,CAAC;AAeF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAalB,CAAC;AAuBX;;;;GAIG;AACH,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwC1B;;;;;OAKG;;;;;;;;IAKH;;;;;;;;;;;;;;OAcG;;;;;;;;;;;;;;;;;;;;;IAKH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;IAKH;;;;;;;;;;;;;;;;;;;OAmBG;;;;;;;;;;;;;;;;;;CAsBkC,CAAC;AAExC,2DAA2D;AAC3D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,eAAe,CAAC;AAE5D;;;;;;GAMG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6FpB,0EAA0E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkD1E;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DJ,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;CAcrB,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAElE,8EAA8E;AAC9E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAcpB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,WAAW,CAAC;AAEvD;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAI3D,CAAC"}
|
package/dist/theme/motion.js
CHANGED
|
@@ -159,7 +159,8 @@ const REDUCED = { _motionReduce: { transitionDuration: 'motion.instant' } };
|
|
|
159
159
|
* most of the distance early and settles. An exit has already been decided:
|
|
160
160
|
* the reader dismissed the thing and is looking at what is behind it, so every
|
|
161
161
|
* millisecond the leaving element still owns the screen is a millisecond of
|
|
162
|
-
* waiting. Half the time, on the
|
|
162
|
+
* waiting. Half the time, on the same ease-out — a symmetric curve would
|
|
163
|
+
* start the exit slowly, which is the one place a dismissal must not lag.
|
|
163
164
|
*
|
|
164
165
|
* Only the *clock* is here, never `animation-name`. Each Chakra recipe already
|
|
165
166
|
* names the right movement for its part — the menu slides from its trigger,
|
|
@@ -183,13 +184,33 @@ const PRESENCE_TIMING = {
|
|
|
183
184
|
},
|
|
184
185
|
_closed: {
|
|
185
186
|
animationDuration: 'fast',
|
|
186
|
-
animationTimingFunction: '
|
|
187
|
+
animationTimingFunction: 'emphasized',
|
|
187
188
|
},
|
|
188
189
|
_motionReduce: {
|
|
189
190
|
_open: { animationName: 'fade-in' },
|
|
190
191
|
_closed: { animationName: 'fade-out' },
|
|
191
192
|
},
|
|
192
193
|
};
|
|
194
|
+
/**
|
|
195
|
+
* The same policy, on a shorter clock, for parts anchored to a trigger —
|
|
196
|
+
* Menu, Select, Combobox, Popover, Tooltip.
|
|
197
|
+
*
|
|
198
|
+
* These open tens of times a day, under a pointer that is already on its way
|
|
199
|
+
* to the first item, so the enter has much less to be read than a dialog does:
|
|
200
|
+
* the reader asked for it and knows where it will appear. 300ms there is twice
|
|
201
|
+
* Chakra's stock 150ms and feels like waiting; 200ms keeps a visible slide from
|
|
202
|
+
* the trigger and finishes before the pointer arrives. The exit keeps the
|
|
203
|
+
* half-the-enter ratio. Curves and the reduced-motion fade come from
|
|
204
|
+
* {@link PRESENCE_TIMING}, so the two cannot drift apart.
|
|
205
|
+
*
|
|
206
|
+
* Modal, BottomSheet and Collapsible stay on the full `presence` clock — they
|
|
207
|
+
* move more of the screen and are not anchored to anything.
|
|
208
|
+
*/
|
|
209
|
+
const ANCHORED_PRESENCE_TIMING = {
|
|
210
|
+
...PRESENCE_TIMING,
|
|
211
|
+
_open: { ...PRESENCE_TIMING._open, animationDuration: 'moderate' },
|
|
212
|
+
_closed: { ...PRESENCE_TIMING._closed, animationDuration: 'faster' },
|
|
213
|
+
};
|
|
193
214
|
/**
|
|
194
215
|
* Dash length for the `checkmark-draw` keyframe. Declared once so the pattern
|
|
195
216
|
* the tick is hidden behind and the offset the keyframe animates away are the
|
|
@@ -221,7 +242,9 @@ const animationStyles = {
|
|
|
221
242
|
// The one preset with a real default: a press is a scale, always.
|
|
222
243
|
transitionProperty: 'scale',
|
|
223
244
|
transitionDuration: 'motion.press',
|
|
224
|
-
|
|
245
|
+
// Ease-out, not `standard`: `standard` starts slowly, so the first frames
|
|
246
|
+
// of the press lag behind the finger.
|
|
247
|
+
transitionTimingFunction: 'emphasized',
|
|
225
248
|
...REDUCED,
|
|
226
249
|
},
|
|
227
250
|
},
|
|
@@ -276,6 +299,14 @@ const animationStyles = {
|
|
|
276
299
|
presence: {
|
|
277
300
|
value: { ...PRESENCE_TIMING },
|
|
278
301
|
},
|
|
302
|
+
/**
|
|
303
|
+
* `presence` for a part anchored to its trigger — menu, select, combobox,
|
|
304
|
+
* popover and tooltip content. 200ms in, 100ms out; see
|
|
305
|
+
* {@link ANCHORED_PRESENCE_TIMING}.
|
|
306
|
+
*/
|
|
307
|
+
'presence-anchored': {
|
|
308
|
+
value: { ...ANCHORED_PRESENCE_TIMING },
|
|
309
|
+
},
|
|
279
310
|
/**
|
|
280
311
|
* List items arriving one after another instead of all at once.
|
|
281
312
|
*
|
|
@@ -336,12 +367,13 @@ const keyframes = {
|
|
|
336
367
|
from: { opacity: '1', scale: '1' },
|
|
337
368
|
to: { opacity: '0', scale: '0.97' },
|
|
338
369
|
},
|
|
339
|
-
// The dot only mounts on check
|
|
340
|
-
//
|
|
341
|
-
//
|
|
370
|
+
// The dot only mounts on check. It starts small and transparent rather than
|
|
371
|
+
// at `scale: 0` — nothing real appears from nothing, and a dot growing from a
|
|
372
|
+
// point reads as a glitch. `0.4` is where Chakra's radiomark recipe rests it;
|
|
373
|
+
// ending anywhere else would make the dot jump when the animation hands back.
|
|
342
374
|
'dot-pop': {
|
|
343
|
-
from: { scale: '0' },
|
|
344
|
-
to: { scale: '0.4' },
|
|
375
|
+
from: { scale: '0.25', opacity: '0' },
|
|
376
|
+
to: { scale: '0.4', opacity: '1' },
|
|
345
377
|
},
|
|
346
378
|
'checkmark-draw': {
|
|
347
379
|
// Negative, not positive. Chakra's polyline runs `20 6 → 9 17 → 4 12`, so
|
|
@@ -589,6 +621,7 @@ exports.MOTION_DURATION_S = MOTION_DURATION_S;
|
|
|
589
621
|
exports.MOTION_EASE = MOTION_EASE;
|
|
590
622
|
exports.MOTION_EASE_CSS = MOTION_EASE_CSS;
|
|
591
623
|
exports.MOTION_STAGGER_MAX = MOTION_STAGGER_MAX;
|
|
624
|
+
exports.PRESENCE_TIMING = PRESENCE_TIMING;
|
|
592
625
|
exports.animationStyles = animationStyles;
|
|
593
626
|
exports.durations = durations;
|
|
594
627
|
exports.easings = easings;
|
package/dist/theme/motion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"motion.js","sources":["../../src/theme/motion.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAcA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AAEH;;;AAGG;AACI,MAAM,SAAS,GAAG;;;;;AAKvB,IAAA,MAAM,EAAE;;AAEN,QAAA,OAAO,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;AACzB;;;;;;AAMG;AACH,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;;AAEvB,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAEzB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,QAAA,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AAC1B;;;;;;;;;;;;AAYG;AACH,QAAA,SAAS,EAAE;;AAET,YAAA,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AACzB;;;;;AAKG;AACH,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC1B,SAAA;AACD;;;;;;;;;;AAUG;AACH,QAAA,IAAI,EAAE;;AAEJ,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,YAAA,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;AACP;;;;;;;;;AASG;AACH,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;AACxB,SAAA;AACF,KAAA;;AAGH;;;;;;;;;;;AAWG;AACI,MAAM,kBAAkB,GAAG;AAElC;;;;;;;;AAQG;AACI,MAAM,OAAO,GAAG;AACrB,IAAA,QAAQ,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE;AACnD,IAAA,UAAU,EAAE,EAAE,KAAK,EAAE,gCAAgC,EAAE;AACvD,IAAA,SAAS,EAAE,EAAE,KAAK,EAAE,mCAAmC,EAAE;;AAG3D;;;;;;;;;;AAUG;AACH,MAAM,OAAO,GAAG,EAAE,aAAa,EAAE,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,EAAE;AAE3E
|
|
1
|
+
{"version":3,"file":"motion.js","sources":["../../src/theme/motion.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAcA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AAEH;;;AAGG;AACI,MAAM,SAAS,GAAG;;;;;AAKvB,IAAA,MAAM,EAAE;;AAEN,QAAA,OAAO,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;AACzB;;;;;;AAMG;AACH,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;;AAEvB,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAEzB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,QAAA,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AAC1B;;;;;;;;;;;;AAYG;AACH,QAAA,SAAS,EAAE;;AAET,YAAA,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AACzB;;;;;AAKG;AACH,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC1B,SAAA;AACD;;;;;;;;;;AAUG;AACH,QAAA,IAAI,EAAE;;AAEJ,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,YAAA,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;AACP;;;;;;;;;AASG;AACH,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;AACxB,SAAA;AACF,KAAA;;AAGH;;;;;;;;;;;AAWG;AACI,MAAM,kBAAkB,GAAG;AAElC;;;;;;;;AAQG;AACI,MAAM,OAAO,GAAG;AACrB,IAAA,QAAQ,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE;AACnD,IAAA,UAAU,EAAE,EAAE,KAAK,EAAE,gCAAgC,EAAE;AACvD,IAAA,SAAS,EAAE,EAAE,KAAK,EAAE,mCAAmC,EAAE;;AAG3D;;;;;;;;;;AAUG;AACH,MAAM,OAAO,GAAG,EAAE,aAAa,EAAE,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,EAAE;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;AACI,MAAM,eAAe,GAAG;AAC7B,IAAA,KAAK,EAAE;AACL,QAAA,iBAAiB,EAAE,aAAa;AAChC,QAAA,uBAAuB,EAAE,YAAY;AACtC,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,iBAAiB,EAAE,MAAM;AACzB,QAAA,uBAAuB,EAAE,YAAY;AACtC,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE;AACnC,QAAA,OAAO,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE;AACvC,KAAA;;AAGH;;;;;;;;;;;;;;AAcG;AACH,MAAM,wBAAwB,GAAG;AAC/B,IAAA,GAAG,eAAe;IAClB,KAAK,EAAE,EAAE,GAAG,eAAe,CAAC,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE;IAClE,OAAO,EAAE,EAAE,GAAG,eAAe,CAAC,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE;CAC5D;AAEV;;;;AAIG;AACI,MAAM,cAAc,GAAG;AAE9B;;;;;;;;;;;;;;;;;;AAkBG;AACI,MAAM,eAAe,GAAG;AAC7B,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE;;AAEL,YAAA,kBAAkB,EAAE,OAAO;AAC3B,YAAA,kBAAkB,EAAE,cAAc;;;AAGlC,YAAA,wBAAwB,EAAE,YAAY;AACtC,YAAA,GAAG,OAAO;AACX,SAAA;AACF,KAAA;AAED,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,kBAAkB,EAAE,MAAM;AAC1B,YAAA,kBAAkB,EAAE,MAAM;AAC1B,YAAA,wBAAwB,EAAE,UAAU;AACpC,YAAA,GAAG,OAAO;AACX,SAAA;AACF,KAAA;AAED,IAAA,MAAM,EAAE;AACN,QAAA,KAAK,EAAE;AACL,YAAA,kBAAkB,EAAE,MAAM;AAC1B,YAAA,kBAAkB,EAAE,aAAa;AACjC,YAAA,wBAAwB,EAAE,YAAY;AACtC,YAAA,GAAG,OAAO;AACX,SAAA;AACF,KAAA;AAED,IAAA,MAAM,EAAE;AACN,QAAA,KAAK,EAAE;AACL,YAAA,kBAAkB,EAAE,MAAM;AAC1B,YAAA,kBAAkB,EAAE,aAAa;AACjC,YAAA,wBAAwB,EAAE,WAAW;AACrC,YAAA,GAAG,OAAO;AACX,SAAA;AACF,KAAA;AAED;;;;;AAKG;AACH,IAAA,SAAS,EAAE;QACT,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE;AACjD,KAAA;AAED;;;;;;;;;;;;;;AAcG;AACH,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE,EAAE,GAAG,eAAe,EAAE;AAC9B,KAAA;AAED;;;;AAIG;AACH,IAAA,mBAAmB,EAAE;AACnB,QAAA,KAAK,EAAE,EAAE,GAAG,wBAAwB,EAAE;AACvC,KAAA;AAED;;;;;;;;;;;;;;;;;;;AAmBG;AACH,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE;AACL,YAAA,eAAe,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAC3C,YAAA,aAAa,EAAE,YAAY;AAC3B,YAAA,iBAAiB,EAAE,aAAa;AAChC,YAAA,uBAAuB,EAAE,YAAY;;;;AAIrC,YAAA,iBAAiB,EAAE,MAAM;AACzB,YAAA,cAAc,EACZ,sGAAsG;;;AAGxG,YAAA,yBAAyB,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE;;;;YAIpD,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE;AAChE,SAAA;AACF,KAAA;;AAMH;;;;;;AAMG;AACI,MAAM,SAAS,GAAG;;;;AAIvB,IAAA,UAAU,EAAE;AACV,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE;AAC1D,QAAA,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE;AACnD,KAAA;AACD,IAAA,WAAW,EAAE;QACX,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;QAClC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE;AACpC,KAAA;;;;;AAKD,IAAA,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACrC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;AACnC,KAAA;AACD,IAAA,gBAAgB,EAAE;;;;;;;QAOhB,IAAI,EAAE,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE;AACnD,QAAA,EAAE,EAAE,EAAE,gBAAgB,EAAE,GAAG,EAAE;AAC9B,KAAA;;;;;;;;;;;;;;;;;AAoBD,IAAA,aAAa,EAAE;AACb,QAAA,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE;AAC9B,QAAA,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;AAC5B,KAAA;;;;AAID,IAAA,YAAY,EAAE;QACZ,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE;QAC1C,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE;AACvC,KAAA;;;;;;;;;;;;AAcD,IAAA,WAAW,EAAE;AACX,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,GAAG;AACZ,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,SAAS,EAAE,2BAA2B;AACvC,SAAA;AACD,QAAA,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE;AACnD,KAAA;;;;;AAMD,IAAA,SAAS,EAAE;AACT,QAAA,UAAU,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;AAChC,QAAA,KAAK,EAAE,EAAE,SAAS,EAAE,yCAAyC,EAAE;AAC/D,QAAA,KAAK,EAAE,EAAE,SAAS,EAAE,8BAA8B,EAAE;AACpD,QAAA,KAAK,EAAE,EAAE,SAAS,EAAE,2CAA2C,EAAE;AACjE,QAAA,KAAK,EAAE,EAAE,SAAS,EAAE,0CAA0C,EAAE;AACjE,KAAA;;AAED,IAAA,aAAa,EAAE;AACb,QAAA,UAAU,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;AAChC,QAAA,KAAK,EAAE,EAAE,SAAS,EAAE,yCAAyC,EAAE;AAC/D,QAAA,KAAK,EAAE,EAAE,SAAS,EAAE,8BAA8B,EAAE;AACpD,QAAA,KAAK,EAAE,EAAE,SAAS,EAAE,2CAA2C,EAAE;AACjE,QAAA,KAAK,EAAE,EAAE,SAAS,EAAE,0CAA0C,EAAE;AACjE,KAAA;;;;;;;;;AAUD,IAAA,aAAa,EAAE;QACb,IAAI,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;QAC/C,EAAE,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;AAC9C,KAAA;;;;AAKD,IAAA,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,8BAA8B,EAAE;QACjE,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE;AACvC,KAAA;AACD,IAAA,UAAU,EAAE;QACV,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE;AACxC,QAAA,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,GAAG;AACZ,YAAA,SAAS,EAAE,yCAAyC;AACrD,SAAA;AACF,KAAA;;;;;;;;AAUD,IAAA,WAAW,EAAE;AACX,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;AACpB,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE;AAC3C,QAAA,MAAM,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;AACvB,KAAA;AACD;;;;;;;;AAQG;AACH,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;AACpB,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE;AAC3C,QAAA,MAAM,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;AACvB,KAAA;;;;;;;;AASD,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AACpD,QAAA,KAAK,EAAE;AACL,YAAA,SAAS,EACP,uEAAuE;AACzE,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,SAAS,EAAE,6BAA6B;AACxC,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;;;;;;;;;;;;;;;;;;;;;AAsBD,IAAA,eAAe,EAAE;;;;;;AAMf,QAAA,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AAC5D,QAAA,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;AACvB,QAAA,MAAM,EAAE;AACN,YAAA,SAAS,EAAE,8BAA8B;AACzC,YAAA,MAAM,EAAE,sBAAsB;AAC9B,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;;AAGH;;;;;;AAMG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,IAAI,EAAE,EAAE;AACR,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,cAAc,EAAE,GAAG;AACnB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,WAAW,EAAE,EAAE;;AAKjB;AACO,MAAM,iBAAiB,GAAG;AAC/B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,cAAc,EAAE,GAAG;AACnB,IAAA,aAAa,EAAE,GAAG;AAClB,IAAA,QAAQ,EAAE,IAAI;AACd,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,WAAW,EAAE,KAAK;;AAGpB;;;AAGG;AACI,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAC1B,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9B,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;;AAKlC;;;;AAIG;AACI,MAAM,eAAe,GAAoC;AAC9D,IAAA,QAAQ,EAAE,8BAA8B;AACxC,IAAA,UAAU,EAAE,gCAAgC;AAC5C,IAAA,SAAS,EAAE,mCAAmC;;;;;;;;;;;;;;;"}
|
package/dist/theme/motion.mjs
CHANGED
|
@@ -157,7 +157,8 @@ const REDUCED = { _motionReduce: { transitionDuration: 'motion.instant' } };
|
|
|
157
157
|
* most of the distance early and settles. An exit has already been decided:
|
|
158
158
|
* the reader dismissed the thing and is looking at what is behind it, so every
|
|
159
159
|
* millisecond the leaving element still owns the screen is a millisecond of
|
|
160
|
-
* waiting. Half the time, on the
|
|
160
|
+
* waiting. Half the time, on the same ease-out — a symmetric curve would
|
|
161
|
+
* start the exit slowly, which is the one place a dismissal must not lag.
|
|
161
162
|
*
|
|
162
163
|
* Only the *clock* is here, never `animation-name`. Each Chakra recipe already
|
|
163
164
|
* names the right movement for its part — the menu slides from its trigger,
|
|
@@ -181,13 +182,33 @@ const PRESENCE_TIMING = {
|
|
|
181
182
|
},
|
|
182
183
|
_closed: {
|
|
183
184
|
animationDuration: 'fast',
|
|
184
|
-
animationTimingFunction: '
|
|
185
|
+
animationTimingFunction: 'emphasized',
|
|
185
186
|
},
|
|
186
187
|
_motionReduce: {
|
|
187
188
|
_open: { animationName: 'fade-in' },
|
|
188
189
|
_closed: { animationName: 'fade-out' },
|
|
189
190
|
},
|
|
190
191
|
};
|
|
192
|
+
/**
|
|
193
|
+
* The same policy, on a shorter clock, for parts anchored to a trigger —
|
|
194
|
+
* Menu, Select, Combobox, Popover, Tooltip.
|
|
195
|
+
*
|
|
196
|
+
* These open tens of times a day, under a pointer that is already on its way
|
|
197
|
+
* to the first item, so the enter has much less to be read than a dialog does:
|
|
198
|
+
* the reader asked for it and knows where it will appear. 300ms there is twice
|
|
199
|
+
* Chakra's stock 150ms and feels like waiting; 200ms keeps a visible slide from
|
|
200
|
+
* the trigger and finishes before the pointer arrives. The exit keeps the
|
|
201
|
+
* half-the-enter ratio. Curves and the reduced-motion fade come from
|
|
202
|
+
* {@link PRESENCE_TIMING}, so the two cannot drift apart.
|
|
203
|
+
*
|
|
204
|
+
* Modal, BottomSheet and Collapsible stay on the full `presence` clock — they
|
|
205
|
+
* move more of the screen and are not anchored to anything.
|
|
206
|
+
*/
|
|
207
|
+
const ANCHORED_PRESENCE_TIMING = {
|
|
208
|
+
...PRESENCE_TIMING,
|
|
209
|
+
_open: { ...PRESENCE_TIMING._open, animationDuration: 'moderate' },
|
|
210
|
+
_closed: { ...PRESENCE_TIMING._closed, animationDuration: 'faster' },
|
|
211
|
+
};
|
|
191
212
|
/**
|
|
192
213
|
* Dash length for the `checkmark-draw` keyframe. Declared once so the pattern
|
|
193
214
|
* the tick is hidden behind and the offset the keyframe animates away are the
|
|
@@ -219,7 +240,9 @@ const animationStyles = {
|
|
|
219
240
|
// The one preset with a real default: a press is a scale, always.
|
|
220
241
|
transitionProperty: 'scale',
|
|
221
242
|
transitionDuration: 'motion.press',
|
|
222
|
-
|
|
243
|
+
// Ease-out, not `standard`: `standard` starts slowly, so the first frames
|
|
244
|
+
// of the press lag behind the finger.
|
|
245
|
+
transitionTimingFunction: 'emphasized',
|
|
223
246
|
...REDUCED,
|
|
224
247
|
},
|
|
225
248
|
},
|
|
@@ -274,6 +297,14 @@ const animationStyles = {
|
|
|
274
297
|
presence: {
|
|
275
298
|
value: { ...PRESENCE_TIMING },
|
|
276
299
|
},
|
|
300
|
+
/**
|
|
301
|
+
* `presence` for a part anchored to its trigger — menu, select, combobox,
|
|
302
|
+
* popover and tooltip content. 200ms in, 100ms out; see
|
|
303
|
+
* {@link ANCHORED_PRESENCE_TIMING}.
|
|
304
|
+
*/
|
|
305
|
+
'presence-anchored': {
|
|
306
|
+
value: { ...ANCHORED_PRESENCE_TIMING },
|
|
307
|
+
},
|
|
277
308
|
/**
|
|
278
309
|
* List items arriving one after another instead of all at once.
|
|
279
310
|
*
|
|
@@ -334,12 +365,13 @@ const keyframes = {
|
|
|
334
365
|
from: { opacity: '1', scale: '1' },
|
|
335
366
|
to: { opacity: '0', scale: '0.97' },
|
|
336
367
|
},
|
|
337
|
-
// The dot only mounts on check
|
|
338
|
-
//
|
|
339
|
-
//
|
|
368
|
+
// The dot only mounts on check. It starts small and transparent rather than
|
|
369
|
+
// at `scale: 0` — nothing real appears from nothing, and a dot growing from a
|
|
370
|
+
// point reads as a glitch. `0.4` is where Chakra's radiomark recipe rests it;
|
|
371
|
+
// ending anywhere else would make the dot jump when the animation hands back.
|
|
340
372
|
'dot-pop': {
|
|
341
|
-
from: { scale: '0' },
|
|
342
|
-
to: { scale: '0.4' },
|
|
373
|
+
from: { scale: '0.25', opacity: '0' },
|
|
374
|
+
to: { scale: '0.4', opacity: '1' },
|
|
343
375
|
},
|
|
344
376
|
'checkmark-draw': {
|
|
345
377
|
// Negative, not positive. Chakra's polyline runs `20 6 → 9 17 → 4 12`, so
|
|
@@ -581,5 +613,5 @@ const MOTION_EASE_CSS = {
|
|
|
581
613
|
overshoot: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
582
614
|
};
|
|
583
615
|
|
|
584
|
-
export { CHECKMARK_DASH, MOTION_DURATION_MS, MOTION_DURATION_S, MOTION_EASE, MOTION_EASE_CSS, MOTION_STAGGER_MAX, animationStyles, durations, easings, keyframes };
|
|
616
|
+
export { CHECKMARK_DASH, MOTION_DURATION_MS, MOTION_DURATION_S, MOTION_EASE, MOTION_EASE_CSS, MOTION_STAGGER_MAX, PRESENCE_TIMING, animationStyles, durations, easings, keyframes };
|
|
585
617
|
//# sourceMappingURL=motion.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"motion.mjs","sources":["../../src/theme/motion.ts"],"sourcesContent":[null],"names":[],"mappings":";AAcA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AAEH;;;AAGG;AACI,MAAM,SAAS,GAAG;;;;;AAKvB,IAAA,MAAM,EAAE;;AAEN,QAAA,OAAO,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;AACzB;;;;;;AAMG;AACH,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;;AAEvB,QAAA,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAEzB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,QAAA,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AAC1B;;;;;;;;;;;;AAYG;AACH,QAAA,SAAS,EAAE;;AAET,YAAA,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AACzB;;;;;AAKG;AACH,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC1B,SAAA;AACD;;;;;;;;;;AAUG;AACH,QAAA,IAAI,EAAE;;AAEJ,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;;AAExB,YAAA,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC3B,SAAA;AACD,QAAA,OAAO,EAAE;AACP;;;;;;;;;AASG;AACH,YAAA,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;AACxB,SAAA;AACF,KAAA;;AAGH;;;;;;;;;;;AAWG;AACI,MAAM,kBAAkB,GAAG;AAElC;;;;;;;;AAQG;AACI,MAAM,OAAO,GAAG;AACrB,IAAA,QAAQ,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE;AACnD,IAAA,UAAU,EAAE,EAAE,KAAK,EAAE,gCAAgC,EAAE;AACvD,IAAA,SAAS,EAAE,EAAE,KAAK,EAAE,mCAAmC,EAAE;;AAG3D;;;;;;;;;;AAUG;AACH,MAAM,OAAO,GAAG,EAAE,aAAa,EAAE,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,EAAE;AAE3E
|
|
1
|
+
{"version":3,"file":"motion.mjs","sources":["../../src/theme/motion.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Logician overrides for Chakra's `accordion` slot recipe.
|
|
3
|
+
*
|
|
4
|
+
* Only the clock. Chakra opens and closes the item content over a symmetric
|
|
5
|
+
* 200 / 200, while `Collapsible` — the same height animation — already runs on
|
|
6
|
+
* the house `presence` policy (300 in, 150 out). Consumers render
|
|
7
|
+
* `Accordion.ItemContent` straight from Chakra, so a component prop cannot
|
|
8
|
+
* reach it; the recipe can. The recipe's own `expand-height` /
|
|
9
|
+
* `collapse-height` names are untouched and still decide what moves.
|
|
10
|
+
*/
|
|
11
|
+
export declare const accordionSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"itemContent", import("@chakra-ui/react").SlotRecipeVariantRecord<"itemContent">>;
|
|
12
|
+
//# sourceMappingURL=accordion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/theme/recipes/accordion.ts"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,mIAK9B,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var react = require('@chakra-ui/react');
|
|
5
|
+
var motion = require('../motion.js');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Logician overrides for Chakra's `accordion` slot recipe.
|
|
9
|
+
*
|
|
10
|
+
* Only the clock. Chakra opens and closes the item content over a symmetric
|
|
11
|
+
* 200 / 200, while `Collapsible` — the same height animation — already runs on
|
|
12
|
+
* the house `presence` policy (300 in, 150 out). Consumers render
|
|
13
|
+
* `Accordion.ItemContent` straight from Chakra, so a component prop cannot
|
|
14
|
+
* reach it; the recipe can. The recipe's own `expand-height` /
|
|
15
|
+
* `collapse-height` names are untouched and still decide what moves.
|
|
16
|
+
*/
|
|
17
|
+
const accordionSlotRecipe = react.defineSlotRecipe({
|
|
18
|
+
slots: ['itemContent'],
|
|
19
|
+
base: {
|
|
20
|
+
itemContent: { ...motion.PRESENCE_TIMING },
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
exports.accordionSlotRecipe = accordionSlotRecipe;
|
|
25
|
+
//# sourceMappingURL=accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.js","sources":["../../../src/theme/recipes/accordion.ts"],"sourcesContent":[null],"names":["defineSlotRecipe","PRESENCE_TIMING"],"mappings":";;;;;;AAIA;;;;;;;;;AASG;AACI,MAAM,mBAAmB,GAAGA,sBAAgB,CAAC;IAClD,KAAK,EAAE,CAAC,aAAa,CAAC;AACtB,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAE,EAAE,GAAGC,sBAAe,EAAE;AACpC,KAAA;AACF,CAAA;;;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { defineSlotRecipe } from '@chakra-ui/react';
|
|
3
|
+
import { PRESENCE_TIMING } from '../motion.mjs';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Logician overrides for Chakra's `accordion` slot recipe.
|
|
7
|
+
*
|
|
8
|
+
* Only the clock. Chakra opens and closes the item content over a symmetric
|
|
9
|
+
* 200 / 200, while `Collapsible` — the same height animation — already runs on
|
|
10
|
+
* the house `presence` policy (300 in, 150 out). Consumers render
|
|
11
|
+
* `Accordion.ItemContent` straight from Chakra, so a component prop cannot
|
|
12
|
+
* reach it; the recipe can. The recipe's own `expand-height` /
|
|
13
|
+
* `collapse-height` names are untouched and still decide what moves.
|
|
14
|
+
*/
|
|
15
|
+
const accordionSlotRecipe = defineSlotRecipe({
|
|
16
|
+
slots: ['itemContent'],
|
|
17
|
+
base: {
|
|
18
|
+
itemContent: { ...PRESENCE_TIMING },
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
export { accordionSlotRecipe };
|
|
23
|
+
//# sourceMappingURL=accordion.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.mjs","sources":["../../../src/theme/recipes/accordion.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIA;;;;;;;;;AASG;AACI,MAAM,mBAAmB,GAAG,gBAAgB,CAAC;IAClD,KAAK,EAAE,CAAC,aAAa,CAAC;AACtB,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAE,EAAE,GAAG,eAAe,EAAE;AACpC,KAAA;AACF,CAAA;;;;"}
|
|
@@ -2,8 +2,13 @@
|
|
|
2
2
|
* Standard focus ring styles for interactive components.
|
|
3
3
|
*
|
|
4
4
|
* - _focus: suppresses the browser's default outline on all focus events (including mouse)
|
|
5
|
-
* - _focusVisible: shows the ring only on keyboard focus (CSS :focus-visible)
|
|
6
|
-
*
|
|
5
|
+
* - _focusVisible: shows the ring only on keyboard focus (CSS :focus-visible)
|
|
6
|
+
*
|
|
7
|
+
* No transition, on purpose. The ring answers a key press, and keyboard
|
|
8
|
+
* actions should land instantly — Tab is pressed hundreds of times a day. It
|
|
9
|
+
* also used to be a `transition` *shorthand* under `:focus-visible`, which
|
|
10
|
+
* replaced the element's whole transition list while focused, so a
|
|
11
|
+
* keyboard-focused Switch or Checkbox snapped its fill instead of fading it.
|
|
7
12
|
*/
|
|
8
13
|
export declare const focusRing: {
|
|
9
14
|
readonly _focus: {
|
|
@@ -12,10 +17,6 @@ export declare const focusRing: {
|
|
|
12
17
|
readonly _focusVisible: {
|
|
13
18
|
readonly outline: "none";
|
|
14
19
|
readonly boxShadow: "rgb(255, 255, 255) 0px 0px 0px 2px, var(--chakra-colors-primary-main) 0px 0px 0px 4px";
|
|
15
|
-
readonly transition: "box-shadow 0.15s ease-out";
|
|
16
|
-
readonly _motionReduce: {
|
|
17
|
-
readonly transition: "none";
|
|
18
|
-
};
|
|
19
20
|
};
|
|
20
21
|
};
|
|
21
22
|
//# sourceMappingURL=focusRing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../src/utils/focusRing.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../src/utils/focusRing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS;;;;;;;;CAOZ,CAAC"}
|
package/dist/utils/focusRing.js
CHANGED
|
@@ -5,16 +5,19 @@
|
|
|
5
5
|
* Standard focus ring styles for interactive components.
|
|
6
6
|
*
|
|
7
7
|
* - _focus: suppresses the browser's default outline on all focus events (including mouse)
|
|
8
|
-
* - _focusVisible: shows the ring only on keyboard focus (CSS :focus-visible)
|
|
9
|
-
*
|
|
8
|
+
* - _focusVisible: shows the ring only on keyboard focus (CSS :focus-visible)
|
|
9
|
+
*
|
|
10
|
+
* No transition, on purpose. The ring answers a key press, and keyboard
|
|
11
|
+
* actions should land instantly — Tab is pressed hundreds of times a day. It
|
|
12
|
+
* also used to be a `transition` *shorthand* under `:focus-visible`, which
|
|
13
|
+
* replaced the element's whole transition list while focused, so a
|
|
14
|
+
* keyboard-focused Switch or Checkbox snapped its fill instead of fading it.
|
|
10
15
|
*/
|
|
11
16
|
const focusRing = {
|
|
12
17
|
_focus: { outline: 'none' },
|
|
13
18
|
_focusVisible: {
|
|
14
19
|
outline: 'none',
|
|
15
20
|
boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 2px, var(--chakra-colors-primary-main) 0px 0px 0px 4px',
|
|
16
|
-
transition: 'box-shadow 0.15s ease-out',
|
|
17
|
-
_motionReduce: { transition: 'none' },
|
|
18
21
|
},
|
|
19
22
|
};
|
|
20
23
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.js","sources":["../../src/utils/focusRing.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA
|
|
1
|
+
{"version":3,"file":"focusRing.js","sources":["../../src/utils/focusRing.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;;;;;;;;;;AAWG;AACI,MAAM,SAAS,GAAG;AACvB,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC3B,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EACP,uFAAuF;AAC1F,KAAA;;;;;"}
|
package/dist/utils/focusRing.mjs
CHANGED
|
@@ -3,16 +3,19 @@
|
|
|
3
3
|
* Standard focus ring styles for interactive components.
|
|
4
4
|
*
|
|
5
5
|
* - _focus: suppresses the browser's default outline on all focus events (including mouse)
|
|
6
|
-
* - _focusVisible: shows the ring only on keyboard focus (CSS :focus-visible)
|
|
7
|
-
*
|
|
6
|
+
* - _focusVisible: shows the ring only on keyboard focus (CSS :focus-visible)
|
|
7
|
+
*
|
|
8
|
+
* No transition, on purpose. The ring answers a key press, and keyboard
|
|
9
|
+
* actions should land instantly — Tab is pressed hundreds of times a day. It
|
|
10
|
+
* also used to be a `transition` *shorthand* under `:focus-visible`, which
|
|
11
|
+
* replaced the element's whole transition list while focused, so a
|
|
12
|
+
* keyboard-focused Switch or Checkbox snapped its fill instead of fading it.
|
|
8
13
|
*/
|
|
9
14
|
const focusRing = {
|
|
10
15
|
_focus: { outline: 'none' },
|
|
11
16
|
_focusVisible: {
|
|
12
17
|
outline: 'none',
|
|
13
18
|
boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 2px, var(--chakra-colors-primary-main) 0px 0px 0px 4px',
|
|
14
|
-
transition: 'box-shadow 0.15s ease-out',
|
|
15
|
-
_motionReduce: { transition: 'none' },
|
|
16
19
|
},
|
|
17
20
|
};
|
|
18
21
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.mjs","sources":["../../src/utils/focusRing.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"focusRing.mjs","sources":["../../src/utils/focusRing.ts"],"sourcesContent":[null],"names":[],"mappings":";AAAA;;;;;;;;;;;AAWG;AACI,MAAM,SAAS,GAAG;AACvB,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC3B,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,SAAS,EACP,uFAAuF;AAC1F,KAAA;;;;;"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { Accordion as ChakraAccordion, ChakraProvider } from '@chakra-ui/react';
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
3
|
+
import { describe, expect, it } from 'vitest';
|
|
4
|
+
|
|
5
|
+
import { system } from '../../theme';
|
|
6
|
+
import { Accordion } from './Accordion';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Accordion content runs the same height animation as Collapsible, so it gets
|
|
10
|
+
* the same clock (300 in / 150 out) instead of Chakra's symmetric 200 / 200,
|
|
11
|
+
* and keeps the recipe's own `expand-height` name.
|
|
12
|
+
*/
|
|
13
|
+
const rulesFor = (el: Element) => {
|
|
14
|
+
const css = Array.from(document.querySelectorAll('style'))
|
|
15
|
+
.map((s) => s.textContent ?? '')
|
|
16
|
+
.join('\n');
|
|
17
|
+
return el.className
|
|
18
|
+
.split(' ')
|
|
19
|
+
.filter((c) => c.startsWith('css-'))
|
|
20
|
+
.flatMap((c) => [
|
|
21
|
+
...css.matchAll(new RegExp(`\\.${c}[^{]*\\{([^}]*)\\}`, 'g')),
|
|
22
|
+
])
|
|
23
|
+
.map((m) => m[1])
|
|
24
|
+
.join('\n');
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
describe('Accordion presence timing', () => {
|
|
28
|
+
it('opens on motion.base and closes on fast, keeping the height keyframes', () => {
|
|
29
|
+
const { container } = render(
|
|
30
|
+
<ChakraProvider value={system}>
|
|
31
|
+
<Accordion defaultValue={['a']}>
|
|
32
|
+
<ChakraAccordion.Item value="a">
|
|
33
|
+
<ChakraAccordion.ItemTrigger>A</ChakraAccordion.ItemTrigger>
|
|
34
|
+
<ChakraAccordion.ItemContent>
|
|
35
|
+
<ChakraAccordion.ItemBody>body</ChakraAccordion.ItemBody>
|
|
36
|
+
</ChakraAccordion.ItemContent>
|
|
37
|
+
</ChakraAccordion.Item>
|
|
38
|
+
</Accordion>
|
|
39
|
+
</ChakraProvider>
|
|
40
|
+
);
|
|
41
|
+
const rules = rulesFor(
|
|
42
|
+
container.querySelector('[data-part="item-content"]')!
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
expect(rules).toContain(
|
|
46
|
+
'animation-duration:var(--chakra-durations-motion-base)'
|
|
47
|
+
);
|
|
48
|
+
expect(rules).toContain('animation-duration:var(--chakra-durations-fast)');
|
|
49
|
+
expect(rules).not.toContain(
|
|
50
|
+
'animation-duration:var(--chakra-durations-moderate)'
|
|
51
|
+
);
|
|
52
|
+
expect(rules).toContain('expand-height');
|
|
53
|
+
});
|
|
54
|
+
});
|