@material/web 1.0.0-pre.2 → 1.0.0-pre.4

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';
-@use '../../motion/animation';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../tokens';
 @use './md-comp-outlined-field';
-@use './shared';
+// go/keep-sorted end
 
-$_animation-duration: 150ms;
+$_md-sys-motion: tokens.md-sys-motion-values();
 
 @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,12 +35,9 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__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);
-    border-end-start-radius: var(--_container-shape-end-start);
+  .outline {
     border-color: var(--_outline-color);
+    border-radius: inherit;
     color: var(--_outline-color); // Needed for Firefox HCM
     display: flex;
     // Allow events to target elements underneath the outline, such as icons.
@@ -51,10 +47,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 +62,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;
@@ -81,17 +77,17 @@ $_animation-duration: 150ms;
 
     &::after {
       opacity: 0;
-      transition: animation.standard(opacity, $_animation-duration);
+      transition: opacity map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
     }
+  }
 
-    .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 +100,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-end {
+  .outline-end {
     flex-grow: 1;
     margin-inline-start: calc(-1 * var(--_outline-label-padding));
 
@@ -119,7 +115,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__outline-notch {
+  .outline-notch {
     align-items: flex-start;
     border: inherit;
     display: flex;
@@ -128,14 +124,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;
@@ -147,7 +143,8 @@ $_animation-duration: 150ms;
       border-bottom: none;
       bottom: auto;
       transform: scaleX(1);
-      transition: animation.standard(transform, $_animation-duration);
+      transition: transform map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
     }
 
     // Note: no need to do any RTL flipping here. If RTLCSS flips this, it's also
@@ -161,27 +158,32 @@ $_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);
+    transition: opacity map.get($_md-sys-motion, 'duration-short3')
+      map.get($_md-sys-motion, 'easing-emphasized');
+  }
 
-    .md3-field--focused & {
-      opacity: 1;
-    }
+  .focused .outline-panel-active {
+    opacity: 1;
   }
 
-  .md3-field__label--floating {
-    // Center the label within the outline stroke
+  .outline-label {
+    display: flex;
+    max-width: 100%;
+    // Center the floating label within the outline stroke
     transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));
   }
 
@@ -198,101 +200,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,81 +3,63 @@
 // 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 {
-    display: inline-flex;
+  .field {
+    display: flex;
     flex: 1;
     flex-direction: column;
     // Allow the use of block/inline reflexive RTL properties without impacting
     // structure when languages change.
     writing-mode: horizontal-tb;
+    max-width: 100%; // Do not allow field to grow beyond explicitly set width
+  }
+
+  // A separate wrapper is needed around the container for the outline, whose
+  // floating label needs overflow: visible. The container itself needs
+  // overflow: hidden for resizability.
+  .container-overflow {
+    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);
+    border-end-start-radius: var(--_container-shape-end-start);
+    display: flex;
+    position: relative;
   }
 
