use-scroll-animate 9.3.0 → 9.5.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 +28 -0
- package/dist/components/fx-safe.cjs +155 -0
- package/dist/components/fx-safe.cjs.map +1 -0
- package/dist/components/fx-safe.d.cts +85 -0
- package/dist/components/fx-safe.d.ts +85 -0
- package/dist/components/fx-safe.js +145 -0
- package/dist/components/fx-safe.js.map +1 -0
- package/dist/components/fx-video.cjs +111 -0
- package/dist/components/fx-video.cjs.map +1 -0
- package/dist/components/fx-video.d.cts +80 -0
- package/dist/components/fx-video.d.ts +80 -0
- package/dist/components/fx-video.js +105 -0
- package/dist/components/fx-video.js.map +1 -0
- package/dist/components/fx2.cjs +20 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +76 -1
- package/dist/components/fx2.d.ts +76 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/marketplace.cjs +2 -0
- package/dist/components/marketplace.cjs.map +1 -1
- package/dist/components/marketplace.js +2 -0
- package/dist/components/marketplace.js.map +1 -1
- package/dist/components/widgets.cjs +483 -181
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +94 -2
- package/dist/components/widgets.d.ts +94 -2
- package/dist/components/widgets.js +480 -182
- package/dist/components/widgets.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +35 -0
- package/package.json +42 -2
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
1
2
|
/**
|
|
2
3
|
* Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
|
|
3
4
|
* bag that is emptied on disconnect, and motion helpers that degrade to the
|
|
@@ -1801,6 +1802,93 @@ interface UsaBgGeneratorElement extends UsaElement {
|
|
|
1801
1802
|
declare function backgroundCss(style: string, seed: number, palette: string): string;
|
|
1802
1803
|
declare function defineBgGenerator(tag?: string): CustomElementConstructor | undefined;
|
|
1803
1804
|
|
|
1805
|
+
/**
|
|
1806
|
+
* `<usa-video-card>` (9.4) — a video thumbnail card: hover / focus plays a
|
|
1807
|
+
* muted preview of its `<video>` (paused and rewound on leave) with a
|
|
1808
|
+
* progress line, a play badge and a duration chip (`duration` attribute or
|
|
1809
|
+
* read from the video). Without a playable video the poster (`<img>` child
|
|
1810
|
+
* or `poster` gradient) gets a slow Ken Burns drift instead. Click / Enter →
|
|
1811
|
+
* `usa:open`. `previewing`; a focusable `link`-like button with your
|
|
1812
|
+
* `label`; reduced motion: no preview, no drift.
|
|
1813
|
+
*/
|
|
1814
|
+
interface UsaVideoCardElement extends UsaElement {
|
|
1815
|
+
readonly previewing: boolean;
|
|
1816
|
+
}
|
|
1817
|
+
declare function defineVideoCard(tag?: string): CustomElementConstructor | undefined;
|
|
1818
|
+
|
|
1819
|
+
/**
|
|
1820
|
+
* `<usa-hero-video>` (9.4) — a full-bleed hero with a background video:
|
|
1821
|
+
* the poster (`poster` image URL, an `<img>` child, or a gradient) shows
|
|
1822
|
+
* first and cross-fades to the video once it can play; a scrim keeps your
|
|
1823
|
+
* content readable and a pause / play button is always there (WCAG 2.2.2).
|
|
1824
|
+
* `scrub` makes it scroll-driven (the video follows the scroll instead of
|
|
1825
|
+
* playing). Without a playable video the poster drifts slowly (Ken Burns).
|
|
1826
|
+
* `paused`, `toggle()`; `usa:play` / `usa:pause`. A `region` with `label`;
|
|
1827
|
+
* reduced motion: poster only, no autoplay.
|
|
1828
|
+
*/
|
|
1829
|
+
interface UsaHeroVideoElement extends UsaElement {
|
|
1830
|
+
readonly paused: boolean;
|
|
1831
|
+
toggle(): void;
|
|
1832
|
+
}
|
|
1833
|
+
declare function defineHeroVideo(tag?: string): CustomElementConstructor | undefined;
|
|
1834
|
+
|
|
1835
|
+
/**
|
|
1836
|
+
* 9.5 — Accessible motion 2.0 (`motionary/fx/safe`, also `motionary/components/fx-safe`):
|
|
1837
|
+
*
|
|
1838
|
+
* - `vestibularSafe(keyframes)` — strips movement (translate / scale /
|
|
1839
|
+
* rotate / skew / perspective, clip and blur) from keyframes, keeping
|
|
1840
|
+
* opacity and colour, so any animation can get a vestibular-safe twin.
|
|
1841
|
+
* - `flashCount(keyframes, duration)` / `isFlashSafe(...)` — counts large
|
|
1842
|
+
* opacity / brightness swings and checks WCAG 2.3.1's three-flashes-per-
|
|
1843
|
+
* second limit.
|
|
1844
|
+
* - `applyMotionPreferences(prefs)` / `loadMotionPreferences()` — the
|
|
1845
|
+
* settings behind `<usa-motion-prefs>`: sensitivity level, speed (shared
|
|
1846
|
+
* clock rate), pause autoplay, no parallax; persisted in localStorage and
|
|
1847
|
+
* exposed as `data-usa-*` attributes on `<html>` for your CSS.
|
|
1848
|
+
*
|
|
1849
|
+
* Effects that never move anything: `safe-fade` (enter), `focus-glow`
|
|
1850
|
+
* (attention), `color-pulse` (attention), `underline-sweep` (hover).
|
|
1851
|
+
*/
|
|
1852
|
+
|
|
1853
|
+
interface MotionPreferences {
|
|
1854
|
+
sensitivity: MotionSensitivity;
|
|
1855
|
+
speed: number;
|
|
1856
|
+
pauseAutoplay: boolean;
|
|
1857
|
+
noParallax: boolean;
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
/**
|
|
1861
|
+
* `<usa-motion-prefs>` (9.5) — a motion preference panel for your users:
|
|
1862
|
+
* motion level (Full · Gentle · Minimal · None — Motionary's sensitivity
|
|
1863
|
+
* levels), animation speed (the shared clock rate, 0.25–2×), "pause
|
|
1864
|
+
* autoplaying video" and "no parallax". Changes apply instantly to every
|
|
1865
|
+
* Motionary component on the page, persist in localStorage and are shown
|
|
1866
|
+
* as `data-usa-*` attributes on `<html>`; a live sample shows the result.
|
|
1867
|
+
* `prefs`, `reset()`; `usa:change` { prefs }. A labelled `form` of real
|
|
1868
|
+
* radio buttons, slider and checkboxes.
|
|
1869
|
+
*/
|
|
1870
|
+
interface UsaMotionPrefsElement extends UsaElement {
|
|
1871
|
+
readonly prefs: MotionPreferences;
|
|
1872
|
+
reset(): void;
|
|
1873
|
+
}
|
|
1874
|
+
declare function defineMotionPrefs(tag?: string): CustomElementConstructor | undefined;
|
|
1875
|
+
|
|
1876
|
+
/**
|
|
1877
|
+
* `<usa-pause-all>` (9.5) — one button that pauses all motion on the page
|
|
1878
|
+
* (WCAG 2.2.2 "Pause, Stop, Hide"): it pauses Motionary's shared clock
|
|
1879
|
+
* (every component, effect and frame loop), every other CSS / WAAPI
|
|
1880
|
+
* animation in the document and autoplaying media; pressing again resumes
|
|
1881
|
+
* them. Stays in sync with `motionClock`. `scope` (a selector) limits it to
|
|
1882
|
+
* one subtree's animations and media and leaves the shared clock alone.
|
|
1883
|
+
* `paused`, `toggle()`;
|
|
1884
|
+
* `usa:pause-all` { paused }. A real `button` with `aria-pressed`.
|
|
1885
|
+
*/
|
|
1886
|
+
interface UsaPauseAllElement extends UsaElement {
|
|
1887
|
+
readonly paused: boolean;
|
|
1888
|
+
toggle(): void;
|
|
1889
|
+
}
|
|
1890
|
+
declare function definePauseAll(tag?: string): CustomElementConstructor | undefined;
|
|
1891
|
+
|
|
1804
1892
|
/**
|
|
1805
1893
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1806
1894
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1912,8 +2000,12 @@ declare global {
|
|
|
1912
2000
|
'usa-lottie-icon': UsaLottieIconElement;
|
|
1913
2001
|
'usa-gen-art': UsaGenArtElement;
|
|
1914
2002
|
'usa-bg-generator': UsaBgGeneratorElement;
|
|
2003
|
+
'usa-video-card': UsaVideoCardElement;
|
|
2004
|
+
'usa-hero-video': UsaHeroVideoElement;
|
|
2005
|
+
'usa-motion-prefs': UsaMotionPrefsElement;
|
|
2006
|
+
'usa-pause-all': UsaPauseAllElement;
|
|
1915
2007
|
}
|
|
1916
2008
|
}
|
|
1917
2009
|
|
|
1918
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, LOTTIE_ICONS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, backgroundCss, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineBgGenerator, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGenArt, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLottie, defineLottieIcon, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineScene, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1919
|
-
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaBgGeneratorElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGenArtElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLottieElement, UsaLottieIconElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSceneElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
2010
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, LOTTIE_ICONS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, backgroundCss, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineBgGenerator, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGenArt, defineGestureSticker, defineGlobe, defineGyroCard, defineHeroVideo, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLottie, defineLottieIcon, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMotionPrefs, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePauseAll, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineScene, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVideoCard, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
2011
|
+
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaBgGeneratorElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGenArtElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHeroVideoElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLottieElement, UsaLottieIconElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMotionPrefsElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPauseAllElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSceneElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVideoCardElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
1
2
|
/**
|
|
2
3
|
* Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
|
|
3
4
|
* bag that is emptied on disconnect, and motion helpers that degrade to the
|
|
@@ -1801,6 +1802,93 @@ interface UsaBgGeneratorElement extends UsaElement {
|
|
|
1801
1802
|
declare function backgroundCss(style: string, seed: number, palette: string): string;
|
|
1802
1803
|
declare function defineBgGenerator(tag?: string): CustomElementConstructor | undefined;
|
|
1803
1804
|
|
|
1805
|
+
/**
|
|
1806
|
+
* `<usa-video-card>` (9.4) — a video thumbnail card: hover / focus plays a
|
|
1807
|
+
* muted preview of its `<video>` (paused and rewound on leave) with a
|
|
1808
|
+
* progress line, a play badge and a duration chip (`duration` attribute or
|
|
1809
|
+
* read from the video). Without a playable video the poster (`<img>` child
|
|
1810
|
+
* or `poster` gradient) gets a slow Ken Burns drift instead. Click / Enter →
|
|
1811
|
+
* `usa:open`. `previewing`; a focusable `link`-like button with your
|
|
1812
|
+
* `label`; reduced motion: no preview, no drift.
|
|
1813
|
+
*/
|
|
1814
|
+
interface UsaVideoCardElement extends UsaElement {
|
|
1815
|
+
readonly previewing: boolean;
|
|
1816
|
+
}
|
|
1817
|
+
declare function defineVideoCard(tag?: string): CustomElementConstructor | undefined;
|
|
1818
|
+
|
|
1819
|
+
/**
|
|
1820
|
+
* `<usa-hero-video>` (9.4) — a full-bleed hero with a background video:
|
|
1821
|
+
* the poster (`poster` image URL, an `<img>` child, or a gradient) shows
|
|
1822
|
+
* first and cross-fades to the video once it can play; a scrim keeps your
|
|
1823
|
+
* content readable and a pause / play button is always there (WCAG 2.2.2).
|
|
1824
|
+
* `scrub` makes it scroll-driven (the video follows the scroll instead of
|
|
1825
|
+
* playing). Without a playable video the poster drifts slowly (Ken Burns).
|
|
1826
|
+
* `paused`, `toggle()`; `usa:play` / `usa:pause`. A `region` with `label`;
|
|
1827
|
+
* reduced motion: poster only, no autoplay.
|
|
1828
|
+
*/
|
|
1829
|
+
interface UsaHeroVideoElement extends UsaElement {
|
|
1830
|
+
readonly paused: boolean;
|
|
1831
|
+
toggle(): void;
|
|
1832
|
+
}
|
|
1833
|
+
declare function defineHeroVideo(tag?: string): CustomElementConstructor | undefined;
|
|
1834
|
+
|
|
1835
|
+
/**
|
|
1836
|
+
* 9.5 — Accessible motion 2.0 (`motionary/fx/safe`, also `motionary/components/fx-safe`):
|
|
1837
|
+
*
|
|
1838
|
+
* - `vestibularSafe(keyframes)` — strips movement (translate / scale /
|
|
1839
|
+
* rotate / skew / perspective, clip and blur) from keyframes, keeping
|
|
1840
|
+
* opacity and colour, so any animation can get a vestibular-safe twin.
|
|
1841
|
+
* - `flashCount(keyframes, duration)` / `isFlashSafe(...)` — counts large
|
|
1842
|
+
* opacity / brightness swings and checks WCAG 2.3.1's three-flashes-per-
|
|
1843
|
+
* second limit.
|
|
1844
|
+
* - `applyMotionPreferences(prefs)` / `loadMotionPreferences()` — the
|
|
1845
|
+
* settings behind `<usa-motion-prefs>`: sensitivity level, speed (shared
|
|
1846
|
+
* clock rate), pause autoplay, no parallax; persisted in localStorage and
|
|
1847
|
+
* exposed as `data-usa-*` attributes on `<html>` for your CSS.
|
|
1848
|
+
*
|
|
1849
|
+
* Effects that never move anything: `safe-fade` (enter), `focus-glow`
|
|
1850
|
+
* (attention), `color-pulse` (attention), `underline-sweep` (hover).
|
|
1851
|
+
*/
|
|
1852
|
+
|
|
1853
|
+
interface MotionPreferences {
|
|
1854
|
+
sensitivity: MotionSensitivity;
|
|
1855
|
+
speed: number;
|
|
1856
|
+
pauseAutoplay: boolean;
|
|
1857
|
+
noParallax: boolean;
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
/**
|
|
1861
|
+
* `<usa-motion-prefs>` (9.5) — a motion preference panel for your users:
|
|
1862
|
+
* motion level (Full · Gentle · Minimal · None — Motionary's sensitivity
|
|
1863
|
+
* levels), animation speed (the shared clock rate, 0.25–2×), "pause
|
|
1864
|
+
* autoplaying video" and "no parallax". Changes apply instantly to every
|
|
1865
|
+
* Motionary component on the page, persist in localStorage and are shown
|
|
1866
|
+
* as `data-usa-*` attributes on `<html>`; a live sample shows the result.
|
|
1867
|
+
* `prefs`, `reset()`; `usa:change` { prefs }. A labelled `form` of real
|
|
1868
|
+
* radio buttons, slider and checkboxes.
|
|
1869
|
+
*/
|
|
1870
|
+
interface UsaMotionPrefsElement extends UsaElement {
|
|
1871
|
+
readonly prefs: MotionPreferences;
|
|
1872
|
+
reset(): void;
|
|
1873
|
+
}
|
|
1874
|
+
declare function defineMotionPrefs(tag?: string): CustomElementConstructor | undefined;
|
|
1875
|
+
|
|
1876
|
+
/**
|
|
1877
|
+
* `<usa-pause-all>` (9.5) — one button that pauses all motion on the page
|
|
1878
|
+
* (WCAG 2.2.2 "Pause, Stop, Hide"): it pauses Motionary's shared clock
|
|
1879
|
+
* (every component, effect and frame loop), every other CSS / WAAPI
|
|
1880
|
+
* animation in the document and autoplaying media; pressing again resumes
|
|
1881
|
+
* them. Stays in sync with `motionClock`. `scope` (a selector) limits it to
|
|
1882
|
+
* one subtree's animations and media and leaves the shared clock alone.
|
|
1883
|
+
* `paused`, `toggle()`;
|
|
1884
|
+
* `usa:pause-all` { paused }. A real `button` with `aria-pressed`.
|
|
1885
|
+
*/
|
|
1886
|
+
interface UsaPauseAllElement extends UsaElement {
|
|
1887
|
+
readonly paused: boolean;
|
|
1888
|
+
toggle(): void;
|
|
1889
|
+
}
|
|
1890
|
+
declare function definePauseAll(tag?: string): CustomElementConstructor | undefined;
|
|
1891
|
+
|
|
1804
1892
|
/**
|
|
1805
1893
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1806
1894
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1912,8 +2000,12 @@ declare global {
|
|
|
1912
2000
|
'usa-lottie-icon': UsaLottieIconElement;
|
|
1913
2001
|
'usa-gen-art': UsaGenArtElement;
|
|
1914
2002
|
'usa-bg-generator': UsaBgGeneratorElement;
|
|
2003
|
+
'usa-video-card': UsaVideoCardElement;
|
|
2004
|
+
'usa-hero-video': UsaHeroVideoElement;
|
|
2005
|
+
'usa-motion-prefs': UsaMotionPrefsElement;
|
|
2006
|
+
'usa-pause-all': UsaPauseAllElement;
|
|
1915
2007
|
}
|
|
1916
2008
|
}
|
|
1917
2009
|
|
|
1918
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, LOTTIE_ICONS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, backgroundCss, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineBgGenerator, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGenArt, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLottie, defineLottieIcon, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineScene, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1919
|
-
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaBgGeneratorElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGenArtElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLottieElement, UsaLottieIconElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSceneElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
2010
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, LOTTIE_ICONS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, backgroundCss, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineBgGenerator, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGenArt, defineGestureSticker, defineGlobe, defineGyroCard, defineHeroVideo, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLottie, defineLottieIcon, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMotionPrefs, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePauseAll, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineScene, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVideoCard, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
2011
|
+
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaBgGeneratorElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGenArtElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHeroVideoElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLottieElement, UsaLottieIconElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMotionPrefsElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPauseAllElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSceneElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVideoCardElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|