use-scroll-animate 5.9.0 → 6.0.1

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 (42) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +3 -2
  3. package/README_ja.md +1 -0
  4. package/README_zh.md +2 -1
  5. package/dist/components/angular.d.cts +5 -4
  6. package/dist/components/angular.d.ts +5 -4
  7. package/dist/components/click.cjs +2 -23
  8. package/dist/components/click.cjs.map +1 -1
  9. package/dist/components/click.d.cts +3 -13
  10. package/dist/components/click.d.ts +3 -13
  11. package/dist/components/click.js +11 -29
  12. package/dist/components/click.js.map +1 -1
  13. package/dist/components/lite.cjs +19 -41
  14. package/dist/components/lite.cjs.map +1 -1
  15. package/dist/components/lite.js +20 -39
  16. package/dist/components/lite.js.map +1 -1
  17. package/dist/components/page.cjs +6 -7
  18. package/dist/components/page.cjs.map +1 -1
  19. package/dist/components/page.css +1 -1
  20. package/dist/components/page.d.cts +4 -3
  21. package/dist/components/page.d.ts +4 -3
  22. package/dist/components/page.js +7 -8
  23. package/dist/components/page.js.map +1 -1
  24. package/dist/components/solid.d.cts +5 -4
  25. package/dist/components/solid.d.ts +5 -4
  26. package/dist/components/svelte.d.cts +5 -4
  27. package/dist/components/svelte.d.ts +5 -4
  28. package/dist/components/vue.d.cts +5 -4
  29. package/dist/components/vue.d.ts +5 -4
  30. package/dist/components.cjs +0 -3
  31. package/dist/components.cjs.map +1 -1
  32. package/dist/components.css +1 -1
  33. package/dist/components.d.cts +7 -16
  34. package/dist/components.d.ts +7 -16
  35. package/dist/components.js +1 -1
  36. package/dist/components.umd.js +2 -2
  37. package/dist/components.umd.js.map +1 -1
  38. package/docs/ROADMAP.md +12 -12
  39. package/docs/components.md +3 -3
  40. package/docs/performance.md +1 -1
  41. package/docs/upgrading-6.md +1 -1
  42. package/package.json +1 -1
@@ -5435,7 +5435,7 @@ const done = (a, el) => {
5435
5435
  el.remove();
5436
5436
  };
5437
5437
  /** Particles radiating from client point (x, y). Returns the number spawned. */
