use-scroll-animate 7.9.0 → 8.1.0

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.
Files changed (219) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +1 -1
  3. package/README_ja.md +1 -1
  4. package/README_zh.md +1 -1
  5. package/dist/chunks/{audio-DcPvT2Kh.js → audio-CynhhWDi.js} +3 -3
  6. package/dist/chunks/{audio-DcPvT2Kh.js.map → audio-CynhhWDi.js.map} +1 -1
  7. package/dist/chunks/{audio-EXUoijsG.cjs → audio-cgWbDkoY.cjs} +3 -3
  8. package/dist/chunks/{audio-EXUoijsG.cjs.map → audio-cgWbDkoY.cjs.map} +1 -1
  9. package/dist/chunks/{base-2-yYc93C.js → base-CLuqlLfG.js} +63 -6
  10. package/dist/chunks/base-CLuqlLfG.js.map +1 -0
  11. package/dist/chunks/{base-BaQV-2ha.cjs → base-DoRUZBy-.cjs} +66 -5
  12. package/dist/chunks/base-DoRUZBy-.cjs.map +1 -0
  13. package/dist/chunks/{builtins-HlqAkK0f.js → builtins-Bs4smevg.js} +3 -3
  14. package/dist/chunks/{builtins-HlqAkK0f.js.map → builtins-Bs4smevg.js.map} +1 -1
  15. package/dist/chunks/{builtins-xalxV2d5.cjs → builtins-ClXshqj-.cjs} +3 -3
  16. package/dist/chunks/{builtins-xalxV2d5.cjs.map → builtins-ClXshqj-.cjs.map} +1 -1
  17. package/dist/chunks/{core-DuO-AVXL.js → core-C3Taz-ew.js} +2 -2
  18. package/dist/chunks/{core-DuO-AVXL.js.map → core-C3Taz-ew.js.map} +1 -1
  19. package/dist/chunks/{core-D5rU0CV6.js → core-CiN5sqxB.js} +2 -2
  20. package/dist/chunks/{core-D5rU0CV6.js.map → core-CiN5sqxB.js.map} +1 -1
  21. package/dist/chunks/{core-BGAyaY6L.cjs → core-CwO835Wm.cjs} +2 -2
  22. package/dist/chunks/{core-BGAyaY6L.cjs.map → core-CwO835Wm.cjs.map} +1 -1
  23. package/dist/chunks/{core-zq17EeCI.cjs → core-O4grKHSa.cjs} +2 -2
  24. package/dist/chunks/{core-zq17EeCI.cjs.map → core-O4grKHSa.cjs.map} +1 -1
  25. package/dist/chunks/{fx-lBGVtQO1.cjs → fx-C-XjLOTc.cjs} +2 -2
  26. package/dist/chunks/{fx-lBGVtQO1.cjs.map → fx-C-XjLOTc.cjs.map} +1 -1
  27. package/dist/chunks/{fx-CMxWNwH8.js → fx-CQv3IxMf.js} +2 -2
  28. package/dist/chunks/{fx-CMxWNwH8.js.map → fx-CQv3IxMf.js.map} +1 -1
  29. package/dist/chunks/{gpu-DLPghVWr.js → gpu-CB8frFOD.js} +2 -2
  30. package/dist/chunks/{gpu-DLPghVWr.js.map → gpu-CB8frFOD.js.map} +1 -1
  31. package/dist/chunks/{gpu-Dx0H875w.cjs → gpu-CcdA2D2i.cjs} +2 -2
  32. package/dist/chunks/{gpu-Dx0H875w.cjs.map → gpu-CcdA2D2i.cjs.map} +1 -1
  33. package/dist/chunks/{index-tags-C04JP8g4.js → index-tags-B-JBecYg.js} +2 -2
  34. package/dist/chunks/index-tags-B-JBecYg.js.map +1 -0
  35. package/dist/chunks/{index-tags-BTMwrfgV.cjs → index-tags-hLIF2Clq.cjs} +2 -2
  36. package/dist/chunks/index-tags-hLIF2Clq.cjs.map +1 -0
  37. package/dist/chunks/{player-PS6_FzNw.cjs → player-C2n17sdH.cjs} +4 -4
  38. package/dist/chunks/{player-PS6_FzNw.cjs.map → player-C2n17sdH.cjs.map} +1 -1
  39. package/dist/chunks/{player-DxvCYo7Q.js → player-YzQGkKaW.js} +4 -4
  40. package/dist/chunks/{player-DxvCYo7Q.js.map → player-YzQGkKaW.js.map} +1 -1
  41. package/dist/chunks/{registry-DehBVRDV.cjs → registry-BVklOepd.cjs} +2 -2
  42. package/dist/chunks/{registry-DehBVRDV.cjs.map → registry-BVklOepd.cjs.map} +1 -1
  43. package/dist/chunks/{registry-CyKExAmE.js → registry-CnO7ZVPK.js} +2 -2
  44. package/dist/chunks/{registry-CyKExAmE.js.map → registry-CnO7ZVPK.js.map} +1 -1
  45. package/dist/chunks/{spring-BK8DiezC.js → spring-BFKNHmfl.js} +2 -2
  46. package/dist/chunks/{spring-BK8DiezC.js.map → spring-BFKNHmfl.js.map} +1 -1
  47. package/dist/chunks/{spring-Dgx187Vh.cjs → spring-uQMVJTj9.cjs} +2 -2
  48. package/dist/chunks/{spring-Dgx187Vh.cjs.map → spring-uQMVJTj9.cjs.map} +1 -1
  49. package/dist/chunks/{variants-BQ6bhzn4.js → variants-B-zKORvt.js} +2 -2
  50. package/dist/chunks/{variants-BQ6bhzn4.js.map → variants-B-zKORvt.js.map} +1 -1
  51. package/dist/chunks/{variants-BhjyddG8.cjs → variants-DagykrKH.cjs} +2 -2
  52. package/dist/chunks/{variants-BhjyddG8.cjs.map → variants-DagykrKH.cjs.map} +1 -1
  53. package/dist/components/a11y.cjs +2 -2
  54. package/dist/components/a11y.d.cts +1 -1
  55. package/dist/components/a11y.d.ts +1 -1
  56. package/dist/components/a11y.js +3 -3
  57. package/dist/components/angular.cjs +9 -9
  58. package/dist/components/angular.d.cts +2 -18
  59. package/dist/components/angular.d.ts +2 -18
  60. package/dist/components/angular.js +9 -9
  61. package/dist/components/background.cjs +2 -2
  62. package/dist/components/background.js +2 -2
  63. package/dist/components/bridge.cjs +1 -1
  64. package/dist/components/bridge.js +1 -1
  65. package/dist/components/cards.cjs +2 -2
  66. package/dist/components/cards.js +2 -2
  67. package/dist/components/click.cjs +3 -3
  68. package/dist/components/click.js +3 -3
  69. package/dist/components/depth.cjs +3 -3
  70. package/dist/components/depth.js +3 -3
  71. package/dist/components/effects.cjs +7 -7
  72. package/dist/components/effects.js +9 -9
  73. package/dist/components/engine.cjs +266 -0
  74. package/dist/components/engine.cjs.map +1 -0
  75. package/dist/components/engine.d.cts +105 -0
  76. package/dist/components/engine.d.ts +105 -0
  77. package/dist/components/engine.js +255 -0
  78. package/dist/components/engine.js.map +1 -0
  79. package/dist/components/feedback.cjs +1 -1
  80. package/dist/components/feedback.js +1 -1
  81. package/dist/components/fx-3d.cjs +2 -2
  82. package/dist/components/fx-3d.js +2 -2
  83. package/dist/components/fx-ai.cjs +2 -2
  84. package/dist/components/fx-ai.js +2 -2
  85. package/dist/components/fx-chart.cjs +2 -2
  86. package/dist/components/fx-chart.js +2 -2
  87. package/dist/components/fx-festival.cjs +121 -0
  88. package/dist/components/fx-festival.cjs.map +1 -0
  89. package/dist/components/fx-festival.d.cts +69 -0
  90. package/dist/components/fx-festival.d.ts +69 -0
  91. package/dist/components/fx-festival.js +117 -0
  92. package/dist/components/fx-festival.js.map +1 -0
  93. package/dist/components/fx-focus.cjs +2 -2
  94. package/dist/components/fx-focus.js +2 -2
  95. package/dist/components/fx-form.cjs +2 -2
  96. package/dist/components/fx-form.js +2 -2
  97. package/dist/components/fx-game.cjs +2 -2
  98. package/dist/components/fx-game.js +2 -2
  99. package/dist/components/fx-geo.cjs +2 -2
  100. package/dist/components/fx-geo.js +2 -2
  101. package/dist/components/fx-gpu.cjs +3 -3
  102. package/dist/components/fx-gpu.js +3 -3
  103. package/dist/components/fx-light.cjs +2 -2
  104. package/dist/components/fx-light.js +2 -2
  105. package/dist/components/fx-morph.cjs +2 -2
  106. package/dist/components/fx-morph.js +2 -2
  107. package/dist/components/fx-music.cjs +3 -3
  108. package/dist/components/fx-music.js +3 -3
  109. package/dist/components/fx-physics.cjs +2 -2
  110. package/dist/components/fx-physics.js +2 -2
  111. package/dist/components/fx-shop.cjs +2 -2
  112. package/dist/components/fx-shop.js +2 -2
  113. package/dist/components/fx-social.cjs +2 -2
  114. package/dist/components/fx-social.js +2 -2
  115. package/dist/components/fx-text.cjs +2 -2
  116. package/dist/components/fx-text.js +2 -2
  117. package/dist/components/fx-transitions.cjs +3 -3
  118. package/dist/components/fx-transitions.js +3 -3
  119. package/dist/components/fx-weather.cjs +2 -2
  120. package/dist/components/fx-weather.js +2 -2
  121. package/dist/components/fx.cjs +5 -5
  122. package/dist/components/fx.js +6 -6
  123. package/dist/components/fx2.cjs +10 -4
  124. package/dist/components/fx2.cjs.map +1 -1
  125. package/dist/components/fx2.d.cts +26 -1
  126. package/dist/components/fx2.d.ts +26 -1
  127. package/dist/components/fx2.js +10 -6
  128. package/dist/components/fx2.js.map +1 -1
  129. package/dist/components/gesture.cjs +3 -3
  130. package/dist/components/gesture.js +4 -4
  131. package/dist/components/interaction.cjs +1 -1
  132. package/dist/components/interaction.js +1 -1
  133. package/dist/components/jsx.d.cts +1 -1
  134. package/dist/components/jsx.d.ts +1 -1
  135. package/dist/components/layout.cjs +1 -1
  136. package/dist/components/layout.js +1 -1
  137. package/dist/components/lazy.cjs +1 -1
  138. package/dist/components/lazy.d.cts +1 -1
  139. package/dist/components/lazy.d.ts +1 -1
  140. package/dist/components/lazy.js +1 -1
  141. package/dist/components/lite.cjs +151 -206
  142. package/dist/components/lite.cjs.map +1 -1
  143. package/dist/components/lite.js +152 -206
  144. package/dist/components/lite.js.map +1 -1
  145. package/dist/components/marketplace.cjs +2 -2
  146. package/dist/components/marketplace.js +2 -2
  147. package/dist/components/packs.cjs +1 -1
  148. package/dist/components/packs.js +1 -1
  149. package/dist/components/page.cjs +2 -2
  150. package/dist/components/page.js +3 -3
  151. package/dist/components/perf.cjs +2 -2
  152. package/dist/components/perf.d.cts +1 -1
  153. package/dist/components/perf.d.ts +1 -1
  154. package/dist/components/perf.js +3 -3
  155. package/dist/components/physics.cjs +2 -2
  156. package/dist/components/physics.js +3 -3
  157. package/dist/components/react.cjs +1 -1
  158. package/dist/components/react.js +1 -1
  159. package/dist/components/reveal.cjs +1 -1
  160. package/dist/components/reveal.js +1 -1
  161. package/dist/components/solid.cjs +9 -9
  162. package/dist/components/solid.d.cts +2 -18
  163. package/dist/components/solid.d.ts +2 -18
  164. package/dist/components/solid.js +9 -9
  165. package/dist/components/svelte.cjs +9 -9
  166. package/dist/components/svelte.d.cts +2 -18
  167. package/dist/components/svelte.d.ts +2 -18
  168. package/dist/components/svelte.js +9 -9
  169. package/dist/components/svg.cjs +1 -1
  170. package/dist/components/svg.js +1 -1
  171. package/dist/components/text.cjs +2 -2
  172. package/dist/components/text.js +2 -2
  173. package/dist/components/timeline.cjs +2 -2
  174. package/dist/components/timeline.js +3 -3
  175. package/dist/components/transitions.cjs +1 -1
  176. package/dist/components/transitions.js +1 -1
  177. package/dist/components/ui.cjs +17 -108
  178. package/dist/components/ui.cjs.map +1 -1
  179. package/dist/components/ui.css +0 -1
  180. package/dist/components/ui.d.cts +3 -20
  181. package/dist/components/ui.d.ts +3 -20
  182. package/dist/components/ui.js +19 -109
  183. package/dist/components/ui.js.map +1 -1
  184. package/dist/components/vue.cjs +9 -9
  185. package/dist/components/vue.d.cts +2 -18
  186. package/dist/components/vue.d.ts +2 -18
  187. package/dist/components/vue.js +9 -9
  188. package/dist/components/webgl.cjs +1 -1
  189. package/dist/components/webgl.js +1 -1
  190. package/dist/components/widgets.cjs +373 -146
  191. package/dist/components/widgets.cjs.map +1 -1
  192. package/dist/components/widgets.d.cts +110 -2
  193. package/dist/components/widgets.d.ts +110 -2
  194. package/dist/components/widgets.js +369 -147
  195. package/dist/components/widgets.js.map +1 -1
  196. package/dist/components.cjs +9 -10
  197. package/dist/components.cjs.map +1 -1
  198. package/dist/components.css +0 -1
  199. package/dist/components.d.cts +4 -21
  200. package/dist/components.d.ts +4 -21
  201. package/dist/components.js +12 -12
  202. package/dist/components.umd.js +2 -2
  203. package/dist/components.umd.js.map +1 -1
  204. package/dist/index.cjs +2 -2
  205. package/dist/index.js +2 -2
  206. package/dist/index.umd.js +2 -2
  207. package/dist/index.umd.js.map +1 -1
  208. package/dist/widgets.umd.js +1 -1
  209. package/dist/widgets.umd.js.map +1 -1
  210. package/docs/ROADMAP.md +14 -12
  211. package/docs/accessibility.md +1 -2
  212. package/docs/components.md +44 -1
  213. package/docs/deprecations.md +1 -1
  214. package/docs/upgrading-8.md +9 -6
  215. package/package.json +41 -1
  216. package/dist/chunks/base-2-yYc93C.js.map +0 -1
  217. package/dist/chunks/base-BaQV-2ha.cjs.map +0 -1
  218. package/dist/chunks/index-tags-BTMwrfgV.cjs.map +0 -1
  219. package/dist/chunks/index-tags-C04JP8g4.js.map +0 -1
