mtrl 0.8.0 → 0.9.0

package/src/styles/components/_radios.scss

@@ -11,57 +11,57 @@ $component: '#{base.$prefix}-radios';
   display: flex;
   margin: 0;
   padding: 0;
-  
+
   // Vertical layout (default)
   &--vertical {
     flex-direction: column;
-    
+
     .#{$component}-item {
       margin-bottom: 12px;
-      
+
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
-  
+
   // Horizontal layout
   &--horizontal {
     flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-start;
-    
+
     .#{$component}-item {
       margin-right: 16px;
-      
+
       &:last-child {
         margin-right: 0;
       }
     }
   }
-  
+
   // Disabled state
+  // No blanket dimming: DisabledSelectedIconOpacity and
+  // DisabledUnselectedIconOpacity are both 0.38, applied per role below.
   &--disabled {
-    opacity: 0.6;
     pointer-events: none;
   }
-  
+
   // Radio item
   &-item {
     position: relative;
     display: inline-flex;
     align-items: center;
-    
+
     &--disabled {
       cursor: not-allowed;
-      opacity: 0.6;
-      
+
       .#{$component}-label {
         cursor: not-allowed;
       }
     }
   }
-  
+
   // Radio input
   &-input {
     position: absolute;
@@ -70,41 +70,41 @@ $component: '#{base.$prefix}-radios';
     width: 0;
     margin: 0;
     padding: 0;
-    
+
     // Focus styles
     &:focus ~ .#{$component}-label .#{$component}-ripple {
-      background-color: t.alpha('primary', 0.12);
+      background-color: t.alpha('primary', v.state('focus-state-layer-opacity'));
     }
-    
+
     // Checked styles
     &:checked ~ .#{$component}-label {
       .#{$component}-circle {
         border-color: t.color('primary');
         border-width: 1.5px;
-        
+
         &:after {
           transform: translate(-50%, -50%) scale(1);
           opacity: 1;
         }
       }
     }
-    
+
     // Disabled styles
     &:disabled ~ .#{$component}-label {
       .#{$component}-circle {
         border-color: t.alpha('on-surface', 0.38);
-        
+
         &:after {
           background-color: t.alpha('on-surface', 0.38);
         }
       }
-      
+
       .#{$component}-text {
         color: t.alpha('on-surface', 0.38);
       }
     }
   }
-  
+
   // Radio label
   &-label {
     position: relative;
@@ -113,20 +113,20 @@ $component: '#{base.$prefix}-radios';
     cursor: pointer;
     padding: 8px 0;
     height: 48px;
-    
+
     // Typography for label
     @include m.typography('body-medium');
-    
+
     &--before {
       flex-direction: row-reverse;
-      
+
       .#{$component}-text {
         margin-right: 12px;
         margin-left: 0;
       }
     }
   }
-  
+
   // Radio control
   &-control {
     position: relative;
@@ -137,7 +137,7 @@ $component: '#{base.$prefix}-radios';
     height: 40px;
     flex-shrink: 0;
   }
-  
+
   // Radio circle
   &-circle {
     position: relative;
@@ -147,7 +147,7 @@ $component: '#{base.$prefix}-radios';
     border-radius: 50%;
     box-sizing: border-box;
     transition: border-color 0.2s ease;
-    
+
     &:after {
       content: '';
       position: absolute;
@@ -162,7 +162,7 @@ $component: '#{base.$prefix}-radios';
       transition: transform 0.15s ease, opacity 0.15s ease;
     }
   }
-  
+
   // Ripple effect
   &-ripple {
     position: absolute;
@@ -172,13 +172,13 @@ $component: '#{base.$prefix}-radios';
     bottom: 0;
     border-radius: 50%;
     transition: background-color 0.15s ease;
-    
+
     // Apply ripple effect on hover
     .#{$component}-input:not(:disabled) ~ .#{$component}-label:hover & {
       background-color: t.alpha('primary', 0.08);
     }
   }