-  .md3-field__container {
+  .container {
     align-items: center;
-    box-sizing: border-box;
+    border-radius: inherit;
     display: flex;
     flex: 1;
-    flex-basis: var(--_container-height);
+    min-width: min-content;
+    overflow: hidden;
     padding-top: var(--_container-padding-vertical);
     padding-bottom: var(--_container-padding-vertical);
     position: relative;
   }
 
-  .md3-field--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 {
-    min-width: 48px;
-  }
-
-  .md3-field--with-start {
-    .md3-field__start {
-      margin-inline-end: 4px;
-    }
+  .resizable .container {
+    resize: both;
   }
 
-  .md3-field--with-end {
-    .md3-field__end {
-      margin-inline-start: 4px;
-    }
+  .disabled {
+    pointer-events: none;
   }
 
   @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
-  );
-}

package/field/lib/_supporting-text.scss

@@ -3,81 +3,54 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use '../../sass/typography';
-
 @mixin styles() {
-  .md3-field__supporting-text {
+  .supporting-text {
     color: var(--_supporting-text-color);
     display: flex;
     justify-content: space-between;
     padding: 0 var(--_supporting-text-padding);
-
-    @include typography.theme-styles(
-      (
-        font: var(--_supporting-text-font),
-        tracking: var(--_supporting-text-tracking),
-        weight: var(--_supporting-text-weight),
-        size: var(--_supporting-text-size),
-        line-height: var(--_supporting-text-line-height),
-      )
-    );
+    font: var(--_supporting-text-type);
   }
 
-  .md3-field__supporting-text-start,
-  .md3-field__supporting-text-end {
+  .supporting-text-start,
+  .supporting-text-end {
     // Can't be an inline display element (<span>) for padding-top to work.
     display: flex;
+  }
 
+  .supporting-text-start ::slotted(:not(:empty)),
+  .supporting-text-end ::slotted(:not(:empty)) {
     // Add padding to slotted elements instead of the wrappers so that it does not
     // show when the supporting text is empty.
-    ::slotted(:not(:empty)) {
-      padding-top: var(--_supporting-text-padding-top);
-    }
+    padding-top: var(--_supporting-text-padding-top);
   }
 
-  .md3-field__supporting-text-end {
-    ::slotted(:not(:empty)) {
-      padding-inline-start: var(--_supporting-text-padding);
-    }
+  .supporting-text-end ::slotted(:not(:empty)) {
+    padding-inline-start: var(--_supporting-text-padding);
   }
 
-  :hover {
-    .md3-field__supporting-text {
-      color: var(--_hover-supporting-text-color);
-    }
+  :hover .supporting-text {
+    color: var(--_hover-supporting-text-color);
   }
 
-  .md3-field--focus {
-    .md3-field__supporting-text {
-      color: var(--_focus-supporting-text-color);
-    }
+  .focus .supporting-text {
+    color: var(--_focus-supporting-text-color);
   }
 
-  .md3-field--disabled {
-    .md3-field__supporting-text {
-      color: var(--_disabled-supporting-text-color);
-      opacity: var(--_disabled-supporting-text-opacity);
-    }
+  .disabled .supporting-text {
+    color: var(--_disabled-supporting-text-color);
+    opacity: var(--_disabled-supporting-text-opacity);
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__supporting-text {
-      color: var(--_error-supporting-text-color);
-    }
+  .error .supporting-text {
+    color: var(--_error-supporting-text-color);
+  }
 
-    &:hover {
-      .md3-field__supporting-text {
-        color: var(--_error-hover-supporting-text-color);
-      }
-    }
+  .error:hover .supporting-text {
+    color: var(--_error-hover-supporting-text-color);
+  }
 
-    &.md3-field--focus {
-      .md3-field__supporting-text {
-        color: var(--_error-focus-supporting-text-color);
-      }
-    }
+  .error.focus .supporting-text {
+    color: var(--_error-focus-supporting-text-color);
   }
 }

package/field/lib/field.d.ts

@@ -4,14 +4,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-/** @soyCompatible */
+/**
+ * A field component.
+ */
 export declare class Field extends LitElement {
     disabled: boolean;
     error: boolean;
     focused: boolean;
     label?: string;
     populated: boolean;
+    resizable: boolean;
     required: boolean;
     /**
      * Whether or not the field has leading content.
@@ -21,34 +23,16 @@ export declare class Field extends LitElement {
      * Whether or not the field has trailing content.
      */
     hasEnd: boolean;
-    protected isAnimating: boolean;
-    protected readonly labelAnimationSignal: import("../../motion/animation.js").AnimationSignal;
-    protected readonly floatingLabelEl: Promise<HTMLElement>;
-    protected readonly restingLabelEl: Promise<HTMLElement>;
-    /** @soyTemplate */
-    render(): TemplateResult;
-    /** @soyTemplate */
-    protected renderContainer(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
-    protected renderContainerContents(): TemplateResult;
-    /** @soyTemplate */
-    protected renderMiddleContents(): TemplateResult;
-    /** @soyTemplate */
-    protected renderFloatingLabel(): TemplateResult;
-    /** @soyTemplate */
-    protected renderRestingLabel(): TemplateResult;
-    /** @soyTemplate */
-    protected renderLabelText(): string;
-    /** @soyTemplate */
-    protected renderSupportingText(): TemplateResult;
+    private isAnimating;
+    private labelAnimation?;
+    private readonly floatingLabelEl;
+    private readonly restingLabelEl;
     protected update(props: PropertyValues<Field>): void;
-    protected animateLabelIfNeeded({ wasFocused, wasPopulated }: {
-        wasFocused?: boolean;
-        wasPopulated?: boolean;
-    }): Promise<void>;
-    protected getLabelKeyframes(): Promise<{
-        transform: string;
-    }[]>;
+    protected render(): TemplateResult<1>;
+    protected renderBackground?(): TemplateResult;
+    protected renderIndicator?(): TemplateResult;
+    protected renderOutline?(floatingLabel: TemplateResult): TemplateResult;
+    private renderLabel;
+    private animateLabelIfNeeded;
+    private getLabelKeyframes;
 }