5438
- function burst$1(x, y, options = {}) {
5438
+ function burst(x, y, options = {}) {
5439
5439
  if (typeof document === 'undefined' || prefersReducedMotion())
5440
5440
  return 0;
5441
5441
  const { count = 12, colors = PALETTE, distance = 48, size = 6, shape = 'circle', duration = 600 } = options;
@@ -5454,7 +5454,7 @@ function burst$1(x, y, options = {}) {
5454
5454
  return count;
5455
5455
  }
5456
5456
  /** A confetti cannon (paper pieces with gravity, drift and spin). */
5457
- function confetti$1(options = {}) {
5457
+ function confetti(options = {}) {
5458
5458
  if (typeof document === 'undefined' || prefersReducedMotion())
5459
5459
  return 0;
5460
5460
  const W = window.innerWidth || 800;
@@ -5485,7 +5485,7 @@ function confetti$1(options = {}) {
5485
5485
  return count;
5486
5486
  }
5487
5487
  /** Horizontal error shake (`intensity` px, default 8). Reduced motion: a red outline flash. */
5488
- function shake$1(el, intensity = 8, duration = 480) {
5488
+ function shake(el, intensity = 8, duration = 480) {
5489
5489
  const t = el;
5490
5490
  if (typeof t.animate !== 'function')
5491
5491
  return null;
@@ -5562,15 +5562,15 @@ function defineClick(tag = 'usa-click') {
5562
5562
  const fx = this.effects;
5563
5563
  const colors = this.str('color') ? this.str('color').split(',') : undefined;
5564
5564
  if (fx.includes('burst'))
5565
- burst$1(x, y, { count: this.num('count', 12), shape: this.str('shape', 'circle'), colors });
5565
+ burst(x, y, { count: this.num('count', 12), shape: this.str('shape', 'circle'), colors });
5566
5566
  if (fx.includes('confetti'))
5567
- confetti$1({ x, y, count: this.num('count', 60), colors, spread: 90, velocity: 0.8 });
5567
+ confetti({ x, y, count: this.num('count', 60), colors, spread: 90, velocity: 0.8 });
5568
5568
  if (this.hasAttribute('haptic'))
5569
5569
  haptic(this.num('haptic', 10));
5570
5570
  this.emit('click-effect', { x, y, effects: fx });
5571
5571
  }
5572
5572
  shake() {
5573
- shake$1(this);
5573
+ shake(this);
5574
5574
  if (this.hasAttribute('haptic'))
5575
5575
  haptic([30, 40, 30]);
5576
5576
  }
@@ -5875,7 +5875,7 @@ function defineButton(tag = 'usa-button') {
5875
5875
  t.removeAttribute('aria-busy');
5876
5876
  }
5877
5877
  if (s === 'error') {
5878
- shake$1(t);
5878
+ shake(t);
5879
5879
  if (this.hasAttribute('haptic'))
5880
5880
  haptic([30, 40, 30]);
5881
5881
  }
@@ -6081,7 +6081,7 @@ function defineLike(tag = 'usa-like') {
6081
6081
  if (next && heart && !this.reduced) {
6082
6082
  this.motion(heart, [{ transform: 'scale(0.4)' }, { transform: 'scale(1)' }], springEasing('bouncy'));
6083
6083
  const r = heart.getBoundingClientRect();
6084
- burst$1(r.left + r.width / 2, r.top + r.height / 2, { count: 10, distance: 28, size: 5, colors: [getComputedStyle(this).getPropertyValue('--usa-like-color').trim() || '#f43f5e', '#fb923c', '#facc15'] });
6084
+ burst(r.left + r.width / 2, r.top + r.height / 2, { count: 10, distance: 28, size: 5, colors: [getComputedStyle(this).getPropertyValue('--usa-like-color').trim() || '#f43f5e', '#fb923c', '#facc15'] });
6085
6085
  }
6086
6086
  if (this.hasAttribute('haptic'))
6087
6087
  haptic(this.num('haptic', 12));
@@ -6258,7 +6258,7 @@ function defineDoubleTap(tag = 'usa-double-tap') {
6258
6258
  a.onfinish = () => icon.remove();
6259
6259
  else
6260
6260
  icon.remove();
6261
- burst$1(x, y, { count: 8, distance: 40, size: 5, colors: [this.str('color', '#f43f5e'), '#fb923c', '#facc15'] });
6261
+ burst(x, y, { count: 8, distance: 40, size: 5, colors: [this.str('color', '#f43f5e'), '#fb923c', '#facc15'] });
6262
6262
  if (this.hasAttribute('haptic'))
6263
6263
  haptic(15);
6264
6264
  this.emit('double-tap', { x: x - r.left, y: y - r.top });
@@ -6347,27 +6347,9 @@ function defineCheckbox(tag = 'usa-checkbox') {
6347
6347
  * `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
6348
6348
  * shape morph; submit → loading → success), `<usa-icon-morph>`,
6349
6349
  * `<usa-like>`, `<usa-hold>`, `<usa-double-tap>`, `<usa-checkbox>`, plus
6350
- * `haptic()` (`burst()`, `confetti()`, `shake()` are deprecated in 5.9 —
6351
- * use the registered effects through `playEffect()`).
6350
+ * `haptic()`. 6.0: `burst()`, `confetti()` and `shake()` were removed — play
6351
+ * the registered effects instead: `playEffect(el, 'burst' | 'confetti' | 'shake')`.
6352
6352
  */
6353
- /**
6354
- * @deprecated 5.9 — removed in 6.0. Use the registered effect:
6355
- * `playEffect(document.body, 'burst', { x, y, ...options })` (`use-scroll-animate/components/fx`).
6356
- */
6357
- function burst(x, y, options = {}) {
6358
- deprecate('burst()', "burst() is deprecated and removed in 6.0 — use playEffect(el, 'burst', { x, y, …options }) from use-scroll-animate/components/fx (npx usa-codemod-6).");
6359
- return burst$1(x, y, options);
6360
- }
6361
- /** @deprecated 5.9 — removed in 6.0. Use `playEffect(document.body, 'confetti', options)`. */
6362
- function confetti(options = {}) {
6363
- deprecate('confetti()', "confetti() is deprecated and removed in 6.0 — use playEffect(el, 'confetti', options) from use-scroll-animate/components/fx (npx usa-codemod-6).");
6364
- return confetti$1(options);
6365
- }
6366
- /** @deprecated 5.9 — removed in 6.0. Use `playEffect(el, 'shake', { intensity, duration })`. */
6367
- function shake(el, intensity = 8, duration = 480) {
6368
- deprecate('shake()', "shake() is deprecated and removed in 6.0 — use playEffect(el, 'shake', { intensity, duration }) from use-scroll-animate/components/fx (npx usa-codemod-6).");
6369
- return shake$1(el, intensity, duration);
6370
- }
6371
6353
  /** Register every component of this category under its default tag. */
6372
6354
  function defineClickComponents() {
6373
6355
  defineClick();
@@ -7408,7 +7390,7 @@ function defineUiComponents() {
7408
7390
 
7409
7391
  var css$e = "";
7410
7392
 
7411
- const CURSOR_MODES = ['dot', 'trail', 'magnetic', 'glow'];
7393
+ const CURSOR_MODES = ['dot', 'magnetic', 'glow'];
7412
7394
  function defineCursor(tag = 'usa-cursor') {
7413
7395
  return defineElement(tag, (Base) => class UsaCursor extends Base {
7414
7396
  constructor() {
@@ -7429,10 +7411,9 @@ function defineCursor(tag = 'usa-cursor') {
7429
7411
  this.replaceChildren();
7430
7412
  return;
7431
7413
  }
7432
- const mode = this.str('mode', 'dot');
7433
- if (mode === 'trail')
7434
- deprecate('usa-cursor-trail', '<usa-cursor mode="trail"> is deprecated and removed in 6.0 — use the registered comet-trail effect: <usa-fx effect="comet-trail" trigger="load" self> around the page content (see docs/upgrading-6.md).');
7435
- const n = mode === 'trail' ? 8 : 1;
7414
+ const m = this.str('mode', 'dot');
7415
+ const mode = CURSOR_MODES.includes(m) ? m : 'dot';
7416
+ const n = 1;
7436
7417
  this.innerHTML = Array.from({ length: n }, (_, i) => `<span class="usa-cursor-${mode === 'glow' ? 'glow' : 'ring'}" style="--i:${i}"></span>`).join('') + (mode === 'glow' ? '' : '<span class="usa-cursor-dot"></span>');
7437
7418
  if (this.str('color'))
7438
7419
  this.style.setProperty('--usa-cursor-color', this.str('color'));
@@ -7452,7 +7433,7 @@ function defineCursor(tag = 'usa-cursor') {
7452
7433
  let tx = mx;
7453
7434
  let ty = my;
7454
7435
  pts.forEach((p, i) => {
7455
- const k = mode === 'trail' ? 0.35 - i * 0.03 : mode === 'glow' ? 0.12 : 0.22;
7436
+ const k = mode === 'glow' ? 0.12 : 0.22;
7456
7437
  const goalX = snap && i === 0 ? snap.left + snap.width / 2 : tx;
7457
7438
  const goalY = snap && i === 0 ? snap.top + snap.height / 2 : ty;
7458
7439
  p.x += (goalX - p.x) * k;
@@ -10307,7 +10288,7 @@ const click = [
10307
10288
  return;
10308
10289
  const r = el.getBoundingClientRect();
10309
10290
  const e = ctx.event;
10310
- burst$1(o.x ?? e?.clientX ?? r.left + r.width / 2, o.y ?? e?.clientY ?? r.top + r.height / 2, o);
10291
+ burst(o.x ?? e?.clientX ?? r.left + r.width / 2, o.y ?? e?.clientY ?? r.top + r.height / 2, o);
10311
10292
  },
10312
10293
  },
10313
10294
  {
@@ -10319,7 +10300,7 @@ const click = [
10319
10300
  if (ctx.reduced)
10320
10301
  return;
10321
10302
  const r = el.getBoundingClientRect();
10322
- confetti$1({ x: r.left + r.width / 2, y: r.top + r.height / 2, ...o });
10303
+ confetti({ x: r.left + r.width / 2, y: r.top + r.height / 2, ...o });
10323
10304
  },
10324
10305
  },
10325
10306
  {
@@ -10327,7 +10308,7 @@ const click = [
10327
10308
  kind: 'attention',
10328
10309
  description: 'Horizontal "no" shake (errors, wrong password).',
10329
10310
  defaults: { intensity: 8, duration: 480 },
10330
- run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.5 }, { opacity: 1 }], { duration: 300 }) : shake$1(el, o.intensity, o.duration)),
10311
+ run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.5 }, { opacity: 1 }], { duration: 300 }) : shake(el, o.intensity, o.duration)),
10331
10312
  },
10332
10313
  {
10333
10314
  name: 'ripple',
@@ -10842,5 +10823,5 @@ function defineComponents(categories) {
10842
10823
  const STYLE_BASE = new URL('../', import.meta.url).href;
10843
10824
  onDemandStyles(STYLE_BASE);
10844
10825
 
10845
- export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUILTIN_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, EFFECT_KINDS, EFFECT_TRIGGERS, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, STYLE_BASE, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineFx, defineFxComponents, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getEffect, getMotionIntensity, getMotionLevel, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, hasEffect, importMotionTokens, interpolatePath, linearEasing, listEffects, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionScale, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, playEffect, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, registerBuiltinEffects, registerEffect, registerEffects, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionLevel, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, warnBaseline, watchPowerSaver, withoutDeprecations };
10826
+ export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUILTIN_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, EFFECT_KINDS, EFFECT_TRIGGERS, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, STYLE_BASE, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect, categoryOf, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineFx, defineFxComponents, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getEffect, getMotionIntensity, getMotionLevel, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, hasEffect, importMotionTokens, interpolatePath, linearEasing, listEffects, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionScale, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, playEffect, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, registerBuiltinEffects, registerEffect, registerEffects, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionLevel, setMotionSensitivity, setVariant, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, warnBaseline, watchPowerSaver, withoutDeprecations };
10846
10827
  //# sourceMappingURL=lite.js.map