material 3.0.0-next.0 → 3.0.0

package/src/styles/components/_radios.scss

@@ -20,7 +20,8 @@ $component: '#{base.$prefix}-radios';
     // them (a 12px margin made the pitch 60px).
   }
 
-  // Horizontal layout
+  // Horizontal layout. align-items stays flex-start: options on one line share
+  // the start edge, and the next line starts after the tallest row.
   &--horizontal {
     flex-direction: row;
     flex-wrap: wrap;
@@ -92,14 +93,17 @@ $component: '#{base.$prefix}-radios';
     }
   }
 
-  // Radio label
+  // Radio label. The row is at least 48dp and grows with a wrapping label.
+  // 4px of vertical padding leaves a 40px content box, so a one-line row stays
+  // 48px: the control's top is 4px and the 20px circle's top is 14px. The
+  // circle stays centred on the label block (align-items: center).
   &__label {
     position: relative;
     display: inline-flex;
     align-items: center;
     cursor: pointer;
-    padding: 8px 0;
-    height: 48px;
+    padding: 4px 0;
+    min-height: 48px;
     color: t.color('on-surface');
 
     // Body Large, as the checkbox and switch labels: a list item's headline.
@@ -112,6 +116,14 @@ $component: '#{base.$prefix}-radios';
         margin-inline: 0 8px;
       }
     }
+
+    // An empty label leaves the 40px control. The row is the 48dp target and
+    // the control is centred in it: the circle inset is 14px and the state
+    // layer inset is 4px. Without the width the row would be 40px.
+    &:has(> .#{$component}__text:empty) {
+      min-width: 48px;
+      justify-content: center;
+    }
   }
 
   // Radio control: the 40dp state layer area
@@ -192,5 +204,11 @@ $component: '#{base.$prefix}-radios';
   // margin-left, 0px in right-to-left layouts). FLO-266.
   &__text {
     margin-inline-start: 8px;
+
+    // An empty span would still take the 8px gap and push the control to the
+    // inline start. Taking no space lets the unlabelled row centre it.
+    &:empty {
+      display: none;
+    }
   }
 }

package/src/styles/components/_select.scss

@@ -8,9 +8,10 @@
 $component: "#{base.$prefix}-select";
 
 .#{$component} {
-    // Base styles - building on text field base
+    // Base styles - building on text field base. No width of its own: unsized,
+    // a select is the text field's 280px, as <m-select> is; it took 100% of
+    // its container, which the text field never did.
     position: relative;
-    width: 100%;
     cursor: pointer;
 
     // Menu when it's a direct child of select (container mode)
@@ -22,6 +23,10 @@ $component: "#{base.$prefix}-select";
         right: 0;
         z-index: 1;
         margin-top: 0;
+        // The field's width, as in the top layer (Compose
+        // exposedDropdownSize(matchAnchorWidth = true)): the menu's own 280px
+        // maximum left it short of a wider field. Its 112px minimum stays.
+        max-width: none;
     }
 
     // Transition
@@ -125,33 +130,12 @@ $component: "#{base.$prefix}-select";
 
         .#{base.$prefix}-menu__item {
             min-height: 3rem;
-
-            // Selected state
-            &--selected {
-                background-color: t.alpha("primary", 0.12);
-                color: t.color("primary");
-                font-weight: 500;
-
-                &::after {
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    right: 12px;
-                    width: 18px;
-                    height: 18px;
-                    // Use mask-image instead of background-image
-                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-                    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-                    mask-size: contain;
-                    -webkit-mask-size: contain;
-                    mask-repeat: no-repeat;
-                    -webkit-mask-repeat: no-repeat;
-                    mask-position: center;
-                    -webkit-mask-position: center;
-                    // Use currentColor to match the text color
-                    background-color: currentColor;
-                }
-            }
+            // The selected option is the menu's own, in every layer:
+            // secondary-container and on-secondary-container
+            // (md.comp.menu.list-item.selected.container.color and
+            // .label-text.color, m3.material.io), with the menu's mark. The
+            // rule that was here gave the top layer the primary colour at
+            // 12% and a second mark.
         }
     }
 

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

@@ -88,6 +88,12 @@ $component: "#{base.$prefix}-side-sheet";
 
     // 16dp on the icon side, per the specs' start padding with an icon
     &__close {
+        // The button is the layer's and the 48px target's containing block. That
+        // cannot come from the state layer's `:where()` rule alone: it adds no
+        // specificity, so a page reset like `button { position: static }` would
+        // win, and the layer and the target would anchor to the sheet's
+        // container instead.
+        position: relative;
         flex: 0 0 auto;
         display: inline-flex;
         align-items: center;
@@ -108,6 +114,22 @@ $component: "#{base.$prefix}-side-sheet";
             outline: 3px solid t.color("secondary");
             outline-offset: 2px;
         }
+
+        // FLO-579: the 40px button carries a 48px target, the icon button's own
+        // mechanism (its --xs/--s ::after): the box reaches 4px past each edge.
+        // The `position: relative` above is the button's own, so the box anchors
+        // to the button whatever the page does to buttons.
+        // m3.material.io, Density: "The default target size should be at least
+        // 48x48 CSS pixels".
+        &::after {
+            content: "";
+            position: absolute;
+            width: 48px;
+            height: 48px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
     }
 
     &__content {

package/src/styles/components/_slider.scss

@@ -54,11 +54,11 @@ $component: '#{base.$prefix}-slider';
     outline: none;
   }
   
-  // Label styles
+  // Label
+  // Body Large, as the checkbox, radio and switch labels (FLO-587).
   &__label {
     display: block;
-    font-size: 18px;
-    font-weight: 400;
+    @include m.typography('body-large');
     color: t.color('on-surface');
     margin-bottom: 4px;
     // labelPosition: 'end' puts it below the track.

package/src/styles/components/_switch.scss

@@ -29,6 +29,25 @@ $component: '#{base.$prefix}-switch';
     column-gap: 12px;
   }
 
+  // A switch with neither a label nor supporting text is its own target: no
+  // gap (the 12px belongs between text and the track, and there is none), so
+  // the root is the 52px track's width and 48px tall with the 32px track
+  // centred. M3 "Switch" -> Specs -> Measurements: Track 32x52dp and "Target:
+  // Size 48dp", with no height for a label row; its Accessibility section:
+  // "Don't apply density to switches by default — this lowers their targets
+  // below our best practice of 48x48 CSS pixels." So this row is 48 tall —
+  // the root's 4px above and below leave the container 40 — while a switch
+  // with a label, and one whose only text is its supporting text (`__helper`,
+  // which stands where the label would), keeps the 56px row and the gap.
+  // `:where` keeps this rule's weight level with `--dense`, which follows and
+  // so still wins: a switch that opts into the denser row keeps it.
+  &:where(:not(:has(.#{$component}__label, .#{$component}__helper))) {
+    .#{$component}__container {
+      column-gap: 0;
+      min-height: 40px;
+    }
+  }
+
   // Content wrapper. The gap is on the container, so it stays between the label
   // and the track whichever side the label is on, in either direction.
   &__content {