diff --git a/packages/search/src/Search.ts b/packages/search/src/Search.ts
index 3b13fd90dd..56444a5d31 100644
--- a/packages/search/src/Search.ts
+++ b/packages/search/src/Search.ts
@@ -108,7 +108,7 @@ export class Search extends Textfield {
                 @keydown=${this.handleKeydown}
             >
                 <sp-icon-magnify
-                    class="icon magnifier icon-workflow"
+                    class="icon magnifier icon-workflow icon-search"
                 ></sp-icon-magnify>
                 ${super.renderField()}
                 ${this.value
diff --git a/packages/search/src/search.css b/packages/search/src/search.css
index d5bb01b5f4..0c779466f5 100644
--- a/packages/search/src/search.css
+++ b/packages/search/src/search.css
@@ -12,14 +12,8 @@ governing permissions and limitations under the License.
 
 @import './spectrum-search.css';
 
-:host([dir='ltr']) {
-    --spectrum-textfield-texticon-padding-right: var(
-        --spectrum-alias-infieldbutton-full-height-m
-    );
-}
-
-:host([dir='rtl']) {
-    --spectrum-textfield-texticon-padding-left: var(
+:host {
+    --mod-textfield-spacing-inline: var(
         --spectrum-alias-infieldbutton-full-height-m
     );
 }
diff --git a/packages/search/src/spectrum-config.js b/packages/search/src/spectrum-config.js
index e2b31a1467..a83fc09ad1 100644
--- a/packages/search/src/spectrum-config.js
+++ b/packages/search/src/spectrum-config.js
@@ -32,7 +32,7 @@ const config = {
                 converter.classToId('spectrum-Search', 'textfield'),
                 converter.classToClass('spectrum-Search-input', 'input'),
                 converter.classToClass('spectrum-Icon', 'icon'),
-                converter.classToClass('spectrum-Search-icon', 'icon'),
+                converter.classToClass('spectrum-Search-icon', 'icon-search'),
                 converter.classToAttribute('spectrum-Search--quiet', 'quiet'),
                 converter.classToId('spectrum-Search-clearButton', 'button'),
                 converter.classToId('spectrum-Search-textfield', 'textfield'),
diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css
index d811e4ef6b..cda2a43959 100644
--- a/packages/search/src/spectrum-search.css
+++ b/packages/search/src/spectrum-search.css
@@ -51,10 +51,10 @@ governing permissions and limitations under the License.
         var(--spectrum-global-dimension-size-50)
     );
 }
-:host([dir='ltr']:not([quiet])) #textfield .icon {
+:host([dir='ltr']:not([quiet])) #textfield .icon-search {
     left: var(--spectrum-alias-search-padding-left-m);
 }
-:host([dir='rtl']:not([quiet])) #textfield .icon {
+:host([dir='rtl']:not([quiet])) #textfield .icon-search {
     right: var(--spectrum-alias-search-padding-left-m);
 }
 :host([dir='ltr']:not([quiet])) #textfield .input {
@@ -100,37 +100,37 @@ governing permissions and limitations under the License.
 :host([quiet]) #textfield:after {
     border-radius: var(--spectrum-alias-search-border-radius-quiet, 0);
 }
