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

package/LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2018-2023 Google, Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -25,36 +25,36 @@ changes.
 
 **Stable** components are reviewed, documented, and API complete.
 
--   🔴 Not started
+-   ❌ Not started
 -   🟡 In progress
--   🟢 Complete
+-   ✅ Complete
 
 ### 1.0 Components
 
 Component                     | Alpha | Beta | Stable
 ----------------------------- | :---: | :--: | :----:
-Button                        | 🟢     | 🟢    | 🔴
-FAB                           | 🟢     | 🔴    | 🔴
-Icon button                   | 🟢     | 🔴    | 🔴
-Checkbox                      | 🟢     | 🟢    | 🔴
-Chips                         | 🔴     | 🔴    | 🔴
-Dialog                        | 🟢     | 🟢    | 🔴
-Divider                       | 🟢     | 🟢    | 🟡
-Elevation                     | 🟢     | 🔴    | 🔴
-Focus ring                    | 🟢     | 🔴    | 🔴
-Field                         | 🟢     | 🟢    | 🔴
-Icon                          | 🟢     | 🔴    | 🔴
-List                          | 🟢     | 🟢    | 🟡
-Menu                          | 🟢     | 🟢    | 🟡
-Progress indicator (circular) | 🔴     | 🔴    | 🔴
-Progress indicator (linear)   | 🔴     | 🔴    | 🔴
-Radio button                  | 🟢     | 🟢    | 🔴
-Ripple                        | 🟢     | 🟢    | 🟡
-Select                        | 🟡     | 🔴    | 🔴
-Slider                        | 🟢     | 🟢    | 🔴
-Switch                        | 🟢     | 🟢    | 🔴
-Tabs                          | 🔴     | 🔴    | 🔴
-Text field                    | 🟢     | 🟢    | 🟡
+Button                        | ✅     | ✅    | ❌
+FAB                           | ✅     | ❌    | ❌
+Icon button                   | ✅     | ✅    | ❌
+Checkbox                      | ✅     | ✅    | ❌
+Chips                         | ❌     | ❌    | ❌
+Dialog                        | ✅     | ✅    | ❌
+Divider                       | ✅     | ✅    | 🟡
+Elevation                     | ✅     | ❌    | ❌
+Focus ring                    | ✅     | ❌    | ❌
+Field                         | ✅     | ✅    | 🟡
+Icon                          | ✅     | ✅    | ❌
+List                          | ✅     | 🟡    | 🟡
+Menu                          | ✅     | 🟡    | 🟡
+Progress indicator (circular) | ❌     | ❌    | ❌
+Progress indicator (linear)   | ❌     | ❌    | ❌
+Radio button                  | ✅     | ✅    | ❌
+Ripple                        | ✅     | ✅    | 🟡
+Select                        | 🟡     | ❌    | ❌
+Slider                        | ✅     | ✅    | ❌
+Switch                        | ✅     | ✅    | ❌
+Tabs                          | ❌     | ❌    | ❌
+Text field                    | ✅     | ✅    | 🟡
 
 ### 1.1+ Components
 
@@ -62,20 +62,20 @@ These components are planned for release after 1.0.
 
 Component         | Alpha | Beta | Stable
 ----------------- | :---: | :--: | :----:
-Autocomplete      | 🟡     | 🔴    | 🔴
-Badge             | 🟡     | 🔴    | 🔴
-Banner            | 🔴     | 🔴    | 🔴
-Bottom app bar    | 🔴     | 🔴    | 🔴
-Bottom sheet      | 🔴     | 🔴    | 🔴
-Segmented button  | 🟡     | 🔴    | 🔴
-Card              | 🔴     | 🔴    | 🔴
-Data table        | 🔴     | 🔴    | 🔴
-Date picker       | 🔴     | 🔴    | 🔴
-Navigation bar    | 🟡     | 🔴    | 🔴
-Navigation drawer | 🟡     | 🔴    | 🔴
-Navigation rail   | 🔴     | 🔴    | 🔴
-Search            | 🔴     | 🔴    | 🔴
-Snackbar          | 🔴     | 🔴    | 🔴
-Time picker       | 🔴     | 🔴    | 🔴
-Tooltip           | 🔴     | 🔴    | 🔴
-Top app bar       | 🔴     | 🔴    | 🔴
+Autocomplete      | 🟡     | ❌    | ❌
+Badge             | 🟡     | ❌    | ❌
+Banner            | ❌     | ❌    | ❌
+Bottom app bar    | ❌     | ❌    | ❌
+Bottom sheet      | ❌     | ❌    | ❌
+Segmented button  | 🟡     | ❌    | ❌
+Card              | ❌     | ❌    | ❌
+Data table        | ❌     | ❌    | ❌
+Date picker       | ❌     | ❌    | ❌
+Navigation bar    | 🟡     | ❌    | ❌
+Navigation drawer | 🟡     | ❌    | ❌
+Navigation rail   | ❌     | ❌    | ❌
+Search            | ❌     | ❌    | ❌
+Snackbar          | ❌     | ❌    | ❌
+Time picker       | ❌     | ❌    | ❌
+Tooltip           | ❌     | ❌    | ❌
+Top app bar       | ❌     | ❌    | ❌

package/controller/form-controller.d.ts

@@ -62,5 +62,5 @@ export declare class FormController implements ReactiveController {
     constructor(element: FormElement);
     hostConnected(): void;
     hostDisconnected(): void;
-    private formDataListener;
+    private readonly formDataListener;
 }

package/controller/form-controller.js

@@ -3,8 +3,6 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-import { bound } from '../decorators/bound.js';
 import { isFormAssociated } from './form-associated.js';
 import { shimLabelSupport, SUPPORTS_FACE_LABEL } from './shim-label-activation.js';
 /**
@@ -30,6 +28,27 @@ export class FormController {
      */
     constructor(element) {
         this.element = element;
+        this.formDataListener = (event) => {
+            if (this.element.disabled) {
+                // Check for truthiness since some elements may not support disabling.
+                return;
+            }
+            const value = this.element[getFormValue]();
+            // If given a `FormData` instance, append all values to the form. This
+            // allows elements to customize what is added beyond a single name/value
+            // pair.
+            if (value instanceof FormData) {
+                for (const [key, dataValue] of value) {
+                    event.formData.append(key, dataValue);
+                }
+                return;
+            }
+            // Do not associate the value with the form if there is no value or no name.
+            if (value === null || !this.element.name) {
+                return;
+            }
+            event.formData.append(this.element.name, value);
+        };
     }
     hostConnected() {
         // If the component internals are not in Shadow DOM, subscribing to form
@@ -51,32 +70,5 @@ export class FormController {
     hostDisconnected() {
         this.form?.removeEventListener('formdata', this.formDataListener);
     }
-    formDataListener(event) {
-        if (this.element.disabled) {
-            // Check for truthiness since some elements may not support disabling.
-            return;
-        }
-        const value = this.element[getFormValue]();
-        // If given a `FormData` instance, append all values to the form. This
-        // allows elements to customize what is added beyond a single name/value
-        // pair.
-        if (value instanceof FormData) {
-            for (const [key, dataValue] of value) {
-                event.formData.append(key, dataValue);
-            }
-            return;
-        }
-        // Do not associate the value with the form if there is no value or no name.
-        if (value === null || !this.element.name) {
-            return;
-        }
-        event.formData.append(this.element.name, value);
-    }
 }
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [FormDataEvent]),
-    __metadata("design:returntype", void 0)
-], FormController.prototype, "formDataListener", null);
 //# sourceMappingURL=form-controller.js.map

