use-scroll-animate 6.3.0 → 6.5.0

package/dist/components/widgets.d.cts

@@ -170,6 +170,128 @@ interface UsaMenuElement extends UsaElement {
 declare const MENU_EFFECTS: readonly ["scale", "fold", "slide"];
 declare function defineMenu(tag?: string): CustomElementConstructor | undefined;
 
+/**
+ * 6.4 meters: `<usa-progress-ring>` and `<usa-odometer>`.
+ *
+ * `<usa-progress-ring value="64" max="100">` — a ring, `bar` or `semi`
+ * (semicircle gauge) `variant`; the arc eases (with a little overshoot) to
+ * each new value while the centre label counts; `gradient="#a,#b"`;
+ * no `value` = indeterminate (spinning arc). `role="progressbar"`.
+ * Event `usa:complete` when it reaches max.
+ *
+ * `<usa-odometer value="1234">` — rolling digit wheels: every digit column
+ * spins to its new digit (lower digits travel further), columns slide in /
+ * out when the length changes; `locale` grouping via Intl.NumberFormat,
+ * `decimals`, `prefix` / `suffix`, `duration`. The accessible name is the
+ * formatted number.
+ *
+ * Reduced motion: values switch without animation.
+ */
+interface UsaProgressRingElement extends UsaElement {
+    value: number | null;
+    max: number;
+}
+interface UsaOdometerElement extends UsaElement {
+    value: number;
+    readonly text: string;
+}
+declare const PROGRESS_VARIANTS: readonly ["ring", "bar", "semi"];
+declare function defineProgressRing(tag?: string): CustomElementConstructor | undefined;
+declare function defineOdometer(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-skeleton-reveal loading>` (6.4) — a skeleton generated from the
+ * real content: while `loading`, every text line, image and marked block
+ * (`[data-skeleton]`) of the children is measured and covered by a
+ * placeholder with one synchronized shimmer (`variant="wave | pulse |
+ * glow"`). Remove `loading` (or call `reveal()`) and the placeholders
+ * dissolve top-to-bottom while the content fades in from a blur.
+ *
+ * `aria-busy` follows `loading`. Event `usa:reveal`. Reduced motion: no
+ * shimmer, a plain crossfade.
+ */
+interface UsaSkeletonRevealElement extends UsaElement {
+    loading: boolean;
+    reveal(): Promise<void>;
+}
+declare const SKELETON_VARIANTS: readonly ["wave", "pulse", "glow"];
+declare function defineSkeletonReveal(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-star-rating value="3.5">` (6.4) — rating stars 2.0: the fill
+ * follows the pointer (hover preview, `step="0.5"` half stars), a click
+ * pops the chosen star and throws a small sparkle burst, the other stars
+ * ripple in sequence. `max`, `step` (`1` · `0.5`), `readonly`, `label`,
+ * `icon` (`star` · `heart`). Keyboard: it is a `role="slider"` — arrows,
+ * Home / End. Event `usa:change` (`{ value }`). Reduced motion: no pop,
+ * burst or ripple.
+ */
+interface UsaStarRatingElement extends UsaElement {
+    value: number;
+}
+declare function defineStarRating(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-milestones>` (6.5) — a scroll-drawn timeline: a progress line grows
+ * down the rail as you scroll, and each milestone (a child element, with an
+ * optional `data-date`) pops its dot and slides its card in when the line
+ * reaches it. Cards alternate sides on wide screens (`layout="alternate"`,
+ * default) or sit on one side (`layout="left"`); below 640 px they always
+ * stack. Events `usa:reach` (`{ index }`). Reduced motion: everything is
+ * shown, the line is full.
+ */
+interface UsaMilestonesElement extends UsaElement {
+    readonly reached: number;
+}
+declare function defineMilestones(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-masonry-flow>` (6.5) — a masonry grid whose items glide to their
+ * new places (FLIP) whenever the layout changes: resize, items added or
+ * removed, `filter()`, `shuffle()`, `sort()`. Columns come from `min`
+ * (minimum column width, px) and `gap`. Hidden items scale out, shown ones
+ * scale in. Event `usa:layout` (`{ columns }`). Reduced motion: items jump.
+ */
+interface UsaMasonryFlowElement extends UsaElement {
+    readonly columns: number;
+    layout(animate?: boolean): void;
+    filter(fn: ((el: HTMLElement) => boolean) | string | null): void;
+    shuffle(): void;
+    sort(compare: (a: HTMLElement, b: HTMLElement) => number): void;
+}
+declare function defineMasonryFlow(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-compare>` (6.5) — before / after image compare slider. The first
+ * child is "before", the second "after" (images, videos or any element).
+ * Drag the handle (or anywhere with `hover`), click to jump, or use the
+ * keyboard (it is a `role="slider"`: arrows, Page Up / Down, Home / End).
+ * `position` (0–100, default 50), `orientation="horizontal | vertical"`,
+ * `intro` plays a short sweep when it scrolls into view, `labels="Before,
+ * After"`. Event `usa:change` (`{ position }`). Reduced motion: no intro
+ * sweep or eased jumps.
+ */
+interface UsaCompareElement extends UsaElement {
+    position: number;
+}
+declare function defineCompare(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-cube-gallery>` (6.5) — a gallery on a turning 3D cube: the current
+ * slide and the next one sit on adjacent faces and the cube rotates between
+ * them. Swipe / drag, arrow keys, prev / next buttons, `autoplay` (ms;
+ * pauses on hover, focus and off screen), `axis="y | x"`. API `next()`,
+ * `prev()`, `goTo(i)`, `index`; event `usa:change`. Reduced motion: slides
+ * switch with a fade.
+ */
+interface UsaCubeGalleryElement extends UsaElement {
+    readonly index: number;
+    next(): void;
+    prev(): void;
+    goTo(i: number): void;
+}
+declare function defineCubeGallery(tag?: string): CustomElementConstructor | undefined;
+
 /**
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
  * entry so `motionary/components` and `components/lite` keep their size
@@ -199,8 +321,16 @@ declare global {
         'usa-modal': UsaModalElement;
         'usa-sheet': UsaSheetElement;
         'usa-menu': UsaMenuElement;
+        'usa-progress-ring': UsaProgressRingElement;
+        'usa-odometer': UsaOdometerElement;
+        'usa-skeleton-reveal': UsaSkeletonRevealElement;
+        'usa-star-rating': UsaStarRatingElement;
+        'usa-milestones': UsaMilestonesElement;
+        'usa-masonry-flow': UsaMasonryFlowElement;
+        'usa-compare': UsaCompareElement;
+        'usa-cube-gallery': UsaCubeGalleryElement;
     }
 }
 
-export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, SHEET_SIDES, TAB_INDICATORS, TOAST_POSITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineDisclosure, defineMenu, defineModal, defineSheet, defineStories, defineTabBar, defineToastStack, defineWidgets, stackToast };
-export type { StackToastOptions, UsaCarouselElement, UsaDisclosureElement, UsaMenuElement, UsaModalElement, UsaSheetElement, UsaStoriesElement, UsaTabBarElement, UsaToastStackElement };
+export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, PROGRESS_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, TAB_INDICATORS, TOAST_POSITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineMasonryFlow, defineMenu, defineMilestones, defineModal, defineOdometer, defineProgressRing, defineSheet, defineSkeletonReveal, defineStarRating, defineStories, defineTabBar, defineToastStack, defineWidgets, stackToast };
+export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaMasonryFlowElement, UsaMenuElement, UsaMilestonesElement, UsaModalElement, UsaOdometerElement, UsaProgressRingElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStoriesElement, UsaTabBarElement, UsaToastStackElement };

package/dist/components/widgets.d.ts

@@ -170,6 +170,128 @@ interface UsaMenuElement extends UsaElement {
 declare const MENU_EFFECTS: readonly ["scale", "fold", "slide"];
 declare function defineMenu(tag?: string): CustomElementConstructor | undefined;
 
+/**
+ * 6.4 meters: `<usa-progress-ring>` and `<usa-odometer>`.
+ *
+ * `<usa-progress-ring value="64" max="100">` — a ring, `bar` or `semi`
+ * (semicircle gauge) `variant`; the arc eases (with a little overshoot) to
+ * each new value while the centre label counts; `gradient="#a,#b"`;
+ * no `value` = indeterminate (spinning arc). `role="progressbar"`.
+ * Event `usa:complete` when it reaches max.
+ *
+ * `<usa-odometer value="1234">` — rolling digit wheels: every digit column
+ * spins to its new digit (lower digits travel further), columns slide in /
+ * out when the length changes; `locale` grouping via Intl.NumberFormat,
+ * `decimals`, `prefix` / `suffix`, `duration`. The accessible name is the
+ * formatted number.
+ *
+ * Reduced motion: values switch without animation.
+ */
+interface UsaProgressRingElement extends UsaElement {
+    value: number | null;
+    max: number;
+}
+interface UsaOdometerElement extends UsaElement {
+    value: number;
+    readonly text: string;
+}
+declare const PROGRESS_VARIANTS: readonly ["ring", "bar", "semi"];
+declare function defineProgressRing(tag?: string): CustomElementConstructor | undefined;
+declare function defineOdometer(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-skeleton-reveal loading>` (6.4) — a skeleton generated from the
+ * real content: while `loading`, every text line, image and marked block
+ * (`[data-skeleton]`) of the children is measured and covered by a
+ * placeholder with one synchronized shimmer (`variant="wave | pulse |
+ * glow"`). Remove `loading` (or call `reveal()`) and the placeholders
+ * dissolve top-to-bottom while the content fades in from a blur.
+ *
+ * `aria-busy` follows `loading`. Event `usa:reveal`. Reduced motion: no
+ * shimmer, a plain crossfade.
+ */
+interface UsaSkeletonRevealElement extends UsaElement {
+    loading: boolean;
+    reveal(): Promise<void>;
+}
+declare const SKELETON_VARIANTS: readonly ["wave", "pulse", "glow"];
+declare function defineSkeletonReveal(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-star-rating value="3.5">` (6.4) — rating stars 2.0: the fill
+ * follows the pointer (hover preview, `step="0.5"` half stars), a click
+ * pops the chosen star and throws a small sparkle burst, the other stars
+ * ripple in sequence. `max`, `step` (`1` · `0.5`), `readonly`, `label`,
+ * `icon` (`star` · `heart`). Keyboard: it is a `role="slider"` — arrows,
+ * Home / End. Event `usa:change` (`{ value }`). Reduced motion: no pop,
+ * burst or ripple.
+ */
+interface UsaStarRatingElement extends UsaElement {
+    value: number;
+}
+declare function defineStarRating(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-milestones>` (6.5) — a scroll-drawn timeline: a progress line grows
+ * down the rail as you scroll, and each milestone (a child element, with an
+ * optional `data-date`) pops its dot and slides its card in when the line
+ * reaches it. Cards alternate sides on wide screens (`layout="alternate"`,
+ * default) or sit on one side (`layout="left"`); below 640 px they always
+ * stack. Events `usa:reach` (`{ index }`). Reduced motion: everything is
+ * shown, the line is full.
+ */
+interface UsaMilestonesElement extends UsaElement {
+    readonly reached: number;
+}
+declare function defineMilestones(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-masonry-flow>` (6.5) — a masonry grid whose items glide to their
+ * new places (FLIP) whenever the layout changes: resize, items added or
+ * removed, `filter()`, `shuffle()`, `sort()`. Columns come from `min`
+ * (minimum column width, px) and `gap`. Hidden items scale out, shown ones
+ * scale in. Event `usa:layout` (`{ columns }`). Reduced motion: items jump.
+ */
+interface UsaMasonryFlowElement extends UsaElement {
+    readonly columns: number;
+    layout(animate?: boolean): void;
+    filter(fn: ((el: HTMLElement) => boolean) | string | null): void;
+    shuffle(): void;
+    sort(compare: (a: HTMLElement, b: HTMLElement) => number): void;
+}
+declare function defineMasonryFlow(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-compare>` (6.5) — before / after image compare slider. The first
+ * child is "before", the second "after" (images, videos or any element).
+ * Drag the handle (or anywhere with `hover`), click to jump, or use the
+ * keyboard (it is a `role="slider"`: arrows, Page Up / Down, Home / End).
+ * `position` (0–100, default 50), `orientation="horizontal | vertical"`,
+ * `intro` plays a short sweep when it scrolls into view, `labels="Before,
+ * After"`. Event `usa:change` (`{ position }`). Reduced motion: no intro
+ * sweep or eased jumps.
+ */
+interface UsaCompareElement extends UsaElement {
+    position: number;
+}
+declare function defineCompare(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-cube-gallery>` (6.5) — a gallery on a turning 3D cube: the current
+ * slide and the next one sit on adjacent faces and the cube rotates between
+ * them. Swipe / drag, arrow keys, prev / next buttons, `autoplay` (ms;
+ * pauses on hover, focus and off screen), `axis="y | x"`. API `next()`,
+ * `prev()`, `goTo(i)`, `index`; event `usa:change`. Reduced motion: slides
+ * switch with a fade.
+ */
+interface UsaCubeGalleryElement extends UsaElement {
+    readonly index: number;
+    next(): void;
+    prev(): void;
+    goTo(i: number): void;
+}
+declare function defineCubeGallery(tag?: string): CustomElementConstructor | undefined;
+
 /**
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
  * entry so `motionary/components` and `components/lite` keep their size
@@ -199,8 +321,16 @@ declare global {
         'usa-modal': UsaModalElement;
         'usa-sheet': UsaSheetElement;
         'usa-menu': UsaMenuElement;
+        'usa-progress-ring': UsaProgressRingElement;
+        'usa-odometer': UsaOdometerElement;
+        'usa-skeleton-reveal': UsaSkeletonRevealElement;
+        'usa-star-rating': UsaStarRatingElement;
+        'usa-milestones': UsaMilestonesElement;
+        'usa-masonry-flow': UsaMasonryFlowElement;
+        'usa-compare': UsaCompareElement;
+        'usa-cube-gallery': UsaCubeGalleryElement;
     }
 }
 
-export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, SHEET_SIDES, TAB_INDICATORS, TOAST_POSITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineDisclosure, defineMenu, defineModal, defineSheet, defineStories, defineTabBar, defineToastStack, defineWidgets, stackToast };
-export type { StackToastOptions, UsaCarouselElement, UsaDisclosureElement, UsaMenuElement, UsaModalElement, UsaSheetElement, UsaStoriesElement, UsaTabBarElement, UsaToastStackElement };
+export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, PROGRESS_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, TAB_INDICATORS, TOAST_POSITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineMasonryFlow, defineMenu, defineMilestones, defineModal, defineOdometer, defineProgressRing, defineSheet, defineSkeletonReveal, defineStarRating, defineStories, defineTabBar, defineToastStack, defineWidgets, stackToast };
+export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaMasonryFlowElement, UsaMenuElement, UsaMilestonesElement, UsaModalElement, UsaOdometerElement, UsaProgressRingElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStoriesElement, UsaTabBarElement, UsaToastStackElement };