-.icon {
+.icon-search {
     color: var(
         --spectrum-textfield-m-texticon-icon-color,
         var(--spectrum-alias-component-icon-color-default)
     );
 }
-.input:hover ~ .icon {
+.input:hover ~ .icon-search {
     color: var(
         --spectrum-search-m-icon-color-hover,
         var(--spectrum-alias-component-icon-color-hover)
     );
 }
-.input:active ~ .icon {
+.input:active ~ .icon-search {
     color: var(
         --spectrum-search-m-icon-color-down,
         var(--spectrum-alias-component-icon-color-down)
     );
 }
-.input.focus-visible ~ .icon {
+.input.focus-visible ~ .icon-search {
     color: var(
         --spectrum-search-m-icon-color-key-focus,
         var(--spectrum-alias-component-icon-color-key-focus)
     );
 }
-.input:focus-visible ~ .icon {
+.input:focus-visible ~ .icon-search {
     color: var(
         --spectrum-search-m-icon-color-key-focus,
         var(--spectrum-alias-component-icon-color-key-focus)
     );
 }
-.input:disabled ~ .icon {
+.input:disabled ~ .icon-search {
     color: var(
         --spectrum-textfield-m-texticon-text-color-disabled,
         var(--spectrum-alias-component-text-color-disabled)
diff --git a/packages/textfield/package.json b/packages/textfield/package.json
index 464fc5477d..1e4a9fa54e 100644
--- a/packages/textfield/package.json
+++ b/packages/textfield/package.json
@@ -65,7 +65,7 @@
         "@spectrum-web-components/shared": "^0.31.0"
     },
     "devDependencies": {
-        "@spectrum-css/textfield": "^3.2.16"
+        "@spectrum-css/textfield": "^5.1.7"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/textfield/src/spectrum-config.js b/packages/textfield/src/spectrum-config.js
index 22d45200a8..bcb5d56fc9 100644
--- a/packages/textfield/src/spectrum-config.js
+++ b/packages/textfield/src/spectrum-config.js
@@ -51,8 +51,13 @@ export default {
                     'spectrum-Textfield-icon',
                     'icon-workflow'
                 ),
+                converter.classToClass('spectrum-Search-icon', 'icon-search'),
                 converter.classToAttribute('spectrum-Textfield--multiline'),
                 converter.classToAttribute('spectrum-Textfield--quiet'),
+                converter.classToAttribute(
+                    'spectrum-Textfield--grows',
+                    'grows'
+                ),
                 converter.classToAttribute('is-focused', 'focused'),
                 converter.classToAttribute('is-keyboardFocused', 'focused'),
                 converter.classToAttribute('is-valid', 'valid'),
diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css
index 625095643e..72c35f3e3f 100644
--- a/packages/textfield/src/spectrum-textfield.css
+++ b/packages/textfield/src/spectrum-textfield.css
@@ -12,800 +12,1259 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-textfield-quiet-texticon-border-bottom-size: var(
-        --spectrum-textfield-m-quiet-texticon-border-bottom-size,
-        var(--spectrum-alias-input-border-size)
+    --spectrum-texfield-animation-duration: var(
+        --spectrum-animation-duration-100
     );
-    --spectrum-textfield-quiet-texticon-success-icon-margin-left: var(
-        --spectrum-textfield-m-quiet-texticon-success-icon-margin-left,
-        var(--spectrum-global-dimension-size-150)
-    );
-    --spectrum-textfield-quiet-texticon-invalid-icon-margin-left: var(
-        --spectrum-textfield-m-quiet-texticon-invalid-icon-margin-left,
-        var(--spectrum-global-dimension-size-150)
-    );
-    --spectrum-textfield-quiet-texticon-border-radius: var(
-        --spectrum-textfield-m-quiet-texticon-border-radius,
-        var(--spectrum-global-dimension-size-0)
+    --spectrum-textfield-width: 240px;
+    --spectrum-textfield-min-width: var(
+        --spectrum-text-field-minimum-width-multiplier
     );
-    --spectrum-textfield-quiet-texticon-padding-left: var(
-        --spectrum-textfield-m-quiet-texticon-padding-left,
-        var(--spectrum-global-dimension-size-0)
-    );
-    --spectrum-textfield-quiet-texticon-padding-right: var(
-        --spectrum-textfield-m-quiet-texticon-padding-right,
-        var(--spectrum-global-dimension-size-0)
-    );
-    --spectrum-textfield-texticon-border-size: var(
-        --spectrum-textfield-m-texticon-border-size,
-        var(--spectrum-alias-input-border-size)
+    --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-textfield-height: var(--spectrum-component-height-100);
+    --spectrum-textfield-spacing-inline: var(
+        --spectrum-component-edge-to-text-100
     );
-    --spectrum-textfield-texticon-text-line-height: var(
-        --spectrum-textfield-m-texticon-text-line-height,
-        var(--spectrum-alias-component-text-line-height)
+    --spectrum-textfield-spacing-inline-quiet: var(
+        --spectrum-field-edge-to-text-quiet
     );
-    --spectrum-textfield-texticon-text-size: var(
-        --spectrum-textfield-m-texticon-text-size,
-        var(--spectrum-global-dimension-font-size-100)
+    --spectrum-textfield-spacing-block-start: var(
+        --spectrum-component-top-to-text-100
     );
-    --spectrum-textfield-texticon-placeholder-text-font-style: var(
-        --spectrum-textfield-m-texticon-placeholder-text-font-style,
-        var(--spectrum-global-font-style-italic)
+    --spectrum-textfield-spacing-block-end: var(
+        --spectrum-component-bottom-to-text-100
     );
-    --spectrum-textfield-texticon-placeholder-text-font-weight: var(
-        --spectrum-textfield-m-texticon-placeholder-text-font-weight,
-        var(--spectrum-global-font-weight-regular)
+    --spectrum-textfield-spacing-block-quiet: var(
+        --spectrum-field-edge-to-border-quiet
     );
-    --spectrum-textfield-texticon-success-icon-height: var(
-        --spectrum-textfield-m-texticon-success-icon-height,
-        var(--spectrum-alias-ui-icon-checkmark-size-100)
+    --spectrum-textfield-label-spacing-block: var(
+        --spectrum-field-label-to-component
     );
-    --spectrum-textfield-texticon-success-icon-width: var(
-        --spectrum-textfield-m-texticon-success-icon-width,
-        var(--spectrum-alias-ui-icon-checkmark-size-100)
+    --spectrum-textfield-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-medium
     );
-    --spectrum-textfield-texticon-success-icon-margin-left: var(
-        --spectrum-textfield-m-texticon-success-icon-margin-left,
-        var(--spectrum-global-dimension-size-150)
+    --spectrum-textfield-label-spacing-inline-side-label: var(
+        --spectrum-spacing-100
     );
-    --spectrum-textfield-texticon-invalid-icon-height: var(
-        --spectrum-textfield-m-texticon-invalid-icon-height,
-        var(--spectrum-alias-ui-icon-alert-size-100)
+    --spectrum-textfield-helptext-spacing-block: var(
+        --spectrum-help-text-to-component
     );
-    --spectrum-textfield-texticon-invalid-icon-width: var(
-        --spectrum-textfield-m-texticon-invalid-icon-width,
-        var(--spectrum-alias-ui-icon-alert-size-100)
+    --spectrum-textfield-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-100
     );
-    --spectrum-textfield-texticon-invalid-icon-margin-left: var(
-        --spectrum-textfield-m-texticon-invalid-icon-margin-left,
-        var(--spectrum-global-dimension-size-150)
+    --spectrum-textfield-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-medium
     );
-    --spectrum-textfield-texticon-min-width: var(
-        --spectrum-textfield-m-texticon-min-width,
-        var(--spectrum-global-dimension-size-600)
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-medium
     );
-    --spectrum-textfield-texticon-border-radius: var(
-        --spectrum-textfield-m-texticon-border-radius,
-        var(--spectrum-alias-border-radius-regular)
+    --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(
+        --spectrum-field-edge-to-alert-icon-quiet
     );
-    --spectrum-textfield-texticon-padding-right: var(
-        --spectrum-textfield-m-texticon-padding-right,
-        var(--spectrum-global-dimension-size-150)
+    --spectrum-textfield-icon-spacing-block-invalid: var(
+        --spectrum-field-top-to-alert-icon-medium
     );
-    --spectrum-textfield-texticon-height: var(
-        --spectrum-textfield-m-texticon-height,
-        var(--spectrum-global-dimension-size-400)
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-medium
     );
-    --spectrum-textarea-text-padding-top: var(
-        --spectrum-textarea-m-text-padding-top,
-        var(--spectrum-global-dimension-size-75)
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-medium
     );
-    --spectrum-textarea-text-padding-bottom: var(
-        --spectrum-textarea-m-text-padding-bottom,
-        var(--spectrum-global-dimension-size-115)
+    --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(
+        --spectrum-field-edge-to-validation-icon-quiet
     );
-    --spectrum-textarea-padding-left: var(
-        --spectrum-textarea-m-padding-left,
-        var(--spectrum-global-dimension-size-150)
+    --spectrum-textfield-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-medium
     );
-    --spectrum-textarea-padding-right: var(
-        --spectrum-textarea-m-padding-right,
-        var(--spectrum-global-dimension-size-150)
+    --spectrum-textfield-icon-spacing-inline-end-override: 32px;
+    --spectrum-Textfield-workflow-icon-width: 18px;
+    --spectrum-Textfield-workflow-icon-gap: 6px;
+    --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
+    --spectrum-textfield-character-count-font-family: var(
+        --spectrum-sans-font-family-stack
     );
-    --spectrum-textarea-height: var(
-        --spectrum-textarea-m-height,
-        var(--spectrum-global-dimension-size-400)
+    --spectrum-textfield-character-count-font-weight: var(
+        --spectrum-regular-font-weight
     );
-    --spectrum-textfield-texticon-padding-top: 3px;
-    --spectrum-textfield-texticon-padding-bottom: 5px;
-    --spectrum-textfield-texticon-text-font-family: var(
-        --spectrum-alias-body-text-font-family,
-        var(--spectrum-global-font-family-base)
+    --spectrum-textfield-character-count-font-size: var(
+        --spectrum-font-size-75
     );
-    --spectrum-textfield-texticon-icon-gap: var(
-        --spectrum-global-dimension-size-65
+    --spectrum-textfield-character-count-spacing-inline: var(
+        --spectrum-spacing-200
     );
-    --spectrum-textfield-quiet-texticon-icon-gap: var(
-        --spectrum-global-dimension-size-75
+    --spectrum-textfield-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-75
     );
-    --spectrum-textarea-min-height: var(--spectrum-textarea-height);
-    --spectrum-textarea-height-adjusted: auto;
-    --spectrum-textarea-padding-top: var(--spectrum-textarea-text-padding-top);
-    --spectrum-textarea-padding-bottom: var(
-        --spectrum-textarea-text-padding-bottom
+    --spectrum-textfield-character-count-spacing-inline-side: var(
+        --spectrum-side-label-character-count-to-field
     );
-    --spectrum-textfield-texticon-padding-left: var(
-        --spectrum-alias-item-workflow-padding-left-m
+    --spectrum-textfield-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-medium
+    );
+    --spectrum-textfield-focus-indicator-width: var(
+        --spectrum-focus-indicator-thickness
+    );
+    --spectrum-textfield-focus-indicator-gap: var(
+        --spectrum-focus-indicator-gap
+    );
+    --spectrum-textfield-background-color: var(--spectrum-gray-50);
+    --spectrum-textfield-text-color-default: var(
+        --spectrum-neutral-content-color-default
+    );
+    --spectrum-textfield-text-color-hover: var(
+        --spectrum-neutral-content-color-hover
+    );
+    --spectrum-textfield-text-color-focus: var(
+        --spectrum-neutral-content-color-focus
+    );
+    --spectrum-textfield-text-color-focus-hover: var(
+        --spectrum-neutral-content-color-focus-hover
+    );
+    --spectrum-textfield-text-color-keyboard-focus: var(
+        --spectrum-neutral-content-color-key-focus
+    );
+    --spectrum-textfield-text-color-readonly: var(
+        --spectrum-neutral-content-color-default
+    );
+    --spectrum-textfield-background-color-disabled: var(
+        --spectrum-disabled-background-color
+    );
+    --spectrum-textfield-border-color-disabled: var(
+        --spectrum-disabled-border-color
+    );
+    --spectrum-textfield-text-color-disabled: var(
+        --spectrum-disabled-content-color
+    );
+    --spectrum-textfield-border-color-invalid-default: var(
+        --spectrum-negative-border-color-default
+    );
+    --spectrum-textfield-border-color-invalid-hover: var(
+        --spectrum-negative-border-color-hover
+    );
+    --spectrum-textfield-border-color-invalid-focus: var(
+        --spectrum-negative-border-color-focus
+    );
+    --spectrum-textfield-border-color-invalid-focus-hover: var(
+        --spectrum-negative-border-color-focus-hover
+    );
+    --spectrum-textfield-border-color-invalid-keyboard-focus: var(
+        --spectrum-negative-border-color-key-focus
+    );
+    --spectrum-textfield-icon-color-invalid: var(
+        --spectrum-negative-visual-color
+    );
+    --spectrum-textfield-text-color-invalid: var(
+        --spectrum-neutral-content-color-default
+    );
+    --spectrum-textfield-text-color-valid: var(
+        --spectrum-neutral-content-color-default
+    );
+    --spectrum-textfield-icon-color-valid: var(
+        --spectrum-positive-visual-color
+    );
+    --spectrum-textfield-focus-indicator-color: var(
+        --spectrum-focus-indicator-color
+    );
+    --spectrum-text-area-min-inline-size: var(
+        --spectrum-text-area-minimum-width
+    );
+    --spectrum-text-area-min-block-size: var(
+        --spectrum-text-area-minimum-height
+    );
+    --spectrum-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-100
     );
 }
-#textfield {
-    display: inline-flex;
-    min-width: var(--spectrum-textfield-texticon-min-width);
-    position: relative;
-    width: var(
-        --spectrum-alias-single-line-width,
-        var(--spectrum-global-dimension-size-2400)
+.spectrum-Textfield--sizeS {
+    --spectrum-textfield-height: var(--spectrum-component-height-75);
+    --spectrum-textfield-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-small
+    );
+    --spectrum-textfield-label-spacing-inline-side-label: var(
+        --spectrum-spacing-100
+    );
+    --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75);
+    --spectrum-textfield-spacing-inline: var(
+        --spectrum-component-edge-to-text-75
+    );
+    --spectrum-textfield-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-75
+    );
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-small
+    );
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-small
+    );
+    --spectrum-textfield-icon-spacing-block-invalid: var(
+        --spectrum-field-top-to-alert-icon-small
+    );
+    --spectrum-textfield-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-small
+    );
+    --spectrum-textfield-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-small
+    );
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-small
+    );
+    --spectrum-textfield-character-count-font-size: var(
+        --spectrum-font-size-75
+    );
+    --spectrum-textfield-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-75
+    );
+    --spectrum-textfield-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-small
+    );
+    --spectrum-textfield-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-small
+    );
+    --spectrum-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-75
     );
 }
-:host([quiet][multiline]) #textfield .input {
-    height: var(--spectrum-textfield-texticon-height);
-    min-height: var(--spectrum-textfield-texticon-height);
+.spectrum-Textfield--sizeM {
+    --spectrum-textfield-height: var(--spectrum-component-height-100);
+    --spectrum-textfield-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-medium
+    );
+    --spectrum-textfield-label-spacing-inline-side-label: var(
+        --spectrum-spacing-200
+    );
+    --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100);
+    --spectrum-textfield-spacing-inline: var(
+        --spectrum-component-edge-to-text-100
+    );
+    --spectrum-textfield-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-100
+    );
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-medium
+    );
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-medium
+    );
+    --spectrum-textfield-icon-spacing-block-invalid: var(
+        --spectrum-field-top-to-alert-icon-medium
+    );
+    --spectrum-textfield-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-medium
+    );
+    --spectrum-textfield-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-medium
+    );
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-medium
+    );
+    --spectrum-textfield-character-count-font-size: var(
+        --spectrum-font-size-75
+    );
+    --spectrum-textfield-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-75
+    );
+    --spectrum-textfield-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-medium
+    );
+    --spectrum-textfield-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-medium
+    );
+    --spectrum-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-100
+    );
 }
-#textfield:after {
-    border-color: #0000;
-    border-radius: calc(
-        var(--spectrum-textfield-texticon-border-radius) +
-            var(
-                --spectrum-textfield-m-texticon-focus-ring-gap,
-                var(--spectrum-alias-input-focusring-gap)
-            )
+.spectrum-Textfield--sizeL {
+    --spectrum-textfield-height: var(--spectrum-component-height-200);
+    --spectrum-textfield-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-large
     );
-    content: '';
-    inset: 0;
-    margin: calc(
-        var(
-                --spectrum-textfield-m-texticon-focus-ring-gap,
-                var(--spectrum-alias-input-focusring-gap)
-            ) * -1
+    --spectrum-textfield-label-spacing-inline-side-label: var(
+        --spectrum-spacing-200
+    );
+    --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200);
+    --spectrum-textfield-spacing-inline: var(
+        --spectrum-component-edge-to-text-200
+    );
+    --spectrum-textfield-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-200
+    );
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-large
+    );
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-large
+    );
+    --spectrum-textfield-icon-spacing-block-invalid: var(
+        --spectrum-field-top-to-alert-icon-large
+    );
+    --spectrum-textfield-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-large
+    );
+    --spectrum-textfield-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-large
+    );
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-large
+    );
+    --spectrum-textfield-character-count-font-size: var(
+        --spectrum-font-size-100
+    );
+    --spectrum-textfield-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-100
+    );
+    --spectrum-textfield-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-large
+    );
+    --spectrum-textfield-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-large
+    );
+    --spectrum-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-200
     );
