@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/textfield/harness.js

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../testing/harness.js';
 /**
  * Test harness for text field elements.
  */

package/textfield/harness.js.map

@@ -1 +1 @@
-{"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 '@material/web/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  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"]}

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

@@ -0,0 +1,147 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '../../field/filled-field';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+
+@mixin theme($tokens) {
+  // Add missing tokens
+  $reference: map.merge(
+    tokens.md-comp-filled-text-field-values(),
+    (
+      container-padding-horizontal: null,
+      container-padding-vertical: null,
+      input-text-prefix-padding: null,
+      input-text-suffix-padding: null,
+    )
+  );
+
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, filled-text-field);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-text-field-values();
+  // Add missing tokens
+  $tokens: map.merge(
+    (
+      container-padding-horizontal: 16px,
+      container-padding-vertical: 8px,
+      input-text-prefix-padding: 2px,
+      input-text-suffix-padding: 2px,
+    ),
+    $tokens
+  );
+
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, filled-text-field);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$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:
+          var(--_disabled-active-indicator-height),
+        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:
+          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:
+          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:
+          var(--_error-focus-supporting-text-color),
+        error-focus-trailing-icon-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:
+          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:
+          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),
+      )
+    );
+  }
+}

package/textfield/lib/_icon.scss

@@ -6,7 +6,7 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@mixin styles() {
   .md3-text-field__icon {
     display: flex;
 
@@ -15,4 +15,74 @@
       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);
+    }
+  }
+
+  :focus-within {
+    .md3-text-field__icon--leading {
+      color: var(--_focus-leading-icon-color);
+    }
+
+    .md3-text-field__icon--trailing {
+      color: var(--_focus-trailing-icon-color);
+    }
+  }
+
+  .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);
+    }
+  }
+
+  .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);
+      }
+    }
+  }
 }

package/textfield/lib/_input.scss

@@ -6,33 +6,77 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use '../../sass/typography';
+
+@mixin styles() {
   .md3-text-field__input {
-    @include input;
+    appearance: none;
+    background: none;
+    border: none;
+    caret-color: var(--_caret-color);
+    color: currentColor;
+    outline: none;
+    padding: 0;
+    text-align: inherit;
+    width: 100%;
+
+    &::placeholder {
+      color: currentColor;
+      opacity: 1;
+    }
+
+    // Remove built-in datepicker icon on Chrome
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+
+    @media (forced-colors: active) {
+      background-color: Field; // Remove white background in Firefox HCM
+    }
   }
-}
 
-@mixin input() {
-  appearance: none;
-  background: none;
-  border: none;
-  color: currentColor;
-  outline: none;
-  padding: 0;
-  text-align: inherit;
-  width: 100%;
-
-  &::placeholder {
-    color: currentColor;
-    opacity: 1;
+  :focus-within {
+    .md3-text-field__input {
+      caret-color: var(--_focus-caret-color);
+    }
+  }
+
+  .md3-text-field--error:focus-within {
+    .md3-text-field__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),
+      )
+    );
+  }
+
+  .md3-text-field:not(.md3-text-field--disabled) {
+    .md3-text-field__prefix,
+    .md3-text-field__suffix {
+      color: var(--_input-text-prefix-color);
+    }
+
+    .md3-text-field__input::placeholder {
+      color: var(--_input-text-placeholder-color);
+    }
   }
 
-  // Remove built-in datepicker icon on Chrome
-  &::-webkit-calendar-picker-indicator {
-    display: none;
+  .md3-text-field__prefix {
+    padding-inline-end: var(--_input-text-prefix-padding);
   }
 
-  @media (forced-colors: active) {
-    background-color: Field; // Remove white background in Firefox HCM
+  .md3-text-field__suffix {
+    padding-inline-start: var(--_input-text-suffix-padding);
   }
 }

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

@@ -0,0 +1,137 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '../../field/outlined-field';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+
+@mixin theme($tokens) {
+  // Add missing tokens
+  $reference: map.merge(
+    tokens.md-comp-outlined-text-field-values(),
+    (
+      container-padding-horizontal: null,
+      container-padding-vertical: null,
+      input-text-prefix-padding: null,
+      input-text-suffix-padding: null,
+      outline-label-padding: null,
+    )
+  );
+
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, outlined-text-field);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-text-field-values();
+  // Add missing tokens
+  $tokens: map.merge(
+    (
+      container-padding-horizontal: 16px,
+      container-padding-vertical: 8px,
+      input-text-prefix-padding: 2px,
+      input-text-suffix-padding: 2px,
+      outline-label-padding: 4px,
+    ),
+    $tokens
+  );
+
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, outlined-text-field);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    @include outlined-field.theme(
+      (
+        container-height: var(--_container-height),
+        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),
+        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-outline-color: var(--_disabled-outline-color),
+        disabled-outline-opacity: var(--_disabled-outline-opacity),
+        disabled-outline-width: var(--_disabled-outline-width),
+        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-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-outline-color: var(--_error-focus-outline-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-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-outline-color: var(--_error-hover-outline-color),
+        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-outline-color: var(--_error-outline-color),
+        error-supporting-text-color: var(--_error-supporting-text-color),
+        error-trailing-icon-color: var(--_error-trailing-icon-color),
+        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-outline-color: var(--_focus-outline-color),
+        focus-outline-width: var(--_focus-outline-width),
+        focus-supporting-text-color: var(--_focus-supporting-text-color),
+        focus-trailing-icon-color: var(--_focus-trailing-icon-color),
+        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-outline-color: var(--_hover-outline-color),
+        hover-outline-width: var(--_hover-outline-width),
+        hover-supporting-text-color: var(--_hover-supporting-text-color),
+        hover-trailing-icon-color: var(--_hover-trailing-icon-color),
+        content-color: var(--_input-text-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-padding-bottom: var(--_label-text-padding-bottom),
+        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),
+        outline-color: var(--_outline-color),
+        outline-width: var(--_outline-width),
+        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),
+      )
+    );
+  }
+}

package/textfield/lib/_shared.scss

@@ -0,0 +1,59 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+@use '../../sass/typography';
+@use './icon';
+@use './input';
+
+@mixin styles() {
+  :host {
+    display: inline-flex;
+    outline: none;
+  }
+
+  .md3-text-field {
+    display: inline-flex;
+    flex: 1;
+  }
+
+  .md3-text-field__field {
+    cursor: text;
+    flex: 1;
+
+    .md3-text-field--disabled & {
+      cursor: default;
+    }
+  }
+
+  .md3-text-field__counter {
+    white-space: nowrap;
+  }
+
+  @include icon.styles;
+  @include input.styles;
+}
+
+@function resolve-tokens($tokens) {
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, shape),
+    container-shape
+  );
+  $tokens: typography.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, typography),
+    input-text,
+    label-text,
+    supporting-text
+  );
+
+  @return $tokens;
+}

package/textfield/lib/filled-forced-colors-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `@media(forced-colors: active){.md3-text-field--filled{--md-filled-text-field-disabled-active-indicator-color:GrayText;--md-filled-text-field-disabled-active-indicator-opacity:1;--md-filled-text-field-disabled-input-text-color:GrayText;--md-filled-text-field-disabled-input-text-opacity:1;--md-filled-text-field-disabled-label-text-color:GrayText;--md-filled-text-field-disabled-label-text-opacity:1;--md-filled-text-field-disabled-leading-icon-color:GrayText;--md-filled-text-field-disabled-leading-icon-opacity:1;--md-filled-text-field-disabled-supporting-text-color:GrayText;--md-filled-text-field-disabled-supporting-text-opacity:1;--md-filled-text-field-disabled-trailing-icon-color:GrayText;--md-filled-text-field-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=filled-forced-colors-styles.css.map */
+export const styles = css `@media(forced-colors: active){:host{--md-filled-text-field-disabled-active-indicator-color:GrayText;--md-filled-text-field-disabled-active-indicator-opacity:1;--md-filled-text-field-disabled-input-text-color:GrayText;--md-filled-text-field-disabled-input-text-opacity:1;--md-filled-text-field-disabled-label-text-color:GrayText;--md-filled-text-field-disabled-label-text-opacity:1;--md-filled-text-field-disabled-leading-icon-color:GrayText;--md-filled-text-field-disabled-leading-icon-opacity:1;--md-filled-text-field-disabled-supporting-text-color:GrayText;--md-filled-text-field-disabled-supporting-text-opacity:1;--md-filled-text-field-disabled-trailing-icon-color:GrayText;--md-filled-text-field-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=filled-forced-colors-styles.css.map */
 `;
 //# sourceMappingURL=filled-forced-colors-styles.css.js.map

package/textfield/lib/filled-forced-colors-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-forced-colors-styles.css.js","sourceRoot":"","sources":["filled-forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){.md3-text-field--filled{--md-filled-text-field-disabled-active-indicator-color:GrayText;--md-filled-text-field-disabled-active-indicator-opacity:1;--md-filled-text-field-disabled-input-text-color:GrayText;--md-filled-text-field-disabled-input-text-opacity:1;--md-filled-text-field-disabled-label-text-color:GrayText;--md-filled-text-field-disabled-label-text-opacity:1;--md-filled-text-field-disabled-leading-icon-color:GrayText;--md-filled-text-field-disabled-leading-icon-opacity:1;--md-filled-text-field-disabled-supporting-text-color:GrayText;--md-filled-text-field-disabled-supporting-text-opacity:1;--md-filled-text-field-disabled-trailing-icon-color:GrayText;--md-filled-text-field-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=filled-forced-colors-styles.css.map */\n`;\n "]}
+{"version":3,"file":"filled-forced-colors-styles.css.js","sourceRoot":"","sources":["filled-forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){:host{--md-filled-text-field-disabled-active-indicator-color:GrayText;--md-filled-text-field-disabled-active-indicator-opacity:1;--md-filled-text-field-disabled-input-text-color:GrayText;--md-filled-text-field-disabled-input-text-opacity:1;--md-filled-text-field-disabled-label-text-color:GrayText;--md-filled-text-field-disabled-label-text-opacity:1;--md-filled-text-field-disabled-leading-icon-color:GrayText;--md-filled-text-field-disabled-leading-icon-opacity:1;--md-filled-text-field-disabled-supporting-text-color:GrayText;--md-filled-text-field-disabled-supporting-text-opacity:1;--md-filled-text-field-disabled-trailing-icon-color:GrayText;--md-filled-text-field-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=filled-forced-colors-styles.css.map */\n`;\n "]}

package/textfield/lib/filled-forced-colors-styles.scss

@@ -3,15 +3,25 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use './filled-text-field-theme';
+@use './filled-text-field';
 
 @media (forced-colors: active) {
-  .md3-text-field--filled {
-    @include filled-text-field-theme.theme(
-      filled-text-field-theme.$forced-colors-theme
+  :host {
+    @include filled-text-field.theme(
+      (
+        disabled-active-indicator-color: GrayText,
+        disabled-active-indicator-opacity: 1,
+        disabled-input-text-color: GrayText,
+        disabled-input-text-opacity: 1,
+        disabled-label-text-color: GrayText,
+        disabled-label-text-opacity: 1,
+        disabled-leading-icon-color: GrayText,
+        disabled-leading-icon-opacity: 1,
+        disabled-supporting-text-color: GrayText,
+        disabled-supporting-text-opacity: 1,
+        disabled-trailing-icon-color: GrayText,
+        disabled-trailing-icon-opacity: 1,
+      )
     );
   }
 }