-  
+
   // Radio text
   &-text {
     margin-left: 8px;

package/src/styles/components/_switch.scss

@@ -71,7 +71,7 @@ $component: '#{base.$prefix}-switch';
     background-color: t.color('surface-container-highest');
     border: 2px solid t.color('outline');
     @include m.motion-transition(background-color, border-color, outline);
-    
+
     // Ripple effect (consistent size for both hover and press)
     &::after {
       content: '';
@@ -101,7 +101,7 @@ $component: '#{base.$prefix}-switch';
     border-radius: 50%;
     background-color: t.color('outline');
     transform: translateX(0);
-    transition: transform v.motion('duration-medium1') cubic-bezier(0.2, 1.4, 0.35, 1), 
+    transition: transform v.motion('duration-medium1') cubic-bezier(0.2, 1.4, 0.35, 1),
                 background-color v.motion('duration-medium1') v.motion('easing-emphasized'),
                 width v.motion('duration-medium1') v.motion('easing-emphasized'),
                 height v.motion('duration-medium1') v.motion('easing-emphasized'),
@@ -122,7 +122,7 @@ $component: '#{base.$prefix}-switch';
       transform: scale(0);
       transition: all v.motion('duration-short4') v.motion('easing-emphasized');
       color: t.color('primary');
-      
+
       svg {
         width: 14px;
         height: 14px;
@@ -134,7 +134,7 @@ $component: '#{base.$prefix}-switch';
   &-helper {
     @include m.typography('body-medium');
     color: t.color('on-surface-variant');
-    
+
     &--error {
       color: t.color('error');
     }
@@ -145,12 +145,12 @@ $component: '#{base.$prefix}-switch';
     &-container {
       flex-direction: row;
     }
-    
+
     &-content {
       margin-left: 12px;
       margin-right: 0;
     }
-    
+
     // Adjust thumb movement for RTL layout
     &--checked .#{$component}-thumb {
       transform: translateX(-20px);
@@ -162,7 +162,7 @@ $component: '#{base.$prefix}-switch';
     .#{$component}-track {
       background-color: t.color('primary');
       border-color: t.color('primary');
-      
+
       &::after {
         transform: translateX(14px);
       }
@@ -196,29 +196,39 @@ $component: '#{base.$prefix}-switch';
     }
   }
 
-  // Disabled state
+  // Disabled state. SwitchTokens splits these: DisabledTrackOpacity is 0.12, while
+  // the handle carries its own alpha — DisabledUnselectedHandleOpacity 0.38 over
+  // OnSurface, and DisabledSelectedHandleOpacity 1.0 over Surface. A single opacity on
+  // the track cascaded onto the handle, so no part matched its token.
   &--disabled {
     pointer-events: none;
+
     .#{$component}-track {
-      opacity: 0.38;
+      background-color: t.alpha('on-surface', 0.12);
+      border-color: t.alpha('on-surface', 0.12);
     }
-    
+
+    .#{$component}-thumb {
+      background-color: t.alpha('on-surface', 0.38);
+    }
+
     .#{$component}-label, .#{$component}-helper {
-      opacity: 0.38;
+      color: t.alpha('on-surface', 0.38);
+      opacity: 1;
     }
-    
-    // Specific styles for disabled + checked
+
+    // Selected: the track keeps 0.12, and the handle is Surface at full opacity.
     &.#{$component}--checked {
       .#{$component}-track {
-        background-color: t.color('outline');
-        border-color: t.color('outline');
-        opacity: 0.38;
+        background-color: t.alpha('on-surface', 0.12);
+        border-color: transparent;
       }
-      
+
       .#{$component}-thumb {
-        background-color: t.color('surface-dim');
+        background-color: t.color('surface');
+
         &-icon {
-          color: t.color('on-surface');
+          color: t.alpha('on-surface', 0.38);
         }
       }
     }
@@ -239,19 +249,19 @@ $component: '#{base.$prefix}-switch';
         .#{$component}-thumb {
           background-color: t.color('on-surface-variant');
         }
-        
+
         &::after {
           background-color: t.color('on-surface');
           opacity: v.state('hover-state-layer-opacity');
           transform: translateX(-6px);
         }
       }
-      
+
       .#{$component}-input:active ~ .#{$component}-track::after {
         opacity: v.state('pressed-state-layer-opacity');
       }
     }
-    
+
     // Hover/active states for checked
     &.#{$component}--checked {
       .#{$component}-input:hover ~ .#{$component}-track,
@@ -262,7 +272,7 @@ $component: '#{base.$prefix}-switch';
           transform: translateX(14px);
         }
       }
-      
+
       .#{$component}-input:active ~ .#{$component}-track::after {
         opacity: v.state('pressed-state-layer-opacity');
       }
@@ -275,7 +285,7 @@ $component: '#{base.$prefix}-switch';
       top: 0;
       left: 0;
     }
-    
+
     &.#{$component}--checked .#{$component}-input:active ~ .#{$component}-track .#{$component}-thumb {
       left: 0;
     }