package/controller/form-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-controller.js","sourceRoot":"","sources":["form-controller.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAIH,OAAO,EAAC,KAAK,EAAC,MAAM,wBAAwB,CAAC;AAE7C,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAC;AAkCjF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,OAAO,cAAc;IAGzB;;;;OAIG;IACH,YAA6B,OAAoB;QAApB,YAAO,GAAP,OAAO,CAAa;IAAG,CAAC;IAErD,aAAa;QACX,wEAAwE;QACxE,0EAA0E;QAC1E,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE;YACtD,OAAO;SACR;QAED,wEAAwE;QACxE,iCAAiC;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAE/D,uEAAuE;QACvE,2CAA2C;QAC3C,IAAI,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC1D,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAA2B,CAAC,CAAC;SACvE;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;IAGO,gBAAgB,CAAC,KAAoB;QAC3C,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACzB,sEAAsE;YACtE,OAAO;SACR;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QAC3C,sEAAsE;QACtE,wEAAwE;QACxE,QAAQ;QACR,IAAI,KAAK,YAAY,QAAQ,EAAE;YAC7B,KAAK,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,KAAK,EAAE;gBACpC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;aACvC;YACD,OAAO;SACR;QAED,4EAA4E;QAC5E,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACxC,OAAO;SACR;QAED,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;CACF;AAzBC;IAAC,KAAK;;qCAC0B,aAAa;;sDAuB5C","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {bound} from '../decorators/bound.js';\n\nimport {isFormAssociated} from './form-associated.js';\nimport {shimLabelSupport, SUPPORTS_FACE_LABEL} from './shim-label-activation.js';\n\ndeclare global {\n  interface Window {\n    ShadyDOM?: {inUse: boolean;};\n  }\n}\n\n/**\n * An element that `FormController` may use.\n */\nexport interface FormElement extends ReactiveControllerHost, HTMLElement {\n  /**\n   * The `<form>` that this element is associated with.\n   */\n  readonly form: HTMLFormElement|null;\n  /**\n   * The name of the element in the form. This property should reflect to a\n   * `name` attribute.\n   */\n  name: string;\n  /**\n   * Whether or not this element is disabled. If present, this property should\n   * reflect to a `disabled` attribute.\n   */\n  disabled?: boolean;\n  /**\n   * A function that retrieves the current form value for this element.\n   *\n   * @return The current form value, or `null` if there is no value.\n   */\n  [getFormValue](): string|File|FormData|null;\n}\n\n/**\n * A unique symbol key for `FormController` elements to implement their\n * `getFormValue()` function.\n */\nexport const getFormValue = Symbol('getFormValue');\n\n/**\n * A `ReactiveController` that adds `<form>` support to an element.\n *\n * Elements should also set `static formAssociated = true` which\n * provides platform support for forms. When an element is form associated,\n * it can be activated via clicks on associated label elements. It is the\n * responsibility of the element to process this click and perform any necessary\n * activation tasks, for example focusing and clicking on an internal element.\n *\n */\nexport class FormController implements ReactiveController {\n  private form?: HTMLFormElement|null;\n\n  /**\n   * Creates a new `FormController` for the given element.\n   *\n   * @param element The element to add `<form>` support to.\n   */\n  constructor(private readonly element: FormElement) {}\n\n  hostConnected() {\n    // If the component internals are not in Shadow DOM, subscribing to form\n    // data events could lead to duplicated data, which may not work correctly\n    // on the server side.\n    if (!this.element.shadowRoot || window.ShadyDOM?.inUse) {\n      return;\n    }\n\n    // Preserve a reference to the form, since on hostDisconnected it may be\n    // null if the child was removed.\n    this.form = this.element.form;\n    this.form?.addEventListener('formdata', this.formDataListener);\n\n    // TODO(b/261871554) Label activation shim is currently only needed for\n    // Safari. Remove it when no longer needed.\n    if (isFormAssociated(this.element) && !SUPPORTS_FACE_LABEL) {\n      shimLabelSupport(this.element.getRootNode() as Document | ShadowRoot);\n    }\n  }\n\n  hostDisconnected() {\n    this.form?.removeEventListener('formdata', this.formDataListener);\n  }\n\n  @bound\n  private formDataListener(event: FormDataEvent) {\n    if (this.element.disabled) {\n      // Check for truthiness since some elements may not support disabling.\n      return;\n    }\n\n    const value = this.element[getFormValue]();\n    // If given a `FormData` instance, append all values to the form. This\n    // allows elements to customize what is added beyond a single name/value\n    // pair.\n    if (value instanceof FormData) {\n      for (const [key, dataValue] of value) {\n        event.formData.append(key, dataValue);\n      }\n      return;\n    }\n\n    // Do not associate the value with the form if there is no value or no name.\n    if (value === null || !this.element.name) {\n      return;\n    }\n\n    event.formData.append(this.element.name, value);\n  }\n}\n"]}
+{"version":3,"file":"form-controller.js","sourceRoot":"","sources":["form-controller.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAC;AAkCjF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,OAAO,cAAc;IAGzB;;;;OAIG;IACH,YAA6B,OAAoB;QAApB,YAAO,GAAP,OAAO,CAAa;QA0BhC,qBAAgB,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC3D,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;gBACzB,sEAAsE;gBACtE,OAAO;aACR;YAED,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YAC3C,sEAAsE;YACtE,wEAAwE;YACxE,QAAQ;YACR,IAAI,KAAK,YAAY,QAAQ,EAAE;gBAC7B,KAAK,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,KAAK,EAAE;oBACpC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;iBACvC;gBACD,OAAO;aACR;YAED,4EAA4E;YAC5E,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;gBACxC,OAAO;aACR;YAED,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAClD,CAAC,CAAC;IAjDkD,CAAC;IAErD,aAAa;QACX,wEAAwE;QACxE,0EAA0E;QAC1E,sBAAsB;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE;YACtD,OAAO;SACR;QAED,wEAAwE;QACxE,iCAAiC;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAE/D,uEAAuE;QACvE,2CAA2C;QAC3C,IAAI,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC1D,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAA2B,CAAC,CAAC;SACvE;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;CA0BF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {isFormAssociated} from './form-associated.js';\nimport {shimLabelSupport, SUPPORTS_FACE_LABEL} from './shim-label-activation.js';\n\ndeclare global {\n  interface Window {\n    ShadyDOM?: {inUse: boolean;};\n  }\n}\n\n/**\n * An element that `FormController` may use.\n */\nexport interface FormElement extends ReactiveControllerHost, HTMLElement {\n  /**\n   * The `<form>` that this element is associated with.\n   */\n  readonly form: HTMLFormElement|null;\n  /**\n   * The name of the element in the form. This property should reflect to a\n   * `name` attribute.\n   */\n  name: string;\n  /**\n   * Whether or not this element is disabled. If present, this property should\n   * reflect to a `disabled` attribute.\n   */\n  disabled?: boolean;\n  /**\n   * A function that retrieves the current form value for this element.\n   *\n   * @return The current form value, or `null` if there is no value.\n   */\n  [getFormValue](): string|File|FormData|null;\n}\n\n/**\n * A unique symbol key for `FormController` elements to implement their\n * `getFormValue()` function.\n */\nexport const getFormValue = Symbol('getFormValue');\n\n/**\n * A `ReactiveController` that adds `<form>` support to an element.\n *\n * Elements should also set `static formAssociated = true` which\n * provides platform support for forms. When an element is form associated,\n * it can be activated via clicks on associated label elements. It is the\n * responsibility of the element to process this click and perform any necessary\n * activation tasks, for example focusing and clicking on an internal element.\n *\n */\nexport class FormController implements ReactiveController {\n  private form?: HTMLFormElement|null;\n\n  /**\n   * Creates a new `FormController` for the given element.\n   *\n   * @param element The element to add `<form>` support to.\n   */\n  constructor(private readonly element: FormElement) {}\n\n  hostConnected() {\n    // If the component internals are not in Shadow DOM, subscribing to form\n    // data events could lead to duplicated data, which may not work correctly\n    // on the server side.\n    if (!this.element.shadowRoot || window.ShadyDOM?.inUse) {\n      return;\n    }\n\n    // Preserve a reference to the form, since on hostDisconnected it may be\n    // null if the child was removed.\n    this.form = this.element.form;\n    this.form?.addEventListener('formdata', this.formDataListener);\n\n    // TODO(b/261871554) Label activation shim is currently only needed for\n    // Safari. Remove it when no longer needed.\n    if (isFormAssociated(this.element) && !SUPPORTS_FACE_LABEL) {\n      shimLabelSupport(this.element.getRootNode() as Document | ShadowRoot);\n    }\n  }\n\n  hostDisconnected() {\n    this.form?.removeEventListener('formdata', this.formDataListener);\n  }\n\n  private readonly formDataListener = (event: FormDataEvent) => {\n    if (this.element.disabled) {\n      // Check for truthiness since some elements may not support disabling.\n      return;\n    }\n\n    const value = this.element[getFormValue]();\n    // If given a `FormData` instance, append all values to the form. This\n    // allows elements to customize what is added beyond a single name/value\n    // pair.\n    if (value instanceof FormData) {\n      for (const [key, dataValue] of value) {\n        event.formData.append(key, dataValue);\n      }\n      return;\n    }\n\n    // Do not associate the value with the form if there is no value or no name.\n    if (value === null || !this.element.name) {\n      return;\n    }\n\n    event.formData.append(this.element.name, value);\n  };\n}\n"]}

package/field/lib/_content.scss

@@ -4,14 +4,16 @@
 //
 
 // go/keep-sorted start
+@use 'sass:map';
 @use 'sass:math';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../motion/animation';
+@use '../../tokens';
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
 // Duration of the label animation.
-$_label-duration: 150ms;
+$_label-duration: map.get($_md-sys-motion, 'duration-short3');
 // Duration of the content's visibility animation.
 $_visible-duration: math.round(math.div($_label-duration * 5, 9));
 // Short delay when entering (focusing/populating) so that the label may move
@@ -23,7 +25,6 @@ $_enter-delay: $_label-duration - $_visible-duration;
   .middle,
   .end {
     display: flex;
-    align-items: center;
     box-sizing: border-box;
     height: 100%;
     // Relative position for absolutely positioned labels (to avoid interfering
@@ -31,12 +32,36 @@ $_enter-delay: $_label-duration - $_visible-duration;
     position: relative;
   }
 
+  .start {
+    color: var(--_leading-content-color);
+  }
+
+  .end {
+    color: var(--_trailing-content-color);
+  }
+
   .start,
   .end {
+    align-items: center;
     justify-content: center;
   }
 
+  // TODO(b/239188049): remove when layout tokens are ready
+  .with-start .start,
+  .with-end .end {
+    min-width: 48px;
+  }
+
+  .with-start .start {
+    margin-inline-end: 4px;
+  }
+
+  .with-end .end {
+    margin-inline-start: 4px;
+  }
+
   .middle {
+    align-items: stretch;
     // The container of the field aligns sections by "center". Only the middle
     // section opts in to baseline alignment.
     //
@@ -49,13 +74,16 @@ $_enter-delay: $_label-duration - $_visible-duration;
   }
 
   .content {
-    display: flex;
-    flex: 1;
-    opacity: 0;
-    transition: animation.standard(opacity, $_visible-duration);
     // Content elements provided to the field (such as <input>) may use
     // `currentColor` to inherit this property.
     color: var(--_content-color);
+    display: flex;
+    flex: 1;
+    // Content elements provided to the field (such as <input>) may inherit font
+    font: var(--_content-type);
+    opacity: 0;
+    transition: opacity $_visible-duration
+      map.get($_md-sys-motion, 'easing-emphasized');
   }
 
   .no-label .content,
@@ -65,33 +93,83 @@ $_enter-delay: $_label-duration - $_visible-duration;
     transition-delay: $_enter-delay;
   }
 
-  .disabled.no-label .content,
-  .disabled.focused .content,
-  .disabled.populated .content {
-    opacity: var(--_disabled-content-opacity);
-  }
-
   :hover .content {
     color: var(--_hover-content-color);
   }
 
+  :hover .start {
+    color: var(--_hover-leading-content-color);
+  }
+
+  :hover .end {
+    color: var(--_hover-trailing-content-color);
+  }
+
   .focused .content {
     color: var(--_focus-content-color);
   }
 
+  .focused .start {
+    color: var(--_focus-leading-content-color);
+  }
+
+  .focused .end {
+    color: var(--_focus-trailing-content-color);
+  }
+
   .disabled .content {
     color: var(--_disabled-content-color);
   }
 
+  .disabled.no-label .content,
+  .disabled.focused .content,
+  .disabled.populated .content {
+    opacity: var(--_disabled-content-opacity);
+  }
+
+  .disabled .start {
+    color: var(--_disabled-leading-content-color);
+    opacity: var(--_disabled-leading-content-opacity);
+  }
+
+  .disabled .end {
+    color: var(--_disabled-trailing-content-color);
+    opacity: var(--_disabled-trailing-content-opacity);
+  }
+
   .error .content {
     color: var(--_error-content-color);
   }
 
+  .error .start {
+    color: var(--_error-leading-content-color);
+  }
+
+  .error .end {
+    color: var(--_error-trailing-content-color);
+  }
+
   .error:hover .content {
     color: var(--_error-hover-content-color);
   }
 
+  .error:hover .start {
+    color: var(--_error-hover-leading-content-color);
+  }
+
+  .error:hover .end {
+    color: var(--_error-hover-trailing-content-color);
+  }
+
   .error.focused .content {
     color: var(--_error-focus-content-color);
   }
+
+  .error.focused .start {
+    color: var(--_error-focus-leading-content-color);
+  }
+
+  .error.focused .end {
+    color: var(--_error-focus-trailing-content-color);
+  }
 }

