@noxlovette/material 0.9.2 → 0.9.3

package/claude-skill/material-design/references/motion-guide.md

@@ -15,7 +15,7 @@ Source: [m3.material.io → Transitions → Applying transitions](https://m3.mat
 
 | Quality                            | M3 rule                                                                                                                                                                                                                                                                                  | What it means here                                                                                                                                                                                                                                                                                                   |
 | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Follows accessibility settings** | With reduced motion on, use subtle fades instead of intense slides or scales, and turn off decorative effects such as parallax and shape morphing.                                                                                                                                       | This is not implemented yet (see [Reduced motion](#reduced-motion)). Don't add new parallax or morph effects that you couldn't easily switch off.                                                                                                                                                                    |
+| **Follows accessibility settings** | With reduced motion on, use subtle fades instead of intense slides or scales, and turn off decorative effects such as parallax and shape morphing.                                                                                                                                       | The OS preference switches the transition primitives and CSS spatial tokens automatically (see [Reduced motion](#reduced-motion)).                                                                                                                                                                                   |
 | **Consistent**                     | Use the same transition type for the same kind of change everywhere, so the app feels like one cohesive family.                                                                                                                                                                          | Always use one primitive for one relationship. Every hierarchy step uses `sharedAxis` on the same axis, and every navbar/rail destination uses `fadeThrough`. Never mix patterns for the same kind of navigation.                                                                                                    |
 | **Stable layouts**                 | Use skeleton loaders so the layout holds still during a transition. Content shouldn't pop in or move around.                                                                                                                                                                             | Reserve the loaded content's footprint with `{@attach skeleton}` placeholders, then reveal the content with `presence(…, enterExit.fade)`. The content shouldn't be conditionally inserted in a way that shifts its siblings.                                                                                        |
 | **No jarring jump cuts**           | By default, avoid instant screen swaps because they disorient users. A jump cut is fine only when pure efficiency matters most, such as opening a menu in a productivity app.                                                                                                            | Surfaces and navigation always animate, which is why the ownership table below is mandatory. A jump cut has to be an explicit, documented choice, never the result of leaving the animation out.                                                                                                                     |
@@ -196,10 +196,10 @@ MDC's own durations/easings (`short1`…`extraLong4` × `emphasized`/`standard`)
 
 ## Reduced motion
 
-Not implemented yet — tracked in https://github.com/noxlovette/material/issues/24. `Layer.svelte`'s ripple is the only thing that currently checks `prefers-reduced-motion`.
+The OS `prefers-reduced-motion: reduce` setting governs both the Motion primitives and the CSS tokens. Call sites use the same API regardless of the setting. See [Applying transitions](https://m3.material.io/styles/motion/transitions/applying-transitions) for the M3 rationale.
 
-Target behavior, per [Applying transitions](https://m3.material.io/styles/motion/transitions/applying-transitions). When `prefers-reduced-motion: reduce` is set:
-
-- **Swap movement for subtle fades rather than removing the transition** (a jump cut would break the "no jarring jump cuts" rule). `enterExit.scale`/`dialog`/`slideUp`/`sideSheet`/`bottomSheet` fall back to `enterExit.fade`. `sharedAxis`, `lateral` and `fadeThrough` fall back to an opacity-only fade with no translate or scale, their region's box swapping instantly; `containerTransform` crossfades its two states in place without growing (`animation/reducedMotion.ts`).
-- **Disable decorative effects**: shape morphing (button `--btn-shape` morphs; `morphShape`/`shapeMorph` already swap instantly), parallax, the ripple (already done).
-- Keep effects-spring color/opacity feedback (state layers, hover/press color), since that motion carries meaning and isn't intense.
+- `presence` keeps a short opacity fade for every `enterExit` preset, including sheets. Scale and translation stay at their settled values. `sharedAxis`, `lateral` and `fadeThrough` use an opacity-only fade; the region's box swaps immediately. `containerTransform` fades its snapshots without growing the group.
+- `motion.css` makes the three spatial duration tokens `0ms` and maps their timing functions to non-overshooting effects curves. Color, opacity and state-layer transitions retain their effects springs.
+- The `skeleton` attachment shows a static placeholder. It stops or resumes the pulse if the OS preference changes while mounted.
+- Shape morphs in the shape library swap instantly, and ripples and decorative rotation stop. Button corner and button-group pressed feedback remain animated with a critically damped spring, so they do not overshoot.
+- Storybook's **Motion/Transition patterns** page uses these same primitives, so it shows the reduced variants when the OS preference is on.

package/dist/animation/TransitionPatterns.stories.svelte

@@ -183,7 +183,8 @@
     skeleton: {
       id: 'skeleton',
       title: 'Skeleton loaders',
-      summary: 'A placeholder pulses until real content fades in.',
+      summary:
+        'A placeholder pulses until real content fades in; it stays still with reduced motion.',
       anchor: 'skeleton-loaders',
       run: runSkeleton
     }

package/dist/animation/containerTransform.js

@@ -76,11 +76,12 @@ export const containerTransform = (update, { from, to, spring = springTokens.spa
         root.style.setProperty(SHADOW, shadowOf(target) ?? fromShadow ?? 'none');
     };
     // The class lets motion.css keep both snapshots at their width, clipped by the container.
-    const builder = animateView(updateAndFill, springTransition(spring))
+    const reduced = prefersReducedMotion();
+    const builder = animateView(updateAndFill, springTransition(reduced ? springTokens.effects : spring))
         .add(from, to)
         .class('md-container-transform');
     // Reduced motion: the container doesn't grow; its two states just crossfade in place.
-    if (prefersReducedMotion())
+    if (reduced)
         builder.layout({ duration: 0 });
     return builder
         .old({ opacity: [1, 0] }, springTransition(springTokens.effects))

package/dist/animation/presence.svelte.js

@@ -1,5 +1,7 @@
 import { animate } from 'motion';
 import { untrack } from 'svelte';
+import { enterExit } from './enterExit.js';
+import { prefersReducedMotion } from './reducedMotion.js';
 const fromTo = (from, to) => Object.fromEntries(Object.entries(to).map(([key, value]) => [key, [from[key], value]]));
 /**
  * Enter/exit attachment driven by Motion's `animate()`. Plays `transition.enter` from `hidden` to
@@ -33,7 +35,16 @@ export const presence = (isOpen, transition, onExitComplete) => (node) => {
     $effect(() => {
         const open = isOpen();
         untrack(() => {
-            const { hidden, shown, exited = hidden, enter, exit } = transition;
+            // Reduced motion keeps the mount/unmount cue, but never animates the preset's
+            // scale or translation (including the sheet presets that normally have no fade).
+            const active = prefersReducedMotion() ? enterExit.fade : transition;
+            const { hidden, shown, exited = hidden, enter, exit } = active;
+            if (active !== transition) {
+                const shownTransform = transition.shown.transform;
+                const settled = Array.isArray(shownTransform) ? shownTransform.at(-1) : shownTransform;
+                if (typeof settled === 'string')
+                    node.style.transform = settled;
+            }
             clearTimeout(settleTimer);
             if (open) {
                 controls = animate(node, started ? shown : fromTo(hidden, shown), enter);

package/dist/animation/sharedAxisTransition.js

@@ -61,13 +61,15 @@ const fadeInPlace = (update, target, spring, incoming) => {
             outgoing.transform = Array(2).fill(`translate(${dx}px, ${dy}px)`);
     };
     const builder = view(run, target, spring);
+    // The whole-page group also has a layout animation when no target was supplied.
+    builder.layout({ duration: 0 });
     if (target)
-        builder.layout({ duration: 0 }).crop(false);
+        builder.crop(false);
     return builder.old(outgoing, fadeOut).new(...incoming);
 };
 /* Reduced motion: every navigation pattern becomes this fade, with no movement or scale. M3
    swaps movement for a subtle fade rather than cutting. */
-const reducedFade = (update, target, spring) => fadeInPlace(update, target, spring, [{ opacity: [0, 1] }, fadeInAfterOut]);
+const reducedFade = (update, target) => fadeInPlace(update, target, springTokens.effects, [{ opacity: [0, 1] }, fadeInAfterOut]);
 /**
  * M3 forward and backward (shared axis): outgoing and incoming content travel together along one
  * axis while fading through each other.
@@ -85,7 +87,7 @@ const reducedFade = (update, target, spring) => fadeInPlace(update, target, spri
  */
 export const sharedAxis = (update, { target, axis = 'x', direction = 'forward', spring = springTokens.spatial } = {}) => {
     if (prefersReducedMotion())
-        return reducedFade(update, target, spring);
+        return reducedFade(update, target);
     const forward = direction === 'forward';
     const [outgoing, incoming] = axis === 'z'
         ? [`scale(${forward ? 1.1 : 0.8})`, `scale(${forward ? 0.8 : 1.1})`]
@@ -116,7 +118,7 @@ export const sharedAxis = (update, { target, axis = 'x', direction = 'forward',
  */
 export const lateral = (update, { target, axis = 'x', direction = 'forward', spring = springTokens.spatial } = {}) => {
     if (prefersReducedMotion())
-        return reducedFade(update, target, spring);
+        return reducedFade(update, target);
     const sign = direction === 'forward' ? 1 : -1;
     const move = axis === 'y' ? 'translateY' : 'translateX';
     const builder = view(update, target, spring)
@@ -144,7 +146,7 @@ export const lateral = (update, { target, axis = 'x', direction = 'forward', spr
  */
 export const fadeThrough = (update, { target, spring = springTokens.spatial } = {}) => {
     if (prefersReducedMotion())
-        return reducedFade(update, target, spring);
+        return reducedFade(update, target);
     return fadeInPlace(update, target, spring, [
         { opacity: [0, 1], transform: ['scale(0.92)', 'scale(1)'] },
         { opacity: fadeInAfterOut }

package/dist/animation/skeleton.d.ts

@@ -1,7 +1,8 @@
 import type { Attachment } from 'svelte/attachments';
 /**
- * M3 skeleton loader: a placeholder pulses until real content replaces it. Swap the placeholder
- * for the content with `presence(…, enterExit.fade)` so the reveal is a fade, not a cut.
+ * M3 skeleton loader: a placeholder pulses until real content replaces it, and stays static under
+ * reduced motion. Swap the placeholder for the content with `presence(…, enterExit.fade)` so the
+ * reveal is a fade, not a cut.
  * https://m3.material.io/styles/motion/transitions/transition-patterns#skeleton-loaders
  *
  * M3 "stable layouts" (https://m3.material.io/styles/motion/transitions/applying-transitions): the placeholder takes the loaded

package/dist/animation/skeleton.js

@@ -1,11 +1,13 @@
 import { animate } from 'motion';
+import { prefersReducedMotion } from './reducedMotion.js';
 import { springTokens, springTransition } from './spring.js';
 /* Hold at each end of the pulse — a critically damped spring alone settles in ~370ms, which reads
    as flicker. Not an M3 value: tune by eye. */
 const PULSE_HOLD_S = 0.5;
 /**
- * M3 skeleton loader: a placeholder pulses until real content replaces it. Swap the placeholder
- * for the content with `presence(…, enterExit.fade)` so the reveal is a fade, not a cut.
+ * M3 skeleton loader: a placeholder pulses until real content replaces it, and stays static under
+ * reduced motion. Swap the placeholder for the content with `presence(…, enterExit.fade)` so the
+ * reveal is a fade, not a cut.
  * https://m3.material.io/styles/motion/transitions/transition-patterns#skeleton-loaders
  *
  * M3 "stable layouts" (https://m3.material.io/styles/motion/transitions/applying-transitions): the placeholder takes the loaded
@@ -18,11 +20,27 @@ const PULSE_HOLD_S = 0.5;
  * ```
  */
 export const skeleton = (node) => {
-    const controls = animate(node, { opacity: [1, 0.4] }, {
-        ...springTransition(springTokens.slowEffects),
-        repeat: Infinity,
-        repeatType: 'reverse',
-        repeatDelay: PULSE_HOLD_S
-    });
-    return () => controls.stop();
+    const media = typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion: reduce)') : null;
+    const initialOpacity = node.style.opacity;
+    let controls;
+    const sync = () => {
+        controls?.stop();
+        controls = undefined;
+        node.style.opacity = initialOpacity;
+        if (prefersReducedMotion())
+            return;
+        controls = animate(node, { opacity: [1, 0.4] }, {
+            ...springTransition(springTokens.slowEffects),
+            repeat: Infinity,
+            repeatType: 'reverse',
+            repeatDelay: PULSE_HOLD_S
+        });
+    };
+    sync();
+    media?.addEventListener('change', sync);
+    return () => {
+        media?.removeEventListener('change', sync);
+        controls?.stop();
+        node.style.opacity = initialOpacity;
+    };
 };

package/dist/components/buttons/button-group/ButtonGroup.svelte

@@ -29,6 +29,7 @@ For a set of related options where one or more is selected, use `ConnectedButton
 
   const GROW = 0.15;
   const spring = springTransition(springTokens.fastSpatial);
+  const reducedSpring = springTransition(springTokens.fastEffects);
   const reducedMotion = () =>
     typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 
@@ -57,7 +58,7 @@ For a set of related options where one or more is selected, use `ConnectedButton
     };
 
     const start = (el: HTMLElement) => {
-      if (orientation !== 'horizontal' || press || reducedMotion()) return;
+      if (orientation !== 'horizontal' || press) return;
       const width = widthOf(el);
       const neighbours = [el.previousElementSibling, el.nextElementSibling].filter(isEnabled);
       const share = (width * GROW) / Math.max(neighbours.length, 1);
@@ -70,7 +71,8 @@ For a set of related options where one or more is selected, use `ConnectedButton
           })
         ]
       };
-      for (const { el: item, to } of press.items) animate(item, { width: `${to}px` }, spring);
+      for (const { el: item, to } of press.items)
+        animate(item, { width: `${to}px` }, reducedMotion() ? reducedSpring : spring);
     };
 
     const end = () => {
@@ -78,7 +80,7 @@ For a set of related options where one or more is selected, use `ConnectedButton
       const { items } = press;
       press = null;
       for (const { el, width } of items) {
-        animate(el, { width: `${width}px` }, spring).then(() => {
+        animate(el, { width: `${width}px` }, reducedMotion() ? reducedSpring : spring).then(() => {
           // Hand the width back to the layout, unless a new press picked this button up.
           if (press?.items.some((i) => i.el === el)) return;
           el.style.width = '';

package/dist/components/buttons/shapeMorph.js

@@ -25,6 +25,7 @@ const isDisabled = (el) => el.matches(':disabled, [aria-disabled="true"], [data-
 export function shapeMorph(el, corners) {
     const reduced = matchMedia('(prefers-reduced-motion: reduce)');
     const spring = springTransition(springTokens.fastSpatial);
+    const reducedSpring = springTransition(springTokens.fastEffects);
     const state = { pressed: false, hovered: false, focusVisible: false };
     const resolve = () => {
         const style = getComputedStyle(el);
@@ -43,10 +44,7 @@ export function shapeMorph(el, corners) {
                 return;
             targets[i] = to;
             controls[i]?.stop();
-            if (reduced.matches)
-                values[i].jump(to);
-            else
-                controls[i] = animate(values[i], to, spring);
+            controls[i] = animate(values[i], to, reduced.matches ? reducedSpring : spring);
         });
     };
     const set = (key, on) => {
@@ -81,6 +79,15 @@ export function shapeMorph(el, corners) {
         attributes: true,
         attributeFilter: ['class', 'data-state', 'aria-pressed', 'aria-expanded']
     });
+    const onReducedChange = () => {
+        if (!reduced.matches)
+            return;
+        controls.forEach((control, i) => {
+            control?.stop();
+            values[i].jump(targets[i]);
+        });
+    };
+    reduced.addEventListener?.('change', onReducedChange);
     el.addEventListener('pointerdown', onPointerDown);
     el.addEventListener('pointerenter', onEnter);
     el.addEventListener('pointerleave', onLeave);
@@ -92,6 +99,7 @@ export function shapeMorph(el, corners) {
     window.addEventListener('pointercancel', release);
     return () => {
         observer.disconnect();
+        reduced.removeEventListener?.('change', onReducedChange);
         controls.forEach((c) => c?.stop());
         unsubscribe.forEach((u) => u());
         el.removeEventListener('pointerdown', onPointerDown);

package/dist/styles/motion.css

@@ -284,6 +284,23 @@
   /* @generated:springs:end */
 }
 
+/* Spatial CSS transitions settle immediately under the OS motion preference. Effects tokens
+   remain available for short opacity and color fades. Keep this outside the generated block. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --md-sys-motion-duration-fast-spatial: 0ms;
+    --md-sys-motion-duration-spatial: 0ms;
+    --md-sys-motion-duration-slow-spatial: 0ms;
+    --md-sys-motion-timing-function-fast-spatial: var(
+      --md-sys-motion-timing-function-fast-effects-spring
+    );
+    --md-sys-motion-timing-function-spatial: var(--md-sys-motion-timing-function-effects-spring);
+    --md-sys-motion-timing-function-slow-spatial: var(
+      --md-sys-motion-timing-function-slow-effects-spring
+    );
+  }
+}
+
 /*
   One utility per Expressive spring, setting duration + timing function together. Pair with a
   Tailwind transition-property utility: `transition-colors md-sys-motion-fast-effects`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [