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

package/textfield/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,OAAkB;IAAxD;;QACE,wEAAwE;QAC9D,sBAAiB,GAAG,EAAE,CAAC;IA2HnC,CAAC;IAzHC;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,UAAU,CAAC,KAAa;QAC5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,IAAI,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,IAAI,CAAC,CAAC;YAChE,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,IAAI,CAAC,CAAC;SAC9D;IACH,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,WAAW,CAAC,UAAmB,EAAE,QAAiB;QACtD,IAAI,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,WAAW,CAAC,CAAC;QACvE,IAAI,CAAC,gBAAgB,CACjB,MAAM,IAAI,CAAC,qBAAqB,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAChE,CAAC;IAEQ,KAAK,CAAC,KAAK;QAClB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAC5C,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,sBAAsB,CAAC,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAClE,CAAC;IAEkB,oBAAoB,CAAC,KAAkB;QACxD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,IAAI,SAAS,CAAC,QAAQ,EAAE;YACtB,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC,KAAK,CAAC;QACzC,KAAK,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAElC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAC9B,IAAI,SAAS,KAAK,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE;YAC7C,sEAAsE;YACtE,uDAAuD;YACvD,KAAK,CAAC,KAAK,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;SACxB;QAED,wEAAwE;QACxE,wEAAwE;QACxE,gCAAgC;QAChC,SAAS,CAAC,KAAK,EAAE,CAAC;QAClB,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAC1B,CAAC;IAES,aAAa,CACnB,OAAyB,EAAE,kBAA0B,EACrD,IAAqB;QACvB,OAAO,CAAC,KAAK,IAAI,kBAAkB,CAAC;QACpC,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG;gBACL,SAAS,EAAE,YAAY;gBACvB,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,kBAAkB;aACzB,CAAC;SACH;QAED,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACvD,CAAC;IAES,gBAAgB,CACtB,OAAyB,EAAE,UAAmB,EAAE,QAAiB,EACjE,IAAqB;QACvB,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACpE,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,IAAI,CAAC,CAAC;YACvD,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG;gBACL,SAAS,EAAE,uBAAuB;gBAClC,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,iBAAiB;aACxB,CAAC;SACH;QAED,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACvD,CAAC;IAES,sBAAsB,CAAC,OAAyB;QACxD,IAAI,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,KAAK,EAAE;YAC5C,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC;QACvC,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CACjD,CAAC;IACvB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {TextField} from './lib/text-field.js';\n\n/**\n * Test harness for text field elements.\n */\nexport class TextFieldHarness extends Harness<TextField> {\n  /** Used to track whether or not a change event should be dispatched. */\n  protected valueBeforeChange = '';\n\n  /**\n   * Simulates a user typing a value one character at a time. This will fire\n   * multiple input events.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.inputValue('value'); // input events\n   * await harness.blur(); // change event\n   *\n   * @param value The value to simulating typing.\n   */\n  async inputValue(value: string) {\n    for (const char of value) {\n      this.simulateKeypress(await this.getInteractiveElement(), char);\n      this.simulateInput(await this.getInteractiveElement(), char);\n    }\n  }\n\n  /**\n   * Simulates a user deleting part of a value with the backspace key.\n   * By default, the entire value is deleted. This will fire a single input\n   * event.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.deleteValue(); // input event\n   * await harness.blur(); // change event\n   *\n   * @param beginIndex The starting index of the value to delete.\n   * @param endIndex The ending index of the value to delete.\n   */\n  async deleteValue(beginIndex?: number, endIndex?: number) {\n    this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');\n    this.simulateDeletion(\n        await this.getInteractiveElement(), beginIndex, endIndex);\n  }\n\n  override async reset() {\n    this.element.reset();\n    this.valueBeforeChange = this.element.value;\n    await super.reset();\n  }\n\n  override async blur() {\n    await super.blur();\n    this.simulateChangeIfNeeded(await this.getInteractiveElement());\n  }\n\n  protected override simulatePointerFocus(input: HTMLElement) {\n    const textField = this.element;\n    if (textField.disabled) {\n      return;\n    }\n\n    this.valueBeforeChange = textField.value;\n    super.simulatePointerFocus(input);\n\n    const prevFocus = input.focus;\n    if (prevFocus === HTMLElement.prototype.focus) {\n      // Swap to a no-op if nobody is spying on this method so that we don't\n      // generate side-effects when we actually call focus().\n      input.focus = () => {};\n    }\n\n    // Call focus() as a side-effect since delegatesFocus won't be triggered\n    // with this simulation. Replace input.focus() with a no-op if needed to\n    // avoid actually calling focus.\n    textField.focus();\n    input.focus = prevFocus;\n  }\n\n  protected simulateInput(\n      element: HTMLInputElement, charactersToAppend: string,\n      init?: InputEventInit) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n      element: HTMLInputElement, beginIndex?: number, endIndex?: number,\n      init?: InputEventInit) {\n    const deletedCharacters = element.value.slice(beginIndex, endIndex);\n    element.value = element.value.substring(0, beginIndex ?? 0) +\n        element.value.substring(endIndex ?? element.value.length);\n    if (!init) {\n      init = {\n        inputType: 'deleteContentBackward',\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(element: HTMLInputElement) {\n    if (this.valueBeforeChange === element.value) {\n      return;\n    }\n\n    this.valueBeforeChange = element.value;\n    element.dispatchEvent(new Event('change'));\n  }\n\n  protected override async getInteractiveElement(): Promise<HTMLInputElement> {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-text-field__input') as\n        HTMLInputElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {TextField} from './lib/text-field.js';\n\n/**\n * Test harness for text field elements.\n */\nexport class TextFieldHarness extends Harness<TextField> {\n  /** Used to track whether or not a change event should be dispatched. */\n  private valueBeforeChange = '';\n\n  /**\n   * Simulates a user typing a value one character at a time. This will fire\n   * multiple input events.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.inputValue('value'); // input events\n   * await harness.blur(); // change event\n   *\n   * @param value The value to simulating typing.\n   */\n  async inputValue(value: string) {\n    for (const char of value) {\n      this.simulateKeypress(await this.getInteractiveElement(), char);\n      this.simulateInput(await this.getInteractiveElement(), char);\n    }\n  }\n\n  /**\n   * Simulates a user deleting part of a value with the backspace key.\n   * By default, the entire value is deleted. This will fire a single input\n   * event.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.deleteValue(); // input event\n   * await harness.blur(); // change event\n   *\n   * @param beginIndex The starting index of the value to delete.\n   * @param endIndex The ending index of the value to delete.\n   */\n  async deleteValue(beginIndex?: number, endIndex?: number) {\n    this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');\n    this.simulateDeletion(\n        await this.getInteractiveElement(), beginIndex, endIndex);\n  }\n\n  override async reset() {\n    this.element.reset();\n    this.valueBeforeChange = this.element.value;\n    await super.reset();\n  }\n\n  override async blur() {\n    await super.blur();\n    this.simulateChangeIfNeeded(await this.getInteractiveElement());\n  }\n\n  protected override simulatePointerFocus(input: HTMLElement) {\n    const textField = this.element;\n    if (textField.disabled) {\n      return;\n    }\n\n    this.valueBeforeChange = textField.value;\n    super.simulatePointerFocus(input);\n\n    const prevFocus = input.focus;\n    if (prevFocus === HTMLElement.prototype.focus) {\n      // Swap to a no-op if nobody is spying on this method so that we don't\n      // generate side-effects when we actually call focus().\n      input.focus = () => {};\n    }\n\n    // Call focus() as a side-effect since delegatesFocus won't be triggered\n    // with this simulation. Replace input.focus() with a no-op if needed to\n    // avoid actually calling focus.\n    textField.focus();\n    input.focus = prevFocus;\n  }\n\n  protected simulateInput(\n      element: HTMLInputElement, charactersToAppend: string,\n      init?: InputEventInit) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n      element: HTMLInputElement, beginIndex?: number, endIndex?: number,\n      init?: InputEventInit) {\n    const deletedCharacters = element.value.slice(beginIndex, endIndex);\n    element.value = element.value.substring(0, beginIndex ?? 0) +\n        element.value.substring(endIndex ?? element.value.length);\n    if (!init) {\n      init = {\n        inputType: 'deleteContentBackward',\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(element: HTMLInputElement) {\n    if (this.valueBeforeChange === element.value) {\n      return;\n    }\n\n    this.valueBeforeChange = element.value;\n    element.dispatchEvent(new Event('change'));\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input')!;\n  }\n}\n"]}

package/textfield/lib/_filled-text-field.scss

@@ -3,31 +3,45 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../field/filled-field';
-@use '../../sass/resolvers';
-@use '../../sass/shape';
-@use '../../sass/theme';
 @use '../../tokens';
-@use './shared';
+// go/keep-sorted end
 
 @mixin theme($tokens) {
-  // Add missing tokens
-  $reference: map.merge(
-    tokens.md-comp-filled-text-field-values(),
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-text-field-supported-tokens,
     (
-      container-padding-horizontal: null,
-      container-padding-vertical: null,
-      input-text-prefix-padding: null,
-      input-text-suffix-padding: null,
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start',
+      'container-padding-horizontal',
+      'container-padding-vertical',
+      'input-text-prefix-padding',
+      'input-text-suffix-padding',
+      'focus-caret-color'
     )
   );
 
-  $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, filled-text-field);
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $token == 'container-shape' and meta.type-of($value) == 'list' {
+      @error 'Filled text field `container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';
+    }
 
-  @include theme.emit-theme-vars($tokens);
+    @if $value {
+      --md-filled-text-field-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
@@ -35,113 +49,157 @@
   // Add missing tokens
   $tokens: map.merge(
     (
-      container-padding-horizontal: 16px,
-      container-padding-vertical: 8px,
-      input-text-prefix-padding: 2px,
-      input-text-suffix-padding: 2px,
+      'container-padding-horizontal': 16px,
+      'container-padding-vertical': 16px,
+      'input-text-prefix-padding': 2px,
+      'input-text-suffix-padding': 2px,
+      'with-label-container-padding-vertical': 8px,
+      // TODO(b/270705687): remove when focus-caret-color token added
+      'focus-caret-color':
+        map.get(tokens.md-sys-color-values-light(), 'primary'),
     ),
     $tokens
   );
 
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, filled-text-field);
-
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      @if $token == 'container-shape' {
+        // Support logical shape properties. Filled text field has a default
+        // oblong shape, which is why the fallback value is unique per corner.
+        --_container-shape-start-start: var(
+          --md-filled-text-field-container-shape-start-start,
+          var(--md-filled-text-field-container-shape, #{list.nth($value, 1)})
+        );
+        --_container-shape-start-end: var(
+          --md-filled-text-field-container-shape-start-end,
+          var(--md-filled-text-field-container-shape, #{list.nth($value, 2)})
+        );
+        --_container-shape-end-end: var(
+          --md-filled-text-field-container-shape-end-end,
+          var(--md-filled-text-field-container-shape, #{list.nth($value, 3)})
+        );
+        --_container-shape-end-start: var(
+          --md-filled-text-field-container-shape-end-start,
+          var(--md-filled-text-field-container-shape, #{list.nth($value, 4)})
+        );
+      } @else {
+        --_#{$token}: var(--md-filled-text-field-#{$token}, #{$value});
+      }
     }
 
     @include filled-field.theme(
       (
-        active-indicator-color: var(--_active-indicator-color),
-        active-indicator-height: var(--_active-indicator-height),
-        container-color: var(--_container-color),
-        container-height: var(--_container-height),
-        container-padding-horizontal: var(--_container-padding-horizontal),
-        container-padding-vertical: var(--_container-padding-vertical),
-        container-shape-start-start: var(--_container-shape-start-start),
-        container-shape-start-end: var(--_container-shape-start-end),
-        container-shape-end-end: var(--_container-shape-end-end),
-        container-shape-end-start: var(--_container-shape-end-start),
-        content-color: var(--_input-text-color),
-        disabled-active-indicator-color: var(--_disabled-active-indicator-color),
-        disabled-active-indicator-height:
+        // go/keep-sorted start
+        'active-indicator-color': var(--_active-indicator-color),
+        'active-indicator-height': var(--_active-indicator-height),
+        'container-color': var(--_container-color),
+        'container-padding-horizontal': var(--_container-padding-horizontal),
+        'container-padding-vertical': var(--_container-padding-vertical),
+        'container-shape-end-end': var(--_container-shape-end-end),
+        'container-shape-end-start': var(--_container-shape-end-start),
+        'container-shape-start-end': var(--_container-shape-start-end),
+        'container-shape-start-start': var(--_container-shape-start-start),
+        'content-color': var(--_input-text-color),
+        'content-type': var(--_input-text-type),
+        'disabled-active-indicator-color':
+          var(--_disabled-active-indicator-color),
+        'disabled-active-indicator-height':
           var(--_disabled-active-indicator-height),
-        disabled-active-indicator-opacity:
+        'disabled-active-indicator-opacity':
           var(--_disabled-active-indicator-opacity),
-        disabled-container-color: var(--_disabled-container-color),
-        disabled-container-opacity: var(--_disabled-container-opacity),
-        disabled-content-color: var(--_disabled-input-text-color),
-        disabled-content-opacity: var(--_disabled-input-text-opacity),
-        disabled-label-text-color: var(--_disabled-label-text-color),
-        disabled-label-text-opacity: var(--_disabled-label-text-opacity),
-        disabled-leading-icon-color: var(--_disabled-leading-icon-color),
-        disabled-leading-icon-opacity: var(--_disabled-leading-icon-opacity),
-        disabled-supporting-text-color: var(--_disabled-supporting-text-color),
-        disabled-supporting-text-opacity:
+        'disabled-container-color': var(--_disabled-container-color),
+        'disabled-container-opacity': var(--_disabled-container-opacity),
+        'disabled-content-color': var(--_disabled-input-text-color),
+        'disabled-content-opacity': var(--_disabled-input-text-opacity),
+        'disabled-label-text-color': var(--_disabled-label-text-color),
+        'disabled-label-text-opacity': var(--_disabled-label-text-opacity),
+        'disabled-leading-content-color': var(--_disabled-leading-icon-color),
+        'disabled-leading-content-opacity':
+          var(--_disabled-leading-icon-opacity),
+        'disabled-supporting-text-color': var(--_disabled-supporting-text-color),
+        'disabled-supporting-text-opacity':
           var(--_disabled-supporting-text-opacity),
-        disabled-trailing-icon-color: var(--_disabled-trailing-icon-color),
-        disabled-trailing-icon-opacity: var(--_disabled-trailing-icon-opacity),
-        error-active-indicator-color: var(--_error-active-indicator-color),
-        error-focus-active-indicator-color:
+        'disabled-trailing-content-color': var(--_disabled-trailing-icon-color),
+        'disabled-trailing-content-opacity':
+          var(--_disabled-trailing-icon-opacity),
+        'error-active-indicator-color': var(--_error-active-indicator-color),
+        'error-content-color': var(--_error-input-text-color),
+        'error-focus-active-indicator-color':
           var(--_error-focus-active-indicator-color),
-        error-focus-content-color: var(--_error-focus-input-text-color),
-        error-focus-label-text-color: var(--_error-focus-label-text-color),
-        error-focus-leading-icon-color: var(--_error-focus-leading-icon-color),
-        error-focus-supporting-text-color:
+        'error-focus-content-color': var(--_error-focus-input-text-color),
+        'error-focus-label-text-color': var(--_error-focus-label-text-color),
+        'error-focus-leading-content-color':
+          var(--_error-focus-leading-icon-color),
+        'error-focus-supporting-text-color':
           var(--_error-focus-supporting-text-color),
-        error-focus-trailing-icon-color: var(--_error-focus-trailing-icon-color),
-        error-hover-active-indicator-color:
+        'error-focus-trailing-content-color':
+          var(--_error-focus-trailing-icon-color),
+        'error-hover-active-indicator-color':
           var(--_error-hover-active-indicator-color),
-        error-hover-content-color: var(--_error-hover-input-text-color),
-        error-hover-label-text-color: var(--_error-hover-label-text-color),
-        error-hover-leading-icon-color: var(--_error-hover-leading-icon-color),
-        error-hover-state-layer-color: var(--_error-hover-state-layer-color),
-        error-hover-state-layer-opacity: var(--_error-hover-state-layer-opacity),
-        error-hover-supporting-text-color:
+        'error-hover-content-color': var(--_error-hover-input-text-color),
+        'error-hover-label-text-color': var(--_error-hover-label-text-color),
+        'error-hover-leading-content-color':
+          var(--_error-hover-leading-icon-color),
+        'error-hover-state-layer-color': var(--_error-hover-state-layer-color),
+        'error-hover-state-layer-opacity':
+          var(--_error-hover-state-layer-opacity),
+        'error-hover-supporting-text-color':
           var(--_error-hover-supporting-text-color),
-        error-hover-trailing-icon-color: var(--_error-hover-trailing-icon-color),
-        error-content-color: var(--_error-input-text-color),
-        error-label-text-color: var(--_error-label-text-color),
-        error-leading-icon-color: var(--_error-leading-icon-color),
-        error-supporting-text-color: var(--_error-supporting-text-color),
-        error-trailing-icon-color: var(--_error-trailing-icon-color),
-        focus-active-indicator-color: var(--_focus-active-indicator-color),
-        focus-active-indicator-height: var(--_focus-active-indicator-height),
-        focus-content-color: var(--_focus-input-text-color),
-        focus-label-text-color: var(--_focus-label-text-color),
-        focus-leading-icon-color: var(--_focus-leading-icon-color),
-        focus-supporting-text-color: var(--_focus-supporting-text-color),
-        focus-trailing-icon-color: var(--_focus-trailing-icon-color),
-        hover-active-indicator-color: var(--_hover-active-indicator-color),
-        hover-active-indicator-height: var(--_hover-active-indicator-height),
-        hover-content-color: var(--_hover-input-text-color),
-        hover-label-text-color: var(--_hover-label-text-color),
-        hover-leading-icon-color: var(--_hover-leading-icon-color),
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        hover-supporting-text-color: var(--_hover-supporting-text-color),
-        hover-trailing-icon-color: var(--_hover-trailing-icon-color),
-        label-text-color: var(--_label-text-color),
-        label-text-font: var(--_label-text-font),
-        label-text-line-height: var(--_label-text-line-height),
-        label-text-populated-line-height:
+        'error-hover-trailing-content-color':
+          var(--_error-hover-trailing-icon-color),
+        'error-label-text-color': var(--_error-label-text-color),
+        'error-leading-content-color': var(--_error-leading-icon-color),
+        'error-supporting-text-color': var(--_error-supporting-text-color),
+        'error-trailing-content-color': var(--_error-trailing-icon-color),
+        'focus-active-indicator-color': var(--_focus-active-indicator-color),
+        'focus-active-indicator-height': var(--_focus-active-indicator-height),
+        'focus-content-color': var(--_focus-input-text-color),
+        'focus-label-text-color': var(--_focus-label-text-color),
+        'focus-leading-content-color': var(--_focus-leading-icon-color),
+        'focus-supporting-text-color': var(--_focus-supporting-text-color),
+        'focus-trailing-content-color': var(--_focus-trailing-icon-color),
+        'hover-active-indicator-color': var(--_hover-active-indicator-color),
+        'hover-active-indicator-height': var(--_hover-active-indicator-height),
+        'hover-content-color': var(--_hover-input-text-color),
+        'hover-label-text-color': var(--_hover-label-text-color),
+        'hover-leading-content-color': var(--_hover-leading-icon-color),
+        'hover-state-layer-color': var(--_hover-state-layer-color),
+        'hover-state-layer-opacity': var(--_hover-state-layer-opacity),
+        'hover-supporting-text-color': var(--_hover-supporting-text-color),
+        'hover-trailing-content-color': var(--_hover-trailing-icon-color),
+        'label-text-color': var(--_label-text-color),
+        'label-text-populated-line-height':
           var(--_label-text-populated-line-height),
-        label-text-populated-size: var(--_label-text-populated-size),
-        label-text-size: var(--_label-text-size),
-        label-text-tracking: var(--_label-text-tracking),
-        label-text-weight: var(--_label-text-weight),
-        leading-icon-color: var(--_leading-icon-color),
-        leading-icon-size: var(--_leading-icon-size),
-        supporting-text-color: var(--_supporting-text-color),
-        supporting-text-font: var(--_supporting-text-font),
-        supporting-text-line-height: var(--_supporting-text-line-height),
-        supporting-text-size: var(--_supporting-text-size),
-        supporting-text-tracking: var(--_supporting-text-tracking),
-        supporting-text-weight: var(--_supporting-text-weight),
-        trailing-icon-color: var(--_trailing-icon-color),
-        trailing-icon-size: var(--_trailing-icon-size),
+        'label-text-populated-size': var(--_label-text-populated-size),
+        'label-text-type': var(--_label-text-type),
+        'leading-content-color': var(--_leading-icon-color),
+        'supporting-text-color': var(--_supporting-text-color),
+        'supporting-text-type': var(--_supporting-text-type),
+        'trailing-content-color': var(--_trailing-icon-color),
+        'with-label-container-padding-vertical':
+          var(--_with-label-container-padding-vertical) // go/keep-sorted end
       )
     );
   }
 }
+
+@function _resolve-tokens($tokens, $exclude-hardcoded-values: false) {
+  @if not $exclude-hardcoded-values {
+    // Add missing tokens
+    $tokens: map.merge(
+      (
+        'container-padding-horizontal': 16px,
+        'container-padding-vertical': 16px,
+        'input-text-prefix-padding': 2px,
+        'input-text-suffix-padding': 2px,
+        'with-label-container-padding-vertical': 8px,
+        // TODO(b/270705687): remove when focus-caret-color token added
+        'focus-caret-color':
+          map.get(tokens.md-sys-color-values-light(), 'primary'),
+      ),
+      $tokens
+    );
+  }
+
+  @return $tokens;
+}

package/textfield/lib/_icon.scss

@@ -3,86 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin styles() {
-  .md3-text-field__icon {
+  .icon {
+    color: currentColor;
     display: flex;
-
-    ::slotted(*) {
-      // Remove excess whitespace below inline elementsxs
-      display: flex;
-    }
-  }
-
-  .md3-text-field__icon--leading {
-    color: var(--_leading-icon-color);
-  }
-
-  .md3-text-field__icon--trailing {
-    color: var(--_trailing-icon-color);
-  }
-
-  :hover {
-    .md3-text-field__icon--leading {
-      color: var(--_hover-leading-icon-color);
-    }
-
-    .md3-text-field__icon--trailing {
-      color: var(--_hover-trailing-icon-color);
-    }
+    fill: currentColor;
   }
 
-  :focus-within {
-    .md3-text-field__icon--leading {
-      color: var(--_focus-leading-icon-color);
-    }
-
-    .md3-text-field__icon--trailing {
-      color: var(--_focus-trailing-icon-color);
-    }
+  .icon ::slotted(*) {
+    // Remove excess whitespace below inline elements
+    display: flex;
   }
 
-  .md3-text-field--disabled {
-    .md3-text-field__icon--leading {
-      color: var(--_disabled-leading-icon-color);
-      opacity: var(--_disabled-leading-icon-opacity);
-    }
-
-    .md3-text-field__icon--trailing {
-      color: var(--_disabled-trailing-icon-color);
-      opacity: var(--_disabled-trailing-icon-opacity);
-    }
+  [hasstart] .icon.leading {
+    font-size: var(--_leading-icon-size);
+    height: var(--_leading-icon-size);
+    width: var(--_leading-icon-size);
   }
 
-  .md3-text-field--error:not(.md3-text-field--disabled) {
-    .md3-text-field__icon--leading {
-      color: var(--_error-leading-icon-color);
-    }
-
-    .md3-text-field__icon--trailing {
-      color: var(--_error-trailing-icon-color);
-    }
-
-    &:hover {
-      .md3-text-field__icon--leading {
-        color: var(--_error-hover-leading-icon-color);
-      }
-
-      .md3-text-field__icon--trailing {
-        color: var(--_error-hover-trailing-icon-color);
-      }
-    }
-
-    &:focus-within {
-      .md3-text-field__icon--leading {
-        color: var(--_error-focus-leading-icon-color);
-      }
-
-      .md3-text-field__icon--trailing {
-        color: var(--_error-focus-trailing-icon-color);
-      }
-    }
+  [hasend] .icon.trailing {
+    font-size: var(--_trailing-icon-size);
+    height: var(--_trailing-icon-size);
+    width: var(--_trailing-icon-size);
   }
 }

package/textfield/lib/_input.scss

@@ -3,18 +3,14 @@
 // 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-text-field__input {
+  input {
     appearance: none;
     background: none;
     border: none;
     caret-color: var(--_caret-color);
     color: currentColor;
+    font: inherit;
     outline: none;
     padding: 0;
     text-align: inherit;
@@ -35,48 +31,31 @@
     }
   }
 
-  :focus-within {
-    .md3-text-field__input {
-      caret-color: var(--_focus-caret-color);
-    }
+  :focus-within input {
+    caret-color: var(--_focus-caret-color);
   }
 
-  .md3-text-field--error:focus-within {
-    .md3-text-field__input {
-      caret-color: var(--_error-focus-caret-color);
-    }
+  .error:focus-within input {
+    caret-color: var(--_error-focus-caret-color);
   }
 
-  .md3-text-field__input,
-  .md3-text-field__prefix,
-  .md3-text-field__suffix {
-    @include typography.theme-styles(
-      (
-        font: var(--_input-text-font),
-        line-height: var(--_input-text-line-height),
-        size: var(--_input-text-size),
-        tracking: var(--_input-text-tracking),
-        weight: var(--_input-text-weight),
-      )
-    );
+  .text-field:not(.disabled) .prefix {
+    color: var(--_input-text-prefix-color);
   }
 
-  .md3-text-field:not(.md3-text-field--disabled) {
-    .md3-text-field__prefix,
-    .md3-text-field__suffix {
-      color: var(--_input-text-prefix-color);
-    }
+  .text-field:not(.disabled) .suffix {
+    color: var(--_input-text-suffix-color);
+  }
 
-    .md3-text-field__input::placeholder {
-      color: var(--_input-text-placeholder-color);
-    }
+  .text-field:not(.disabled) input::placeholder {
+    color: var(--_input-text-placeholder-color);
   }
 
-  .md3-text-field__prefix {
+  .prefix {
     padding-inline-end: var(--_input-text-prefix-padding);
   }
 
-  .md3-text-field__suffix {
+  .suffix {
     padding-inline-start: var(--_input-text-suffix-padding);
   }
 }