package/field/lib/_filled-field.scss

@@ -7,13 +7,13 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../motion/animation';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../tokens';
 @use './md-comp-filled-field';
 // go/keep-sorted end
 
-$_animation-duration: 150ms;
+$_md-sys-motion: tokens.md-sys-motion-values();
 
 @mixin theme($tokens) {
   $reference: md-comp-filled-field.values();
@@ -35,63 +35,35 @@ $_animation-duration: 150ms;
     }
   }
 
-  .container {
-    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);
-    // If bottom corner radii are set, prevent the active indicator from
-    // overflowing.
-    overflow: hidden;
-    // Needed for negative z-index below to place background and state layer
-    // behind content.
-    z-index: 0;
-
-    // ::before is used for background color so that opacity may be changed
-    // without affecting content
-    &::before {
-      background: var(--_container-color);
-    }
-
-    // ::after is used for the state layer color and opacity
-    &::after {
-      visibility: hidden;
-    }
-
-    &::before,
-    &::after {
-      border-radius: inherit;
-      content: '';
-      display: flex;
-      height: 100%;
-      position: absolute;
-      width: 100%;
-      z-index: -1;
-    }
+  .background,
+  .state-layer {
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
   }
 
-  .label.floating {
-    position: absolute;
-    top: 0;
+  .background {
+    background: var(--_container-color);
   }
 
   .state-layer {
-    border-radius: inherit;
-    height: 100%;
-    position: absolute;
-    width: 100%;
     visibility: hidden;
-    z-index: -1;
   }
 
   .field:not(.disabled):hover .state-layer {
     visibility: visible;
   }
 
+  .label.floating {
+    position: absolute;
+    top: 0;
+  }
+
   .active-indicator {
+    inset: auto 0 0 0;
     // Prevent click events on the indicator element since it has no width and
     // causes bugs when handled by the foundation for updating transform-origin.
-    inset: auto 0 0 0;
     pointer-events: none;
     position: absolute;
     width: 100%;
@@ -109,23 +81,13 @@ $_animation-duration: 150ms;
     // focused indicator
     &::after {
       opacity: 0;
-      transform: scaleX(0);
-      // The element needs to update the transform-origin style attribute in
-      // response to click events. Psuedo elements cannot have their style
-      // updated, but their transform-origin can be inherited.
-      transform-origin: inherit;
-      // Add two transitions: opacity and a delayed transform. With a non-delayed
-      // transform transition on the focus selector without an opacity transition,
-      // this will result in the indicator scaling on enter and fading on exit.
-      transition: animation.standard(opacity, $_animation-duration),
-        transform 0s ease $_animation-duration;
+      transition: opacity map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
     }
   }
 
   .focused .active-indicator::after {
     opacity: 1;
-    transform: scaleX(1);
-    transition: animation.standard(transform, $_animation-duration);
   }
 
   .field:not(.with-start) .start {
@@ -167,7 +129,7 @@ $_animation-duration: 150ms;
     opacity: var(--_disabled-active-indicator-opacity);
   }
 
-  .disabled .container::before {
+  .disabled .background {
     background: var(--_disabled-container-color);
     opacity: var(--_disabled-container-opacity);
   }

package/field/lib/_label.scss

@@ -28,13 +28,12 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    /*rtl:ignore*/
-    transform-origin: top left;
   }
 
   .label.floating {
     font-size: var(--_label-text-populated-size);
     line-height: var(--_label-text-populated-line-height);
+    transform-origin: top left;
   }
 
   .label.hidden {