material 3.0.0-next.0 → 3.0.0-next.1

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 {

package/src/styles/components/_text-field.scss

@@ -8,11 +8,18 @@
 // Define the component once
 $component: "#{base.$prefix}-text-field";
 
-// Where the text starts or ends beside a prefix or a suffix: the affix's own
-// inset, its width, which placement.ts measures into a custom property (32px
-// until it has), and the 2dp to the text (PrefixSuffixTextPadding).
-@function beside-affix($inset, $affix) {
-    @return calc(#{$inset} + var(--#{$component}-#{$affix}-width, 32px) + 2px);
+// Right to left (FLO-562). Every horizontal inset is a custom property, set
+// once whatever the direction, and the rules in this mixin, at the end of the
+// component's block, are the whole mirror. Two selectors: an ancestor's `dir`,
+// which needs no script, and --rtl, which placement.ts sets from the computed
+// direction, for a field in a shadow root, where a `dir` outside it does not
+// reach. Physical sides, as bundlers lower logical insets, corners and :dir()
+// into :lang() lists that miss dir="rtl".
+@mixin mirrored {
+    [dir='rtl'] &,
+    &.#{$component}--rtl {
+        @content;
+    }
 }
 
 // Autofill detection animations
@@ -60,7 +67,7 @@ $component: "#{base.$prefix}-text-field";
         @include m.typography("body-large");
         user-select: none;
         position: absolute;
-        left: 16px;
+        left: var(--#{$component}-start, 16px);
         top: 50%;
         transform: translateY(-50%);
         transform-origin: left top;
@@ -136,7 +143,7 @@ $component: "#{base.$prefix}-text-field";
     &__prefix {
         @include m.typography("body-large");
         position: absolute;
-        left: 16px;
+        left: var(--#{$component}-start, 16px);
         top: 50%;
         transform: translateY(-50%);
         color: t.color("on-surface-variant");
@@ -157,7 +164,7 @@ $component: "#{base.$prefix}-text-field";
     &__suffix {
         @include m.typography("body-large");
         position: absolute;
-        right: 16px;
+        right: var(--#{$component}-end, 16px);
         top: 50%;
         transform: translateY(-50%);
         color: t.color("on-surface-variant");
@@ -219,59 +226,30 @@ $component: "#{base.$prefix}-text-field";
         }
     }
 
-    // A field with a prefix or a suffix pads its input from --text-start and
-    // --text-end (the rules are last in this block): what stands on that side,
-    // an icon then the affix, each after the other (FLO-299). The label is
-    // not moved by a prefix: it starts where the content does (Compose
-    // TextFieldImpl, "Prefix/suffix does not get applied to label").
-    &--with-prefix {
-        --#{$component}-text-start: #{beside-affix(16px, prefix)};
-    }
-
-    &--with-suffix {
-        --#{$component}-text-end: #{beside-affix(16px, suffix)};
-    }
-
-    // Adjustments when icons are present: an icon is 12dp in, and what
-    // follows it 16dp further ("Left/right padding with icons 12dp", "Padding
-    // between icons and text 16dp", m3.material.io text fields): 52dp with
-    // the 24dp icon, 48dp with compact's 20dp one
+    // Where the content starts and ends: 16dp in (TextFieldPadding), or after
+    // an icon, which is 12dp in with 16dp after it ("Left/right padding with
+    // icons 12dp", "Padding between icons and text 16dp", m3.material.io text
+    // fields): 52dp with the 24dp icon, 48dp with compact's 20dp one. The
+    // label, a prefix and a suffix stand there; the label is not moved by a
+    // prefix (Compose TextFieldImpl, "Prefix/suffix does not get applied to
+    // label").
     &--with-leading-icon {
-        --#{$component}-text-start: 52px;
-
-        .#{$component}__label {
-            left: 52px;
-        }
-
-        .#{$component}__input {
-            padding-left: 52px;
-        }
-
-        // With a prefix too: the icon, the prefix, then the text
-        &.#{$component}--with-prefix {
-            --#{$component}-text-start: #{beside-affix(52px, prefix)};
-
-            .#{$component}__prefix {
-                left: 52px;
-            }
-        }
+        --#{$component}-start: 52px;
     }
 
     &--with-trailing-icon {
-        --#{$component}-text-end: 52px;
-
-        .#{$component}__input {
-            padding-right: 52px;
-        }
+        --#{$component}-end: 52px;
+    }
 