-    pointer-events: none;
-    position: absolute;
-    transition: box-shadow var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-in-out,
-        border-color var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-in-out;
 }
-:host([quiet]) #textfield:after {
-    border-radius: 0;
+.spectrum-Textfield--sizeXL {
+    --spectrum-textfield-height: var(--spectrum-component-height-300);
+    --spectrum-textfield-label-spacing-block-quiet: var(
+        --spectrum-field-label-to-component-quiet-extra-large
+    );
+    --spectrum-textfield-label-spacing-inline-side-label: var(
+        --spectrum-spacing-200
+    );
+    --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300);
+    --spectrum-textfield-spacing-inline: var(
+        --spectrum-component-edge-to-text-200
+    );
+    --spectrum-textfield-icon-size-invalid: var(
+        --spectrum-workflow-icon-size-300
+    );
+    --spectrum-textfield-icon-spacing-inline-end-invalid: var(
+        --spectrum-field-edge-to-alert-icon-extra-large
+    );
+    --spectrum-textfield-icon-spacing-inline-end-valid: var(
+        --spectrum-field-edge-to-validation-icon-extra-large
+    );
+    --spectrum-textfield-icon-spacing-block-invalid: var(
+        --spectrum-field-top-to-alert-icon-extra-large
+    );
+    --spectrum-textfield-icon-spacing-block-valid: var(
+        --spectrum-field-top-to-validation-icon-extra-large
+    );
+    --spectrum-textfield-icon-spacing-inline-start-invalid: var(
+        --spectrum-field-text-to-alert-icon-extra-large
+    );
+    --spectrum-textfield-icon-spacing-inline-start-valid: var(
+        --spectrum-field-text-to-validation-icon-extra-large
+    );
+    --spectrum-textfield-character-count-font-size: var(
+        --spectrum-font-size-200
+    );
+    --spectrum-textfield-character-count-spacing-block: var(
+        --spectrum-component-bottom-to-text-200
+    );
+    --spectrum-textfield-character-count-spacing-block-quiet: var(
+        --spectrum-character-count-to-field-quiet-extra-large
+    );
+    --spectrum-textfield-character-count-spacing-block-side: var(
+        --spectrum-side-label-character-count-top-margin-extra-large
+    );
+    --spectrum-text-area-min-block-size-quiet: var(
+        --spectrum-component-height-300
+    );
 }
-.input {
-    -webkit-appearance: none;
+#textfield {
     -moz-appearance: textfield;
-    border: var(--spectrum-textfield-texticon-border-size) solid;
-    border-radius: var(--spectrum-textfield-texticon-border-radius);
-    box-sizing: border-box;
-    font-family: var(--spectrum-textfield-texticon-text-font-family);
-    font-size: var(--spectrum-textfield-texticon-text-size);
-    height: var(--spectrum-textfield-texticon-height);
-    line-height: var(--spectrum-textfield-texticon-text-line-height);
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto auto;
+    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
     margin: 0;
-    outline: none;
     overflow: visible;
-    padding: var(--spectrum-textfield-texticon-padding-top)
-        var(--spectrum-textfield-texticon-padding-right)
-        var(--spectrum-textfield-texticon-padding-bottom)
-        calc(var(--spectrum-textfield-texticon-padding-left) + 1px);
+    position: relative;
     text-indent: 0;
     text-overflow: ellipsis;
-    transition: border-color
-        var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
-    vertical-align: top;
-    width: 100%;
-}
-.input::placeholder {
-    font-style: var(--spectrum-textfield-texticon-placeholder-text-font-style);
-    font-weight: var(
-        --spectrum-textfield-texticon-placeholder-text-font-weight
-    );
-    opacity: 1;
-    transition: color var(--spectrum-global-animation-duration-100, 0.13s)
-        ease-in-out;
-}
-.input:lang(ja)::placeholder,
-.input:lang(ko)::placeholder,
-.input:lang(zh)::placeholder {
-    font-style: normal;
 }
