use-scroll-animate 7.8.0 → 8.0.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 (210) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/README.md +1 -1
  3. package/README_ja.md +1 -1
  4. package/README_zh.md +1 -1
  5. package/bin/usa-codemod-8.mjs +74 -0
  6. package/dist/chunks/{audio-DcPvT2Kh.js → audio-CynhhWDi.js} +3 -3
  7. package/dist/chunks/{audio-DcPvT2Kh.js.map → audio-CynhhWDi.js.map} +1 -1
  8. package/dist/chunks/{audio-EXUoijsG.cjs → audio-cgWbDkoY.cjs} +3 -3
  9. package/dist/chunks/{audio-EXUoijsG.cjs.map → audio-cgWbDkoY.cjs.map} +1 -1
  10. package/dist/chunks/{base-2-yYc93C.js → base-CLuqlLfG.js} +63 -6
  11. package/dist/chunks/base-CLuqlLfG.js.map +1 -0
  12. package/dist/chunks/{base-BaQV-2ha.cjs → base-DoRUZBy-.cjs} +66 -5
  13. package/dist/chunks/base-DoRUZBy-.cjs.map +1 -0
  14. package/dist/chunks/{builtins-HlqAkK0f.js → builtins-Bs4smevg.js} +3 -3
  15. package/dist/chunks/{builtins-HlqAkK0f.js.map → builtins-Bs4smevg.js.map} +1 -1
  16. package/dist/chunks/{builtins-xalxV2d5.cjs → builtins-ClXshqj-.cjs} +3 -3
  17. package/dist/chunks/{builtins-xalxV2d5.cjs.map → builtins-ClXshqj-.cjs.map} +1 -1
  18. package/dist/chunks/{core-DuO-AVXL.js → core-C3Taz-ew.js} +2 -2
  19. package/dist/chunks/{core-DuO-AVXL.js.map → core-C3Taz-ew.js.map} +1 -1
  20. package/dist/chunks/{core-D5rU0CV6.js → core-CiN5sqxB.js} +2 -2
  21. package/dist/chunks/{core-D5rU0CV6.js.map → core-CiN5sqxB.js.map} +1 -1
  22. package/dist/chunks/{core-BGAyaY6L.cjs → core-CwO835Wm.cjs} +2 -2
  23. package/dist/chunks/{core-BGAyaY6L.cjs.map → core-CwO835Wm.cjs.map} +1 -1
  24. package/dist/chunks/{core-zq17EeCI.cjs → core-O4grKHSa.cjs} +2 -2
  25. package/dist/chunks/{core-zq17EeCI.cjs.map → core-O4grKHSa.cjs.map} +1 -1
  26. package/dist/chunks/{fx-lBGVtQO1.cjs → fx-C-XjLOTc.cjs} +2 -2
  27. package/dist/chunks/{fx-lBGVtQO1.cjs.map → fx-C-XjLOTc.cjs.map} +1 -1
  28. package/dist/chunks/{fx-CMxWNwH8.js → fx-CQv3IxMf.js} +2 -2
  29. package/dist/chunks/{fx-CMxWNwH8.js.map → fx-CQv3IxMf.js.map} +1 -1
  30. package/dist/chunks/{gpu-DLPghVWr.js → gpu-CB8frFOD.js} +2 -2
  31. package/dist/chunks/{gpu-DLPghVWr.js.map → gpu-CB8frFOD.js.map} +1 -1
  32. package/dist/chunks/{gpu-Dx0H875w.cjs → gpu-CcdA2D2i.cjs} +2 -2
  33. package/dist/chunks/{gpu-Dx0H875w.cjs.map → gpu-CcdA2D2i.cjs.map} +1 -1
  34. package/dist/chunks/{index-tags-C04JP8g4.js → index-tags-B-JBecYg.js} +2 -2
  35. package/dist/chunks/index-tags-B-JBecYg.js.map +1 -0
  36. package/dist/chunks/{index-tags-BTMwrfgV.cjs → index-tags-hLIF2Clq.cjs} +2 -2
  37. package/dist/chunks/index-tags-hLIF2Clq.cjs.map +1 -0
  38. package/dist/chunks/{player-PS6_FzNw.cjs → player-C2n17sdH.cjs} +4 -4
  39. package/dist/chunks/{player-PS6_FzNw.cjs.map → player-C2n17sdH.cjs.map} +1 -1
  40. package/dist/chunks/{player-DxvCYo7Q.js → player-YzQGkKaW.js} +4 -4
  41. package/dist/chunks/{player-DxvCYo7Q.js.map → player-YzQGkKaW.js.map} +1 -1
  42. package/dist/chunks/{registry-DehBVRDV.cjs → registry-BVklOepd.cjs} +2 -2
  43. package/dist/chunks/{registry-DehBVRDV.cjs.map → registry-BVklOepd.cjs.map} +1 -1
  44. package/dist/chunks/{registry-CyKExAmE.js → registry-CnO7ZVPK.js} +2 -2
  45. package/dist/chunks/{registry-CyKExAmE.js.map → registry-CnO7ZVPK.js.map} +1 -1
  46. package/dist/chunks/{spring-BK8DiezC.js → spring-BFKNHmfl.js} +2 -2
  47. package/dist/chunks/{spring-BK8DiezC.js.map → spring-BFKNHmfl.js.map} +1 -1
  48. package/dist/chunks/{spring-Dgx187Vh.cjs → spring-uQMVJTj9.cjs} +2 -2
  49. package/dist/chunks/{spring-Dgx187Vh.cjs.map → spring-uQMVJTj9.cjs.map} +1 -1
  50. package/dist/chunks/{variants-BQ6bhzn4.js → variants-B-zKORvt.js} +2 -2
  51. package/dist/chunks/{variants-BQ6bhzn4.js.map → variants-B-zKORvt.js.map} +1 -1
  52. package/dist/chunks/{variants-BhjyddG8.cjs → variants-DagykrKH.cjs} +2 -2
  53. package/dist/chunks/{variants-BhjyddG8.cjs.map → variants-DagykrKH.cjs.map} +1 -1
  54. package/dist/components/a11y.cjs +2 -2
  55. package/dist/components/a11y.d.cts +1 -1
  56. package/dist/components/a11y.d.ts +1 -1
  57. package/dist/components/a11y.js +3 -3
  58. package/dist/components/angular.cjs +9 -9
  59. package/dist/components/angular.d.cts +2 -14
  60. package/dist/components/angular.d.ts +2 -14
  61. package/dist/components/angular.js +9 -9
  62. package/dist/components/background.cjs +2 -2
  63. package/dist/components/background.js +2 -2
  64. package/dist/components/bridge.cjs +1 -1
  65. package/dist/components/bridge.js +1 -1
  66. package/dist/components/cards.cjs +2 -2
  67. package/dist/components/cards.js +2 -2
  68. package/dist/components/click.cjs +3 -3
  69. package/dist/components/click.js +3 -3
  70. package/dist/components/depth.cjs +3 -3
  71. package/dist/components/depth.js +3 -3
  72. package/dist/components/effects.cjs +7 -7
  73. package/dist/components/effects.js +9 -9
  74. package/dist/components/engine.cjs +266 -0
  75. package/dist/components/engine.cjs.map +1 -0
  76. package/dist/components/engine.d.cts +105 -0
  77. package/dist/components/engine.d.ts +105 -0
  78. package/dist/components/engine.js +255 -0
  79. package/dist/components/engine.js.map +1 -0
  80. package/dist/components/feedback.cjs +1 -1
  81. package/dist/components/feedback.js +1 -1
  82. package/dist/components/fx-3d.cjs +2 -2
  83. package/dist/components/fx-3d.js +2 -2
  84. package/dist/components/fx-ai.cjs +2 -2
  85. package/dist/components/fx-ai.js +2 -2
  86. package/dist/components/fx-chart.cjs +2 -2
  87. package/dist/components/fx-chart.js +2 -2
  88. package/dist/components/fx-focus.cjs +2 -2
  89. package/dist/components/fx-focus.js +2 -2
  90. package/dist/components/fx-form.cjs +2 -2
  91. package/dist/components/fx-form.js +2 -2
  92. package/dist/components/fx-game.cjs +2 -2
  93. package/dist/components/fx-game.js +2 -2
  94. package/dist/components/fx-geo.cjs +2 -2
  95. package/dist/components/fx-geo.js +2 -2
  96. package/dist/components/fx-gpu.cjs +3 -3
  97. package/dist/components/fx-gpu.js +3 -3
  98. package/dist/components/fx-light.cjs +2 -2
  99. package/dist/components/fx-light.js +2 -2
  100. package/dist/components/fx-morph.cjs +2 -2
  101. package/dist/components/fx-morph.js +2 -2
  102. package/dist/components/fx-music.cjs +3 -3
  103. package/dist/components/fx-music.js +3 -3
  104. package/dist/components/fx-physics.cjs +2 -2
  105. package/dist/components/fx-physics.js +2 -2
  106. package/dist/components/fx-shop.cjs +2 -2
  107. package/dist/components/fx-shop.js +2 -2
  108. package/dist/components/fx-social.cjs +2 -2
  109. package/dist/components/fx-social.js +2 -2
  110. package/dist/components/fx-text.cjs +2 -2
  111. package/dist/components/fx-text.js +2 -2
  112. package/dist/components/fx-transitions.cjs +3 -3
  113. package/dist/components/fx-transitions.js +3 -3
  114. package/dist/components/fx-weather.cjs +2 -2
  115. package/dist/components/fx-weather.js +2 -2
  116. package/dist/components/fx.cjs +5 -5
  117. package/dist/components/fx.js +6 -6
  118. package/dist/components/fx2.cjs +4 -4
  119. package/dist/components/fx2.js +5 -5
  120. package/dist/components/gesture.cjs +3 -3
  121. package/dist/components/gesture.js +4 -4
  122. package/dist/components/interaction.cjs +1 -1
  123. package/dist/components/interaction.js +1 -1
  124. package/dist/components/jsx.d.cts +1 -1
  125. package/dist/components/jsx.d.ts +1 -1
  126. package/dist/components/layout.cjs +1 -1
  127. package/dist/components/layout.js +1 -1
  128. package/dist/components/lazy.cjs +1 -1
  129. package/dist/components/lazy.d.cts +1 -1
  130. package/dist/components/lazy.d.ts +1 -1
  131. package/dist/components/lazy.js +1 -1
  132. package/dist/components/lite.cjs +151 -205
  133. package/dist/components/lite.cjs.map +1 -1
  134. package/dist/components/lite.js +152 -205
  135. package/dist/components/lite.js.map +1 -1
  136. package/dist/components/marketplace.cjs +2 -2
  137. package/dist/components/marketplace.js +2 -2
  138. package/dist/components/packs.cjs +1 -1
  139. package/dist/components/packs.js +1 -1
  140. package/dist/components/page.cjs +2 -2
  141. package/dist/components/page.js +3 -3
  142. package/dist/components/perf.cjs +2 -2
  143. package/dist/components/perf.d.cts +1 -1
  144. package/dist/components/perf.d.ts +1 -1
  145. package/dist/components/perf.js +3 -3
  146. package/dist/components/physics.cjs +2 -2
  147. package/dist/components/physics.js +3 -3
  148. package/dist/components/react.cjs +1 -1
  149. package/dist/components/react.js +1 -1
  150. package/dist/components/reveal.cjs +1 -1
  151. package/dist/components/reveal.js +1 -1
  152. package/dist/components/solid.cjs +9 -9
  153. package/dist/components/solid.d.cts +2 -14
  154. package/dist/components/solid.d.ts +2 -14
  155. package/dist/components/solid.js +9 -9
  156. package/dist/components/svelte.cjs +9 -9
  157. package/dist/components/svelte.d.cts +2 -14
  158. package/dist/components/svelte.d.ts +2 -14
  159. package/dist/components/svelte.js +9 -9
  160. package/dist/components/svg.cjs +1 -1
  161. package/dist/components/svg.js +1 -1
  162. package/dist/components/text.cjs +2 -2
  163. package/dist/components/text.js +2 -2
  164. package/dist/components/timeline.cjs +2 -2
  165. package/dist/components/timeline.js +3 -3
  166. package/dist/components/transitions.cjs +1 -1
  167. package/dist/components/transitions.js +1 -1
  168. package/dist/components/ui.cjs +17 -107
  169. package/dist/components/ui.cjs.map +1 -1
  170. package/dist/components/ui.css +0 -1
  171. package/dist/components/ui.d.cts +3 -16
  172. package/dist/components/ui.d.ts +3 -16
  173. package/dist/components/ui.js +19 -108
  174. package/dist/components/ui.js.map +1 -1
  175. package/dist/components/vue.cjs +9 -9
  176. package/dist/components/vue.d.cts +2 -14
  177. package/dist/components/vue.d.ts +2 -14
  178. package/dist/components/vue.js +9 -9
  179. package/dist/components/webgl.cjs +1 -1
  180. package/dist/components/webgl.js +1 -1
  181. package/dist/components/widgets.cjs +585 -145
  182. package/dist/components/widgets.cjs.map +1 -1
  183. package/dist/components/widgets.d.cts +136 -3
  184. package/dist/components/widgets.d.ts +136 -3
  185. package/dist/components/widgets.js +579 -146
  186. package/dist/components/widgets.js.map +1 -1
  187. package/dist/components.cjs +9 -10
  188. package/dist/components.cjs.map +1 -1
  189. package/dist/components.css +0 -1
  190. package/dist/components.d.cts +4 -17
  191. package/dist/components.d.ts +4 -17
  192. package/dist/components.js +12 -12
  193. package/dist/components.umd.js +2 -2
  194. package/dist/components.umd.js.map +1 -1
  195. package/dist/index.cjs +2 -2
  196. package/dist/index.js +2 -2
  197. package/dist/index.umd.js +2 -2
  198. package/dist/index.umd.js.map +1 -1
  199. package/dist/widgets.umd.js +1 -1
  200. package/dist/widgets.umd.js.map +1 -1
  201. package/docs/ROADMAP.md +14 -12
  202. package/docs/accessibility.md +1 -2
  203. package/docs/components.md +44 -1
  204. package/docs/deprecations.md +4 -0
  205. package/docs/upgrading-8.md +37 -0
  206. package/package.json +23 -2
  207. package/dist/chunks/base-2-yYc93C.js.map +0 -1
  208. package/dist/chunks/base-BaQV-2ha.cjs.map +0 -1
  209. package/dist/chunks/index-tags-BTMwrfgV.cjs.map +0 -1
  210. package/dist/chunks/index-tags-C04JP8g4.js.map +0 -1
