material 3.0.0-next.0 → 3.0.0

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,42 @@ $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)};
+    // A hidden icon is hidden (#60): an author rule beats the user agent's
+    // `[hidden] { display: none }`, so the parts' `display: flex` above must
+    // yield to their own hidden state. Scoped to the two parts, not a global
+    // `[hidden]` rule. The padding an icon's presence reserved stays: M3 has
+    // no hidden-icon state ("Left/right padding with icons 12dp", "Padding
+    // between icons and text 16dp"), and Compose's icon slot keeps its room
+    // whatever it draws.
+    &__leading-icon[hidden],
+    &__trailing-icon[hidden] {
+        display: none;
     }
 
-    // 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 +389,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 +527,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 +622,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 +632,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 +641,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 +689,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 +844,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 +959,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;
     }

package/src/styles/elements/_button.scss

@@ -71,8 +71,24 @@ $containers: (
     flex: none;
   }
 
+  // Same 12dp icon-side inset as the component, logical so the reserved box
+  // follows direction. The host is in light DOM until upgrade.
   &[icon]:not([size]),
   &[icon][size='s'] {
-    padding-left: v.button('padding-icon');
+    padding-inline-start: v.button('padding-icon');
+  }
+
+  // Match the text button's leading-icon insets at its small sizes.
+  &[variant='text'][icon]:not([size]),
+  &[variant='text'][icon][size='xs'],
+  &[variant='text'][icon][size='s'] {
+    padding-inline: v.button('padding-horizontal-small') v.button('padding-s');
+  }
+
+  // Larger text buttons use the size's spacing on both sides of the icon.
+  @each $size in m, l, xl {
+    &[variant='text'][icon][size='#{$size}'] {
+      padding: 0 v.button('padding-#{$size}');
+    }
   }
 }

package/src/styles/elements/_checkbox.scss

@@ -35,4 +35,20 @@
     order: 1;
     margin-inline: 12px 0;
   }
+
+  // No slotted text, and no `label` attribute or an empty one (the element
+  // reads `label=""` as no label and builds none): the host is its own 48px
+  // target, and the box sits in its centre, as components/_checkbox.scss has it.
+  // A whitespace-only text node is not matched here: CSS cannot see it, so
+  // `<m-checkbox> </m-checkbox>` (or the tag with a line break inside) keeps
+  // the labelled layout before upgrade although the element then builds no
+  // label. Write the tag with nothing between its tags.
+  &:empty:is(:not([label]), [label='']) {
+    min-width: 48px;
+    justify-content: center;
+
+    &::before {
+      margin-inline: 0;
+    }
+  }
 }

package/src/styles/elements/_list.scss

@@ -1,15 +1,21 @@
 // src/styles/elements/_list.scss
 // <m-list> before upgrade: a row per <m-list-item>, which is drawn on upgrade.
+@use '../abstract/base' as base;
 @use '../abstract/mixins' as m;
 @use '../abstract/theme' as t;
+@use '../abstract/variables' as v;
 @use 'config' as c;
 
 // As components/_list.scss: 8px above and below the rows, one-line rows
 // 56px, two-line 72px, a 1px divider and the subheader's padded line.
+// The undefined host is the box the upgraded list will be, so it rounds by
+// the same property. After upgrade the host does not paint: `::part(list)`
+// is `.mtrl-list` and carries the radius.
 @include c.host('list') {
   display: block;
   padding: 8px 0;
   background-color: t.color('surface');
+  border-radius: var(--#{base.$prefix}-list-item-shape-outer, v.shape('large'));
 }
 
 @include c.declarations('list') {

package/src/styles/elements/_radios.scss

@@ -13,11 +13,12 @@
   }
 }
 
-// As components/_radios.scss: a 48px row, the 40px control and 8px before the text.
+// As components/_radios.scss: a row at least 48px, the 40px control and 8px
+// before the text. A wrapping label grows the row.
 @include c.declarations('radios') {
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  height: 48px;
+  min-height: 48px;
   padding-inline-start: 48px;
 }

package/src/styles/elements/_switch.scss

@@ -48,4 +48,56 @@
     color: t.color('on-surface-variant');
     @include m.typography('body-medium');
   }
+
+  // No slotted text and no label, so the supporting text is the only text and
+  // there is no label row above it: the spanning track is then the first row's
+  // only item, and an empty box synthesizes its baseline at its bottom edge —
+  // the track's bottom, 44px — so that was the host's baseline, 11px below the
+  // supporting text's own (33px) that the element's helper keeps after
+  // upgrade, and inline text beside the switch moved 11px at upgrade (the
+  // check's `[supporting-text no label]` rows). With no label above it the
+  // track belongs beside the text, in the row `[supporting-text]::before`
+  // places the text in: without it the first row keeps no height, the track's
+  // box does not move, and the text's baseline — the first row with one — is
+  // the host's before upgrade too. The labelled case keeps the span there: its
+  // label leads the first row and carries the baseline. An empty
+  // `supporting-text` is no supporting text (the element builds no helper from
+  // an empty value) and is the track box below, not this.
+  &:empty:is(:not([label]), [label=''])[supporting-text]:not([supporting-text='']) {
+    &::after {
+      grid-row: 2;
+    }
+  }
+
+  // No slotted text, and no `label` attribute or an empty one (the element
+  // reads `label=""` as no label and builds none), and no supporting text
+  // (`supporting-text` absent or empty: the element builds no helper from an
+  // empty value): the host is the 52 x 48 track box itself, as
+  // components/_switch.scss has it — the 12px gap stands between text (a
+  // label or supporting text) and the track, and there is none. A
+  // whitespace-only text node is not matched here: CSS cannot see it, so
+  // `<m-switch> </m-switch>` (or the tag with a line break inside) keeps the
+  // labelled layout before upgrade although the element then builds no label.
+  // Write the tag with nothing between its tags.
+  &:empty:is(:not([label]), [label='']):is(:not([supporting-text]), [supporting-text='']) {
+    column-gap: 0;
+    min-height: 48px;
+
+    // The container's baseline is its first row's first item's, and the track
+    // was the only item: an empty box synthesizes a baseline at its bottom
+    // edge, so the host's baseline was the track's bottom, 40px from the
+    // host's top — 16px below the 24px the element's own container has after
+    // upgrade (4px above and below the 32px track, centred: the centre). A
+    // zero-height item centred with the track carries that centre as the
+    // baseline before upgrade too; it is 0 x 0, so the host's box, the track's
+    // box and the zero gap do not change. `span 2` matches the empty
+    // `supporting-text`'s spanning `::after` above: with an item in the first
+    // row, that span gives the first row none of the track's 32px, so the item
+    // has to span with it to stay centred in the track.
+    &::before {
+      content: '';
+      grid-column: 1;
+      grid-row: 1 / span 2;
+    }
+  }
 }