use-scroll-animate 5.8.0 → 6.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.
- package/CHANGELOG.md +31 -0
- package/README.md +3 -2
- package/README_ja.md +1 -0
- package/README_zh.md +2 -1
- package/bin/usa-codemod-6.mjs +146 -0
- package/dist/components/angular.d.cts +5 -3
- package/dist/components/angular.d.ts +5 -3
- package/dist/components/click.cjs +2 -4
- package/dist/components/click.cjs.map +1 -1
- package/dist/components/click.d.cts +3 -8
- package/dist/components/click.d.ts +3 -8
- package/dist/components/click.js +3 -2
- package/dist/components/click.js.map +1 -1
- package/dist/components/effects.cjs +306 -1
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.d.cts +66 -2
- package/dist/components/effects.d.ts +66 -2
- package/dist/components/effects.js +303 -2
- package/dist/components/effects.js.map +1 -1
- package/dist/components/fx.cjs +2 -2
- package/dist/components/fx.cjs.map +1 -1
- package/dist/components/fx.js +2 -2
- package/dist/components/fx.js.map +1 -1
- package/dist/components/lite.cjs +9 -10
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +10 -8
- package/dist/components/lite.js.map +1 -1
- package/dist/components/page.cjs +6 -5
- package/dist/components/page.cjs.map +1 -1
- package/dist/components/page.css +1 -1
- package/dist/components/page.d.cts +4 -3
- package/dist/components/page.d.ts +4 -3
- package/dist/components/page.js +6 -5
- package/dist/components/page.js.map +1 -1
- package/dist/components/solid.d.cts +5 -3
- package/dist/components/solid.d.ts +5 -3
- package/dist/components/svelte.d.cts +5 -3
- package/dist/components/svelte.d.ts +5 -3
- package/dist/components/vue.d.cts +5 -3
- package/dist/components/vue.d.ts +5 -3
- package/dist/components.cjs +2 -5
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.d.cts +7 -11
- package/dist/components.d.ts +7 -11
- package/dist/components.js +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/docs/ROADMAP.md +12 -12
- package/docs/components.md +29 -3
- package/docs/deprecations.md +4 -0
- package/docs/performance.md +1 -1
- package/docs/upgrading-6.md +32 -0
- package/package.json +3 -2
package/dist/components.css
CHANGED
|
@@ -59,7 +59,7 @@ usa-tooltip{display:inline-block}usa-tooltip .usa-tooltip-bubble{position:fixed;
|
|
|
59
59
|
usa-ambient{--usa-ambient-opacity:0.6;--usa-ambient-p:0;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--usa-ambient-opacity);contain:strict}usa-ambient[layer="front"]{z-index:2147483000}usa-ambient canvas{display:block}usa-ambient[effect="noise"]{opacity:calc(var(--usa-ambient-opacity) * 0.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:usa-ambient-grain 0.6s steps(4) infinite;mix-blend-mode:overlay}@keyframes usa-ambient-grain{25%{background-position:-40px 20px}50%{background-position:30px -50px}75%{background-position:-20px -30px}}usa-ambient[effect="gradient"]{background:linear-gradient(135deg,hsl(calc(250 + var(--usa-ambient-p) * 140) 85% 60%),hsl(calc(190 + var(--usa-ambient-p) * 160) 85% 55%) 50%,hsl(calc(320 + var(--usa-ambient-p) * 90) 85% 62%))}@media (prefers-reduced-motion:reduce){usa-ambient[effect="noise"]{animation:none}}
|
|
60
60
|
usa-auto-skeleton{display:block;--usa-skel-base:color-mix(in srgb,currentColor 10%,transparent);--usa-skel-shine:color-mix(in srgb,currentColor 18%,transparent)}usa-auto-skeleton[loading] :is(h1,h2,h3,h4,h5,h6,p,li,span,a,button,label,img,svg,video,input,select,textarea,td,th,figcaption,blockquote,[data-skeleton]):not([data-no-skeleton]):not(:has(:is(h1,h2,h3,h4,h5,h6,p,li,img,button,input))){color:transparent !important;border-color:transparent !important;box-shadow:none !important;user-select:none;pointer-events:none;background:linear-gradient(90deg,var(--usa-skel-base) 25%,var(--usa-skel-shine) 50%,var(--usa-skel-base) 75%) 0 0 / 300% 100% !important;border-radius:6px;animation:usa-skel-shimmer 1.4s ease-in-out infinite}usa-auto-skeleton[loading] :is(img,svg,video){opacity:0}usa-auto-skeleton[loading] :is(img,svg,video):not([data-no-skeleton]){opacity:1;object-position:-9999px}@keyframes usa-skel-shimmer{from{background-position:100% 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){usa-auto-skeleton[loading] *{animation:none !important}}
|
|
61
61
|
usa-back-to-top{--usa-btt:0;position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:850;opacity:0;transform:translateY(16px) scale(0.8);pointer-events:none;transition:opacity 0.25s ease,transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}usa-back-to-top[position="bottom-left"]{right:auto;left:max(20px,env(safe-area-inset-left))}usa-back-to-top[data-visible]{opacity:1;transform:none;pointer-events:auto}usa-back-to-top button{width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--usa-accent,#7c5cff);background:var(--usa-surface,#1b1e27);box-shadow:var(--usa-shadow,0 8px 24px -10px rgb(0 0 0 / 0.5))}usa-back-to-top svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}usa-back-to-top circle{stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--usa-btt) * 100);transform:rotate(-90deg);transform-origin:50% 50%;opacity:0.85}usa-back-to-top button:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:3px}@media (prefers-reduced-motion:reduce){usa-back-to-top{transition:opacity 0.2s ease;transform:none}}
|
|
62
|
-
usa-cursor{--usa-cursor-color:var(--usa-accent,#7c5cff);--usa-cursor-size:28px;position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity 0.2s ease;contain:strict}usa-cursor[data-active]{opacity:1}usa-cursor .usa-cursor-ring{position:absolute;left:0;top:0;width:var(--usa-cursor-size);height:var(--usa-cursor-size);margin:calc(var(--usa-cursor-size) / -2) 0 0 calc(var(--usa-cursor-size) / -2);border:1.5px solid var(--usa-cursor-color);border-radius:999px;box-sizing:border-box;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),height 0.25s cubic-bezier(0.34,1.56,0.64,1),margin 0.25s ease,border-radius 0.25s ease,background-color 0.2s ease;will-change:transform}usa-cursor[
|
|
62
|
+
usa-cursor{--usa-cursor-color:var(--usa-accent,#7c5cff);--usa-cursor-size:28px;position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity 0.2s ease;contain:strict}usa-cursor[data-active]{opacity:1}usa-cursor .usa-cursor-ring{position:absolute;left:0;top:0;width:var(--usa-cursor-size);height:var(--usa-cursor-size);margin:calc(var(--usa-cursor-size) / -2) 0 0 calc(var(--usa-cursor-size) / -2);border:1.5px solid var(--usa-cursor-color);border-radius:999px;box-sizing:border-box;transition:width 0.25s cubic-bezier(0.34,1.56,0.64,1),height 0.25s cubic-bezier(0.34,1.56,0.64,1),margin 0.25s ease,border-radius 0.25s ease,background-color 0.2s ease;will-change:transform}usa-cursor[data-hover] .usa-cursor-ring:first-child{width:calc(var(--usa-cursor-size) * 1.6);height:calc(var(--usa-cursor-size) * 1.6);margin:calc(var(--usa-cursor-size) * -0.8) 0 0 calc(var(--usa-cursor-size) * -0.8);background:color-mix(in srgb,var(--usa-cursor-color) 15%,transparent)}usa-cursor[data-snapped] .usa-cursor-ring{border-radius:12px;background:color-mix(in srgb,var(--usa-cursor-color) 12%,transparent);translate:-50% -50%;margin:0}usa-cursor[data-down] .usa-cursor-ring:first-child{scale:0.8}usa-cursor .usa-cursor-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--usa-cursor-color)}usa-cursor[data-snapped] .usa-cursor-dot{opacity:0}usa-cursor .usa-cursor-glow{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--usa-cursor-color) 35%,transparent),transparent 65%);mix-blend-mode:screen}.usa-cursor-none,.usa-cursor-none *{cursor:none !important}@media (pointer:coarse),(prefers-reduced-motion:reduce){usa-cursor{display:none}.usa-cursor-none,.usa-cursor-none *{cursor:auto !important}}
|
|
63
63
|
usa-fullpage{position:relative;display:block;height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;outline:none}usa-fullpage[axis="x"]{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}usa-fullpage .usa-fullpage-section{box-sizing:border-box;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always}usa-fullpage[axis="x"] .usa-fullpage-section{flex:0 0 100%}usa-fullpage .usa-fullpage-dots{position:sticky;float:right;top:50%;margin-right:16px;transform:translateY(-50%);display:grid;gap:10px;z-index:5}usa-fullpage .usa-fullpage-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;cursor:pointer;background:color-mix(in srgb,currentColor 35%,transparent);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),background-color 0.2s ease}usa-fullpage .usa-fullpage-dots button[aria-current]{background:var(--usa-accent,#7c5cff);transform:scale(1.5)}
|
|
64
64
|
usa-loading-bar{--usa-loading:0;--usa-loading-h:3px;--usa-loading-color:var(--usa-accent,#7c5cff);position:fixed;left:0;right:0;top:0;height:var(--usa-loading-h);z-index:2147483500;pointer-events:none;opacity:0;transition:opacity 0.3s ease}usa-loading-bar[position="bottom"]{top:auto;bottom:0}usa-loading-bar[data-active]{opacity:1}usa-loading-bar .usa-loading-bar-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--usa-loading));background:var(--usa-loading-color);box-shadow:0 0 10px var(--usa-loading-color);transition:transform 0.2s ease-out}@media (prefers-reduced-motion:reduce){usa-loading-bar .usa-loading-bar-fill{transition:none}}
|
|
65
65
|
usa-motion-switch{--usa-motion-i:2;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:999px;background:color-mix(in srgb,currentColor 9%,transparent);isolation:isolate}usa-motion-switch button{position:relative;z-index:1;padding:6px 12px;border:0;background:none;color:inherit;font:inherit;font-size:0.85em;border-radius:999px;cursor:pointer}usa-motion-switch button[aria-checked="true"]{color:var(--usa-accent-text,#fff)}usa-motion-switch button:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:1px}usa-motion-switch .usa-motion-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);border-radius:999px;background:var(--usa-accent,#7c5cff);transform:translateX(calc(var(--usa-motion-i) * 100%));transition:transform 0.4s cubic-bezier(0.34,1.4,0.64,1)}@media (prefers-reduced-motion:reduce){usa-motion-switch .usa-motion-thumb{transition:none}}
|
package/dist/components.d.cts
CHANGED
|
@@ -1494,8 +1494,6 @@ interface BurstOptions {
|
|
|
1494
1494
|
/** Duration in ms (default 600). */
|
|
1495
1495
|
duration?: number;
|
|
1496
1496
|
}
|
|
1497
|
-
/** Particles radiating from client point (x, y). Returns the number spawned. */
|
|
1498
|
-
declare function burst(x: number, y: number, options?: BurstOptions): number;
|
|
1499
1497
|
interface ConfettiOptions {
|
|
1500
1498
|
/** Origin in client px (default: centre-bottom third of the viewport). */
|
|
1501
1499
|
x?: number;
|
|
@@ -1510,10 +1508,6 @@ interface ConfettiOptions {
|
|
|
1510
1508
|
/** Duration in ms (default 1600). */
|
|
1511
1509
|
duration?: number;
|
|
1512
1510
|
}
|
|
1513
|
-
/** A confetti cannon (paper pieces with gravity, drift and spin). */
|
|
1514
|
-
declare function confetti(options?: ConfettiOptions): number;
|
|
1515
|
-
/** Horizontal error shake (`intensity` px, default 8). Reduced motion: a red outline flash. */
|
|
1516
|
-
declare function shake(el: Element, intensity?: number, duration?: number): Animation | null;
|
|
1517
1511
|
/** `navigator.vibrate()` where supported (Android Chrome, some WebViews). Returns whether it ran. */
|
|
1518
1512
|
declare function haptic(pattern?: number | number[]): boolean;
|
|
1519
1513
|
|
|
@@ -1523,7 +1517,8 @@ declare function haptic(pattern?: number | number[]): boolean;
|
|
|
1523
1517
|
* `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
|
|
1524
1518
|
* shape morph; submit → loading → success), `<usa-icon-morph>`,
|
|
1525
1519
|
* `<usa-like>`, `<usa-hold>`, `<usa-double-tap>`, `<usa-checkbox>`, plus
|
|
1526
|
-
* `
|
|
1520
|
+
* `haptic()`. 6.0: `burst()`, `confetti()` and `shake()` were removed — play
|
|
1521
|
+
* the registered effects instead: `playEffect(el, 'burst' | 'confetti' | 'shake')`.
|
|
1527
1522
|
*/
|
|
1528
1523
|
|
|
1529
1524
|
/** Register every component of this category under its default tag. */
|
|
@@ -1752,13 +1747,14 @@ declare global {
|
|
|
1752
1747
|
}
|
|
1753
1748
|
}
|
|
1754
1749
|
|
|
1755
|
-
declare const CURSOR_MODES: readonly ["dot", "
|
|
1750
|
+
declare const CURSOR_MODES: readonly ["dot", "magnetic", "glow"];
|
|
1756
1751
|
type CursorMode = (typeof CURSOR_MODES)[number];
|
|
1757
1752
|
/**
|
|
1758
|
-
* `<usa-cursor mode="dot |
|
|
1753
|
+
* `<usa-cursor mode="dot | magnetic | glow">` — a custom cursor for
|
|
1759
1754
|
* the page (place it once, e.g. at the end of `<body>`).
|
|
1760
1755
|
* - `dot` — a ring that follows with spring lag around the real pointer;
|
|
1761
|
-
*
|
|
1756
|
+
* (6.0: `mode="trail"` was removed — use the registered `comet-trail` effect;
|
|
1757
|
+
* unknown modes render as `dot`.)
|
|
1762
1758
|
* - `magnetic` — the ring snaps onto and wraps hovered targets (`a`,
|
|
1763
1759
|
* `button`, `[data-cursor]`);
|
|
1764
1760
|
* - `glow` — a large soft light following the pointer (great on dark UIs).
|
|
@@ -2997,5 +2993,5 @@ declare global {
|
|
|
2997
2993
|
*/
|
|
2998
2994
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2999
2995
|
|
|
3000
|
-
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, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect,
|
|
2996
|
+
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, 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 };
|
|
3001
2997
|
export type { A11yIssue, AmbientEffect, AutoAnimateOptions, AutoDegradeOptions, BaselineFeature, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DegradeState, DialogVariant, EffectContext, EffectDefinition, EffectKind, EffectTrigger, FlipOptions, FluentPresetOptions, GLGovernor, GLGovernorOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionSwitchLevel, MotionTokenGroup, MotionTokens, NativeHost, NativeSettings, NativeShellOptions, NativeTheme, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, ParticlePreset, PinchState, Placement, Politeness, PostEffect, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaFxElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
package/dist/components.d.ts
CHANGED
|
@@ -1494,8 +1494,6 @@ interface BurstOptions {
|
|
|
1494
1494
|
/** Duration in ms (default 600). */
|
|
1495
1495
|
duration?: number;
|
|
1496
1496
|
}
|
|
1497
|
-
/** Particles radiating from client point (x, y). Returns the number spawned. */
|
|
1498
|
-
declare function burst(x: number, y: number, options?: BurstOptions): number;
|
|
1499
1497
|
interface ConfettiOptions {
|
|
1500
1498
|
/** Origin in client px (default: centre-bottom third of the viewport). */
|
|
1501
1499
|
x?: number;
|
|
@@ -1510,10 +1508,6 @@ interface ConfettiOptions {
|
|
|
1510
1508
|
/** Duration in ms (default 1600). */
|
|
1511
1509
|
duration?: number;
|
|
1512
1510
|
}
|
|
1513
|
-
/** A confetti cannon (paper pieces with gravity, drift and spin). */
|
|
1514
|
-
declare function confetti(options?: ConfettiOptions): number;
|
|
1515
|
-
/** Horizontal error shake (`intensity` px, default 8). Reduced motion: a red outline flash. */
|
|
1516
|
-
declare function shake(el: Element, intensity?: number, duration?: number): Animation | null;
|
|
1517
1511
|
/** `navigator.vibrate()` where supported (Android Chrome, some WebViews). Returns whether it ran. */
|
|
1518
1512
|
declare function haptic(pattern?: number | number[]): boolean;
|
|
1519
1513
|
|
|
@@ -1523,7 +1517,8 @@ declare function haptic(pattern?: number | number[]): boolean;
|
|
|
1523
1517
|
* `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
|
|
1524
1518
|
* shape morph; submit → loading → success), `<usa-icon-morph>`,
|
|
1525
1519
|
* `<usa-like>`, `<usa-hold>`, `<usa-double-tap>`, `<usa-checkbox>`, plus
|
|
1526
|
-
* `
|
|
1520
|
+
* `haptic()`. 6.0: `burst()`, `confetti()` and `shake()` were removed — play
|
|
1521
|
+
* the registered effects instead: `playEffect(el, 'burst' | 'confetti' | 'shake')`.
|
|
1527
1522
|
*/
|
|
1528
1523
|
|
|
1529
1524
|
/** Register every component of this category under its default tag. */
|
|
@@ -1752,13 +1747,14 @@ declare global {
|
|
|
1752
1747
|
}
|
|
1753
1748
|
}
|
|
1754
1749
|
|
|
1755
|
-
declare const CURSOR_MODES: readonly ["dot", "
|
|
1750
|
+
declare const CURSOR_MODES: readonly ["dot", "magnetic", "glow"];
|
|
1756
1751
|
type CursorMode = (typeof CURSOR_MODES)[number];
|
|
1757
1752
|
/**
|
|
1758
|
-
* `<usa-cursor mode="dot |
|
|
1753
|
+
* `<usa-cursor mode="dot | magnetic | glow">` — a custom cursor for
|
|
1759
1754
|
* the page (place it once, e.g. at the end of `<body>`).
|
|
1760
1755
|
* - `dot` — a ring that follows with spring lag around the real pointer;
|
|
1761
|
-
*
|
|
1756
|
+
* (6.0: `mode="trail"` was removed — use the registered `comet-trail` effect;
|
|
1757
|
+
* unknown modes render as `dot`.)
|
|
1762
1758
|
* - `magnetic` — the ring snaps onto and wraps hovered targets (`a`,
|
|
1763
1759
|
* `button`, `[data-cursor]`);
|
|
1764
1760
|
* - `glow` — a large soft light following the pointer (great on dark UIs).
|
|
@@ -2997,5 +2993,5 @@ declare global {
|
|
|
2997
2993
|
*/
|
|
2998
2994
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2999
2995
|
|
|
3000
|
-
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, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect,
|
|
2996
|
+
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, 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 };
|
|
3001
2997
|
export type { A11yIssue, AmbientEffect, AutoAnimateOptions, AutoDegradeOptions, BaselineFeature, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DegradeState, DialogVariant, EffectContext, EffectDefinition, EffectKind, EffectTrigger, FlipOptions, FluentPresetOptions, GLGovernor, GLGovernorOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionSwitchLevel, MotionTokenGroup, MotionTokens, NativeHost, NativeSettings, NativeShellOptions, NativeTheme, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, ParticlePreset, PinchState, Placement, Politeness, PostEffect, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaFxElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
package/dist/components.js
CHANGED
|
@@ -47,8 +47,8 @@ export { BRIDGE_PROTOCOL_VERSION, applyNativeSettings, connectNativeShell, detec
|
|
|
47
47
|
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-DucKMQr_.js';
|
|
48
48
|
export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-CckMe3x0.js';
|
|
49
49
|
export { T as TIMELINE_PRESETS, r as resolvePosition, s as supportsNativeScrub, t as timeline } from './chunks/core-DN3hHbHh.js';
|
|
50
|
-
export { b as burst, c as confetti, h as haptic, s as shake } from './chunks/fx-ChjxrMBo.js';
|
|
51
50
|
export { g as gesture, p as pinchScale, s as swipeDirection } from './chunks/core-BTf__I-8.js';
|
|
51
|
+
export { h as haptic } from './chunks/fx-ChjxrMBo.js';
|
|
52
52
|
|
|
53
53
|
/**
|
|
54
54
|
* use-scroll-animate/components
|