Skip to content

Commit 8433a71

Browse files
authored
fix: reinstate prefersReducedMotion (#14586)
* reinstate prefersReducedMotion * changeset
1 parent 7086709 commit 8433a71

File tree

3 files changed

+31
-1
lines changed

3 files changed

+31
-1
lines changed

.changeset/large-humans-report.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: reinstate missing prefersReducedMotion export

packages/svelte/src/motion/public.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,4 @@ export interface Tweened<T> extends Readable<T> {
8585
update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;
8686
}
8787

88-
export { spring, tweened, Tween } from './index.js';
88+
export { prefersReducedMotion, spring, tweened, Tween } from './index.js';

packages/svelte/types/index.d.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1637,6 +1637,7 @@ declare module 'svelte/legacy' {
16371637
}
16381638

16391639
declare module 'svelte/motion' {
1640+
import type { MediaQuery } from 'svelte/reactivity';
16401641
// TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface)
16411642
// this means both the Spring class and the Spring interface are merged into one with some things only
16421643
// existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js
@@ -1767,6 +1768,30 @@ declare module 'svelte/motion' {
17671768
easing?: (t: number) => number;
17681769
interpolate?: (a: T, b: T) => (t: number) => T;
17691770
}
1771+
/**
1772+
* A [media query](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
1773+
*
1774+
* ```svelte
1775+
* <script>
1776+
* import { prefersReducedMotion } from 'svelte/motion';
1777+
* import { fly } from 'svelte/transition';
1778+
*
1779+
* let visible = $state(false);
1780+
* </script>
1781+
*
1782+
* <button onclick={() => visible = !visible}>
1783+
* toggle
1784+
* </button>
1785+
*
1786+
* {#if visible}
1787+
* <p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
1788+
* flies in, unless the user prefers reduced motion
1789+
* </p>
1790+
* {/if}
1791+
* ```
1792+
* @since 5.7.0
1793+
*/
1794+
export const prefersReducedMotion: MediaQuery;
17701795
/**
17711796
* The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it "bounces" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.
17721797
*

0 commit comments

Comments
 (0)