@material/web 1.0.0-pre.1 → 1.0.0-pre.3

package/field/lib/_label.scss

@@ -3,13 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@use '../../sass/typography';
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin styles() {
-  .md3-field__label {
+  .label {
     color: var(--_label-text-color);
     overflow: hidden;
     max-width: 100%;
@@ -26,87 +21,55 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     z-index: 1;
-
-    @include typography.theme-styles(
-      (
-        font: var(--_label-text-font),
-        tracking: var(--_label-text-tracking),
-        weight: var(--_label-text-weight),
-      )
-    );
+    font: var(--_label-text-type);
   }
 
-  .md3-field__label--resting {
+  .label.resting {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     /*rtl:ignore*/
     transform-origin: top left;
-
-    @include typography.theme-styles(
-      (
-        size: var(--_label-text-size),
-        line-height: var(--_label-text-line-height),
-      )
-    );
   }
 
-  .md3-field__label--floating {
-    @include typography.theme-styles(
-      (
-        size: var(--_label-text-populated-size),
-        line-height: var(--_label-text-populated-line-height),
-      )
-    );
+  .label.floating {
+    font-size: var(--_label-text-populated-size);
+    line-height: var(--_label-text-populated-line-height);
   }
 
-  .md3-field__label--hidden {
+  .label.hidden {
     opacity: 0;
   }
 
-  .md3-field--no-label {
-    .md3-field__label {
-      display: none;
-    }
+  .no-label .label {
+    display: none;
   }
 
-  :hover {
-    .md3-field__label {
-      color: var(--_hover-label-text-color);
-    }
+  :hover .label {
+    color: var(--_hover-label-text-color);
   }
 
-  .md3-field--focused {
-    .md3-field__label {
-      color: var(--_focus-label-text-color);
-    }
+  .focused .label {
+    color: var(--_focus-label-text-color);
   }
 
-  .md3-field--disabled {
-    .md3-field__label {
-      color: var(--_disabled-label-text-color);
+  .disabled .label {
+    color: var(--_disabled-label-text-color);
+  }
 
-      &:not(.md3-field__label--hidden) {
-        opacity: var(--_disabled-label-text-opacity);
-      }
-    }
+  .disabled .label:not(.hidden) {
+    opacity: var(--_disabled-label-text-opacity);
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__label {
-      color: var(--_error-label-text-color);
-    }
+  .error .label {
+    color: var(--_error-label-text-color);
+  }
 
-    &:hover {
-      .md3-field__label {
-        color: var(--_error-hover-label-text-color);
-      }
-    }
+  .error:hover .label {
+    color: var(--_error-hover-label-text-color);
+  }
 
-    &.md3-field--focused {
-      .md3-field__label {
-        color: var(--_error-focus-label-text-color);
-      }
-    }
+  .error.focused .label {
+    color: var(--_error-focus-label-text-color);
   }
 }

package/field/lib/_md-comp-filled-field.scss

@@ -3,8 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../tokens';
+// go/keep-sorted end
 
 $_default-deps: (
   md-sys-color: tokens.md-sys-color-values-light(),
@@ -41,8 +45,16 @@ $_default-deps: (
     input-text-placeholder-color,
     input-text-prefix-color,
     input-text-suffix-color,
-    label-text-type,
-    supporting-text-type
+    label-text-font,
+    label-text-line-height,
+    label-text-size,
+    label-text-tracking,
+    label-text-weight,
+    supporting-text-font,
+    supporting-text-line-height,
+    supporting-text-size,
+    supporting-text-tracking,
+    supporting-text-weight
   );
 
   // Add missing tokens.
@@ -50,7 +62,7 @@ $_default-deps: (
     $values,
     (
       container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
-      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
+      container-padding-vertical: if($exclude-hardcoded-values, null, 16px),
       content-color: map.get($text-field-values, input-text-color),
       disabled-content-color:
         map.get($text-field-values, disabled-input-text-color),
@@ -65,6 +77,8 @@ $_default-deps: (
       hover-content-color: map.get($text-field-values, hover-input-text-color),
       supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
       supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
+      with-label-container-padding-vertical:
+        if($exclude-hardcoded-values, null, 8px),
     )
   );
 

package/field/lib/_md-comp-outlined-field.scss

@@ -3,8 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../tokens';
+// go/keep-sorted end
 
 $_default-deps: (
   md-sys-color: tokens.md-sys-color-values-light(),
@@ -18,8 +22,7 @@ $_default-deps: (
     $deps,
     $exclude-hardcoded-values
   );
-  // TODO(b/203778922): Remove *-type when type composite tokens are removed
-  // Remove unused tokens.
+
   $values: map.remove(
     $text-field-values,
     caret-color,
@@ -41,8 +44,16 @@ $_default-deps: (
     input-text-placeholder-color,
     input-text-prefix-color,
     input-text-suffix-color,
-    label-text-type,
-    supporting-text-type
+    label-text-font,
+    label-text-line-height,
+    label-text-size,
+    label-text-tracking,
+    label-text-weight,
+    supporting-text-font,
+    supporting-text-line-height,
+    supporting-text-size,
+    supporting-text-tracking,
+    supporting-text-weight
   );
 
   // Add missing tokens.
@@ -50,7 +61,7 @@ $_default-deps: (
     $values,
     (
       container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
-      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
+      container-padding-vertical: if($exclude-hardcoded-values, null, 16px),
       content-color: map.get($text-field-values, input-text-color),
       disabled-content-color:
         map.get($text-field-values, disabled-input-text-color),

package/field/lib/_outlined-field.scss

@@ -3,32 +3,31 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../motion/animation';
+@use '../../sass/shape';
 @use '../../sass/theme';
 @use './md-comp-outlined-field';
-@use './shared';
+// go/keep-sorted end
 
 $_animation-duration: 150ms;
 
 @mixin theme($tokens) {
   $reference: md-comp-outlined-field.values();
-  // Add resolved tokens so that $theme may specify them.
-  $reference: map.merge($reference, shared.resolve-tokens($reference));
   $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, outlined-field);
+  $tokens: theme.create-theme-vars($tokens, 'outlined-field');
+  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
   $tokens: md-comp-outlined-field.values();
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, outlined-field);
+  $tokens: theme.create-theme-vars($tokens, 'outlined-field');
+  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
   :host {
     @each $token, $value in $tokens {
@@ -36,7 +35,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline {
+  .outline {
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-end-radius: var(--_container-shape-end-end);
@@ -51,10 +50,10 @@ $_animation-duration: 150ms;
     width: 100%;
   }
 
-  .md3-field__outline-start,
-  .md3-field__outline-panel-inactive,
-  .md3-field__outline-panel-active,
-  .md3-field__outline-end {
+  .outline-start,
+  .outline-panel-inactive,
+  .outline-panel-active,
+  .outline-end {
     // ::before is inactive border, ::after is active border. Borders are
     // absolutely positioned within their elements.
     &::before,
@@ -66,8 +65,8 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-start,
-  .md3-field__outline-end {
+  .outline-start,
+  .outline-end {
     border: inherit;
     border-radius: inherit;
     box-sizing: border-box;
@@ -83,15 +82,14 @@ $_animation-duration: 150ms;
       opacity: 0;
       transition: animation.standard(opacity, $_animation-duration);
     }
+  }
 
-    .md3-field--focused & {
-      &::after {
-        opacity: 1;
-      }
-    }
+  .focused .outline-start::after,
+  .focused .outline-end::after {
+    opacity: 1;
   }
 
-  .md3-field__outline-start {
+  .outline-start {
     &::before,
     &::after {
       border-inline-start-style: solid;
@@ -104,7 +102,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-end {
+  .outline-end {
     flex-grow: 1;
     margin-inline-start: calc(-1 * var(--_outline-label-padding));
 
@@ -119,7 +117,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-notch {
+  .outline-notch {
     align-items: flex-start;
     border: inherit;
     display: flex;
@@ -128,14 +126,14 @@ $_animation-duration: 150ms;
     max-width: calc(100% - 2 * var(--_container-padding-horizontal));
     padding: 0 var(--_outline-label-padding);
     position: relative;
+  }
 
-    .md3-field--no-label & {
-      display: none;
-    }
+  .no-label .outline-notch {
+    display: none;
   }
 
-  .md3-field__outline-panel-inactive,
-  .md3-field__outline-panel-active {
+  .outline-panel-inactive,
+  .outline-panel-active {
     border: inherit;
     border-bottom-style: solid;
     inset: 0;
@@ -161,26 +159,28 @@ $_animation-duration: 150ms;
       left: 50%;
       transform-origin: top right;
     }
+  }
 
-    .md3-field--populated &,
-    .md3-field--focused & {
-      &::before,
-      &::after {
-        transform: scaleX(0);
-      }
+  .populated .outline-panel-inactive,
+  .populated .outline-panel-active,
+  .focused .outline-panel-inactive,
+  .focused .outline-panel-active {
+    &::before,
+    &::after {
+      transform: scaleX(0);
     }
   }
 
-  .md3-field__outline-panel-active {
+  .outline-panel-active {
     opacity: 0;
     transition: animation.standard(opacity, $_animation-duration);
+  }
 
-    .md3-field--focused & {
-      opacity: 1;
-    }
+  .focused .outline-panel-active {
+    opacity: 1;
   }
 
-  .md3-field__label--floating {
+  .label.floating {
     // Center the label within the outline stroke
     transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));
   }
@@ -198,101 +198,87 @@ $_animation-duration: 150ms;
     var(--_container-shape-end-end)
   );
 
-  .md3-field__outline-start,
-  .md3-field:not(.md3-field--with-start) .md3-field__start {
+  .outline-start,
+  .field:not(.with-start) .start {
     padding-inline-start: max(
       var(--_container-padding-horizontal),
       $shape-start + var(--_outline-label-padding)
     );
   }
 
-  .md3-field:not(.md3-field--with-end) {
-    .md3-field__end {
-      padding-inline-end: max(var(--_container-padding-horizontal), $shape-end);
-    }
+  .field:not(.with-end) .end {
+    padding-inline-end: max(var(--_container-padding-horizontal), $shape-end);
   }
 
-  .md3-field__outline-start::before,
-  .md3-field__outline-end::before,
-  .md3-field__outline-panel-inactive,
-  .md3-field__outline-panel-inactive::before,
-  .md3-field__outline-panel-inactive::after {
+  .outline-start::before,
+  .outline-end::before,
+  .outline-panel-inactive,
+  .outline-panel-inactive::before,
+  .outline-panel-inactive::after {
     border-width: var(--_outline-width);
   }
 
   // States
 
-  :hover {
-    .md3-field__outline {
-      border-color: var(--_hover-outline-color);
-      color: var(--_hover-outline-color); // Needed for Firefox HCM
-    }
+  :hover .outline {
+    border-color: var(--_hover-outline-color);
+    color: var(--_hover-outline-color); // Needed for Firefox HCM
+  }
 
-    .md3-field__outline-start::before,
-    .md3-field__outline-end::before,
-    .md3-field__outline-panel-inactive,
-    .md3-field__outline-panel-inactive::before,
-    .md3-field__outline-panel-inactive::after {
-      border-width: var(--_hover-outline-width);
-    }
+  :hover .outline-start::before,
+  :hover .outline-end::before,
+  :hover .outline-panel-inactive,
+  :hover .outline-panel-inactive::before,
+  :hover .outline-panel-inactive::after {
+    border-width: var(--_hover-outline-width);
   }
 
-  .md3-field--focused {
-    .md3-field__outline {
-      border-color: var(--_focus-outline-color);
-      color: var(--_focus-outline-color); // Needed for Firefox HCM
-    }
+  .focused .outline {
+    border-color: var(--_focus-outline-color);
+    color: var(--_focus-outline-color); // Needed for Firefox HCM
   }
 
-  .md3-field__outline-start::after,
-  .md3-field__outline-end::after,
-  .md3-field__outline-panel-active,
-  .md3-field__outline-panel-active::before,
-  .md3-field__outline-panel-active::after {
+  .outline-start::after,
+  .outline-end::after,
+  .outline-panel-active,
+  .outline-panel-active::before,
+  .outline-panel-active::after {
     border-width: var(--_focus-outline-width);
   }
 
-  .md3-field--disabled {
-    .md3-field__outline {
-      border-color: var(--_disabled-outline-color);
-      color: var(--_disabled-outline-color); // Needed for Firefox HCM
-    }
+  .disabled .outline {
+    border-color: var(--_disabled-outline-color);
+    color: var(--_disabled-outline-color); // Needed for Firefox HCM
+  }
 
-    .md3-field__outline-start,
-    .md3-field__outline-end,
-    .md3-field__outline-panel-inactive {
-      opacity: var(--_disabled-outline-opacity);
-    }
+  .disabled .outline-start,
+  .disabled .outline-end,
+  .disabled .outline-panel-inactive {
+    opacity: var(--_disabled-outline-opacity);
+  }
 
-    .md3-field__outline-start::before,
-    .md3-field__outline-end::before,
-    .md3-field__outline-panel-inactive,
-    .md3-field__outline-panel-inactive::before,
-    .md3-field__outline-panel-inactive::after {
-      border-width: var(--_disabled-outline-width);
-    }
+  .disabled .outline-start::before,
+  .disabled .outline-end::before,
+  .disabled .outline-panel-inactive,
+  .disabled .outline-panel-inactive::before,
+  .disabled .outline-panel-inactive::after {
+    border-width: var(--_disabled-outline-width);
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__outline {
-      border-color: var(--_error-outline-color);
-      color: var(--_error-outline-color); // Needed for Firefox HCM
-    }
+  .error .outline {
+    border-color: var(--_error-outline-color);
+    color: var(--_error-outline-color); // Needed for Firefox HCM
+  }
 
-    &:hover {
-      .md3-field__outline {
-        border-color: var(--_error-hover-outline-color);
-        // Needed for Firefox HCM
-        color: var(--_error-hover-outline-color);
-      }
-    }
+  .error:hover .outline {
+    border-color: var(--_error-hover-outline-color);
+    // Needed for Firefox HCM
+    color: var(--_error-hover-outline-color);
+  }
 
-    &.md3-field--focused {
-      .md3-field__outline {
-        border-color: var(--_error-focus-outline-color);
-        // Needed for Firefox HCM
-        color: var(--_error-focus-outline-color);
-      }
-    }
+  .error.focused .outline {
+    border-color: var(--_error-focus-outline-color);
+    // Needed for Firefox HCM
+    color: var(--_error-focus-outline-color);
   }
 }

package/field/lib/_shared.scss

@@ -3,23 +3,21 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
 @use 'sass:map';
-@use '../../sass/resolvers';
-@use '../../sass/shape';
-@use '../../sass/typography';
+// go/keep-sorted end
+// go/keep-sorted start
 @use './content';
 @use './label';
 @use './supporting-text';
+// go/keep-sorted end
 
 @mixin styles() {
   :host {
     display: inline-flex;
   }
 
-  .md3-field {
+  .field {
     display: inline-flex;
     flex: 1;
     flex-direction: column;
@@ -28,54 +26,36 @@
     writing-mode: horizontal-tb;
   }
 
-  .md3-field__container {
+  .container {
     align-items: center;
     box-sizing: border-box;
     display: flex;
     flex: 1;
     flex-basis: var(--_container-height);
+    padding-top: var(--_container-padding-vertical);
+    padding-bottom: var(--_container-padding-vertical);
     position: relative;
   }
 
-  .md3-field--disabled {
+  .disabled {
     pointer-events: none;
   }
 
   // TODO(b/239188049): remove when layout tokens are ready
-  .md3-field--with-start .md3-field__start,
-  .md3-field--with-end .md3-field__end {
+  .with-start .start,
+  .with-end .end {
     min-width: 48px;
   }
 
-  .md3-field--with-start {
-    .md3-field__start {
-      margin-inline-end: 4px;
-    }
+  .with-start .start {
+    margin-inline-end: 4px;
   }
 
-  .md3-field--with-end {
-    .md3-field__end {
-      margin-inline-start: 4px;
-    }
+  .with-end .end {
+    margin-inline-start: 4px;
   }
 
   @include content.styles;
   @include label.styles;
   @include supporting-text.styles;
 }
-
-@function resolve-tokens($tokens) {
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, typography),
-    label-text,
-    label-text-populated,
-    supporting-text
-  );
-
-  @return shape.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, shape),
-    container-shape
-  );
-}