@@ -294,12 +304,12 @@ $component: '#{base.$prefix}-switch';
     .#{$component}-track {
       border-width: 2px;
     }
-    
+
     &--checked .#{$component}-track {
       border-color: currentColor;
     }
   }
-  
+
   // Touch target for better mobile experience
   // @include m.touch-target;
 }

package/src/styles/components/_tabs.scss

@@ -28,8 +28,9 @@ $container: "#{base.$prefix}-tabs";
 
         // Primary indicator specific styling
         .#{$container}-indicator {
-            height: 4px;
-            border-radius: 3px 3px 0 0;
+            // Height comes from the indicator's own option, defaulting to
+            // ActiveIndicatorHeight = 3dp; ActiveIndicatorShape is a 3px corner.
+            border-radius: 3px;
             background-color: t.color("primary");
         }
     }
@@ -38,18 +39,37 @@ $container: "#{base.$prefix}-tabs";
         min-height: 48px;
         // Tab indicator styling for secondary variant
         .#{$container}-indicator {
-            height: 2px;
+            // TabRowDefaults.SecondaryIndicator takes the primary token for both the
+            // height and the colour (TabRow.kt:1080-1081).
             border-radius: 0;
-            background-color: t.color("on-surface");
+            background-color: t.color("primary");
         }
     }
 
+    // A tab is built on a text button, which paints its own ::before state layer in
+    // currentColor. The tab paints its own per-variant layer below, so the button's
+    // would stack a second one over it. Keep the tab's.
+    .#{$component}::before {
+        content: none;
+    }
+
+    // Fixed form: Compose divides the row evenly (tabRowWidth / tabCount,
+    // TabRow.kt:443-447). Without `scrollable` the component never builds a scroll
+    // container, so the tabs are direct children of the root.
+    &:not(&--scrollable) > .#{$component} {
+        flex: 1;
+    }
+
     // Scrollable container
     &--scrollable {
         overflow: hidden;
 
         .#{$container}-scroll {
             display: flex;
+            // ScrollableTabRowEdgeStartPadding, applied at both edges: TabRow.kt:239
+            // documents it as the padding between the starting and ending edge and the
+            // tabs inside the row.
+            padding-inline: 52px;
             overflow-x: auto;
             scrollbar-width: none; // Firefox
             -ms-overflow-style: none; // IE and Edge
@@ -141,7 +161,9 @@ $container: "#{base.$prefix}-tabs";
     }
 
     // Tab Icon (3. Icon - optional)
-    &-icon {
+    // The icon element the button builds carries mtrl-icon + mtrl-button-icon; a
+    // nested &-icon would concatenate onto the compound root and match nothing.
+    .#{base.$prefix}-button-icon {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -157,44 +179,40 @@ $container: "#{base.$prefix}-tabs";
 
     // Ensure proper vertical spacing for icon and text
     &--icon-and-text {
-        .#{$component}-icon {
+        .#{base.$prefix}-button-icon {
             margin-bottom: 4px;
         }
     }
 
     // Tab Text (4. Label)
-    &-text {
+    .#{base.$prefix}-button-text {
         @include m.truncate;
         max-width: 100%;
         text-align: center;
         line-height: 1.2;
+    }
 
-        .#{$component}--icon-only & {
-            @include m.visually-hidden;
-        }
+    // The modifier is on the tab root, so the label is a descendant of &, not of a
+    // second tab.
+    &--icon-only .#{base.$prefix}-button-text {
+        @include m.visually-hidden;
     }
 
-    // Badge positioning (2. Badge - optional)
-    .#{base.$prefix}-badge-wrapper {
-        .#{base.$prefix}-badge {
-            // Position for different tab layouts
-            &--top-right {
-                .#{$component}--icon-only & {
-                    top: 4px;
-                    right: 4px;
-                }
-
-                .#{$component}--text-only & {
-                    top: 8px;
-                    right: 8px;
-                }
-
-                .#{$component}--icon-and-text & {
-                    top: 4px;
-                    right: calc(50% - 20px);
-                }
-            }
-        }
+    // Badge positioning (2. Badge - optional). The layout modifier is on the tab
+    // itself, so these hang off &, not off a nested tab.
+    &--icon-only .#{base.$prefix}-badge-wrapper .#{base.$prefix}-badge--top-right {
+        top: 4px;
+        right: 4px;
+    }
+
+    &--text-only .#{base.$prefix}-badge-wrapper .#{base.$prefix}-badge--top-right {
+        top: 8px;
+        right: 8px;
+    }
+
+    &--icon-and-text .#{base.$prefix}-badge-wrapper .#{base.$prefix}-badge--top-right {
+        top: 4px;
+        right: calc(50% - 20px);
     }
 
     // ACTIVE TAB STATES - PRIMARY VARIANT