@@ -1201,6 +1201,110 @@ interface UsaShortcutElement extends UsaElement {
1201
1201
  }
1202
1202
  declare function defineShortcut(tag?: string): CustomElementConstructor | undefined;
1203
1203
 
1204
+ /**
1205
+ * `<usa-clock-control>` (8.0) — a small control bar for the unified motion
1206
+ * clock: play / pause every Motionary animation on the page and switch the
1207
+ * speed (`speeds="0.25,0.5,1,2"`). It reflects changes made elsewhere
1208
+ * (`motionClock.rate = …`). Handy for demos, debugging and as a user-facing
1209
+ * "pause animations" control. A labelled `group` with a toggle button
1210
+ * (`aria-pressed`) and a radio group of speeds; `usa:change` { rate, paused }.
1211
+ */
1212
+ interface UsaClockControlElement extends UsaElement {
1213
+ readonly rate: number;
1214
+ readonly paused: boolean;
1215
+ }
1216
+ declare function defineClockControl(tag?: string): CustomElementConstructor | undefined;
1217
+
1218
+ /**
1219
+ * `motionary/engine` (= `motionary/components/engine`, 8.0) — the unified
1220
+ * timeline engine and SSR hydration animations.
1221
+ *
1222
+ * - **`motionClock`** — the one clock every component, effect and frame loop
1223
+ * runs on: `rate` (slow-mo / fast-forward), `pause()` / `resume()` /
1224
+ * `toggle()`, `time`, `onChange()`. Pausing it freezes every animation
1225
+ * started by Motionary on the page.
1226
+ * - **`createTimeline()`** — sequence animations on that clock:
1227
+ * `add(target, keyframes, options, position)` with positions `1200`
1228
+ * (ms), `'+=200'` / `'-=100'` (after / overlapping the previous end) or
1229
+ * `'<'` / `'<+=80'` (with the previous start); `play()`, `pause()`,
1230
+ * `seek(ms)`, `progress` (0–1, settable), `duration`, `finished`.
1231
+ * - **`hydrateMotion()`** — animate server-rendered `[data-usa-hydrate]`
1232
+ * markup in on hydration without a flash: `ssrHead()` gives the `<style>`
1233
+ * + one-line `<script>` for the document head (content stays visible
1234
+ * without JS, and a CSS fallback reveals it after 3 s if JS never runs).
1235
+ */
1236
+
1237
+ type TimelinePosition = number | string;
1238
+ interface TimelineEntry {
1239
+ target: Element;
1240
+ keyframes: Keyframe[];
1241
+ options: KeyframeAnimationOptions;
1242
+ start: number;
1243
+ end: number;
1244
+ }
1245
+ interface MotionTimeline {
1246
+ readonly entries: readonly TimelineEntry[];
1247
+ readonly duration: number;
1248
+ readonly playing: boolean;
1249
+ progress: number;
1250
+ readonly finished: Promise<void>;
1251
+ add(target: Element | Element[] | NodeListOf<Element> | null, keyframes: Keyframe[], options?: number | KeyframeAnimationOptions, position?: TimelinePosition): MotionTimeline;
1252
+ play(): MotionTimeline;
1253
+ pause(): MotionTimeline;
1254
+ seek(ms: number): MotionTimeline;
1255
+ restart(): MotionTimeline;
1256
+ cancel(): void;
1257
+ }
1258
+
1259
+ /**
1260
+ * `<usa-hydrate effect="fade-up" stagger="60">` (8.0) — SSR hydration
1261
+ * animation for its children: server-rendered content stays hidden only
1262
+ * while JS is on and the element has not upgraded yet (with `ssrHead()` in
1263
+ * the document head; a 3 s CSS fallback reveals it anyway), then the
1264
+ * children animate in one after another on the unified clock and the
1265
+ * element gets `data-usa-hydrated` (`usa:hydrated`). `effect`: fade ·
1266
+ * fade-up · fade-down · scale · blur · slide-left; `duration`; `replay()`;
1267
+ * `timeline`. Reduced motion: shown at once.
1268
+ */
1269
+ interface UsaHydrateElement extends UsaElement {
1270
+ readonly timeline: MotionTimeline | null;
1271
+ replay(): void;
1272
+ }
1273
+ declare function defineHydrate(tag?: string): CustomElementConstructor | undefined;
1274
+
1275
+ /**
1276
+ * `<usa-red-envelope amount="88.88" from="Grandma">` (8.1) — a Lunar New
1277
+ * Year red envelope (红包): tap / Enter / Space and the flap swings open, the
1278
+ * card slides out with the `amount` (counting up, `currency`, default ¥)
1279
+ * and gold coins pop out. `message` (default 恭喜发财), `from`, `opened`
1280
+ * (initial state); `open()`, `close()`; `usa:open` { amount }. A real
1281
+ * `<button aria-expanded>`; reduced motion: opens without the swing, slide,
1282
+ * count or coins.
1283
+ */
1284
+ interface UsaRedEnvelopeElement extends UsaElement {
1285
+ readonly opened: boolean;
1286
+ open(): void;
1287
+ close(): void;
1288
+ }
1289
+ declare function defineRedEnvelope(tag?: string): CustomElementConstructor | undefined;
1290
+
1291
+ /**
1292
+ * `<usa-festival-banner theme="lunar">` (8.1) — a festive announcement
1293
+ * banner with an ambient scene behind its text: `lunar` (swaying lanterns,
1294
+ * drifting gold sparkles), `xmas` (falling snow, twinkling lights),
1295
+ * `halloween` (bats, a glowing moon), `fireworks` (bursting rockets). Its
1296
+ * own content is the message; `dismissible` adds a close button
1297
+ * (`usa:dismiss`). The decorations are `aria-hidden`, the banner is a
1298
+ * labelled `region`; the scene only animates while on screen and is static
1299
+ * under reduced motion.
1300
+ */
1301
+ interface UsaFestivalBannerElement extends UsaElement {
1302
+ theme: string;
1303
+ dismiss(): void;
1304
+ }
1305
+ declare const FESTIVAL_THEMES: readonly ["lunar", "xmas", "halloween", "fireworks"];
1306
+ declare function defineFestivalBanner(tag?: string): CustomElementConstructor | undefined;
1307
+
1204
1308
  /**
1205
1309
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
1206
1310
  * entry so `motionary/components` and `components/lite` keep their size
@@ -1284,8 +1388,12 @@ declare global {
1284
1388
  'usa-voice-button': UsaVoiceButtonElement;
1285
1389
  'usa-command-palette': UsaCommandPaletteElement;
1286
1390
  'usa-shortcut': UsaShortcutElement;
1391
+ 'usa-clock-control': UsaClockControlElement;
1392
+ 'usa-hydrate': UsaHydrateElement;
1393
+ 'usa-red-envelope': UsaRedEnvelopeElement;
1394
+ 'usa-festival-banner': UsaFestivalBannerElement;
1287
1395
  }
1288
1396
  }
1289
1397
 
1290
- export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineField, defineFileDrop, defineGauge, defineGlobe, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOtp, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1291
- export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGlobeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOtpElement, UsaPaginationElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
1398
+ export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGlobe, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOtp, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineRedEnvelope, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1399
+ export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGlobeElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOtpElement, UsaPaginationElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
@@ -1201,6 +1201,110 @@ interface UsaShortcutElement extends UsaElement {
1201
1201
  }
1202
1202
  declare function defineShortcut(tag?: string): CustomElementConstructor | undefined;
1203
1203
 
1204
+ /**
1205
+ * `<usa-clock-control>` (8.0) — a small control bar for the unified motion
1206
+ * clock: play / pause every Motionary animation on the page and switch the
1207
+ * speed (`speeds="0.25,0.5,1,2"`). It reflects changes made elsewhere
1208
+ * (`motionClock.rate = …`). Handy for demos, debugging and as a user-facing
1209
+ * "pause animations" control. A labelled `group` with a toggle button
1210
+ * (`aria-pressed`) and a radio group of speeds; `usa:change` { rate, paused }.
1211
+ */
1212
+ interface UsaClockControlElement extends UsaElement {
1213
+ readonly rate: number;
1214
+ readonly paused: boolean;
1215
+ }
1216
+ declare function defineClockControl(tag?: string): CustomElementConstructor | undefined;
1217
+
1218
+ /**
1219
+ * `motionary/engine` (= `motionary/components/engine`, 8.0) — the unified
1220
+ * timeline engine and SSR hydration animations.
1221
+ *
1222
+ * - **`motionClock`** — the one clock every component, effect and frame loop
1223
+ * runs on: `rate` (slow-mo / fast-forward), `pause()` / `resume()` /
1224
+ * `toggle()`, `time`, `onChange()`. Pausing it freezes every animation
1225
+ * started by Motionary on the page.
1226
+ * - **`createTimeline()`** — sequence animations on that clock:
1227
+ * `add(target, keyframes, options, position)` with positions `1200`
1228
+ * (ms), `'+=200'` / `'-=100'` (after / overlapping the previous end) or
1229
+ * `'<'` / `'<+=80'` (with the previous start); `play()`, `pause()`,
1230
+ * `seek(ms)`, `progress` (0–1, settable), `duration`, `finished`.
1231
+ * - **`hydrateMotion()`** — animate server-rendered `[data-usa-hydrate]`
1232
+ * markup in on hydration without a flash: `ssrHead()` gives the `<style>`
1233
+ * + one-line `<script>` for the document head (content stays visible
1234
+ * without JS, and a CSS fallback reveals it after 3 s if JS never runs).
1235
+ */
1236
+
1237
+ type TimelinePosition = number | string;
1238
+ interface TimelineEntry {
1239
+ target: Element;
1240
+ keyframes: Keyframe[];
1241
+ options: KeyframeAnimationOptions;
1242
+ start: number;
1243
+ end: number;
1244
+ }
1245
+ interface MotionTimeline {
1246
+ readonly entries: readonly TimelineEntry[];
1247
+ readonly duration: number;
1248
+ readonly playing: boolean;
1249
+ progress: number;
1250
+ readonly finished: Promise<void>;
1251
+ add(target: Element | Element[] | NodeListOf<Element> | null, keyframes: Keyframe[], options?: number | KeyframeAnimationOptions, position?: TimelinePosition): MotionTimeline;
1252
+ play(): MotionTimeline;
1253
+ pause(): MotionTimeline;
1254
+ seek(ms: number): MotionTimeline;
1255
+ restart(): MotionTimeline;
1256
+ cancel(): void;
1257
+ }
1258
+
1259
+ /**
1260
+ * `<usa-hydrate effect="fade-up" stagger="60">` (8.0) — SSR hydration
1261
+ * animation for its children: server-rendered content stays hidden only
1262
+ * while JS is on and the element has not upgraded yet (with `ssrHead()` in
1263
+ * the document head; a 3 s CSS fallback reveals it anyway), then the
1264
+ * children animate in one after another on the unified clock and the
1265
+ * element gets `data-usa-hydrated` (`usa:hydrated`). `effect`: fade ·
1266
+ * fade-up · fade-down · scale · blur · slide-left; `duration`; `replay()`;
1267
+ * `timeline`. Reduced motion: shown at once.
1268
+ */
1269
+ interface UsaHydrateElement extends UsaElement {
1270
+ readonly timeline: MotionTimeline | null;
1271
+ replay(): void;
1272
+ }
1273
+ declare function defineHydrate(tag?: string): CustomElementConstructor | undefined;
1274
+
1275
+ /**
1276
+ * `<usa-red-envelope amount="88.88" from="Grandma">` (8.1) — a Lunar New
1277
+ * Year red envelope (红包): tap / Enter / Space and the flap swings open, the
1278
+ * card slides out with the `amount` (counting up, `currency`, default ¥)
1279
+ * and gold coins pop out. `message` (default 恭喜发财), `from`, `opened`
1280
+ * (initial state); `open()`, `close()`; `usa:open` { amount }. A real
1281
+ * `<button aria-expanded>`; reduced motion: opens without the swing, slide,
1282
+ * count or coins.
1283
+ */
1284
+ interface UsaRedEnvelopeElement extends UsaElement {
1285
+ readonly opened: boolean;
1286
+ open(): void;
1287
+ close(): void;
1288
+ }
1289
+ declare function defineRedEnvelope(tag?: string): CustomElementConstructor | undefined;
1290
+
1291
+ /**
1292
+ * `<usa-festival-banner theme="lunar">` (8.1) — a festive announcement
1293
+ * banner with an ambient scene behind its text: `lunar` (swaying lanterns,
1294
+ * drifting gold sparkles), `xmas` (falling snow, twinkling lights),
1295
+ * `halloween` (bats, a glowing moon), `fireworks` (bursting rockets). Its
1296
+ * own content is the message; `dismissible` adds a close button
1297
+ * (`usa:dismiss`). The decorations are `aria-hidden`, the banner is a
1298
+ * labelled `region`; the scene only animates while on screen and is static
1299
+ * under reduced motion.
1300
+ */
1301
+ interface UsaFestivalBannerElement extends UsaElement {
1302
+ theme: string;
1303
+ dismiss(): void;
1304
+ }
1305
+ declare const FESTIVAL_THEMES: readonly ["lunar", "xmas", "halloween", "fireworks"];
1306
+ declare function defineFestivalBanner(tag?: string): CustomElementConstructor | undefined;
1307
+
1204
1308
  /**
1205
1309
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
1206
1310
  * entry so `motionary/components` and `components/lite` keep their size
@@ -1284,8 +1388,12 @@ declare global {
1284
1388
  'usa-voice-button': UsaVoiceButtonElement;
1285
1389
  'usa-command-palette': UsaCommandPaletteElement;
1286
1390
  'usa-shortcut': UsaShortcutElement;
1391
+ 'usa-clock-control': UsaClockControlElement;
1392
+ 'usa-hydrate': UsaHydrateElement;
1393
+ 'usa-red-envelope': UsaRedEnvelopeElement;
1394
+ 'usa-festival-banner': UsaFestivalBannerElement;
1287
1395
  }
1288
1396
  }
1289
1397
 
1290
- export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineField, defineFileDrop, defineGauge, defineGlobe, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOtp, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1291
- export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGlobeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOtpElement, UsaPaginationElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
1398
+ export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGlobe, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOtp, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineRedEnvelope, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1399
+ export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGlobeElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOtpElement, UsaPaginationElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };