@noxlovette/material 0.8.2 → 0.8.3

package/dist/animation/containerTransform.js

@@ -30,6 +30,7 @@ import { springTokens, springTransition } from './spring.js';
  * ```
  */
 const FILL = '--md-container-transform-color';
+const SHADOW = '--md-container-transform-shadow';
 const resolve = (target) => typeof target === 'string'
     ? document.querySelector(target)
     : target instanceof Element
@@ -46,16 +47,33 @@ const fillOf = (target) => {
     const colour = target ? getComputedStyle(target).backgroundColor : '';
     return colour && !TRANSPARENT.has(colour) ? colour : 'transparent';
 };
+/*
+  The container's elevation while it morphs. Motion clips the group (`overflow: clip`) whenever
+  the aspect ratio changes, which cuts the shadow out of both snapshots, so an elevated
+  destination (a floating pane) would only get its shadow when the live DOM takes over at the
+  end. The group's own `box-shadow` isn't clipped by its overflow, so it carries the shadow
+  instead: the destination's when it has one (opening into an elevated pane), otherwise the
+  source's (closing it back into a flat card), so the container stays elevated the whole way.
+*/
+const shadowOf = (target) => {
+    const shadow = target ? getComputedStyle(target).boxShadow : '';
+    return shadow && shadow !== 'none' ? shadow : undefined;
+};
 export const containerTransform = (update, { from, to, spring = springTokens.spatial }) => {
     // The incoming snapshot is opaque wherever the destination is, and the outgoing one fades off
     // it (motion.css layers them), so nothing behind shows through. The fill (motion.css) covers
     // the rest of a destination with its own background, e.g. a full-screen view's area below the
-    // incoming snapshot's top as the bar grows. Only the transition's group reads the property,
-    // and it's rewritten before each new snapshot, so it's left in place afterwards.
+    // incoming snapshot's top as the bar grows, and the shadow keeps its elevation (`shadowOf`).
+    // Only the transition's group reads the properties, and they're rewritten before each new
+    // snapshot, so they're left in place afterwards.
     const root = document.documentElement;
     const updateAndFill = async () => {
+        // Read before `update`, which may unmount it.
+        const fromShadow = shadowOf(resolve(from));
         await update();
-        root.style.setProperty(FILL, fillOf(resolve(to)));
+        const target = resolve(to);
+        root.style.setProperty(FILL, fillOf(target));
+        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))

package/dist/styles/motion.css

@@ -362,7 +362,12 @@
   animation-name: none !important;
 }
 
-/* Filled with the destination's own background while it morphs (set by containerTransform). */
+/*
+  Filled with the destination's own background while it morphs, and elevated with its shadow
+  (or the source's), which Motion's crop clip would otherwise cut out of the snapshots. Both set
+  by containerTransform.
+*/
 ::view-transition-group(.md-container-transform) {
   background-color: var(--md-container-transform-color, transparent);
+  box-shadow: var(--md-container-transform-shadow, none);
 }

package/package.json

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