@@ -203,7 +221,7 @@ $container: "#{base.$prefix}-tabs";
         &--active {
             color: t.color("primary");
             border-radius: 0;
-            .#{$component}-icon {
+            .#{base.$prefix}-button-icon {
                 color: t.color("primary");
             }
 
@@ -223,7 +241,7 @@ $container: "#{base.$prefix}-tabs";
             // Pressed state for active tabs
             &:active,
             &.#{$component}--pressed {
-                background-color: t.alpha("primary", 0.12);
+                background-color: t.alpha("primary", v.state("pressed-state-layer-opacity"));
                 border-radius: 5px 5px 0 0;
             }
         }
@@ -250,7 +268,7 @@ $container: "#{base.$prefix}-tabs";
             // Pressed state for inactive tabs
             &:active,
             &.#{$component}--pressed {
-                background-color: t.alpha("on-surface-variant", 0.12);
+                background-color: t.alpha("on-surface-variant", v.state("pressed-state-layer-opacity"));
                 border-radius: 5px 5px 0 0;
             }
         }
@@ -262,7 +280,7 @@ $container: "#{base.$prefix}-tabs";
         &--active {
             color: t.color("on-surface");
             border-radius: 0;
-            .#{$component}-icon {
+            .#{base.$prefix}-button-icon {
                 color: t.color("on-surface");
             }
 
@@ -282,7 +300,7 @@ $container: "#{base.$prefix}-tabs";
             // Pressed state for active tabs - secondary
             &:active,
             &.#{$component}--pressed {
-                background-color: t.alpha("on-surface", 0.12);
+                background-color: t.alpha("on-surface", v.state("pressed-state-layer-opacity"));
             }
         }
 
@@ -308,33 +326,16 @@ $container: "#{base.$prefix}-tabs";
             // Pressed state for inactive tabs - secondary
             &:active,
             &.#{$component}--pressed {
-                background-color: t.alpha("on-surface-variant", 0.12);
+                background-color: t.alpha("on-surface-variant", v.state("pressed-state-layer-opacity"));
                 border-radius: 5px 5px 0 0;
             }
         }
     }
 
-    // Ripple effect styling
-    .#{$component}-ripple {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        overflow: hidden;
-        border-radius: inherit;
-        pointer-events: none;
-
-        .ripple {
-            position: absolute;
-            border-radius: 50%;
-            transform: scale(0);
-            pointer-events: none;
-            background-color: currentColor;
-            opacity: 0.1;
-            transform-origin: center;
-        }
-    }
+    // No ripple rules here: the ripple feature appends .mtrl-ripple with
+    // .mtrl-ripple-wave children, both styled by the ripple utility in the base
+    // bundle. What stood here addressed .mtrl-button.mtrl-tab-ripple and a bare
+    // .ripple, neither of which is ever emitted, and duplicated the utility besides.
 }
 
 // Tab panel styles

package/src/styles/components/_timepicker.scss

@@ -255,7 +255,7 @@ $component: '#{base.$prefix}-time-picker';
       }
       
       &:active {
-        background-color: t.alpha('on-surface', 0.12);
+        background-color: t.alpha('on-surface', v.state('pressed-state-layer-opacity'));
       }
     }
     
@@ -331,7 +331,7 @@ $component: '#{base.$prefix}-time-picker';
     }
     
     &:active {
-      background-color: t.alpha('on-surface', 0.12);
+      background-color: t.alpha('on-surface', v.state('pressed-state-layer-opacity'));
     }
     
     svg {
@@ -373,7 +373,7 @@ $component: '#{base.$prefix}-time-picker';
     }
     
     &:active {
-      background-color: t.alpha('primary', 0.12);
+      background-color: t.alpha('primary', v.state('pressed-state-layer-opacity'));
     }
   }
   

package/src/styles/main.scss

@@ -67,6 +67,7 @@
 @use "./components/navigation" as navigation;
 @use "./components/navigation-rail" as navigation-rail;
 @use "./components/list" as list;
+@use "./components/tooltip" as tooltip;
 
 @use "./utilities/ripple" as ripple;
 @use "./utilities/layout" as layout;