-        // With a suffix too: the text, the suffix, then the icon
-        &.#{$component}--with-suffix {
-            --#{$component}-text-end: #{beside-affix(52px, suffix)};
+    // What a prefix or a suffix adds before the text: its width, which
+    // placement.ts measures into a custom property (32px until it has), and
+    // the 2dp to the text (PrefixSuffixTextPadding) (FLO-299)
+    &--with-prefix {
+        --#{$component}-prefix-space: calc(var(--#{$component}-prefix-width, 32px) + 2px);
+    }
 
-            .#{$component}__suffix {
-                right: 52px;
-            }
-        }
+    &--with-suffix {
+        --#{$component}-suffix-space: calc(var(--#{$component}-suffix-width, 32px) + 2px);
     }
 
     // Error state
@@ -399,68 +377,6 @@ $component: "#{base.$prefix}-text-field";
         }
     }
 
-    // RTL support
-    @include m.rtl {
-        &__label {
-            left: auto;
-            right: 16px;
-            transform-origin: right top;
-        }
-
-        &__prefix {
-            left: auto;
-            right: 16px;
-        }
-
-        &__suffix {
-            right: auto;
-            left: 16px;
-        }
-
-        &__leading-icon {
-            left: auto;
-            right: 12px;
-        }
-
-        &__trailing-icon {
-            right: auto;
-            left: 12px;
-        }
-
-        &--with-leading-icon {
-            .#{$component}__label {
-                left: auto;
-                right: 52px;
-            }
-
-            .#{$component}__input {
-                padding-left: 16px;
-                padding-right: 52px;
-            }
-
-            &.#{$component}--with-prefix {
-                .#{$component}__prefix {
-                    left: auto;
-                    right: 52px;
-                }
-            }
-        }
-
-        &--with-trailing-icon {
-            .#{$component}__input {
-                padding-right: 16px;
-                padding-left: 52px;
-            }
-
-            &.#{$component}--with-suffix {
-                .#{$component}__suffix {
-                    right: auto;
-                    left: 52px;
-                }
-            }
-        }
-    }
-
     // ===== FILLED VARIANT =====
     &--filled {
         // the label at rest is on-surface-variant at full strength: faded to
@@ -599,57 +515,9 @@ $component: "#{base.$prefix}-text-field";
         }
 
         // Icon adjustments for filled variant
-        &.#{$component}--with-leading-icon {
-            .#{$component}__input {
-                padding-left: 52px;
-            }
-
-            .#{$component}__label {
-                left: 52px;
-            }
-
-            .#{$component}__leading-icon {
-                top: 28px;
-            }
-        }
-
-        &.#{$component}--with-trailing-icon {
-            .#{$component}__input {
-                padding-right: 52px;
-            }
-
-            .#{$component}__trailing-icon {
-                top: 28px;
-            }
-        }
-
-        // RTL support
-        @include m.rtl {
-            .#{$component}__label {
-                left: auto;
-                right: 16px;
-            }
-
-            &.#{$component}--with-leading-icon {
-                .#{$component}__input {
-                    // The sides only: the shorthand also set the default density's
-                    // top and bottom on a compact field
-                    padding-left: 16px;
-                    padding-right: 52px;
-                }
-
-                .#{$component}__label {
-                    left: auto;
-                    right: 52px;
-                }
-            }
-
-            &.#{$component}--with-trailing-icon {
-                .#{$component}__input {
-                    padding-right: 16px;
-                    padding-left: 52px;
-                }
-            }
+        &.#{$component}--with-leading-icon .#{$component}__leading-icon,
+        &.#{$component}--with-trailing-icon .#{$component}__trailing-icon {
+            top: 28px;
         }
     }
 
@@ -742,7 +610,6 @@ $component: "#{base.$prefix}-text-field";
 
         // LabelColor at full strength: faded to 0.5 it failed 4.5:1 (FLO-298)
         .#{$component}__label {
-            left: 16px;
             top: 50%;
         }
 
@@ -753,8 +620,8 @@ $component: "#{base.$prefix}-text-field";
             // its height: up the 28px to the edge, and half its scaled box
             transform: translateY(calc(-28px - 37.5%)) scale(0.75);
             // The floated label starts 16dp in, inside the notch, whatever
-            // the icon or prefix at rest
-            left: 16px;
+            // the icon at rest: the label's own inset, either direction
+            --#{$component}-start: 16px;
         }
 
         // Floated from the input's own state too, as the filled variant is
@@ -762,7 +629,7 @@ $component: "#{base.$prefix}-text-field";
             // Centred on the top edge (`endY = -(it.height / 2)`), whatever
             // its height: up the 28px to the edge, and half its scaled box
             transform: translateY(calc(-28px - 37.5%)) scale(0.75);
-            left: 16px;
+            --#{$component}-start: 16px;
         }
 
         // Hover state
@@ -810,78 +677,6 @@ $component: "#{base.$prefix}-text-field";
             pointer-events: none;
         }
 
-        // Icon adjustments for outlined variant
-        &.#{$component}--with-leading-icon {
-            .#{$component}__input {
-                padding-left: 52px;
-            }
-
-            .#{$component}__label {
-                left: 52px;
-            }
-
-            &:not(.#{$component}--empty) .#{$component}__label,
-            &.#{$component}--focused .#{$component}__label {
-                left: 16px;
-            }
-        }
-
-        &.#{$component}--with-trailing-icon {
-            .#{$component}__input {
-                padding-right: 52px;
-            }
-        }
-
-        // Right to left follows --rtl, which placement.ts sets from the
-        // computed direction: the [dir] selectors cannot see a direction set
-        // outside a shadow root, and bundlers lower logical insets, corners
-        // and :dir() into :lang() lists that miss dir="rtl"
-        &.#{$component}--rtl {
-            .#{$component}__label {
-                left: auto;
-                right: 16px;
-                transform-origin: right top;
-            }
-
-            &.#{$component}--with-leading-icon .#{$component}__label {
-                left: auto;
-                right: 52px;
-            }
-
-            &:not(.#{$component}--empty) .#{$component}__label,
-            &.#{$component}--focused .#{$component}__label,
-            &:has(.#{$component}__input:is(:not(:placeholder-shown), :autofill, :-webkit-autofill)) .#{$component}__label {
-                left: auto;
-                right: 16px;
-            }
-
-            .#{$component}__outline-leading {
-                border-radius: 0 f.get-shape("extra-small")
-                    f.get-shape("extra-small") 0;
-            }
-
-            .#{$component}__outline-trailing {
-                border-radius: f.get-shape("extra-small") 0 0
-                    f.get-shape("extra-small");
-            }
-        }
-
-        // RTL support for the light DOM
-        @include m.rtl {
-            &.#{$component}--with-leading-icon {
-                .#{$component}__input {
-                    padding-left: 16px;
-                    padding-right: 52px;
-                }
-            }
-
-            &.#{$component}--with-trailing-icon {
-                .#{$component}__input {
-                    padding-right: 16px;
-                    padding-left: 52px;
-                }
-            }
-        }
     }
 
     // Multiline styles
@@ -1037,98 +832,66 @@ $component: "#{base.$prefix}-text-field";
             }
         }
 
-        // Adjust element positions for compact with icons
+        // The compact icon box is 20dp: the content starts 48dp in
         &.#{$component}--with-leading-icon {
-            --#{$component}-text-start: 48px;
-
-            .#{$component}__label {
-                left: 48px;
-            }
-
-            .#{$component}__input {
-                padding-left: 48px;
-            }
-
-            &.#{$component}--with-prefix {
-                --#{$component}-text-start: #{beside-affix(48px, prefix)};
-
-                .#{$component}__prefix {
-                    left: 48px;
-                }
-            }
+            --#{$component}-start: 48px;
         }
 
         &.#{$component}--with-trailing-icon {
-            --#{$component}-text-end: 48px;
-
-            .#{$component}__input {
-                padding-right: 48px;
-            }
+            --#{$component}-end: 48px;
+        }
+    }
 
-            &.#{$component}--with-suffix {
-                --#{$component}-text-end: #{beside-affix(48px, suffix)};
+    // ===== THE INPUT'S SIDES, AND THE MIRROR =====
+    // The text starts where the content does, after a prefix if there is one,
+    // and ends before a suffix. Last, and one class heavier (the field), so it
+    // holds over the variants' and the densities' padding shorthands.
+    .#{$component}__field .#{$component}__input {
+        padding-left: calc(var(--#{$component}-start, 16px) + var(--#{$component}-prefix-space, 0px));
+        padding-right: calc(var(--#{$component}-end, 16px) + var(--#{$component}-suffix-space, 0px));
+    }
 
-                .#{$component}__suffix {
-                    right: 48px;
-                }
-            }
+    @include mirrored {
+        .#{$component}__label {
+            left: auto;
+            right: var(--#{$component}-start, 16px);
+            transform-origin: right top;
         }
 
-        // RTL adjustments for compact density
-        @include m.rtl {
-            &.#{$component}--with-leading-icon {
-                .#{$component}__label {
-                    left: auto;
-                    right: 48px;
-                }
+        .#{$component}__prefix {
+            left: auto;
+            right: var(--#{$component}-start, 16px);
+        }
 
-                .#{$component}__input {
-                    padding-left: 16px;
-                    padding-right: 48px;
-                }
+        .#{$component}__suffix {
+            right: auto;
+            left: var(--#{$component}-end, 16px);
+        }
 
-                &.#{$component}--with-prefix {
-                    .#{$component}__prefix {
-                        left: auto;
-                        right: 48px;
-                    }
-                }
-            }
+        .#{$component}__leading-icon {
+            left: auto;
+            right: 12px;
+        }
 
-            &.#{$component}--with-trailing-icon {
-                .#{$component}__input {
-                    padding-right: 16px;
-                    padding-left: 48px;
-                }
+        .#{$component}__trailing-icon {
+            right: auto;
+            left: 12px;
+        }
 
-                &.#{$component}--with-suffix {
-                    .#{$component}__suffix {
-                        right: auto;
-                        left: 48px;
-                    }
-                }
-            }
+        .#{$component}__field .#{$component}__input {
+            padding-left: calc(var(--#{$component}-end, 16px) + var(--#{$component}-suffix-space, 0px));
+            padding-right: calc(var(--#{$component}-start, 16px) + var(--#{$component}-prefix-space, 0px));
         }
-    }
 
-    // ===== BESIDE A PREFIX OR A SUFFIX =====
-    // The input's padding in a field with a prefix or a suffix, from the two
-    // insets set above. Last, and one class heavier, so it holds over the
-    // variants' and the densities' paddings. A selector list, not :is():
-    // bundlers emit an :is() rule three times, with the -webkit-any() and
-    // -moz-any() forms.
-    &.#{$component}--with-prefix,
-    &.#{$component}--with-suffix {
-        .#{$component}__input {
-            padding-left: var(--#{$component}-text-start, 16px);
-            padding-right: var(--#{$component}-text-end, 16px);
+        // The outline's corners follow its segments
+        .#{$component}__outline-leading {
+            border-radius: 0 f.get-shape("extra-small")
+                f.get-shape("extra-small") 0;
         }
 
-        @include m.rtl {
-            .#{$component}__input {
-                padding-left: var(--#{$component}-text-end, 16px);
-                padding-right: var(--#{$component}-text-start, 16px);
-            }
+        .#{$component}__outline-trailing {
+            border-radius: f.get-shape("extra-small") 0 0
+                f.get-shape("extra-small");
         }
     }
 }
@@ -1184,7 +947,10 @@ $component: "#{base.$prefix}-text-field";
         cursor: default;
     }
 
-    @include m.rtl {
+    // The field's mirror, for the button: an ancestor's `dir`, or the
+    // field's --rtl inside a shadow root (FLO-562)
+    [dir='rtl'] &,
+    .#{$component}--rtl & {
         right: auto;
         left: 4px;
     }