mtrl 0.9.5 → 0.9.8

package/src/styles/components/_dialog.scss

@@ -15,8 +15,7 @@ $component: "#{base.$prefix}-dialog";
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: t.alpha("scrim", 0.32);
-    opacity: 0;
+    background-color: transparent;
     visibility: hidden;
     z-index: v.z-index("modal");
     display: flex;
@@ -26,19 +25,32 @@ $component: "#{base.$prefix}-dialog";
     padding: 24px;
     box-sizing: border-box;
 
-    // MD3 standard animation for overlay
+    // The scrim fades on its own colour rather than on opacity: the dialog is
+    // its child, so fading the layer faded the dialog with it, and the two
+    // opacities multiplied into what read as a cut.
+    // material-web animates the scrim linearly, 500ms in and 150ms out
+    // (dialog/internal/animations.ts).
     transition:
-        opacity v.motion("duration-medium1") v.motion("easing-emphasized"),
-        visibility v.motion("duration-medium1") v.motion("easing-emphasized");
+        background-color v.motion("duration-short3") linear,
+        visibility 0s linear v.motion("duration-short3");
 
     &--visible {
-        opacity: 1;
+        background-color: t.alpha("scrim", 0.32);
         visibility: visible;
+        transition: background-color v.motion("duration-long2") linear, visibility 0s;
     }
 }
 
 // Dialog container
 // MD3: surface-container-high, 28dp corners, elevation 3
+//
+// Motion follows material-web, the Material web implementation
+// (dialog/internal/animations.ts): the surface grows in height, 35% to 100%
+// over 500ms emphasized, while the dialog slides down into place and the
+// headline, content and actions fade in one after another. Closing takes
+// 150ms on emphasized accelerate. The growth is a scale of the dialog's
+// height from its top, the motion the menu opens with.
+
 .#{$component} {
     position: relative;
     background-color: t.color("surface-container-high");
@@ -50,24 +62,43 @@ $component: "#{base.$prefix}-dialog";
     margin: auto;
     @include m.elevation(3);
 
-    // Hidden as a scaled-down, transparent container; it fades in to full size
+    // Hidden: 35% of its height, lifted slightly, not yet painted
+    transform-origin: top center;
+    transform: translateY(-50px) scaleY(0.35);
     opacity: 0;
-    transform-origin: center center;
-    // Dialogs fade in with a slight scale; the vertical squash this replaced
-    // is not an M3 pattern
-    transform: scale(0.8);
     pointer-events: none;
-
-    // MD3 emphasized easing for dialogs
     transition:
-        transform v.motion("duration-medium1") v.motion("easing-emphasized"),
-        opacity v.motion("duration-medium1") v.motion("easing-emphasized");
+        transform v.motion("duration-short3") v.motion("easing-emphasized-accelerate"),
+        opacity v.motion("duration-short1") linear v.motion("duration-short2");
+
+    // Its contents fade with the surface, and lead it on the way out
+    .#{$component}-header,
+    .#{$component}-content,
+    .#{$component}-footer {
+        opacity: 0;
+        transition: opacity v.motion("duration-short2") linear;
+    }
 
     // Visible state
     &--visible {
+        transform: translateY(0) scaleY(1);
         opacity: 1;
-        transform: scale(1);
         pointer-events: auto;
+        transition:
+            transform v.motion("duration-long2") v.motion("easing-emphasized"),
+            opacity v.motion("duration-short1") linear;
+
+        // The headline and content follow the surface, the actions last
+        .#{$component}-header,
+        .#{$component}-content {
+            opacity: 1;
+            transition: opacity v.motion("duration-medium1") linear v.motion("duration-short1");
+        }
+
+        .#{$component}-footer {
+            opacity: 1;
+            transition: opacity v.motion("duration-medium2") linear v.motion("duration-short3");
+        }
     }
 
     // Size variants
@@ -102,28 +133,28 @@ $component: "#{base.$prefix}-dialog";
         margin: 0;
         border-radius: 0;
         transform-origin: center center;
-
-        transform: scale(0.9);
+        transform: translateY(24px);
 
         &.#{$component}--visible {
-            transform: scale(1);
+            transform: translateY(0);
         }
     }
 
-    // Animation variants with appropriate transform origins
+    // The variants change where the dialog comes from; it grows in height
+    // either way, which is the M3 motion
     &--slide-up {
-        transform: translateY(24px);
+        transform: translateY(24px) scaleY(0.35);
 
         &.#{$component}--visible {
-            transform: translateY(0);
+            transform: translateY(0) scaleY(1);
         }
     }
 
     &--slide-down {
-        transform: translateY(-24px);
+        transform: translateY(-24px) scaleY(0.35);
 
         &.#{$component}--visible {
-            transform: translateY(0);
+            transform: translateY(0) scaleY(1);
         }
     }
 
@@ -135,7 +166,7 @@ $component: "#{base.$prefix}-dialog";
         }
     }
 
-    // Scale animation variant (original behavior)
+    // The basic dialog of the previous spec: a scale rather than a slide
     &--scale {
         transform-origin: center center;
         transform: scale(0.8);
@@ -386,7 +417,9 @@ $component: "#{base.$prefix}-dialog";
 // Accessibility - Reduced motion preference support
 @include m.reduced-motion {
     .#{$component},
-    .#{$component}-overlay {
+    .#{$component}--visible,
+    .#{$component}-overlay,
+    .#{$component}-overlay--visible {
         transition: opacity v.motion("duration-short2") linear;
     }
 

package/src/styles/components/_drawer.scss

@@ -27,9 +27,14 @@ $default-width: 360px;
     &--open {
         pointer-events: auto;
 
+        // Motion follows Compose's ModalNavigationDrawer: the sheet opens on
+        // the default spatial spring and closes on fast effects, and the scrim's
+        // opacity rides with the sheet. Opacity past 1 is clamped, so the scrim
+        // takes the spatial timing without overshooting.
         .#{$component}__sheet {
             transform: translateX(0);
             visibility: visible;
+            transition: m.spring(transform, default-spatial);
         }
 
         .#{$component}__scrim {
@@ -38,6 +43,7 @@ $default-width: 360px;
 
         .#{$component}__scrim--visible {
             opacity: 1;
+            transition: m.spring(opacity, default-spatial);
         }
     }
 
@@ -117,18 +123,40 @@ $default-width: 360px;
         overflow: hidden;
         // Closed: collapse to 0. --#{base.$prefix}-drawer-width is set inline by the JS component.
         width: 0;
-        transition: width v.motion("duration-short4")
-            v.motion("easing-standard");
+        // Compose's DismissibleNavigationDrawer: open on the default spatial
+        // spring, close on fast effects
+        transition: m.spring(width, fast-effects);
 
         .#{$component}__sheet {
             position: relative;
             background-color: t.color("surface");
             @include m.elevation(0);
+            // While the width overshoots, the sheet stretches with it rather
+            // than leaving a strip between its edge and the page
+            min-width: 100%;
+        }
+
+        // The growing width is the slide: the sheet hangs from the edge facing
+        // the page, so it follows that edge without a transform of its own. A
+        // transform on the same spring would carry the sheet off the screen
+        // edge while it overshoots, where the root clips anything covering the gap.
+        &.#{$component}--start .#{$component}__sheet {
+            align-self: flex-end;
+        }
+
+        &.#{$component}--end .#{$component}__sheet {
+            align-self: flex-start;
+        }
+
+        &.#{$component} .#{$component}__sheet,
+        &.#{$component}--open .#{$component}__sheet {
+            transform: none;
         }
 
         // Open — expand to the concrete width value via custom property
         &.#{$component}--open {
             width: var(--#{base.$prefix}-drawer-width, $default-width);
+            transition: m.spring(width, default-spatial);
         }
 
         // Border on the end edge (standard variant visual separator)
@@ -186,6 +214,25 @@ $default-width: 360px;
             background-color: t.color("surface-container-low");
             @include m.elevation(1);
         }
+
+        // Cover the gap the spring's overshoot opens at the docked edge
+        &.#{$component}--start .#{$component}__sheet {
+            box-shadow: f.get-elevation(1), (-1 * m.$sheet-overshoot-guard) 0 0 0 t.color("surface-container-low");
+        }
+
+        &.#{$component}--end .#{$component}__sheet {
+            box-shadow: f.get-elevation(1), m.$sheet-overshoot-guard 0 0 0 t.color("surface-container-low");
+        }
+
+        @include m.rtl {
+            &.#{$component}--start .#{$component}__sheet {
+                box-shadow: f.get-elevation(1), m.$sheet-overshoot-guard 0 0 0 t.color("surface-container-low");
+            }
+
+            &.#{$component}--end .#{$component}__sheet {
+                box-shadow: f.get-elevation(1), (-1 * m.$sheet-overshoot-guard) 0 0 0 t.color("surface-container-low");
+            }
+        }
     }
 
     // ========================================================================
@@ -202,7 +249,7 @@ $default-width: 360px;
         overflow-x: hidden;
         box-sizing: border-box;
         padding: 12px 0;
-        @include m.motion-transition(transform);
+        transition: m.spring(transform, fast-effects);
 
         // Smooth scrollbar
         scrollbar-width: thin;
@@ -223,7 +270,7 @@ $default-width: 360px;
         opacity: 0;
         pointer-events: none;
         z-index: -1;
-        @include m.motion-transition(opacity);
+        transition: m.spring(opacity, fast-effects);
     }
 
     // ========================================================================
@@ -555,12 +602,18 @@ $default-width: 360px;
     // ========================================================================
 
     @include m.reduced-motion {
-        &--standard { transition: none; }
-        &__sheet {
+        &--standard,
+        &--standard.#{$component}--open {
+            transition: none;
+        }
+
+        &__sheet,
+        &--open .#{$component}__sheet {
             transition: none;
         }
 
-        &__scrim {
+        &__scrim,
+        &--open .#{$component}__scrim--visible {
             transition: none;
         }
 

package/src/styles/components/_menu.scss

@@ -29,9 +29,10 @@ $component: "#{$prefix}-menu";
     flex-direction: column;
     opacity: 0;
     transform-origin: top center;
-    // A fade with a slight scale, as menus enter in M3; the vertical squash
-    // this replaced is not one of its patterns
-    transform: scale(0.8);
+    // The menu grows in height from its anchor when it opens, and closing is
+    // the same motion in reverse: the closed state is the height it opens
+    // from, on the same duration and curve
+    transform: scaleY(0);
     pointer-events: none;
 
     // Material Design 3 standard animation curve for menus
@@ -42,7 +43,7 @@ $component: "#{$prefix}-menu";
     // Visible state
     &--visible {
         opacity: 1;
-        transform: scale(1);
+        transform: scaleY(1);
         pointer-events: auto;
     }
 
@@ -122,7 +123,8 @@ $component: "#{$prefix}-menu";
             outline: none;
         }
 
-        &:focus-visible {
+        &:focus-visible,
+            &--active {
             @include m.state-layer(t.color("on-surface"), "focus");
         }
 
@@ -186,7 +188,8 @@ $component: "#{$prefix}-menu";
                 @include m.state-layer(t.color("on-secondary-container"), "hover");
             }
 
-            &:focus-visible {
+            &:focus-visible,
+            &.#{$component}-item--active {
                 @include m.state-layer(t.color("on-secondary-container"), "focus");
             }
 
@@ -386,6 +389,7 @@ $component: "#{$prefix}-menu";
             // The shape is the state: 4dp at rest, 12dp once it is touched
             &:hover,
             &:focus-visible,
+            &--active,
             &:active {
                 border-radius: v.shape("medium");
             }
@@ -410,7 +414,8 @@ $component: "#{$prefix}-menu";
                     @include m.state-layer(var(--#{$prefix}-menu-selected-label), "hover");
                 }
 
-                &:focus-visible {
+                &:focus-visible,
+            &.#{$component}-item--active {
                     @include m.state-layer(var(--#{$prefix}-menu-selected-label), "focus");
                 }
 

package/src/styles/components/_side-sheet.scss

@@ -1,5 +1,6 @@
 // src/styles/components/_side-sheet.scss
 @use "../abstract/base" as base;
+@use "../abstract/functions" as f;
 @use "../abstract/variables" as v;
 @use "../abstract/mixins" as m;
 @use "../abstract/theme" as t;
@@ -35,9 +36,11 @@ $component: "#{base.$prefix}-side-sheet";
         background-color: t.alpha("scrim", 0.32);
         opacity: 0;
         visibility: hidden;
+        // Closing fades on fast effects, and the scrim leaves the
+        // accessibility tree only once the fade is done
         transition:
-            opacity v.motion("duration-medium1") v.motion("easing-emphasized"),
-            visibility v.motion("duration-medium1") v.motion("easing-emphasized");
+            m.spring(opacity, fast-effects),
+            visibility 0s linear m.spring-duration(fast-effects);
     }
 
     &-container {
@@ -49,7 +52,10 @@ $component: "#{base.$prefix}-side-sheet";
         box-sizing: border-box;
         pointer-events: auto;
         color: t.color("on-surface");
-        transition: transform v.motion("duration-medium2") v.motion("easing-emphasized");
+        // Motion follows the drawer, the closest Compose surface: open on the
+        // default spatial spring, which M3 names for surfaces that partly
+        // cover the screen, and close on fast effects
+        transition: m.spring(transform, fast-effects);
 
         &:focus {
             outline: none;
@@ -123,6 +129,15 @@ $component: "#{base.$prefix}-side-sheet";
             background-color: t.color("surface");
             pointer-events: auto;
         }
+
+        // Cover the gap the spring's overshoot opens at the docked edge
+        &.#{$component}--end .#{$component}-container {
+            box-shadow: m.$sheet-overshoot-guard 0 0 0 t.color("surface");
+        }
+
+        &.#{$component}--start .#{$component}-container {
+            box-shadow: (-1 * m.$sheet-overshoot-guard) 0 0 0 t.color("surface");
+        }
     }
 
     &--modal {
@@ -130,6 +145,14 @@ $component: "#{base.$prefix}-side-sheet";
             background-color: t.color("surface-container-low");
             @include m.elevation(1);
         }
+
+        &.#{$component}--end .#{$component}-container {
+            box-shadow: f.get-elevation(1), m.$sheet-overshoot-guard 0 0 0 t.color("surface-container-low");
+        }
+
+        &.#{$component}--start .#{$component}-container {
+            box-shadow: f.get-elevation(1), (-1 * m.$sheet-overshoot-guard) 0 0 0 t.color("surface-container-low");
+        }
     }
 
     // ---------------------------------------------------------------------
@@ -158,17 +181,23 @@ $component: "#{base.$prefix}-side-sheet";
     &--open {
         .#{$component}-container {
             transform: translateX(0);
+            transition: m.spring(transform, default-spatial);
         }
 
+        // Opacity past 1 is clamped, so the scrim takes the sheet's timing
+        // without overshooting
         .#{$component}-scrim {
             opacity: 1;
             visibility: visible;
+            transition: m.spring(opacity, default-spatial), visibility 0s;
         }
     }
 
     @include m.reduced-motion {
         .#{$component}-container,
-        .#{$component}-scrim {
+        .#{$component}-scrim,
+        &--open .#{$component}-container,
+        &--open .#{$component}-scrim {
             transition: none;
         }
     }

package/src/styles/components/_tooltip.scss

@@ -42,6 +42,9 @@ $arrow-size: 8px;
   &--visible {
     opacity: 0.9;
     transform: scale(1);
+    // A shown tooltip can be hovered, so a pointer can rest on its content
+    // (WCAG 1.4.13); hidden, it still lets clicks through
+    pointer-events: auto;
   }
   
   // Variants