-.input:hover::placeholder {
-    font-weight: var(
-        --spectrum-textfield-texticon-placeholder-text-font-weight
-    );
-}
-.input:disabled {
-    opacity: 1;
-    resize: none;
-}
-.input:disabled::placeholder {
-    font-weight: var(
-        --spectrum-textfield-texticon-placeholder-text-font-weight
+:host([quiet]) #textfield:after {
+    block-size: var(
+        --mod-textfield-focus-indicator-width,
+        var(--spectrum-textfield-focus-indicator-width)
     );
-}
-.input::-ms-clear {
-    height: 0;
-    width: 0;
-}
-.input::-webkit-inner-spin-button,
-.input::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-.input:-moz-ui-invalid {
-    box-shadow: none;
-}
-:host([dir='ltr'][valid]) #textfield .input {
-    padding-right: calc(
-        var(--spectrum-textfield-texticon-padding-right) +
-            var(--spectrum-textfield-texticon-success-icon-width) +
-            var(
-                --spectrum-textfield-icon-inline-end-override,
-                var(--spectrum-textfield-texticon-success-icon-margin-left)
-            )
+    bottom: calc(
+        (
+                var(
+                        --mod-textfield-focus-indicator-gap,
+                        var(--spectrum-textfield-focus-indicator-gap)
+                    ) +
+                    var(
+                        --mod-textfield-focus-indicator-width,
+                        var(--spectrum-textfield-focus-indicator-width)
+                    )
+            ) * -1
     );
+    content: '';
+    inline-size: 100%;
+    left: 0;
+    position: absolute;
 }
-:host([dir='rtl'][valid]) #textfield .input {
-    padding-left: calc(
-        var(--spectrum-textfield-texticon-padding-right) +
-            var(--spectrum-textfield-texticon-success-icon-width) +
-            var(
-                --spectrum-textfield-icon-inline-end-override,
-                var(--spectrum-textfield-texticon-success-icon-margin-left)
-            )
+:host([quiet]) #textfield.focus-visible:after,
+:host([quiet]) #textfield:focus-within:after,
+:host([quiet][focused]) #textfield:after {
+    background-color: var(
+        --highcontrast-textfield-focus-indicator-color,
+        var(
+            --mod-textfield-focus-indicator-color,
+            var(--spectrum-textfield-focus-indicator-color)
+        )
     );
 }
-:host([dir='ltr'][invalid]) #textfield .input {
-    padding-right: calc(
-        var(--spectrum-textfield-texticon-padding-right) +
-            var(--spectrum-textfield-texticon-invalid-icon-width) +
-            var(
-                --spectrum-textfield-icon-inline-end-override,
-                var(--spectrum-textfield-texticon-invalid-icon-margin-left)
-            )
+:host([quiet]) #textfield:focus-visible:after,
+:host([quiet]) #textfield:focus-within:after,
+:host([quiet][focused]) #textfield:after {
+    background-color: var(
+        --highcontrast-textfield-focus-indicator-color,
+        var(
+            --mod-textfield-focus-indicator-color,
+            var(--spectrum-textfield-focus-indicator-color)
+        )
     );
 }
-:host([dir='rtl'][invalid]) #textfield .input {
-    padding-left: calc(
-        var(--spectrum-textfield-texticon-padding-right) +
-            var(--spectrum-textfield-texticon-invalid-icon-width) +
-            var(
-                --spectrum-textfield-icon-inline-end-override,
-                var(--spectrum-textfield-texticon-invalid-icon-margin-left)
-            )
+#textfield .icon-workflow {
+    bottom: 0;
+    color: var(
+        --highcontrast-textfield-text-color-default,
+        var(
+            --mod-textfield-text-color-default,
+            var(--spectrum-textfield-text-color-default)
+        )
     );
+    display: block;
+    margin-block: auto;
+    position: absolute;
+    top: 0;
 }
-:host([multiline]) .input {
-    height: var(--spectrum-textarea-height-adjusted);
-    min-height: var(--spectrum-textarea-min-height);
-    overflow: auto;
-    padding: var(--spectrum-textarea-padding-top)
-        var(--spectrum-textarea-padding-right)
-        var(--spectrum-textarea-padding-bottom)
-        calc(var(--spectrum-textarea-padding-left) - 1px);
-}
-:host([dir='ltr'][quiet]) .input {
-    padding-left: var(--spectrum-textfield-quiet-texticon-padding-left);
-}
-:host([dir='rtl'][quiet]) .input {
-    padding-right: var(--spectrum-textfield-quiet-texticon-padding-left);
-}
-:host([dir='ltr'][quiet]) .input {
-    padding-right: var(--spectrum-textfield-quiet-texticon-padding-right);
-}
-:host([dir='rtl'][quiet]) .input {
-    padding-left: var(--spectrum-textfield-quiet-texticon-padding-right);
+#textfield .icon-workflow.icon-search {
+    right: auto;
 }
-:host([quiet]) .input {
-    border-bottom-width: var(
-        --spectrum-textfield-quiet-texticon-border-bottom-size
+:host([disabled]) #textfield #textfield .icon-workflow {
+    color: var(
+        --highcontrast-textfield-text-color-disabled,
+        var(
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
     );
-    border-left-width: 0;
-    border-radius: var(--spectrum-textfield-quiet-texticon-border-radius);
-    border-right-width: 0;
-    border-top-width: 0;
-    overflow-y: hidden;
-    resize: none;
 }
-:host([dir='ltr'][invalid][quiet]) .input {
-    padding-right: calc(
-        var(--spectrum-textfield-texticon-invalid-icon-width) +
-            var(--spectrum-textfield-quiet-texticon-invalid-icon-margin-left)
+:host([quiet]) #textfield .icon-workflow {
+    color: var(
+        --highcontrast-textfield-text-color-default,
+        var(
+            --mod-textfield-text-color-default,
+            var(--spectrum-textfield-text-color-default)
+        )
     );
 }
-:host([dir='rtl'][invalid][quiet]) .input {
-    padding-left: calc(
-        var(--spectrum-textfield-texticon-invalid-icon-width) +
-            var(--spectrum-textfield-quiet-texticon-invalid-icon-margin-left)
+:host([quiet][disabled]) #textfield .icon-workflow {
+    color: var(
+        --highcontrast-textfield-text-color-disabled,
+        var(
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
     );
 }
-:host([dir='ltr'][valid][quiet]) .input {
-    padding-right: calc(
-        var(--spectrum-textfield-texticon-success-icon-width) +
-            var(--spectrum-textfield-quiet-texticon-success-icon-margin-left)
+:host([readonly]) #textfield #textfield .icon-workflow {
+    color: var(
+        --highcontrast-textfield-text-color-readonly,
+        var(
+            --mod-textfield-text-color-readonly,
+            var(--spectrum-textfield-text-color-readonly)
+        )
     );
 }
-:host([dir='rtl'][valid][quiet]) .input {
-    padding-left: calc(
-        var(--spectrum-textfield-texticon-success-icon-width) +
-            var(--spectrum-textfield-quiet-texticon-success-icon-margin-left)
+:host([disabled]) #textfield .icon.icon-search,
+:host([readonly]) #textfield .icon.icon-search {
+    color: var(
+        --highcontrast-textfield-text-color-disabled,
+        var(
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
     );
 }
-.icon {
+:host([invalid]) #textfield .icon,
+:host([valid]) #textfield .icon {
+    grid-area: 2/2;
+    margin-inline-start: auto;
     pointer-events: all;
     position: absolute;
+    top: 0;
 }
-:host([dir='ltr'][quiet]) .icon {
-    padding-right: 0;
-}
-:host([dir='rtl'][quiet]) .icon {
-    padding-left: 0;
-}
-:host([dir='ltr'][invalid]) #textfield .icon {
-    right: var(
-        --spectrum-textfield-icon-inline-end-override,
-        var(--spectrum-textfield-texticon-invalid-icon-margin-left)
+:host([valid]) #textfield .icon {
+    color: var(
+        --highcontrast-textfield-icon-color-valid,
+        var(
+            --mod-textfield-icon-color-valid,
+            var(--spectrum-textfield-icon-color-valid)
+        )
     );
-}
-:host([dir='rtl'][invalid]) #textfield .icon {
-    left: var(
-        --spectrum-textfield-icon-inline-end-override,
-        var(--spectrum-textfield-texticon-invalid-icon-margin-left)
+    inset-block-end: var(
+        --mod-textfield-icon-spacing-block-valid,
+        var(--spectrum-textfield-icon-spacing-block-valid)
+    );
+    inset-block-start: var(
+        --mod-textfield-icon-spacing-block-valid,
+        var(--spectrum-textfield-icon-spacing-block-valid)
+    );
+    inset-inline-end: var(
+        --mod-textfield-icon-spacing-inline-end-valid,
+        var(--spectrum-textfield-icon-spacing-inline-end-valid)
+    );
+    inset-inline-start: var(
+        --mod-textfield-icon-spacing-inline-start-valid,
+        var(--spectrum-textfield-icon-spacing-inline-start-valid)
     );
 }
 :host([invalid]) #textfield .icon {
-    bottom: calc(
-        var(--spectrum-textfield-texticon-height) / 2 -
-            var(--spectrum-textfield-texticon-invalid-icon-height) / 2
+    block-size: var(
+        --mod-textfield-icon-size-invalid,
+        var(--spectrum-textfield-icon-size-invalid)
+    );
+    color: var(
+        --highcontrast-textfield-icon-color-invalid,
+        var(
+            --mod-textfield-icon-color-invalid,
+            var(--spectrum-textfield-icon-color-invalid)
+        )
+    );
+    inline-size: var(
+        --mod-textfield-icon-size-invalid,
+        var(--spectrum-textfield-icon-size-invalid)
+    );
+    inset-block-end: var(
+        --mod-textfield-icon-spacing-block-invalid,
+        var(--spectrum-textfield-icon-spacing-block-invalid)
+    );
+    inset-block-start: var(
+        --mod-textfield-icon-spacing-block-invalid,
+        var(--spectrum-textfield-icon-spacing-block-invalid)
+    );
+    inset-inline-end: var(
+        --mod-textfield-icon-spacing-inline-end-invalid,
+        var(--spectrum-textfield-icon-spacing-inline-end-invalid)
+    );
+    inset-inline-start: var(
+        --mod-textfield-icon-spacing-inline-start-invalid,
+        var(--spectrum-textfield-icon-spacing-inline-start-invalid)
     );
-    height: var(--spectrum-textfield-texticon-invalid-icon-height);
-    width: var(--spectrum-textfield-texticon-invalid-icon-width);
 }
-:host([dir='ltr'][quiet][invalid]) #textfield .icon {
-    right: var(--spectrum-textfield-icon-inline-end-override, 0);
+:host([disabled]) #textfield .icon,
+:host([readonly]) #textfield .icon {
+    color: #0000;
 }
-:host([dir='rtl'][quiet][invalid]) #textfield .icon {
-    left: var(--spectrum-textfield-icon-inline-end-override, 0);
+:host([quiet]) .icon {
+    padding-inline-end: 0;
 }
-:host([dir='ltr'][valid]) #textfield .icon {
-    right: var(
-        --spectrum-textfield-icon-inline-end-override,
-        var(--spectrum-textfield-texticon-success-icon-margin-left)
+:host([quiet][valid]) .icon {
+    inset-inline-end: var(
+        --mod-textfield-icon-spacing-inline-end-quiet-valid,
+        var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid)
     );
 }
-:host([dir='rtl'][valid]) #textfield .icon {
-    left: var(
-        --spectrum-textfield-icon-inline-end-override,
-        var(--spectrum-textfield-texticon-success-icon-margin-left)
+:host([quiet][invalid]) .icon {
+    inset-inline-end: var(
+        --mod-textfield-icon-spacing-inline-end-quiet-invalid,
+        var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)
     );
 }
-:host([valid]) #textfield .icon {
-    bottom: calc(
-        var(--spectrum-textfield-texticon-height) / 2 -
-            var(--spectrum-textfield-texticon-success-icon-height) / 2
+.spectrum-InputGroup .icon {
+    margin-inline-end: var(
+        --spectrum-textfield-icon-spacing-inline-end-override
     );
-    height: var(--spectrum-textfield-texticon-success-icon-height);
-    width: var(--spectrum-textfield-texticon-success-icon-width);
-}
-:host([dir='ltr'][quiet][valid]) #textfield .icon {
-    right: var(--spectrum-textfield-icon-inline-end-override, 0);
 }
-:host([dir='rtl'][quiet][valid]) #textfield .icon {
-    left: var(--spectrum-textfield-icon-inline-end-override, 0);
-}
-:host([dir='ltr']) .icon-workflow {
-    left: var(--spectrum-textfield-texticon-padding-left);
-}
-:host([dir='rtl']) .icon-workflow {
-    right: var(--spectrum-textfield-texticon-padding-left);
-}
-.icon-workflow {
-    display: block;
-    height: var(
-        --spectrum-alias-workflow-icon-size-m,
-        var(--spectrum-global-dimension-size-225)
+#textfield .spectrum-FieldLabel {
+    grid-area: 1/1 / auto/span 1;
+    margin-block-end: var(
+        --mod-textfield-label-spacing-block,
+        var(--spectrum-textfield-label-spacing-block)
     );
-    position: absolute;
-    top: calc(
-        var(--spectrum-textfield-texticon-height) / 2 -
-            var(
-                --spectrum-alias-workflow-icon-size-m,
-                var(--spectrum-global-dimension-size-225)
+    padding-left: calc(
+        var(
+                --mod-textfield-corner-radius,
+                var(--spectrum-textfield-corner-radius)
             ) / 2
     );
-    width: var(
-        --spectrum-alias-workflow-icon-size-m,
-        var(--spectrum-global-dimension-size-225)
-    );
 }
-:host([dir='ltr'][quiet]) .icon-workflow {
-    left: 0;
+:host([quiet]) .spectrum-FieldLabel {
+    margin-block-end: var(
+        --mod-textfield-label-spacing-block-quiet,
+        var(--spectrum-textfield-label-spacing-block-quiet)
+    );
 }
-:host([dir='rtl'][quiet]) .icon-workflow {
-    right: 0;
+:host([disabled]) .spectrum-FieldLabel {
+    color: var(--spectrum-textfield-text-color-disabled);
 }
-:host([dir='ltr'][quiet]) .icon-workflow ~ .input {
+#textfield .spectrum-HelpText {
+    grid-area: 3/1 / auto/span 2;
+    margin-block-start: var(
+        --mod-textfield-helptext-spacing-block,
+        var(--spectrum-textfield-helptext-spacing-block)
+    );
     padding-left: calc(
         var(
-                --spectrum-alias-workflow-icon-size-m,
-                var(--spectrum-global-dimension-size-225)
-            ) + var(--spectrum-textfield-quiet-texticon-icon-gap)
+                --mod-textfield-corner-radius,
+                var(--spectrum-textfield-corner-radius)
+            ) / 2
     );
 }
-:host([dir='rtl'][quiet]) .icon-workflow ~ .input {
+.spectrum-Textfield-characterCount {
+    align-items: flex-end;
+    display: inline-flex;
+    font-family: var(
+        --mod-textfield-character-count-font-family,
+        var(--spectrum-textfield-character-count-font-family)
+    );
+    font-size: var(
+        --mod-textfield-character-count-font-size,
+        var(--spectrum-textfield-character-count-font-size)
+    );
+    font-weight: var(
+        --mod-textfield-character-count-font-weight,
+        var(--spectrum-textfield-character-count-font-weight)
+    );
+    grid-area: 1/2 / auto/span 1;
+    justify-content: flex-end;
+    margin-block-end: var(
+        --mod-textfield-character-count-spacing-block,
+        var(--spectrum-textfield-character-count-spacing-block)
+    );
+    margin-inline-end: 0;
+    margin-inline-start: var(
+        --mod-textfield-character-count-spacing-inline,
+        var(--spectrum-textfield-character-count-spacing-inline)
+    );
     padding-right: calc(
         var(
-                --spectrum-alias-workflow-icon-size-m,
-                var(--spectrum-global-dimension-size-225)
-            ) + var(--spectrum-textfield-quiet-texticon-icon-gap)
+                --mod-textfield-corner-radius,
+                var(--spectrum-textfield-corner-radius)
+            ) / 2
     );
+    width: auto;
 }
-:host([dir='ltr']) .icon-workflow + .input {
-    padding-left: calc(
-        var(--spectrum-textfield-texticon-padding-left) +
+:host([quiet]) .spectrum-Textfield-characterCount {
+    margin-block-end: var(
+        --mod-textfield-character-count-spacing-block-quiet,
+        var(--spectrum-textfield-character-count-spacing-block-quiet)
+    );
+}
+.input {
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+    background-color: var(
+        --mod-textfield-background-color,
+        var(--spectrum-textfield-background-color)
+    );
+    block-size: var(--mod-textfield-height, var(--spectrum-textfield-height));
+    border: var(
+            --mod-textfield-border-width,
+            var(--spectrum-textfield-border-width)
+        )
+        solid
+        var(
+            --highcontrast-textfield-border-color,
+            var(
+                --mod-textfield-border-color,
+                var(--spectrum-textfield-border-color)
+            )
+        );
+    border-radius: var(
+        --mod-textfield-corner-radius,
+        var(--spectrum-textfield-corner-radius)
+    );
+    box-sizing: border-box;
+    color: var(
+        --highcontrast-textfield-text-color-default,
+        var(
+            --mod-textfield-text-color-default,
+            var(--spectrum-textfield-text-color-default)
+        )
+    );
+    font-family: var(
+        --mod-textfield-font-family,
+        var(--spectrum-textfield-font-family)
+    );
+    font-size: var(
+        --mod-textfield-placeholder-font-size,
+        var(--spectrum-textfield-placeholder-font-size)
+    );
+    font-weight: var(
+        --mod-textfield-font-weight,
+        var(--spectrum-textfield-font-weight)
+    );
+    grid-area: 2/1 / auto/span 2;
+    inline-size: 100%;
+    margin: 0;
+    min-inline-size: var(
+        --mod-textfield-min-width,
+        var(--spectrum-textfield-min-width)
+    );
+    outline: none;
+    overflow: visible;
+    padding-block-end: calc(
+        var(
+                --mod-textfield-spacing-block-end,
+                var(--spectrum-textfield-spacing-block-end)
+            ) -
             var(
-                --spectrum-alias-workflow-icon-size-m,
-                var(--spectrum-global-dimension-size-225)
-            ) + var(--spectrum-textfield-texticon-icon-gap)
+                --mod-textfield-border-width,
+                var(--spectrum-textfield-border-width)
+            )
     );
+    padding-block-start: calc(
+        var(
+                --mod-textfield-spacing-block-start,
+                var(--spectrum-textfield-spacing-block-start)
+            ) -
+            var(
+                --mod-textfield-border-width,
+                var(--spectrum-textfield-border-width)
+            )
+    );
+    padding-inline: calc(
+        var(
+                --mod-textfield-spacing-inline,
+                var(--spectrum-textfield-spacing-inline)
+            ) -
+            var(
+                --mod-textfield-border-width,
+                var(--spectrum-textfield-border-width)
+            )
+    );
+    text-indent: 0;
+    text-overflow: ellipsis;
+    transition: border-color
+        var(
+            --mod-texfield-animation-duration,
+            var(--spectrum-texfield-animation-duration)
+        )
+        ease-in-out;
+    vertical-align: top;
 }
-:host([dir='rtl']) .icon-workflow + .input {
-    padding-right: calc(
-        var(--spectrum-textfield-texticon-padding-left) +
+:host([quiet]) .icon-workflow ~ .input {
+    padding-inline-start: calc(
+        var(
+                --mod--Textfield-workflow-icon-gap,
+                var(--spectrum-Textfield-workflow-icon-gap)
+            ) +
             var(
-                --spectrum-alias-workflow-icon-size-m,
-                var(--spectrum-global-dimension-size-225)
-            ) + var(--spectrum-textfield-texticon-icon-gap)
+                --mod-Textfield-workflow-icon-width,
+                var(--spectrum-Textfield-workflow-icon-width)
+            )
     );
 }
-:host([multiline]) .icon-workflow ~ .input {
-    height: var(--spectrum-textfield-texticon-height);
-    min-height: var(--spectrum-textfield-texticon-height);
+.input::-ms-clear {
+    block-size: 0;
+    inline-size: 0;
 }
-#textfield:hover .input {
-    border-color: var(
-        --spectrum-textfield-m-texticon-border-color-hover,
-        var(--spectrum-alias-input-border-color-hover)
-    );
+.input::-webkit-inner-spin-button,
+.input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.input:-moz-ui-invalid {
     box-shadow: none;
 }
-#textfield:hover .input::placeholder {
+.input::placeholder {
     color: var(
-        --spectrum-textfield-m-texticon-placeholder-text-color-hover,
-        var(--spectrum-alias-placeholder-text-color-hover)
+        --highcontrast-textfield-text-color-default,
+        var(
+            --mod-textfield-text-color-default,
+            var(--spectrum-textfield-text-color-default)
+        )
     );
-}
-#textfield:hover .icon-workflow {
-    color: var(
-        --spectrum-textfield-m-texticon-icon-color-hover,
-        var(--spectrum-alias-component-icon-color-hover)
+    font-family: var(
+        --mod-textfield-font-family,
+        var(--spectrum-textfield-font-family)
+    );
+    font-size: var(
+        --mod-textfield-placeholder-font-size,
+        var(--spectrum-textfield-placeholder-font-size)
     );
+    font-weight: var(
+        --mod-textfield-font-weight,
+        var(--spectrum-textfield-font-weight)
+    );
+    opacity: 1;
+    transition: color
+        var(
+            --mod-texfield-animation-duration,
+            var(--spectrum-texfield-animation-duration)
+        )
+        ease-in-out;
+}
+.input:lang(ja)::placeholder,
+.input:lang(ko)::placeholder,
+.input:lang(zh)::placeholder {
+    font-style: normal;
 }
-#textfield:active .input {
+.input:lang(ja)::-moz-placeholder,
+.input:lang(ko)::-moz-placeholder,
+.input:lang(zh)::-moz-placeholder {
+    font-style: normal;
+}
+#textfield:hover .input,
+.input:hover {
     border-color: var(
-        --spectrum-textfield-m-texticon-border-color-down,
-        var(--spectrum-alias-input-border-color-down)
+        --highcontrast-textfield-border-color-hover,
+        var(
+            --mod-textfield-border-color-hover,
+            var(--spectrum-textfield-border-color-hover)
+        )
+    );
+    color: var(
+        --highcontrast-textfield-text-color-hover,
+        var(
+            --mod-textfield-text-color-hover,
+            var(--spectrum-textfield-text-color-hover)
+        )
     );
 }
-#textfield:active .icon-workflow {
+#textfield:hover .input::placeholder,
+.input:hover::placeholder {
     color: var(
-        --spectrum-textfield-m-texticon-icon-color-down,
-        var(--spectrum-alias-component-icon-color-down)
+        --highcontrast-textfield-text-color-hover,
+        var(
+            --mod-textfield-text-color-hover,
+            var(--spectrum-textfield-text-color-hover)
+        )
     );
 }
-:host([valid]) #textfield .icon {
+.input:focus,
+:host([focused]) .input {
+    border-color: var(
+        --highcontrast-textfield-border-color-focus,
+        var(
+            --mod-textfield-border-color-focus,
+            var(--spectrum-textfield-border-color-focus)
+        )
+    );
     color: var(
-        --spectrum-textfield-m-texticon-validation-icon-color-valid,
-        var(--spectrum-semantic-positive-icon-color)
+        --highcontrast-textfield-text-color-focus,
+        var(
+            --mod-textfield-text-color-focus,
+            var(--spectrum-textfield-text-color-focus)
+        )
     );
 }
-:host([invalid]) #textfield .icon {
+.input:focus::placeholder,
+:host([focused]) .input::placeholder {
     color: var(
-        --spectrum-textfield-m-texticon-validation-icon-color-invalid,
-        var(--spectrum-semantic-negative-icon-color)
+        --highcontrast-textfield-text-color-focus,
+        var(
+            --mod-textfield-text-color-focus,
+            var(--spectrum-textfield-text-color-focus)
+        )
     );
 }
-:host([invalid]) #textfield:hover .input {
+.input:focus:hover,
+:host([focused]) .input:hover {
     border-color: var(
-        --spectrum-textfield-m-texticon-border-color-invalid-hover,
-        var(--spectrum-alias-input-border-color-invalid-hover)
+        --highcontrast-textfield-border-color-focus-hover,
+        var(
+            --mod-textfield-border-color-focus-hover,
+            var(--spectrum-textfield-border-color-focus-hover)
+        )
     );
-}
-:host([disabled]) #textfield .icon {
     color: var(
-        --spectrum-textfield-m-texticon-validation-icon-color-invalid-disabled,
-        var(--spectrum-alias-background-color-transparent)
+        --highcontrast-textfield-text-color-focus-hover,
+        var(
+            --mod-textfield-text-color-focus-hover,
+            var(--spectrum-textfield-text-color-focus-hover)
+        )
     );
 }
-:host([disabled]) #textfield .icon-workflow {
+.input:focus:hover::placeholder,
+:host([focused]) .input:hover::placeholder {
     color: var(
-        --spectrum-textfield-m-texticon-icon-color-disabled,
-        var(--spectrum-alias-component-icon-color-disabled)
+        --highcontrast-textfield-text-color-focus-hover,
+        var(
+            --mod-textfield-text-color-focus-hover,
+            var(--spectrum-textfield-text-color-focus-hover)
+        )
     );
 }
-.icon-workflow {
-    color: var(
-        --spectrum-textfield-m-texticon-icon-color,
-        var(--spectrum-alias-component-icon-color-default)
+.input.focus-visible,
+:host([focused]) .input {
+    border-color: var(
+        --highcontrast-textfield-border-color-keyboard-focus,
+        var(
+            --mod-textfield-border-color-keyboard-focus,
+            var(--spectrum-textfield-border-color-keyboard-focus)
+        )
     );
-}
-.icon,
-.icon-workflow {
-    pointer-events: none;
-}
-:host([focused]) #textfield:after {
-    box-shadow: 0 0 0
+    color: var(
+        --highcontrast-textfield-text-color-keyboard-focus,
         var(
-            --spectrum-textfield-m-texticon-focus-ring-border-width,
-            var(--spectrum-alias-component-focusring-size)
+            --mod-textfield-text-color-focus,
+            var(--spectrum-textfield-text-color-keyboard-focus)
         )
+    );
+    outline: var(
+            --mod-textfield-focus-indicator-width,
+            var(--spectrum-textfield-focus-indicator-width)
+        )
+        solid;
+    outline-color: var(
+        --highcontrast-textfield-focus-indicator-color,
         var(
-            --spectrum-textfield-m-textonly-focus-ring-border-color-key-focus,
-            var(--spectrum-alias-focus-ring-color)
-        );
-}
-:host([focused][quiet]) #textfield .input {
-    box-shadow: none;
+            --mod-textfield-focus-indicator-color,
+            var(--spectrum-textfield-focus-indicator-color)
+        )
+    );
+    outline-offset: var(
+        --mod-textfield-focus-indicator-gap,
+        var(--spectrum-textfield-focus-indicator-gap)
+    );
 }
-:host([focused][quiet]) #textfield:after {
-    border-bottom: 2px solid
+.input:focus-visible,
+:host([focused]) .input {
+    border-color: var(
+        --highcontrast-textfield-border-color-keyboard-focus,
         var(
-            --spectrum-textfield-m-textonly-focus-ring-border-color-key-focus,
-            var(--spectrum-alias-focus-ring-color)
-        );
-    bottom: calc(
+            --mod-textfield-border-color-keyboard-focus,
+            var(--spectrum-textfield-border-color-keyboard-focus)
+        )
+    );
+    color: var(
+        --highcontrast-textfield-text-color-keyboard-focus,
         var(
-                --spectrum-alias-input-quiet-focusline-gap,
-                var(--spectrum-global-dimension-static-size-10)
-            ) * -1
+            --mod-textfield-text-color-focus,
+            var(--spectrum-textfield-text-color-keyboard-focus)
+        )
     );
-    box-shadow: none;
-    margin: 0;
-}
-.input {
-    background-color: var(
-        --spectrum-textfield-m-texticon-background-color,
-        var(--spectrum-global-color-gray-50)
+    outline: var(
+            --mod-textfield-focus-indicator-width,
+            var(--spectrum-textfield-focus-indicator-width)
+        )
+        solid;
+    outline-color: var(
+        --highcontrast-textfield-focus-indicator-color,
+        var(
+            --mod-textfield-focus-indicator-color,
+            var(--spectrum-textfield-focus-indicator-color)
+        )
     );
-    border-color: var(
-        --spectrum-textfield-m-texticon-border-color,
-        var(--spectrum-alias-input-border-color-default)
+    outline-offset: var(
+        --mod-textfield-focus-indicator-gap,
+        var(--spectrum-textfield-focus-indicator-gap)
     );
+}
+.input.focus-visible::placeholder,
+:host([focused]) .input::placeholder {
     color: var(
-        --spectrum-textfield-m-texticon-text-color,
-        var(--spectrum-alias-component-text-color-default)
+        --highcontrast-textfield-text-color-keyboard-focus,
+        var(
+            --mod-textfield-text-color-keyboard-focus,
+            var(--spectrum-textfield-text-color-keyboard-focus)
+        )
     );
 }
-.input::placeholder {
+.input:focus-visible::placeholder,
+:host([focused]) .input::placeholder {
     color: var(
-        --spectrum-textfield-m-texticon-placeholder-text-color,
-        var(--spectrum-global-color-gray-600)
+        --highcontrast-textfield-text-color-keyboard-focus,
+        var(
+            --mod-textfield-text-color-keyboard-focus,
+            var(--spectrum-textfield-text-color-keyboard-focus)
+        )
     );
 }
-.input:focus,
-:host([focused]) #textfield .input {
-    border-color: var(
-        --spectrum-textfield-m-texticon-border-color-down,
-        var(--spectrum-alias-input-border-color-down)
+:host([valid]) .input {
+    color: var(
+        --highcontrast-textfield-text-color-valid,
+        var(
+            --mod-textfield-text-color-valid,
+            var(--spectrum-textfield-text-color-valid)
+        )
     );
 }
-.input.focus-visible,
-:host([focused]) #textfield .input {
+:host([invalid]) .input {
     border-color: var(
-        --spectrum-textfield-m-texticon-border-color-key-focus,
-        var(--spectrum-alias-input-border-color-key-focus)
+        --highcontrast-textfield-border-color-invalid-default,
+        var(
+            --mod-textfield-border-color-invalid-default,
+            var(--spectrum-textfield-border-color-invalid-default)
+        )
+    );
+    color: var(
+        --highcontrast-textfield-text-color-invalid,
+        var(
+            --mod-textfield-text-color-invalid,
+            var(--spectrum-textfield-text-color-invalid)
+        )
     );
 }
-.input:focus-visible,
-:host([focused]) #textfield .input {
+:host([invalid]) .input:hover,
+:host([invalid]:hover) .input {
     border-color: var(
-        --spectrum-textfield-m-texticon-border-color-key-focus,
-        var(--spectrum-alias-input-border-color-key-focus)
+        --highcontrast-textfield-border-color-invalid-hover,
+        var(
+            --mod-textfield-border-color-invalid-hover,
+            var(--spectrum-textfield-border-color-invalid-hover)
+        )
     );
 }
-:host([invalid]) #textfield .input {
+:host([invalid]) .input:focus,
+:host([invalid]:focus) .input,
+:host([invalid][focused]) .input {
     border-color: var(
-        --spectrum-textfield-m-texticon-border-color-invalid,
-        var(--spectrum-alias-input-border-color-invalid-default)
+        --highcontrast-textfield-border-color-invalid-focus,
+        var(
+            --mod-textfield-border-color-invalid-focus,
+            var(--spectrum-textfield-border-color-invalid-focus)
+        )
     );
 }
-:host([focused][invalid]) #textfield .input,
-:host([invalid]) #textfield .input:focus {
+:host([invalid]) .input:focus:hover,
+:host([invalid]:focus) .input:hover,
+:host([invalid][focused]) .input:hover {
     border-color: var(
-        --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,
-        var(--spectrum-alias-input-border-color-invalid-mouse-focus)
+        --highcontrast-textfield-border-color-invalid-focus-hover,
+        var(
+            --mod-textfield-border-color-invalid-focus-hover,
+            var(--spectrum-textfield-border-color-invalid-focus-hover)
+        )
     );
 }
-:host([focused][invalid]) #textfield .input,
-:host([invalid]) #textfield .input.focus-visible {
+:host([invalid]) .input.focus-visible,
+:host([invalid][focused]) .input {
     border-color: var(
-        --spectrum-textfield-m-texticon-border-color-invalid-key-focus,
-        var(--spectrum-alias-input-border-color-invalid-key-focus)
+        --highcontrast-textfield-border-color-invalid-keyboard-focus,
+        var(
+            --mod-textfield-border-color-invalid-keyboard-focus,
+            var(--spectrum-textfield-border-color-invalid-keyboard-focus)
+        )
     );
 }
-:host([focused][invalid]) #textfield .input,
-:host([invalid]) #textfield .input:focus-visible {
+:host([invalid]) .input:focus-visible,
+:host([invalid][focused]) .input {
     border-color: var(
-        --spectrum-textfield-m-texticon-border-color-invalid-key-focus,
-        var(--spectrum-alias-input-border-color-invalid-key-focus)
+        --highcontrast-textfield-border-color-invalid-keyboard-focus,
+        var(
+            --mod-textfield-border-color-invalid-keyboard-focus,
+            var(--spectrum-textfield-border-color-invalid-keyboard-focus)
+        )
     );
 }
 .input:disabled,
 :host([disabled]) #textfield .input,
 :host([disabled]) #textfield:hover .input {
     -webkit-text-fill-color: var(
-        --spectrum-textfield-m-texticon-text-color-disabled,
-        var(--spectrum-alias-component-text-color-disabled)
+        --highcontrast-textfield-text-color-disabled,
+        var(
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
     );
     background-color: var(
-        --spectrum-textfield-m-texticon-background-color-disabled,
-        var(--spectrum-global-color-gray-200)
-    );
-    border-color: var(
-        --spectrum-textfield-m-texticon-border-color-disabled,
-        var(--spectrum-alias-input-border-color-disabled)
+        --mod-textfield-background-color-disabled,
+        var(--spectrum-textfield-background-color-disabled)
     );
+    border-color: #0000;
     color: var(
-        --spectrum-textfield-m-texticon-text-color-disabled,
-        var(--spectrum-alias-component-text-color-disabled)
+        --highcontrast-textfield-text-color-disabled,
+        var(
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
     );
+    opacity: 1;
+    resize: none;
 }
 .input:disabled::placeholder,
 :host([disabled]) #textfield .input::placeholder,
 :host([disabled]) #textfield:hover .input::placeholder {
     color: var(
-        --spectrum-textfield-m-texticon-placeholder-text-color-disabled,
-        var(--spectrum-alias-text-color-disabled)
-    );
-}
-.input:read-only,
-:host([readonly]) #textfield .input,
-:host([readonly]) #textfield:hover .input {
-    -webkit-text-fill-color: var(--spectrum-global-color-gray-800);
-    background-color: var(
-        --spectrum-alias-background-color-transparent,
-        transparent
-    );
-    border-color: var(
-        --spectrum-alias-background-color-transparent,
-        transparent
+        --highcontrast-textfield-text-color-disabled,
+        var(
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
     );
-    color: var(--spectrum-global-color-gray-800);
 }
 :host([quiet]) .input {
-    background-color: var(
-        --spectrum-textfield-m-quiet-texticon-background-color,
-        var(--spectrum-alias-background-color-transparent)
+    background-color: #0000;
+    border-block-start-width: 0;
+    border-inline-width: 0;
+    border-radius: 0;
+    margin-block-end: var(
+        --mod-textfield-spacing-block-quiet,
+        var(--spectrum-textfield-spacing-block-quiet)
     );
-    border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color,
-        var(--spectrum-alias-input-border-color-default)
+    outline: none;
+    overflow-y: hidden;
+    padding-block-start: var(
+        --mod-textfield-spacing-block-start,
+        var(--spectrum-textfield-spacing-block-start)
     );
-}
-:host([quiet]:hover) .input {
-    border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color-hover,
-        var(--spectrum-alias-input-border-color-hover)
+    padding-inline: var(
+        --mod-textfield-spacing-inline-quiet,
+        var(--spectrum-textfield-spacing-inline-quiet)
     );
+    resize: none;
 }
-:host([quiet]):active .input {
+.input:disabled,
+:host([quiet][disabled]) .input,
+:host([quiet][disabled]:hover) .input {
+    background-color: #0000;
     border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color-down,
-        var(--spectrum-alias-input-border-color-down)
+        --mod-textfield-border-color-disabled,
+        var(--spectrum-textfield-border-color-disabled)
     );
-}
-:host([focused][quiet]) .input,
-:host([quiet]) .input:focus {
-    border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color-mouse-focus,
-        var(--spectrum-alias-input-border-color-mouse-focus)
+    color: var(
+        --highcontrast-textfield-text-color-disabled,
+        var(
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
     );
 }
-:host([focused][quiet]) .input,
-:host([quiet]) .input.focus-visible {
-    border-color: var(
-        --spectrum-textfield-m-texticon-border-color-key-focus,
-        var(--spectrum-alias-input-border-color-key-focus)
-    );
-    box-shadow: 0 1px 0
+.input:disabled::placeholder,
+:host([quiet][disabled]) .input::placeholder,
+:host([quiet][disabled]:hover) .input::placeholder {
+    color: var(
+        --highcontrast-textfield-text-color-disabled,
         var(
-            --spectrum-textfield-m-texticon-border-color-key-focus,
-            var(--spectrum-alias-input-border-color-key-focus)
-        );
-}
-:host([focused][quiet]) .input,
-:host([quiet]) .input:focus-visible {
-    border-color: var(
-        --spectrum-textfield-m-texticon-border-color-key-focus,
-        var(--spectrum-alias-input-border-color-key-focus)
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
     );
-    box-shadow: 0 1px 0
-        var(
-            --spectrum-textfield-m-texticon-border-color-key-focus,
-            var(--spectrum-alias-input-border-color-key-focus)
-        );
 }
-:host([invalid][quiet]) .input {
-    border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color-invalid,
-        var(--spectrum-alias-input-border-color-invalid-default)
+.input:read-only,
+:host([readonly]) #textfield .input,
+:host([readonly]) #textfield:hover .input {
+    background-color: #0000;
+    border-color: #0000;
+    color: var(
+        --highcontrast-textfield-text-color-readonly,
+        var(
+            --mod-textfield-text-color-readonly,
+            var(--spectrum-textfield-text-color-readonly)
+        )
     );
+    outline: none;
 }
-:host([focused][invalid][quiet]) .input,
-:host([invalid][quiet]) .input:focus {
-    border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus,
-        var(--spectrum-alias-input-border-color-invalid-mouse-focus)
+.input:read-only::placeholder,
+:host([readonly]) #textfield .input::placeholder,
+:host([readonly]) #textfield:hover .input::placeholder {
+    background-color: #0000;
+    color: var(
+        --highcontrast-textfield-text-color-readonly,
+        var(
+            --mod-textfield-text-color-readonly,
+            var(--spectrum-textfield-text-color-readonly)
+        )
     );
 }
-:host([focused][invalid][quiet]) .input,
-:host([invalid][quiet]) .input.focus-visible {
-    border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,
-        var(--spectrum-alias-input-border-color-invalid-key-focus)
+.spectrum-Textfield--sideLabel {
+    grid-template-columns: auto auto auto;
+    grid-template-rows: auto auto;
+}
+.spectrum-Textfield--sideLabel:after {
+    grid-area: 1/2 / span 1 / span 1;
+}
+.spectrum-Textfield--sideLabel .spectrum-FieldLabel {
+    grid-area: 1/1 / span 2 / span 1;
+    margin-inline-end: var(
+        --mod-textfield-label-spacing-inline-side-label,
+        var(--spectrum-textfield-label-spacing-inline-side-label)
     );
-    box-shadow: 0 1px 0
-        var(
-            --spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,
-            var(--spectrum-alias-input-border-color-invalid-key-focus)
-        );
 }
-:host([focused][invalid][quiet]) .input,
-:host([invalid][quiet]) .input:focus-visible {
-    border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,
-        var(--spectrum-alias-input-border-color-invalid-key-focus)
+.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount {
+    align-items: flex-start;
+    grid-area: 1/3 / auto/span 1;
+    margin-block-start: var(
+        --mod-textfield-character-count-spacing-block-side,
+        var(--spectrum-textfield-character-count-spacing-block-side)
+    );
+    margin-inline-start: var(
+        --mod-textfield-character-count-spacing-inline-side,
+        var(--spectrum-textfield-character-count-spacing-inline-side)
     );
-    box-shadow: 0 1px 0
-        var(
-            --spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,
-            var(--spectrum-alias-input-border-color-invalid-key-focus)
-        );
 }
-:host([disabled][quiet]) .input,
-:host([disabled][quiet]:hover) .input,
-:host([quiet]) .input:disabled {
-    background-color: var(
-        --spectrum-textfield-m-quiet-texticon-background-color-disabled,
-        var(--spectrum-alias-background-color-transparent)
+.spectrum-Textfield--sideLabel .spectrum-HelpText {
+    grid-area: 2/2 / auto/span 1;
+}
+.spectrum-Textfield--sideLabel .icon,
+.spectrum-Textfield--sideLabel .input {
+    grid-area: 1/2 / span 1 / span 1;
+}
+:host([multiline]) .input {
+    min-block-size: var(
+        --mod-text-area-min-block-size,
+        var(--spectrum-text-area-min-block-size)
     );
-    border-color: var(
-        --spectrum-textfield-m-quiet-texticon-border-color-disabled,
-        var(--spectrum-alias-input-border-color-quiet-disabled)
+    min-inline-size: var(
+        --mod-text-area-min-inline-size,
+        var(--spectrum-text-area-min-inline-size)
+    );
+    resize: inherit;
+}
+:host([multiline][grows]) .input {
+    grid-row: 1;
+}
+:host([multiline][quiet]) .input {
+    min-block-size: var(
+        --mod-text-area-min-block-size-quiet,
+        var(--spectrum-text-area-min-block-size-quiet)
     );
+    overflow-y: hidden;
+    resize: none;
 }
 @media (forced-colors: active) {
     :host {
-        --spectrum-textfield-m-quiet-texticon-border-color-disabled: GrayText;
-        --spectrum-textfield-m-quiet-texticon-border-color-down: Highlight;
-        --spectrum-textfield-m-quiet-texticon-border-color-hover: Highlight;
-        --spectrum-textfield-m-quiet-texticon-border-color-invalid: Highlight;
-        --spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus: Highlight;
-        --spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus: Highlight;
-        --spectrum-textfield-m-quiet-texticon-border-color-mouse-focus: Highlight;
-        --spectrum-textfield-m-texticon-border-color-disabled: GrayText;
-        --spectrum-textfield-m-texticon-border-color-down: Highlight;
-        --spectrum-textfield-m-texticon-border-color-hover: Highlight;
-        --spectrum-textfield-m-texticon-border-color-invalid: Highlight;
-        --spectrum-textfield-m-texticon-border-color-invalid-hover: Highlight;
-        --spectrum-textfield-m-texticon-border-color-invalid-key-focus: Highlight;
-        --spectrum-textfield-m-texticon-border-color-invalid-mouse-focus: Highlight;
-        --spectrum-textfield-m-texticon-border-color-key-focus: Highlight;
-        --spectrum-textfield-m-texticon-placeholder-text-color: GrayText;
-        --spectrum-textfield-m-texticon-placeholder-text-color-disabled: GrayText;
-        --spectrum-textfield-m-texticon-placeholder-text-color-hover: GrayText;
-        --spectrum-textfield-m-texticon-text-color-disabled: GrayText;
-        --spectrum-textfield-m-textonly-focus-ring-border-color-key-focus: Highlight;
-        --spectrum-textfield-m-texticon-focus-ring-border-width: 2px;
+        --highcontrast-textfield-border-color-hover: Highlight;
+        --highcontrast-textfield-border-color-focus: Highlight;
+        --highcontrast-textfield-border-color-keyboard-focus: CanvasText;
+        --highcontrast-textfield-focus-indicator-color: Highlight;
+        --highcontrast-textfield-border-color-invalid-default: Highlight;
+        --highcontrast-textfield-border-color-invalid-hover: Highlight;
+        --highcontrast-textfield-border-color-invalid-focus: Highlight;
+        --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight;
+        --highcontrast-textfield-text-color-valid: CanvasText;
+        --highcontrast-textfield-text-color-invalid: CanvasText;
     }
-    :host([focused]) #textfield:after {
-        forced-color-adjust: none;
+    #textfield .input {
+        --highcontrast-textfield-text-color-default: CanvasText;
+        --highcontrast-textfield-text-color-hover: CanvasText;
+        --highcontrast-textfield-text-color-keyboard-focus: CanvasText;
+        --highcontrast-textfield-text-color-disabled: GrayText;
+        --highcontrast-textfield-text-color-readonly: CanvasText;
     }
+    #textfield .input::placeholder {
+        --highcontrast-textfield-text-color-default: GrayText;
+        --highcontrast-textfield-text-color-hover: GrayText;
+        --highcontrast-textfield-text-color-keyboard-focus: GrayText;
+        --highcontrast-textfield-text-color-disabled: GrayText;
+        --highcontrast-textfield-text-color-readonly: CanvasText;
+    }
+}
+:host {
+    --spectrum-textfield-border-color: var(
+        --system-spectrum-textfield-border-color
+    );
+    --spectrum-textfield-border-color-hover: var(
+        --system-spectrum-textfield-border-color-hover
+    );
+    --spectrum-textfield-border-color-focus: var(
+        --system-spectrum-textfield-border-color-focus
+    );
+    --spectrum-textfield-border-color-focus-hover: var(
+        --system-spectrum-textfield-border-color-focus-hover
+    );
+    --spectrum-textfield-border-color-keyboard-focus: var(
+        --system-spectrum-textfield-border-color-keyboard-focus
+    );
+    --spectrum-textfield-border-width: var(
+        --system-spectrum-textfield-border-width
+    );
 }
diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
index 51fe83fa73..dfbe84c1eb 100644
--- a/packages/textfield/src/textfield.css
+++ b/packages/textfield/src/textfield.css
@@ -56,17 +56,61 @@ textarea {
     overflow: hidden;
 }
 
+:host([grows]) #textfield:after {
+    grid-area: unset;
+    min-block-size: calc(
+        var(
+                --mod-text-area-min-block-size,
+                var(--spectrum-text-area-min-block-size)
+            ) +
+            var(
+                --mod-textfield-focus-indicator-gap,
+                var(--spectrum-textfield-focus-indicator-gap)
+            ) * 2
+    );
+}
+
 :host([grows]) #sizer {
+    min-block-size: var(
+        --mod-text-area-min-block-size,
+        var(--spectrum-text-area-min-block-size)
+    );
     word-break: break-word;
     white-space: pre-wrap;
     box-sizing: border-box;
     overflow-wrap: break-word;
     border: var(--spectrum-textfield-texticon-border-size) solid;
     border-radius: var(--spectrum-textfield-texticon-border-radius);
-    padding: var(--spectrum-textarea-padding-top)
-        var(--spectrum-textarea-padding-right)
-        var(--spectrum-textarea-padding-bottom)
-        calc(var(--spectrum-textarea-padding-left) - 1px);
+    padding-block-end: calc(
+        var(
+                --mod-textfield-spacing-block-end,
+                var(--spectrum-textfield-spacing-block-end)
+            ) +
+            var(
+                --mod-textfield-border-width,
+                var(--spectrum-textfield-border-width)
+            )
+    );
+    padding-block-start: calc(
+        var(
+                --mod-textfield-spacing-block-start,
+                var(--spectrum-textfield-spacing-block-start)
+            ) +
+            var(
+                --mod-textfield-border-width,
+                var(--spectrum-textfield-border-width)
+            )
+    );
+    padding-inline: calc(
+        var(
+                --mod-textfield-spacing-inline,
+                var(--spectrum-textfield-spacing-inline)
+            ) +
+            var(
+                --mod-textfield-border-width,
+                var(--spectrum-textfield-border-width)
+            )
+    );
     text-indent: 0;
     width: 100%;
     vertical-align: top;
@@ -108,22 +152,6 @@ textarea {
             ease-in-out;
 }
 
-:host([multiline][focused]:not([quiet])) textarea,
-:host([multiline][focused]:not([quiet]):hover) textarea {
-    box-shadow: 0 0 0
-        calc(
-            0px +
-                var(
-                    --spectrum-textfield-m-texticon-focus-ring-border-width,
-                    var(--spectrum-alias-component-focusring-size)
-                )
-        )
-        var(
-            --spectrum-textfield-m-textonly-focus-ring-border-color-key-focus,
-            var(--spectrum-alias-focus-ring-color)
-        ) !important;
-}
-
 :host([multiline]:not([quiet])) #textfield:after {
     box-shadow: none;
 }
@@ -142,3 +170,15 @@ textarea {
         var(--spectrum-alias-input-border-color-quiet-disabled)
     );
 }
+
+/* :not selector not working with regex for process-spectrum so had to override here */
+:host([disabled]) #textfield .icon.icon-search,
+:host([readonly]) #textfield .icon.icon-search {
+    color: var(
+        --highcontrast-textfield-text-color-disabled,
+        var(
+            --mod-textfield-text-color-disabled,
+            var(--spectrum-textfield-text-color-disabled)
+        )
+    );
+}
diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js
index b99751da2d..8d16977d19 100644
--- a/scripts/spectrum-tokens.js
+++ b/scripts/spectrum-tokens.js
@@ -65,6 +65,7 @@ const tokenPackages = [
     'popover',
     'thumbnail',
     'dropzone',
+    'textfield',
 ];
 
 const packagePaths = tokenPackages.map((packageName) => {
diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css
index b91cf637bb..3a604820c1 100644
--- a/tools/styles/tokens/express/global-vars.css
+++ b/tools/styles/tokens/express/global-vars.css
@@ -1317,3 +1317,17 @@ governing permissions and limitations under the License.
 :root {
     --system-spectrum-popover-border-width: 0;
 }
+
+:host,
+:root {
+    --system-spectrum-textfield-border-color: var(--spectrum-gray-400);
+    --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-500);
+    --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
+    --system-spectrum-textfield-border-color-focus-hover: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-textfield-border-color-keyboard-focus: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-textfield-border-width: var(--spectrum-border-width-200);
+}
diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css
index 4f55a0957a..b1af4b7436 100644
--- a/tools/styles/tokens/spectrum/global-vars.css
+++ b/tools/styles/tokens/spectrum/global-vars.css
@@ -1318,3 +1318,17 @@ governing permissions and limitations under the License.
 :root {
     --system-spectrum-popover-border-width: var(--spectrum-border-width-100);
 }
+
+:host,
+:root {
+    --system-spectrum-textfield-border-color: var(--spectrum-gray-500);
+    --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600);
+    --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800);
+    --system-spectrum-textfield-border-color-focus-hover: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-textfield-border-color-keyboard-focus: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-textfield-border-width: var(--spectrum-border-width-100);
+}
diff --git a/yarn.lock b/yarn.lock
index 3ae4926c0b..169c1d2a4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4656,10 +4656,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/taggroup/-/taggroup-3.3.46.tgz#cc5a1a592014ed918cceddd6a6536d7098209d4c"
   integrity sha512-sebQ1ewdskpgl3p9OSfwrJahEKozk8BmFPhhLsfjMtlFsTuSyN9qk7RznbPHmRa4iUlmBj2NKy9i7nYeZnSSdg==
 
-"@spectrum-css/textfield@^3.2.16":
-  version "3.2.16"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.2.16.tgz#17cc6d41e6540ab3cc28b9ef9aa3dc2e0161264d"
-  integrity sha512-Ohiq+FIjzwxU/q5i8cgtJQn6Y24h7y1zvxA2L1v53ja40cJKzvAJSYjGVjyuOnLSftt//2xKza6AwPyJJmGEiA==
+"@spectrum-css/textfield@^5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-5.1.7.tgz#95004b3743991a6447a3081404cc48f789546487"
+  integrity sha512-ClClBtyTw0OrKShzhU+HSCq9LsIpBrl+7DKFBxq/gd3k/wDgFe6tTXcGzEKTeMooTByrOoKdeZBS+4SkapTn3A==
 
 "@spectrum-css/thumbnail@^3.0.5":
   version "3.0.7"