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.
- package/CHANGELOG.md +33 -0
- package/README.md +1 -1
- package/README_ja.md +1 -1
- package/README_zh.md +1 -1
- package/dist/chunks/{audio-DcPvT2Kh.js → audio-CynhhWDi.js} +3 -3
- package/dist/chunks/{audio-DcPvT2Kh.js.map → audio-CynhhWDi.js.map} +1 -1
- package/dist/chunks/{audio-EXUoijsG.cjs → audio-cgWbDkoY.cjs} +3 -3
- package/dist/chunks/{audio-EXUoijsG.cjs.map → audio-cgWbDkoY.cjs.map} +1 -1
- package/dist/chunks/{base-2-yYc93C.js → base-CLuqlLfG.js} +63 -6
- package/dist/chunks/base-CLuqlLfG.js.map +1 -0
- package/dist/chunks/{base-BaQV-2ha.cjs → base-DoRUZBy-.cjs} +66 -5
- package/dist/chunks/base-DoRUZBy-.cjs.map +1 -0
- package/dist/chunks/{builtins-HlqAkK0f.js → builtins-Bs4smevg.js} +3 -3
- package/dist/chunks/{builtins-HlqAkK0f.js.map → builtins-Bs4smevg.js.map} +1 -1
- package/dist/chunks/{builtins-xalxV2d5.cjs → builtins-ClXshqj-.cjs} +3 -3
- package/dist/chunks/{builtins-xalxV2d5.cjs.map → builtins-ClXshqj-.cjs.map} +1 -1
- package/dist/chunks/{core-DuO-AVXL.js → core-C3Taz-ew.js} +2 -2
- package/dist/chunks/{core-DuO-AVXL.js.map → core-C3Taz-ew.js.map} +1 -1
- package/dist/chunks/{core-D5rU0CV6.js → core-CiN5sqxB.js} +2 -2
- package/dist/chunks/{core-D5rU0CV6.js.map → core-CiN5sqxB.js.map} +1 -1
- package/dist/chunks/{core-BGAyaY6L.cjs → core-CwO835Wm.cjs} +2 -2
- package/dist/chunks/{core-BGAyaY6L.cjs.map → core-CwO835Wm.cjs.map} +1 -1
- package/dist/chunks/{core-zq17EeCI.cjs → core-O4grKHSa.cjs} +2 -2
- package/dist/chunks/{core-zq17EeCI.cjs.map → core-O4grKHSa.cjs.map} +1 -1
- package/dist/chunks/{fx-lBGVtQO1.cjs → fx-C-XjLOTc.cjs} +2 -2
- package/dist/chunks/{fx-lBGVtQO1.cjs.map → fx-C-XjLOTc.cjs.map} +1 -1
- package/dist/chunks/{fx-CMxWNwH8.js → fx-CQv3IxMf.js} +2 -2
- package/dist/chunks/{fx-CMxWNwH8.js.map → fx-CQv3IxMf.js.map} +1 -1
- package/dist/chunks/{gpu-DLPghVWr.js → gpu-CB8frFOD.js} +2 -2
- package/dist/chunks/{gpu-DLPghVWr.js.map → gpu-CB8frFOD.js.map} +1 -1
- package/dist/chunks/{gpu-Dx0H875w.cjs → gpu-CcdA2D2i.cjs} +2 -2
- package/dist/chunks/{gpu-Dx0H875w.cjs.map → gpu-CcdA2D2i.cjs.map} +1 -1
- package/dist/chunks/{index-tags-C04JP8g4.js → index-tags-B-JBecYg.js} +2 -2
- package/dist/chunks/index-tags-B-JBecYg.js.map +1 -0
- package/dist/chunks/{index-tags-BTMwrfgV.cjs → index-tags-hLIF2Clq.cjs} +2 -2
- package/dist/chunks/index-tags-hLIF2Clq.cjs.map +1 -0
- package/dist/chunks/{player-PS6_FzNw.cjs → player-C2n17sdH.cjs} +4 -4
- package/dist/chunks/{player-PS6_FzNw.cjs.map → player-C2n17sdH.cjs.map} +1 -1
- package/dist/chunks/{player-DxvCYo7Q.js → player-YzQGkKaW.js} +4 -4
- package/dist/chunks/{player-DxvCYo7Q.js.map → player-YzQGkKaW.js.map} +1 -1
- package/dist/chunks/{registry-DehBVRDV.cjs → registry-BVklOepd.cjs} +2 -2
- package/dist/chunks/{registry-DehBVRDV.cjs.map → registry-BVklOepd.cjs.map} +1 -1
- package/dist/chunks/{registry-CyKExAmE.js → registry-CnO7ZVPK.js} +2 -2
- package/dist/chunks/{registry-CyKExAmE.js.map → registry-CnO7ZVPK.js.map} +1 -1
- package/dist/chunks/{spring-BK8DiezC.js → spring-BFKNHmfl.js} +2 -2
- package/dist/chunks/{spring-BK8DiezC.js.map → spring-BFKNHmfl.js.map} +1 -1
- package/dist/chunks/{spring-Dgx187Vh.cjs → spring-uQMVJTj9.cjs} +2 -2
- package/dist/chunks/{spring-Dgx187Vh.cjs.map → spring-uQMVJTj9.cjs.map} +1 -1
- package/dist/chunks/{variants-BQ6bhzn4.js → variants-B-zKORvt.js} +2 -2
- package/dist/chunks/{variants-BQ6bhzn4.js.map → variants-B-zKORvt.js.map} +1 -1
- package/dist/chunks/{variants-BhjyddG8.cjs → variants-DagykrKH.cjs} +2 -2
- package/dist/chunks/{variants-BhjyddG8.cjs.map → variants-DagykrKH.cjs.map} +1 -1
- package/dist/components/a11y.cjs +2 -2
- package/dist/components/a11y.d.cts +1 -1
- package/dist/components/a11y.d.ts +1 -1
- package/dist/components/a11y.js +3 -3
- package/dist/components/angular.cjs +9 -9
- package/dist/components/angular.d.cts +2 -18
- package/dist/components/angular.d.ts +2 -18
- package/dist/components/angular.js +9 -9
- package/dist/components/background.cjs +2 -2
- package/dist/components/background.js +2 -2
- package/dist/components/bridge.cjs +1 -1
- package/dist/components/bridge.js +1 -1
- package/dist/components/cards.cjs +2 -2
- package/dist/components/cards.js +2 -2
- package/dist/components/click.cjs +3 -3
- package/dist/components/click.js +3 -3
- package/dist/components/depth.cjs +3 -3
- package/dist/components/depth.js +3 -3
- package/dist/components/effects.cjs +7 -7
- package/dist/components/effects.js +9 -9
- package/dist/components/engine.cjs +266 -0
- package/dist/components/engine.cjs.map +1 -0
- package/dist/components/engine.d.cts +105 -0
- package/dist/components/engine.d.ts +105 -0
- package/dist/components/engine.js +255 -0
- package/dist/components/engine.js.map +1 -0
- package/dist/components/feedback.cjs +1 -1
- package/dist/components/feedback.js +1 -1
- package/dist/components/fx-3d.cjs +2 -2
- package/dist/components/fx-3d.js +2 -2
- package/dist/components/fx-ai.cjs +2 -2
- package/dist/components/fx-ai.js +2 -2
- package/dist/components/fx-chart.cjs +2 -2
- package/dist/components/fx-chart.js +2 -2
- package/dist/components/fx-festival.cjs +121 -0
- package/dist/components/fx-festival.cjs.map +1 -0
- package/dist/components/fx-festival.d.cts +69 -0
- package/dist/components/fx-festival.d.ts +69 -0
- package/dist/components/fx-festival.js +117 -0
- package/dist/components/fx-festival.js.map +1 -0
- package/dist/components/fx-focus.cjs +2 -2
- package/dist/components/fx-focus.js +2 -2
- package/dist/components/fx-form.cjs +2 -2
- package/dist/components/fx-form.js +2 -2
- package/dist/components/fx-game.cjs +2 -2
- package/dist/components/fx-game.js +2 -2
- package/dist/components/fx-geo.cjs +2 -2
- package/dist/components/fx-geo.js +2 -2
- package/dist/components/fx-gpu.cjs +3 -3
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.cjs +2 -2
- package/dist/components/fx-light.js +2 -2
- package/dist/components/fx-morph.cjs +2 -2
- package/dist/components/fx-morph.js +2 -2
- package/dist/components/fx-music.cjs +3 -3
- package/dist/components/fx-music.js +3 -3
- package/dist/components/fx-physics.cjs +2 -2
- package/dist/components/fx-physics.js +2 -2
- package/dist/components/fx-shop.cjs +2 -2
- package/dist/components/fx-shop.js +2 -2
- package/dist/components/fx-social.cjs +2 -2
- package/dist/components/fx-social.js +2 -2
- package/dist/components/fx-text.cjs +2 -2
- package/dist/components/fx-text.js +2 -2
- package/dist/components/fx-transitions.cjs +3 -3
- package/dist/components/fx-transitions.js +3 -3
- package/dist/components/fx-weather.cjs +2 -2
- package/dist/components/fx-weather.js +2 -2
- package/dist/components/fx.cjs +5 -5
- package/dist/components/fx.js +6 -6
- package/dist/components/fx2.cjs +10 -4
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +26 -1
- package/dist/components/fx2.d.ts +26 -1
- package/dist/components/fx2.js +10 -6
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/gesture.cjs +3 -3
- package/dist/components/gesture.js +4 -4
- package/dist/components/interaction.cjs +1 -1
- package/dist/components/interaction.js +1 -1
- package/dist/components/jsx.d.cts +1 -1
- package/dist/components/jsx.d.ts +1 -1
- package/dist/components/layout.cjs +1 -1
- package/dist/components/layout.js +1 -1
- package/dist/components/lazy.cjs +1 -1
- package/dist/components/lazy.d.cts +1 -1
- package/dist/components/lazy.d.ts +1 -1
- package/dist/components/lazy.js +1 -1
- package/dist/components/lite.cjs +151 -206
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +152 -206
- package/dist/components/lite.js.map +1 -1
- package/dist/components/marketplace.cjs +2 -2
- package/dist/components/marketplace.js +2 -2
- package/dist/components/packs.cjs +1 -1
- package/dist/components/packs.js +1 -1
- package/dist/components/page.cjs +2 -2
- package/dist/components/page.js +3 -3
- package/dist/components/perf.cjs +2 -2
- package/dist/components/perf.d.cts +1 -1
- package/dist/components/perf.d.ts +1 -1
- package/dist/components/perf.js +3 -3
- package/dist/components/physics.cjs +2 -2
- package/dist/components/physics.js +3 -3
- package/dist/components/react.cjs +1 -1
- package/dist/components/react.js +1 -1
- package/dist/components/reveal.cjs +1 -1
- package/dist/components/reveal.js +1 -1
- package/dist/components/solid.cjs +9 -9
- package/dist/components/solid.d.cts +2 -18
- package/dist/components/solid.d.ts +2 -18
- package/dist/components/solid.js +9 -9
- package/dist/components/svelte.cjs +9 -9
- package/dist/components/svelte.d.cts +2 -18
- package/dist/components/svelte.d.ts +2 -18
- package/dist/components/svelte.js +9 -9
- package/dist/components/svg.cjs +1 -1
- package/dist/components/svg.js +1 -1
- package/dist/components/text.cjs +2 -2
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.cjs +2 -2
- package/dist/components/timeline.js +3 -3
- package/dist/components/transitions.cjs +1 -1
- package/dist/components/transitions.js +1 -1
- package/dist/components/ui.cjs +17 -108
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.css +0 -1
- package/dist/components/ui.d.cts +3 -20
- package/dist/components/ui.d.ts +3 -20
- package/dist/components/ui.js +19 -109
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.cjs +9 -9
- package/dist/components/vue.d.cts +2 -18
- package/dist/components/vue.d.ts +2 -18
- package/dist/components/vue.js +9 -9
- package/dist/components/webgl.cjs +1 -1
- package/dist/components/webgl.js +1 -1
- package/dist/components/widgets.cjs +373 -146
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +110 -2
- package/dist/components/widgets.d.ts +110 -2
- package/dist/components/widgets.js +369 -147
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.cjs +9 -10
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +0 -1
- package/dist/components.d.cts +4 -21
- package/dist/components.d.ts +4 -21
- package/dist/components.js +12 -12
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +2 -2
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +14 -12
- package/docs/accessibility.md +1 -2
- package/docs/components.md +44 -1
- package/docs/deprecations.md +1 -1
- package/docs/upgrading-8.md +9 -6
- package/package.json +41 -1
- package/dist/chunks/base-2-yYc93C.js.map +0 -1
- package/dist/chunks/base-BaQV-2ha.cjs.map +0 -1
- package/dist/chunks/index-tags-BTMwrfgV.cjs.map +0 -1
- 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 };
|