mtrl 0.6.3 → 0.7.1

package/src/styles/components/_menu.scss

@@ -225,6 +225,31 @@ $component: "#{$prefix}-menu";
         }
     }
 
+    // Dense variant — compact items for toolbars and dense UIs
+    &--dense {
+        padding: 4px 0;
+
+        .#{$component}-item {
+            @include m.typography("body-medium");
+            min-height: 32px;
+            padding: 4px 12px;
+            padding-right: 32px;
+
+            &--submenu {
+                padding-right: 36px;
+            }
+
+            &-icon svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .#{$component}-divider {
+            margin: 4px 0;
+        }
+    }
+
     // RTL Support
     @include m.rtl {
         transform-origin: top right;

package/src/styles/components/_segmented-button.scss

@@ -465,7 +465,7 @@ $component: "#{base.$prefix}-segmented-button";
 // DARK THEME ADJUSTMENTS
 // =============================================================================
 
-body[data-theme-mode="dark"] {
+html[data-theme-mode="dark"] {
     .#{$component} {
         border-color: t.color("outline");
 

package/src/styles/components/_select.scss

@@ -53,7 +53,15 @@ $component: "#{base.$prefix}-select";
 
     // State when menu is open
     &--open {
-        z-index: 2; // Keep above other elements when open
+        z-index: f.get-z-index("menu");
+
+        // Transparent scrim covering the viewport to block pointer events
+        // on elements behind the open dropdown
+        &::before {
+            content: "";
+            position: fixed;
+            inset: 0;
+        }
 
         // These styles handle the focused state when the menu is open
         .#{base.$prefix}-textfield--filled {

package/src/styles/main.scss

@@ -50,6 +50,7 @@
 @use "./components/datepicker" as datepicker;
 @use "./components/dialog" as dialog;
 @use "./components/divider" as divider;
+@use "./components/drawer" as drawer;
 
 @use "./components/progress" as progress;