use-scroll-animate 2.4.0 → 2.6.0

package/dist/components.d.ts

@@ -1001,6 +1001,429 @@ declare global {
     }
 }
 
+declare const CLICK_EFFECTS: readonly ["ripple", "burst", "confetti", "squish", "press-spring", "shake"];
+type ClickEffect = (typeof CLICK_EFFECTS)[number];
+/**
+ * `<usa-click>` — click / tap effects on whatever it wraps (combinable:
+ * `effect="press-spring burst"`).
+ *
+ * - `ripple` — an ink wave from the pointer (enhanced: `color`, soft edge);
+ * - `burst` — particles radiating from the pointer (`shape`: circle, square, star, heart, emoji);
+ * - `confetti` — a confetti cannon from the click point;
+ * - `squish` — squash on press, stretch on release (spring);
+ * - `press-spring` — dips while pressed, springs back with overshoot;
+ * - `shake` — horizontal error shake; plays on `invalid` events from a form
+ *   inside, on `shake()`, or on click when `trigger="click"`.
+ *
+ * Attributes: `effect`, `color`, `shape`, `count`, `haptic` (vibrate ms,
+ * where supported), `disabled`. Keyboard (Space/Enter) triggers the effects
+ * from the centre. Reduced motion: no particles or movement; press dims.
+ */
+interface UsaClickElement extends UsaElement {
+    readonly effects: string[];
+    play(x?: number, y?: number): void;
+    shake(): void;
+}
+declare function defineClick(tag?: string): CustomElementConstructor | undefined;
+
+declare const BUTTON_DEFORMS: readonly ["squash", "wobble", "gooey", "dent"];
+type ButtonDeform = (typeof BUTTON_DEFORMS)[number];
+type ButtonShape = 'pill' | 'circle' | 'icon';
+type ButtonState = 'idle' | 'loading' | 'success' | 'error';
+/**
+ * `<usa-button>` — **button click deformation** (按钮点击形变) around a
+ * native `<button>` (or `<a>`) child — or the element itself becomes a button.
+ *
+ * `deform` (combinable, e.g. `deform="squash wobble"`):
+ * - `squash` — squash on press, stretch-and-settle on release (spring);
+ * - `wobble` — elastic border-radius wobble after a click;
+ * - `gooey` — liquid blob: droplets squeeze out from the press point and
+ *   merge back (SVG goo filter);
+ * - `dent` — the surface dents toward the pressed point (3D tilt + inner shade).
+ *
+ * `shape="pill | circle | icon"` morphs the outline with a spring (label =
+ * `[data-label]`, icon = `[data-icon]` children); `morphTo(shape)`.
+ *
+ * `morph="submit"` — click → `loading` (shrinks to a circle with a spinner,
+ * `aria-busy`), then `success` (check) or `error` (shake + cross), and back
+ * to `idle` after `reset` ms (1800). Drive it with `state="…"` / `.state`, or
+ * call `event.detail.done(ok)` from a `usa:submit` listener.
+ *
+ * Attributes: `deform`, `shape`, `morph`, `state`, `reset`, `haptic`,
+ * `disabled`. Events: `usa:submit`, `usa:state`. Reduced motion: no
+ * deformation; shape and state changes are instant; status still announced.
+ */
+interface UsaButtonElement extends UsaElement {
+    readonly target: HTMLElement;
+    shape: ButtonShape;
+    state: ButtonState;
+    morphTo(shape: ButtonShape): Promise<void>;
+}
+declare function defineButton(tag?: string): CustomElementConstructor | undefined;
+
+type Pt = [number, number];
+type Quad = [Pt, Pt, Pt, Pt];
+/**
+ * Morphable icons: every icon is three quads (four points each) on a 24×24
+ * grid, so any icon can morph into any other by interpolating points.
+ */
+declare const MORPH_ICONS: Record<string, [Quad, Quad, Quad]>;
+/** SVG path data for an icon, or for the interpolation `t` (0–1) between two. */
+declare function morphPath(from: string, to?: string, t?: number): string;
+/**
+ * `<usa-icon-morph>` — an icon that morphs between shapes with a spring:
+ * play ↔ pause, menu ↔ close, plus ↔ minus, check, arrow-right…
+ *
+ * Attributes: `icons` (comma list, cycled; default `play,pause`), `index`
+ * (current, 0), `size` (px, 24), `toggle` (makes it a button that cycles
+ * on click / Enter / Space), `labels` (comma list of accessible names per
+ * icon, e.g. `Play,Pause`), `preset` (spring, `wobbly`). Methods:
+ * `next()`, `show(nameOrIndex)`. Events: `usa:change` (`{ index, icon }`).
+ * Inside a `<usa-button>` or `<button>` it is decorative. Reduced motion:
+ * the icon switches instantly.
+ */
+interface UsaIconMorphElement extends UsaElement {
+    index: number;
+    readonly icon: string;
+    next(): void;
+    show(icon: string | number): void;
+}
+declare function defineIconMorph(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-like>` — a like / favourite toggle: the heart pops with a spring and
+ * bursts into particles when liked. `role="button"` + `aria-pressed`.
+ *
+ * Attributes: `liked`, `count` (shown next to the heart, updated ±1),
+ * `label` (accessible name, default "Like"), `color`, `size` (px, 24),
+ * `haptic`, `disabled`. Events: `change`, `usa:change` (`{ liked, count }`).
+ * Reduced motion: colour change only.
+ */
+interface UsaLikeElement extends UsaElement {
+    liked: boolean;
+    count: number | null;
+    toggle(force?: boolean): void;
+}
+declare function defineLike(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-hold>` — hold-to-confirm: press and hold (pointer, Space or Enter)
+ * while a progress ring fills; releasing early rewinds it. Good for
+ * destructive actions.
+ *
+ * Attributes: `duration` (ms, 1200), `label` (accessible name), `color`,
+ * `disabled`. CSS variable `--usa-hold` (0–1). Events: `usa:progress`,
+ * `usa:confirm`, `usa:cancel`. Reduced motion: same timing, the ring fills
+ * without the scale pulse.
+ */
+interface UsaHoldElement extends UsaElement {
+    readonly progress: number;
+    cancel(): void;
+}
+declare function defineHold(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-double-tap>` — detects a double tap / double click on its content
+ * (photos, posts) and pops a heart (or `icon`) at the tap point.
+ *
+ * Attributes: `icon` (text / emoji, default ♥), `color`, `delay` (max ms
+ * between taps, 300), `haptic`, `disabled`. Events: `usa:double-tap`
+ * (`{ x, y }`, element-relative). Keyboard users: press `L` while focused.
+ * Reduced motion: the icon fades in and out without scaling or particles.
+ */
+interface UsaDoubleTapElement extends UsaElement {
+    pop(x?: number, y?: number): void;
+}
+declare function defineDoubleTap(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-checkbox>` — an animated, form-associated checkbox: the box springs
+ * and the check mark draws itself. `role="checkbox"` + `aria-checked`
+ * (`mixed` with `indeterminate`).
+ *
+ * Attributes: `checked`, `indeterminate`, `disabled`, `name`, `value`
+ * (`on`), `label`, `shape` (`square` default, `circle`). Events: `change`,
+ * `usa:change` (`{ checked }`). Reduced motion: no spring or drawing.
+ */
+interface UsaCheckboxElement extends UsaElement {
+    checked: boolean;
+    indeterminate: boolean;
+    toggle(force?: boolean): void;
+}
+declare function defineCheckbox(tag?: string): CustomElementConstructor | undefined;
+
+interface BurstOptions {
+    /** Number of particles (default 12). */
+    count?: number;
+    /** Colours to pick from (default: accent palette). */
+    colors?: string[];
+    /** Travel distance in px (default 48). */
+    distance?: number;
+    /** Particle size in px (default 6). */
+    size?: number;
+    /** `circle` (default), `square`, `star`, `heart` or any text / emoji. */
+    shape?: 'circle' | 'square' | 'star' | 'heart' | string;
+    /** Duration in ms (default 600). */
+    duration?: number;
+}
+/** Particles radiating from client point (x, y). Returns the number spawned. */
+declare function burst(x: number, y: number, options?: BurstOptions): number;
+interface ConfettiOptions {
+    /** Origin in client px (default: centre-bottom third of the viewport). */
+    x?: number;
+    y?: number;
+    /** Pieces (default 80). */
+    count?: number;
+    /** Spread angle in degrees (default 70). */
+    spread?: number;
+    /** Launch speed multiplier (default 1). */
+    velocity?: number;
+    colors?: string[];
+    /** Duration in ms (default 1600). */
+    duration?: number;
+}
+/** A confetti cannon (paper pieces with gravity, drift and spin). */
+declare function confetti(options?: ConfettiOptions): number;
+/** Horizontal error shake (`intensity` px, default 8). Reduced motion: a red outline flash. */
+declare function shake(el: Element, intensity?: number, duration?: number): Animation | null;
+/** `navigator.vibrate()` where supported (Android Chrome, some WebViews). Returns whether it ran. */
+declare function haptic(pattern?: number | number[]): boolean;
+
+/**
+ * use-scroll-animate/components/click — click & tap effects (v2.5).
+ * `<usa-click>` (ripple, burst, confetti, squish, press-spring, shake),
+ * `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
+ * shape morph; submit → loading → success), `<usa-icon-morph>`,
+ * `<usa-like>`, `<usa-hold>`, `<usa-double-tap>`, `<usa-checkbox>`, plus
+ * `burst()`, `confetti()`, `shake()` and `haptic()`.
+ */
+
+/** Register every component of this category under its default tag. */
+declare function defineClickComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-click': UsaClickElement;
+        'usa-button': UsaButtonElement;
+        'usa-icon-morph': UsaIconMorphElement;
+        'usa-like': UsaLikeElement;
+        'usa-hold': UsaHoldElement;
+        'usa-double-tap': UsaDoubleTapElement;
+        'usa-checkbox': UsaCheckboxElement;
+    }
+}
+
+/**
+ * `<usa-tabs>` — accessible tabs with a sliding (spring) indicator.
+ * Tabs: `[data-tab]` children (buttons); panels: `[data-panel]` children, in
+ * the same order. Arrow keys / Home / End move between tabs (roving tabindex).
+ *
+ * Attributes: `selected` (index, 0), `indicator` (`line` default, `pill`),
+ * `variant`. Events: `usa:change` (`{ index }`). Panels fade/slide in;
+ * reduced motion: the indicator jumps and panels switch instantly.
+ */
+interface UsaTabsElement extends UsaElement {
+    selected: number;
+    select(i: number, focus?: boolean): void;
+}
+declare function defineTabs(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-drawer>` — a side panel that slides in with a spring and can be
+ * dragged / swiped closed. Modal: backdrop, Esc, focus returns on close.
+ * Attributes: `open`, `side` (`left` default, `right`, `top`, `bottom`),
+ * `label`, `variant`. Events: `usa:open`, `usa:close`. `[data-close]` closes.
+ * Reduced motion: opens and closes instantly.
+ */
+interface UsaDrawerElement extends UsaElement {
+    open: boolean;
+    show(): void;
+    close(): void;
+}
+/**
+ * `<usa-bottom-sheet>` — a draggable bottom sheet with snap points
+ * (`snap="0.3,0.6,0.92"`, fractions of the viewport height; default
+ * `0.5,0.92`; `start` = index of the snap it opens at, default 0), inertia and drag-down-to-dismiss. `[data-handle]` (or the
+ * built-in grabber) drags it. Attributes: `open`, `snap`, `start` (initial
+ * snap index), `label`, `variant`. Events: `usa:open`, `usa:close`, `usa:snap`.
+ */
+interface UsaBottomSheetElement extends UsaDrawerElement {
+}
+declare function defineDrawer(tag?: string): CustomElementConstructor | undefined;
+declare function defineBottomSheet(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-pull-refresh>` — pull-to-refresh for a scroll container (itself):
+ * pull down at the top (touch / pointer) and a spinner stretches in; past
+ * `threshold` (px, 70) releasing fires `usa:refresh` — call
+ * `event.detail.done()` (or return a promise to `onrefresh`) to finish.
+ * Also exposes `refresh()` for a keyboard / button path.
+ * Attributes: `threshold`, `disabled`, `label` (status text, "Refreshing").
+ * Reduced motion: no stretch; the spinner simply appears while refreshing.
+ */
+interface UsaPullRefreshElement extends UsaElement {
+    readonly refreshing: boolean;
+    refresh(): Promise<void>;
+}
+declare function definePullRefresh(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-fab>` — floating action button with a speed dial. The first element
+ * child is the main button; the others are actions that fan out with a
+ * staggered spring when it opens (`direction="up"` default, `down`, `left`,
+ * `right`, `radial`). Esc / outside click closes; `aria-expanded` on the
+ * main button; actions are hidden from AT while closed.
+ * Attributes: `open`, `direction`, `position` (`bottom-right` default, `bottom-left`,
+ * `inline`), `gap` (px, 56), `variant`. Events: `usa:toggle` (`{ open }`).
+ * Reduced motion: actions appear without travel.
+ */
+interface UsaFabElement extends UsaElement {
+    open: boolean;
+    toggle(force?: boolean): void;
+}
+declare function defineFab(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-navbar>` — an app bar that hides while you scroll down and returns
+ * as soon as you scroll up (or reach the top); `shrink` makes it compact
+ * once scrolled. Focus inside always reveals it.
+ * Attributes: `threshold` (px of scroll before hiding, 64), `shrink`,
+ * `target` (selector of a scroll container instead of the page), `variant`.
+ * State attributes: `data-hidden`, `data-scrolled`. Events: `usa:hide`, `usa:show`.
+ * Reduced motion: hides/shows without sliding (instant).
+ */
+interface UsaNavbarElement extends UsaElement {
+    readonly hiddenByScroll: boolean;
+    show(): void;
+}
+declare function defineNavbar(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-slider>` — a form-associated range slider (`role="slider"`). The
+ * thumb follows with a spring, grows while dragged and shows a value bubble.
+ * Keyboard: arrows (step), PageUp/PageDown (10 steps), Home/End.
+ * Attributes: `value`, `min` (0), `max` (100), `step` (1), `name`, `label`,
+ * `bubble` (show the value while dragging), `disabled`, `variant`.
+ * Events: `input` + `usa:input` while moving, `change` + `usa:change` on release.
+ * Reduced motion: the thumb jumps (no spring).
+ */
+interface UsaSliderElement extends UsaElement {
+    value: number;
+}
+declare function defineSlider(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-rating>` — star rating with hover preview and a springy pop when a
+ * value is chosen. `role="slider"` (arrow keys, Home/End, number keys).
+ * Attributes: `value` (0), `max` (5), `icon` (★), `readonly`, `label`
+ * ("Rating"), `name` (form value), `variant`. Events: `change`, `usa:change` (`{ value }`).
+ * Reduced motion: no pop.
+ */
+interface UsaRatingElement extends UsaElement {
+    value: number;
+}
+declare function defineRating(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-tooltip text="…">` — a tooltip for the element it wraps, shown on
+ * hover (after `delay` ms, 300) and on keyboard focus, hidden on Esc / blur.
+ * It springs in from its placement side and flips to stay on screen; the
+ * trigger gets `aria-describedby`.
+ * Attributes: `text`, `placement` (`top` default, `bottom`, `left`, `right`),
+ * `delay`, `variant`. Reduced motion: fades only.
+ */
+interface UsaTooltipElement extends UsaElement {
+    show(): void;
+    hide(): void;
+}
+declare function defineTooltip(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-popover>` — a click-to-open popover: the first element child is the
+ * trigger, `[data-popover]` is the content. Springs open from the trigger,
+ * flips to stay on screen; Esc or an outside click closes and focus returns
+ * to the trigger. `aria-expanded` / `aria-controls` on the trigger.
+ * Attributes: `open`, `placement` (`bottom` default), `variant`. Events:
+ * `usa:open`, `usa:close`. Reduced motion: fades only.
+ */
+interface UsaPopoverElement extends UsaElement {
+    open: boolean;
+    toggle(force?: boolean): void;
+}
+declare function definePopover(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-badge>` — a count / dot badge on whatever it wraps; bumps with a
+ * spring whenever the value changes and pulses with `pulse`.
+ * Attributes: `value` (number or text; 0 / empty hides it unless
+ * `show-zero`), `max` (99 → "99+"), `dot`, `pulse`, `label` (accessible
+ * text, default "{n} new"), `variant`. Reduced motion: no bump or pulse.
+ */
+interface UsaBadgeElement extends UsaElement {
+    value: string;
+}
+declare function defineBadge(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-avatar-stack>` — overlapping avatars (its children: `<img>` or any
+ * element) that spread apart with a spring on hover / focus; extra ones
+ * collapse into a "+N" chip.
+ * Attributes: `max` (visible avatars, 5), `size` (px, 36), `overlap` (0–1,
+ * 0.35), `label` (group name), `variant`. Reduced motion: no spreading.
+ */
+interface UsaAvatarStackElement extends UsaElement {
+}
+declare function defineAvatarStack(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * Style variants (v2.6): `variant="minimal | neon | glass | brutalist |
+ * fluent | material"` on any `<usa-*>` element — or on any ancestor as
+ * `data-usa-variant`, or page-wide with `setVariant()` — sets the shared
+ * design tokens every component reads:
+ *
+ * `--usa-accent`, `--usa-accent-text`, `--usa-surface`, `--usa-text`,
+ * `--usa-radius`, `--usa-border`, `--usa-shadow`, `--usa-blur`, `--usa-font`.
+ *
+ * (`<usa-spinner>`, `<usa-check>` and `<usa-dialog>` already use `variant`
+ * for their kind; the token names never clash with those values except
+ * `fluent`, which means the same thing there.)
+ */
+declare const VARIANTS: readonly ["minimal", "neon", "glass", "brutalist", "fluent", "material"];
+type Variant = (typeof VARIANTS)[number];
+/** Inject the variant token sheet (done automatically by every `ui` component). */
+declare function adoptVariants(): void;
+/** Apply a variant to the whole page (or `root`); `null` removes it. */
+declare function setVariant(variant: Variant | null, root?: Element | null): void;
+
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * use-scroll-animate/components/ui — animated UI components + style variants (v2.6).
+ * `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
+ * `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
+ * `<usa-tooltip>`, `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
+ * and `variant="minimal | neon | glass | brutalist | fluent | material"`
+ * design tokens (`setVariant()`, `VARIANTS`).
+ */
+
+/** Register every component of this category under its default tag. */
+declare function defineUiComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-tabs': UsaTabsElement;
+        'usa-drawer': UsaDrawerElement;
+        'usa-bottom-sheet': UsaBottomSheetElement;
+        'usa-pull-refresh': UsaPullRefreshElement;
+        'usa-fab': UsaFabElement;
+        'usa-navbar': UsaNavbarElement;
+        'usa-slider': UsaSliderElement;
+        'usa-rating': UsaRatingElement;
+        'usa-tooltip': UsaTooltipElement;
+        'usa-popover': UsaPopoverElement;
+        'usa-badge': UsaBadgeElement;
+        'usa-avatar-stack': UsaAvatarStackElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1011,6 +1434,8 @@ declare const COMPONENT_CATEGORIES: {
     readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-flip-list", "usa-view-switch"];
     readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
     readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
+    readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
+    readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 /**
@@ -1019,5 +1444,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
  */
 declare function defineComponents(categories?: ComponentCategory[]): void;
 
-export { CARD_EFFECTS, COMPONENT_CATEGORIES, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAurora, defineBackgroundComponents, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineComponents, defineCounter, defineDialog, defineDraggable, defineFeedbackComponents, defineFlipList, defineGrain, defineInteractionComponents, defineMagnetic, defineMarquee, defineOverscroll, defineParticles, definePhysicsComponents, definePress, defineProgress, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSpinner, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineTextComponents, defineTextRotate, defineTilt, defineToaster, defineToggle, defineTransitionComponents, defineTypewriter, defineViewSwitch, easeOutExpo, flip, linearEasing, prefersReducedMotion, projectInertia, readScrollProgress, resolveSpring, revealKeyframes, rubberBand, scrambleFrame, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, toast, viewTransition };
-export type { CardEffect, ComponentCategory, ComponentsConfig, ConnectedOptions, DialogVariant, FlipOptions, RevealEffect, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAuroraElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCounterElement, UsaDialogElement, UsaDraggableElement, UsaElement, UsaFlipListElement, UsaGrainElement, UsaMagneticElement, UsaMarqueeElement, UsaOverscrollElement, UsaParticlesElement, UsaPressElement, UsaProgressElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSpinnerElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaTextRotateElement, UsaTiltElement, UsaToasterElement, UsaToggleElement, UsaTypewriterElement, UsaViewSwitchElement, ViewTransitionOptions };
+export { BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, MORPH_ICONS, REVEAL_EFFECTS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAurora, defineAvatarStack, defineBackgroundComponents, defineBadge, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineDialog, defineDoubleTap, defineDraggable, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineGrain, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineMagnetic, defineMarquee, defineNavbar, defineOverscroll, defineParticles, definePhysicsComponents, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollProgress, defineScrolly, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, easeOutExpo, flip, haptic, linearEasing, morphPath, prefersReducedMotion, projectInertia, readScrollProgress, resolveSpring, revealKeyframes, rubberBand, scrambleFrame, setVariant, shake, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, toast, viewTransition };
+export type { BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, DialogVariant, FlipOptions, Placement, RevealEffect, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAuroraElement, UsaAvatarStackElement, UsaBadgeElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaDialogElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaGrainElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaMagneticElement, UsaMarqueeElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, Variant, ViewTransitionOptions };

package/dist/components.js

@@ -14,8 +14,13 @@ import { definePhysicsComponents } from './components/physics.js';
 export { SPRING_EFFECTS, defineDraggable, defineOverscroll, defineSpring, springEffectKeyframes } from './components/physics.js';
 import { defineCardComponents } from './components/cards.js';
 export { CARD_EFFECTS, defineCard, defineCardStack, defineCarousel3d, defineStickyStack } from './components/cards.js';
-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-BKUU7-Xm.js';
-export { c as configureComponents, p as prefersReducedMotion } from './chunks/base-CuvCgqLy.js';
+import { defineClickComponents } from './components/click.js';
+export { BUTTON_DEFORMS, CLICK_EFFECTS, MORPH_ICONS, burst, confetti, defineButton, defineCheckbox, defineClick, defineDoubleTap, defineHold, defineIconMorph, defineLike, haptic, morphPath, shake } from './components/click.js';
+import { adoptVariants, defineUiComponents } from './components/ui.js';
+export { VARIANTS, defineAvatarStack, defineBadge, defineBottomSheet, defineDrawer, defineFab, defineNavbar, definePopover, definePullRefresh, defineRating, defineSlider, defineTabs, defineTooltip, setVariant } from './components/ui.js';
+import { c as canDefine } from './chunks/base-08OYzphB.js';
+export { a as configureComponents, p as prefersReducedMotion } from './chunks/base-08OYzphB.js';
+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-CpeFkxNd.js';
 
 /**
  * use-scroll-animate/components
@@ -47,6 +52,8 @@ const COMPONENT_CATEGORIES = {
     transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],
     physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],
     cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],
+    click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],
+    ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],
 };
 const BY_CATEGORY = {
     reveal: defineRevealComponents,
@@ -57,14 +64,18 @@ const BY_CATEGORY = {
     transitions: defineTransitionComponents,
     physics: definePhysicsComponents,
     cards: defineCardComponents,
+    click: defineClickComponents,
+    ui: defineUiComponents,
 };
 /**
  * Register every `<usa-*>` component (or only the given categories).
  * Safe to call more than once and on the server (no-op without DOM).
  */
 function defineComponents(categories) {
+    if (canDefine())
+        adoptVariants();
     (categories || Object.keys(BY_CATEGORY)).forEach((c) => BY_CATEGORY[c]?.());
 }
 
-export { COMPONENT_CATEGORIES, defineBackgroundComponents, defineCardComponents, defineComponents, defineFeedbackComponents, defineInteractionComponents, definePhysicsComponents, defineRevealComponents, defineTextComponents, defineTransitionComponents };
+export { COMPONENT_CATEGORIES, adoptVariants, defineBackgroundComponents, defineCardComponents, defineClickComponents, defineComponents, defineFeedbackComponents, defineInteractionComponents, definePhysicsComponents, defineRevealComponents, defineTextComponents, defineTransitionComponents, defineUiComponents };
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\n\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n  reveal: defineRevealComponents,\n  text: defineTextComponents,\n  interaction: defineInteractionComponents,\n  feedback: defineFeedbackComponents,\n  background: defineBackgroundComponents,\n  transitions: defineTransitionComponents,\n  physics: definePhysicsComponents,\n  cards: defineCardComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n  (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAmBH;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;AAC3E,IAAA,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAChH,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;IACrF,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,CAAC;IACtF,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;;AAK9E,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,UAAU,EAAE,0BAA0B;AACtC,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,KAAK,EAAE,oBAAoB;CAC5B;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;IAC/D,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;"}
+{"version":3,"file":"components.js","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\n\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n  reveal: defineRevealComponents,\n  text: defineTextComponents,\n  interaction: defineInteractionComponents,\n  feedback: defineFeedbackComponents,\n  background: defineBackgroundComponents,\n  transitions: defineTransitionComponents,\n  physics: definePhysicsComponents,\n  cards: defineCardComponents,\n  click: defineClickComponents,\n  ui: defineUiComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n  if (canDefine()) adoptVariants();\n  (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAyBH;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;AAC3E,IAAA,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAChH,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;IACrF,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,CAAC;IACtF,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;;AAK5L,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,UAAU,EAAE,0BAA0B;AACtC,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,KAAK,EAAE,oBAAoB;AAC3B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,EAAE,EAAE,kBAAkB;CACvB;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAI,SAAS,EAAE;AAAE,QAAA,aAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;"}