@noxlovette/material 0.8.1 → 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/components/misc/materialAvatarPalette.js

@@ -15,8 +15,24 @@ const CONTAINER_TOKENS = [
 ];
 /** Used server-side, or if a token hasn't been painted yet (styles not loaded). */
 const FALLBACK_PALETTE = ['e9ddff', 'e8def8', 'ffd9e3', 'ffdad6', 'e6e0e9'];
-/** Converts the `rgb(r g b)` (or `rgb(r, g, b)`) format these tokens are always defined in to hex. */
-function rgbStringToHex(value) {
+/**
+ * Converts a token's resolved value to a 6-digit hex. Dev serves the tokens as written in the
+ * theme CSS, `rgb(r g b)` (or `rgb(r, g, b)`), but a production build's CSS minifier rewrites
+ * them to hex (`#d1e5f3`, or the short `#fff`): pulling the numbers out of a hex string reads
+ * its digit runs as channels and yields a near-black colour, so hex is handled on its own.
+ */
+function colorToHex(value) {
+    const hex = value.match(/^#([0-9a-f]{3,8})$/i)?.[1];
+    if (hex) {
+        if (hex.length === 3 || hex.length === 4) {
+            return [...hex.slice(0, 3)]
+                .map((c) => c + c)
+                .join('')
+                .toLowerCase();
+        }
+        // 6 digits, or 8 with alpha (dropped: DiceBear takes opaque backgrounds).
+        return hex.length === 6 || hex.length === 8 ? hex.slice(0, 6).toLowerCase() : undefined;
+    }
     const channels = value.match(/\d+(?:\.\d+)?/g);
     if (!channels || channels.length < 3)
         return undefined;
@@ -38,7 +54,7 @@ export function getMaterialAvatarPalette() {
     const styles = getComputedStyle(document.documentElement);
     const palette = CONTAINER_TOKENS.map((token) => {
         const raw = styles.getPropertyValue(token).trim();
-        return raw ? rgbStringToHex(raw) : undefined;
+        return raw ? colorToHex(raw) : undefined;
     }).filter((hex) => Boolean(hex));
     return palette.length > 0 ? palette : FALLBACK_PALETTE;
 }

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.1",
+  "version": "0.8.3",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [