mtrl 0.9.4 → 0.9.6

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