@@ -223,7 +223,9 @@ declare function defineSkeletonReveal(tag?: string): CustomElementConstructor |
223
223
  * pops the chosen star and throws a small sparkle burst, the other stars
224
224
  * ripple in sequence. `max`, `step` (`1` · `0.5`), `readonly`, `label`,
225
225
  * `icon` (`star` · `heart`). Keyboard: it is a `role="slider"` — arrows,
226
- * Home / End. Event `usa:change` (`{ value }`). Reduced motion: no pop,
226
+ * Home / End. Events `change`, `usa:change` (`{ value }`). Form-associated
227
+ * (7.9): with `name` the value is submitted like `<usa-rating>`'s, which it
228
+ * replaces in 8.0. Reduced motion: no pop,
227
229
  * burst or ripple.
228
230
  */
229
231
  interface UsaStarRatingElement extends UsaElement {
@@ -1143,6 +1145,133 @@ interface UsaVoiceButtonElement extends UsaElement {
1143
1145
  declare function waveBars(level: number, n?: number, phase?: number): number[];
1144
1146
  declare function defineVoiceButton(tag?: string): CustomElementConstructor | undefined;
1145
1147
 
1148
+ /**
1149
+ * `<usa-command-palette>` (7.9) — a ⌘K command palette on the native
1150
+ * `<dialog>` (top layer, Esc, focus returns to the opener): it scales in,
1151
+ * the results filter as you type (fuzzy, matched letters highlighted) and
1152
+ * stagger in, a highlight glides to the active row (↑ / ↓, Enter runs it).
1153
+ * Commands come from child `<option value="id" data-group="Navigation"
1154
+ * data-keys="mod+n">Label</option>` elements or `setCommands([{ id, label,
1155
+ * group?, keys? }])`. `inline` renders it open in the page (no dialog,
1156
+ * e.g. for docs). `hotkey` (default `mod+k`; `none` to disable) opens it
1157
+ * from anywhere; `placeholder`, `label`. `show()`, `close()`, `toggle()`,
1158
+ * `opened`; `usa:run` { id, label }, `usa:open`, `usa:close`. A `combobox` +
1159
+ * `listbox`; reduced motion: no scale, stagger or glide.
1160
+ */
1161
+ interface PaletteCommand {
1162
+ id: string;
1163
+ label: string;
1164
+ group?: string;
1165
+ keys?: string;
1166
+ }
1167
+ interface UsaCommandPaletteElement extends UsaElement {
1168
+ readonly opened: boolean;
1169
+ commands: PaletteCommand[];
1170
+ setCommands(list: PaletteCommand[]): void;
1171
+ show(): void;
1172
+ close(): void;
1173
+ toggle(): void;
1174
+ }
1175
+ /**
1176
+ * Fuzzy match: every query letter in order. Returns a score (higher is
1177
+ * better; -1 = no match) and the matched indexes (7.9).
1178
+ */
1179
+ declare function fuzzyMatch(query: string, text: string): {
1180
+ score: number;
1181
+ hits: number[];
1182
+ };
1183
+ /** "mod+shift+k" → ["⌘", "⇧", "K"] on Apple platforms, ["Ctrl", "Shift", "K"] elsewhere (7.9). */
1184
+ declare function keyLabels(keys: string, apple?: boolean): string[];
1185
+ /** Does a KeyboardEvent match "mod+k"-style keys? (7.9) */
1186
+ declare function matchesKeys(e: KeyboardEvent, keys: string, apple?: boolean): boolean;
1187
+ declare function defineCommandPalette(tag?: string): CustomElementConstructor | undefined;
1188
+
1189
+ /**
1190
+ * `<usa-shortcut keys="mod+k">` (7.9) — a keyboard-shortcut hint rendered
1191
+ * as keycaps (⌘ on Apple platforms, Ctrl elsewhere). When the user presses
1192
+ * the combination anywhere on the page the caps press down one after another
1193
+ * and `usa:trigger` fires (`listen="false"` to only display it; `for="id"`
1194
+ * clicks that element). Optional `label` text after the caps. The caps are
1195
+ * `<kbd>` with an accessible text like "Control K"; reduced motion: no
1196
+ * press animation.
1197
+ */
1198
+ interface UsaShortcutElement extends UsaElement {
1199
+ readonly labels: string[];
1200
+ press(): void;
1201
+ }
1202
+ declare function defineShortcut(tag?: string): CustomElementConstructor | undefined;
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
+
1146
1275
  /**
1147
1276
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
1148
1277
  * entry so `motionary/components` and `components/lite` keep their size
@@ -1224,8 +1353,12 @@ declare global {
1224
1353
  'usa-chat-composer': UsaChatComposerElement;
1225
1354
  'usa-suggestion-chips': UsaSuggestionChipsElement;
1226
1355
  'usa-voice-button': UsaVoiceButtonElement;
1356
+ 'usa-command-palette': UsaCommandPaletteElement;
1357
+ 'usa-shortcut': UsaShortcutElement;
1358
+ 'usa-clock-control': UsaClockControlElement;
1359
+ 'usa-hydrate': UsaHydrateElement;
1227
1360
  }
1228
1361
  }
1229
1362
 
1230
- 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, 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, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, haversine, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1231
- export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaColorPickerElement, 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, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
1363
+ 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, defineClockControl, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, 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, 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 };
1364
+ 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, 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, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
@@ -223,7 +223,9 @@ declare function defineSkeletonReveal(tag?: string): CustomElementConstructor |
223
223
  * pops the chosen star and throws a small sparkle burst, the other stars
224
224
  * ripple in sequence. `max`, `step` (`1` · `0.5`), `readonly`, `label`,
225
225
  * `icon` (`star` · `heart`). Keyboard: it is a `role="slider"` — arrows,
226
- * Home / End. Event `usa:change` (`{ value }`). Reduced motion: no pop,
226
+ * Home / End. Events `change`, `usa:change` (`{ value }`). Form-associated
227
+ * (7.9): with `name` the value is submitted like `<usa-rating>`'s, which it
228
+ * replaces in 8.0. Reduced motion: no pop,
227
229
  * burst or ripple.
228
230
  */
229
231
  interface UsaStarRatingElement extends UsaElement {
@@ -1143,6 +1145,133 @@ interface UsaVoiceButtonElement extends UsaElement {
1143
1145
  declare function waveBars(level: number, n?: number, phase?: number): number[];
1144
1146
  declare function defineVoiceButton(tag?: string): CustomElementConstructor | undefined;
1145
1147
 
1148
+ /**
1149
+ * `<usa-command-palette>` (7.9) — a ⌘K command palette on the native
1150
+ * `<dialog>` (top layer, Esc, focus returns to the opener): it scales in,
1151
+ * the results filter as you type (fuzzy, matched letters highlighted) and
1152
+ * stagger in, a highlight glides to the active row (↑ / ↓, Enter runs it).
1153
+ * Commands come from child `<option value="id" data-group="Navigation"
1154
+ * data-keys="mod+n">Label</option>` elements or `setCommands([{ id, label,
1155
+ * group?, keys? }])`. `inline` renders it open in the page (no dialog,
1156
+ * e.g. for docs). `hotkey` (default `mod+k`; `none` to disable) opens it
1157
+ * from anywhere; `placeholder`, `label`. `show()`, `close()`, `toggle()`,
1158
+ * `opened`; `usa:run` { id, label }, `usa:open`, `usa:close`. A `combobox` +
1159
+ * `listbox`; reduced motion: no scale, stagger or glide.
1160
+ */
1161
+ interface PaletteCommand {
1162
+ id: string;
1163
+ label: string;
1164
+ group?: string;
1165
+ keys?: string;
1166
+ }
1167
+ interface UsaCommandPaletteElement extends UsaElement {
1168
+ readonly opened: boolean;
1169
+ commands: PaletteCommand[];
1170
+ setCommands(list: PaletteCommand[]): void;
1171
+ show(): void;
1172
+ close(): void;
1173
+ toggle(): void;
1174
+ }
1175
+ /**
1176
+ * Fuzzy match: every query letter in order. Returns a score (higher is
1177
+ * better; -1 = no match) and the matched indexes (7.9).
1178
+ */
1179
+ declare function fuzzyMatch(query: string, text: string): {
1180
+ score: number;
1181
+ hits: number[];
1182
+ };
1183
+ /** "mod+shift+k" → ["⌘", "⇧", "K"] on Apple platforms, ["Ctrl", "Shift", "K"] elsewhere (7.9). */
1184
+ declare function keyLabels(keys: string, apple?: boolean): string[];
1185
+ /** Does a KeyboardEvent match "mod+k"-style keys? (7.9) */
1186
+ declare function matchesKeys(e: KeyboardEvent, keys: string, apple?: boolean): boolean;
1187
+ declare function defineCommandPalette(tag?: string): CustomElementConstructor | undefined;
1188
+
1189
+ /**
1190
+ * `<usa-shortcut keys="mod+k">` (7.9) — a keyboard-shortcut hint rendered
1191
+ * as keycaps (⌘ on Apple platforms, Ctrl elsewhere). When the user presses
1192
+ * the combination anywhere on the page the caps press down one after another
1193
+ * and `usa:trigger` fires (`listen="false"` to only display it; `for="id"`
1194
+ * clicks that element). Optional `label` text after the caps. The caps are
1195
+ * `<kbd>` with an accessible text like "Control K"; reduced motion: no
1196
+ * press animation.
1197
+ */
1198
+ interface UsaShortcutElement extends UsaElement {
1199
+ readonly labels: string[];
1200
+ press(): void;
1201
+ }
1202
+ declare function defineShortcut(tag?: string): CustomElementConstructor | undefined;
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
+
1146
1275
  /**
1147
1276
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
1148
1277
  * entry so `motionary/components` and `components/lite` keep their size
@@ -1224,8 +1353,12 @@ declare global {
1224
1353
  'usa-chat-composer': UsaChatComposerElement;
1225
1354
  'usa-suggestion-chips': UsaSuggestionChipsElement;
1226
1355
  'usa-voice-button': UsaVoiceButtonElement;
1356
+ 'usa-command-palette': UsaCommandPaletteElement;
1357
+ 'usa-shortcut': UsaShortcutElement;
1358
+ 'usa-clock-control': UsaClockControlElement;
1359
+ 'usa-hydrate': UsaHydrateElement;
1227
1360
  }
1228
1361
  }
1229
1362
 
1230
- 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, 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, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, haversine, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
1231
- export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaColorPickerElement, 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, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
1363
+ 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, defineClockControl, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, 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, 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 };
1364
+ 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, 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, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };