@spectrum-web-components/textfield 0.10.0 → 0.11.0

package/README.md

@@ -88,3 +88,47 @@ user affordances like mobile keyboards and obscured characters:
 ```
 
 If the `type` attribute is not specified, or if it does not match any of these values, the default type adopted is "text."
+
+## Help text
+
+Help text can be accessibly associated with an `<sp-textfield>` element by using the `help-text` or `negative-help-text` slots. When using the `negative-help-text` slot, `<sp-textfield>` will self manage the presence of this content based on the value of the `invalid` property on your `<sp-textfield>` element. Content within the `help-text` slot will be show by default. When your `<sp-textfield>` should receive help text based on state outside of the complexity of `invalid` or not, manage the content addressed to the `help-text` from above to ensure that it displays the right messaging and possesses the right `variant`.
+
+<sp-tabs selected="self" auto label="Help text usage in textfields">
+<sp-tab value="self">Self managed</sp-tab>
+<sp-tab-panel value="self">
+
+```html
+<sp-field-label for="self">Stay "Positive"</sp-field-label>
+<sp-textfield id="self" pattern="[P][o][s][i][t][i][v][e]" value="Positive">
+    <sp-help-text slot="help-text">
+        Tell us how you are feeling today.
+    </sp-help-text>
+    <sp-help-text slot="negative-help-text">Please be "Positive".</sp-help-text>
+</sp-textfield>
+```
+
+</sp-tab-panel>
+<sp-tab value="above">Managed from above</sp-tab>
+<sp-tab-panel value="above">
+
+```html
+<sp-field-label for="managed">Stay "Positive"</sp-field-label>
+<sp-textfield
+    id="managed"
+    pattern="[P][o][s][i][t][i][v][e]"
+    value="Positive"
+    oninput='
+        const helpText = this.querySelector(`[slot="help-text"]`);
+        helpText.textContent = this.invalid ? `Please be "Positive".` : `Tell us how you are feeling today.`;
+        helpText.variant = this.invalid ? `negative` : `neutral`;
+    '
+>
+    <sp-help-text slot="neutral-text">
+        Tell us how you're feeling today.
+    </sp-help-text>
+    <sp-help-text slot="help-text">Please be "Positive".</sp-help-text>
+</sp-textfield>
+```
+
+</sp-tab-panel>
+</sp-tabs>

package/custom-elements.json

@@ -236,7 +236,54 @@
             },
             {
               "kind": "method",
-              "name": "onInput",
+              "name": "setSelectionRange",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectionStart",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The 0-based index of the first selected character. An index greater than the length of the\nelement's value is treated as pointing to the end of the value."
+                },
+                {
+                  "name": "selectionEnd",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The 0-based index of the character after the last selected character. An index greater than\nthe length of the element's value is treated as pointing to the end of the value."
+                },
+                {
+                  "name": "selectionDirection",
+                  "default": "'none'",
+                  "type": {
+                    "text": "'forward' | 'backward' | 'none'"
+                  },
+                  "description": "A string indicating the direction in which the selection is considered to\nhave been performed.",
+                  "optional": true
+                }
+              ],
+              "description": "Sets the start and end positions of the current selection."
+            },
+            {
+              "kind": "method",
+              "name": "select",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Selects all the text."
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -246,7 +293,7 @@
             },
             {
               "kind": "method",
-              "name": "onChange",
+              "name": "handleChange",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -292,16 +339,6 @@
               },
               "privacy": "protected"
             },
-            {
-              "kind": "method",
-              "name": "select",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "field",
               "name": "renderMultiline",
@@ -318,6 +355,16 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "renderField",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "checkValidity",
@@ -334,7 +381,12 @@
               "name": "change",
               "type": {
                 "text": "Event"
-              }
+              },
+              "description": "An alteration to the value of the element has been committed by the user."
+            },
+            {
+              "description": "The value of the element has changed.",
+              "name": "input"
             }
           ],
           "attributes": [
@@ -472,6 +524,12 @@
               "fieldName": "autocomplete"
             }
           ],
+          "mixins": [
+            {
+              "name": "ManageHelpText",
+              "package": "@spectrum-web-components/help-text/src/manage-help-text.js"
+            }
+          ],
           "superclass": {
             "name": "Focusable",
             "package": "@spectrum-web-components/shared/src/focusable.js"
@@ -481,6 +539,16 @@
           "kind": "class",
           "description": "",
           "name": "Textfield",
+          "slots": [
+            {
+              "description": "default or non-negative help text to associate to your form element",
+              "name": "help-text"
+            },
+            {
+              "description": "negative help text to associate to your form element when `invalid`",
+              "name": "negative-help-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -776,7 +844,62 @@
             },
             {
               "kind": "method",
-              "name": "onInput",
+              "name": "setSelectionRange",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectionStart",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The 0-based index of the first selected character. An index greater than the length of the\nelement's value is treated as pointing to the end of the value."
+                },
+                {
+                  "name": "selectionEnd",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The 0-based index of the character after the last selected character. An index greater than\nthe length of the element's value is treated as pointing to the end of the value."
+                },
+                {
+                  "name": "selectionDirection",
+                  "default": "'none'",
+                  "type": {
+                    "text": "'forward' | 'backward' | 'none'"
+                  },
+                  "description": "A string indicating the direction in which the selection is considered to\nhave been performed.",
+                  "optional": true
+                }
+              ],
+              "description": "Sets the start and end positions of the current selection.",
+              "inheritedFrom": {
+                "name": "TextfieldBase",
+                "module": "src/Textfield.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "select",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Selects all the text.",
+              "inheritedFrom": {
+                "name": "TextfieldBase",
+                "module": "src/Textfield.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -790,7 +913,7 @@
             },
             {
               "kind": "method",
-              "name": "onChange",
+              "name": "handleChange",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -857,14 +980,12 @@
               }
             },
             {
-              "kind": "method",
-              "name": "select",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "renderMultiline",
+              "type": {
+                "text": "TemplateResult"
               },
+              "privacy": "private",
               "inheritedFrom": {
                 "name": "TextfieldBase",
                 "module": "src/Textfield.ts"
@@ -872,7 +993,7 @@
             },
             {
               "kind": "field",
-              "name": "renderMultiline",
+              "name": "renderInput",
               "type": {
                 "text": "TemplateResult"
               },
@@ -883,12 +1004,14 @@
               }
             },
             {
-              "kind": "field",
-              "name": "renderInput",
-              "type": {
-                "text": "TemplateResult"
+              "kind": "method",
+              "name": "renderField",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "privacy": "private",
               "inheritedFrom": {
                 "name": "TextfieldBase",
                 "module": "src/Textfield.ts"
@@ -1124,6 +1247,15 @@
               "type": {
                 "text": "Event"
               },
+              "description": "An alteration to the value of the element has been committed by the user.",
+              "inheritedFrom": {
+                "name": "TextfieldBase",
+                "module": "src/Textfield.ts"
+              }
+            },
+            {
+              "description": "The value of the element has changed.",
+              "name": "input",
               "inheritedFrom": {
                 "name": "TextfieldBase",
                 "module": "src/Textfield.ts"
@@ -1173,7 +1305,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-textfield-texticon-padding-left:var(\n--spectrum-textfield-m-texticon-padding-left\n);--spectrum-textfield-quiet-texticon-border-bottom-size:var(\n--spectrum-textfield-m-quiet-texticon-border-bottom-size,var(--spectrum-alias-input-border-size)\n);--spectrum-textfield-quiet-texticon-success-icon-margin-left:var(\n--spectrum-textfield-m-quiet-texticon-success-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-quiet-texticon-invalid-icon-margin-left:var(\n--spectrum-textfield-m-quiet-texticon-invalid-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-quiet-texticon-border-radius:var(\n--spectrum-textfield-m-quiet-texticon-border-radius,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-quiet-texticon-padding-left:var(\n--spectrum-textfield-m-quiet-texticon-padding-left,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-quiet-texticon-padding-right:var(\n--spectrum-textfield-m-quiet-texticon-padding-right,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-texticon-border-size:var(\n--spectrum-textfield-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-textfield-texticon-text-line-height:var(\n--spectrum-textfield-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-textfield-texticon-text-size:var(\n--spectrum-textfield-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-textfield-texticon-placeholder-text-font-style:var(\n--spectrum-textfield-m-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-textfield-texticon-placeholder-text-font-weight:var(\n--spectrum-textfield-m-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-textfield-texticon-success-icon-height:var(\n--spectrum-textfield-m-texticon-success-icon-height,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-textfield-texticon-success-icon-width:var(\n--spectrum-textfield-m-texticon-success-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-textfield-texticon-success-icon-margin-left:var(\n--spectrum-textfield-m-texticon-success-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-invalid-icon-height:var(\n--spectrum-textfield-m-texticon-invalid-icon-height,var(--spectrum-alias-ui-icon-alert-size-100)\n);--spectrum-textfield-texticon-invalid-icon-width:var(\n--spectrum-textfield-m-texticon-invalid-icon-width,var(--spectrum-alias-ui-icon-alert-size-100)\n);--spectrum-textfield-texticon-invalid-icon-margin-left:var(\n--spectrum-textfield-m-texticon-invalid-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-min-width:var(\n--spectrum-textfield-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-textfield-texticon-border-radius:var(\n--spectrum-textfield-m-texticon-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-textfield-texticon-padding-right:var(\n--spectrum-textfield-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-height:var(\n--spectrum-textfield-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-textarea-text-padding-top:var(\n--spectrum-textarea-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-textarea-text-padding-bottom:var(\n--spectrum-textarea-m-text-padding-bottom,var(--spectrum-global-dimension-size-115)\n);--spectrum-textarea-padding-left:var(\n--spectrum-textarea-m-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textarea-padding-right:var(\n--spectrum-textarea-m-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-textarea-height:var(\n--spectrum-textarea-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-textfield-texticon-padding-top:3px;--spectrum-textfield-texticon-padding-bottom:5px;--spectrum-textfield-texticon-text-font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);--spectrum-textfield-texticon-icon-gap:var(\n--spectrum-global-dimension-size-65\n);--spectrum-textfield-quiet-texticon-icon-gap:var(\n--spectrum-global-dimension-size-75\n);--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(\n--spectrum-textarea-text-padding-bottom\n)}:host{display:inline-flex;min-width:var(--spectrum-textfield-texticon-min-width);position:relative;width:var(\n--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400)\n)}:host([quiet][multiline]) .input{height:var(\n--spectrum-textfield-texticon-height\n);min-height:var(--spectrum-textfield-texticon-height)}.input{-webkit-appearance:none;-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);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);text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;width:100%}.input::placeholder{font-style:var(--spectrum-textfield-texticon-placeholder-text-font-style);font-weight:var(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n);opacity:1;transition:color var(--spectrum-global-animation-duration-100,.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(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n)}.input:disabled{opacity:1;resize:none}.input:disabled::placeholder{font-weight:var(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n)}.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]) .input{padding-right:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-success-icon-width) + var(--spectrum-textfield-texticon-success-icon-margin-left))}:host([dir=rtl][valid]) .input{padding-left:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-success-icon-width) + var(--spectrum-textfield-texticon-success-icon-margin-left))}:host([dir=ltr][invalid]) .input{padding-right:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-invalid-icon-width) + var(--spectrum-textfield-texticon-invalid-icon-margin-left))}:host([dir=rtl][invalid]) .input{padding-left:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-invalid-icon-width) + var(--spectrum-textfield-texticon-invalid-icon-margin-left))}:host([multiline]) .input{height:var(\n--spectrum-textarea-height-adjusted\n);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(\n--spectrum-textfield-quiet-texticon-padding-left\n)}:host([dir=rtl][quiet]) .input{padding-right:var(\n--spectrum-textfield-quiet-texticon-padding-left\n)}:host([dir=ltr][quiet]) .input{padding-right:var(\n--spectrum-textfield-quiet-texticon-padding-right\n)}:host([dir=rtl][quiet]) .input{padding-left:var(\n--spectrum-textfield-quiet-texticon-padding-right\n)}:host([quiet]) .input{border-bottom-width:var(\n--spectrum-textfield-quiet-texticon-border-bottom-size\n);border-left-width:0;border-radius:var(\n--spectrum-textfield-quiet-texticon-border-radius\n);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([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([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([dir=rtl][valid][quiet]) .input{padding-left:calc(var(--spectrum-textfield-texticon-success-icon-width) + var(--spectrum-textfield-quiet-texticon-success-icon-margin-left))}.icon{pointer-events:all;position:absolute}:host([dir=ltr][quiet]) .icon{padding-right:0}:host([dir=rtl][quiet]) .icon{padding-left:0}:host([dir=ltr][invalid]) .icon{right:var(\n--spectrum-textfield-texticon-invalid-icon-margin-left\n)}:host([dir=rtl][invalid]) .icon{left:var(\n--spectrum-textfield-texticon-invalid-icon-margin-left\n)}:host([invalid]) .icon{bottom:calc(var(--spectrum-textfield-texticon-height)/2 - var(--spectrum-textfield-texticon-invalid-icon-height)/2);height:var(--spectrum-textfield-texticon-invalid-icon-height);width:var(\n--spectrum-textfield-texticon-invalid-icon-width\n)}:host([dir=ltr][quiet][invalid]) .icon{right:0}:host([dir=rtl][quiet][invalid]) .icon{left:0}:host([dir=ltr][valid]) .icon{right:var(\n--spectrum-textfield-texticon-success-icon-margin-left\n)}:host([dir=rtl][valid]) .icon{left:var(\n--spectrum-textfield-texticon-success-icon-margin-left\n)}:host([valid]) .icon{bottom:calc(var(--spectrum-textfield-texticon-height)/2 - var(--spectrum-textfield-texticon-success-icon-height)/2);height:var(--spectrum-textfield-texticon-success-icon-height);width:var(\n--spectrum-textfield-texticon-success-icon-width\n)}:host([dir=ltr][quiet][valid]) .icon{right:0}:host([dir=rtl][quiet][valid]) .icon{left:0}:host([dir=ltr]) .icon-workflow{left:var(\n--spectrum-textfield-texticon-invalid-icon-margin-left\n)}:host([dir=rtl]) .icon-workflow{right:var(\n--spectrum-textfield-texticon-invalid-icon-margin-left\n)}.icon-workflow{display:block;height:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n);position:absolute;top:calc(var(--spectrum-textfield-texticon-height)/2 - var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n)/2);width:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr][quiet]) .icon-workflow{left:0}:host([dir=rtl][quiet]) .icon-workflow{right:0}:host([dir=ltr][quiet]) .icon-workflow~.input{padding-left:calc(var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-quiet-texticon-icon-gap))}:host([dir=rtl][quiet]) .icon-workflow~.input{padding-right:calc(var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-quiet-texticon-icon-gap))}:host([dir=ltr]) .icon-workflow+.input{padding-left:calc(var(--spectrum-textfield-texticon-invalid-icon-margin-left) + var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-texticon-icon-gap))}:host([dir=rtl]) .icon-workflow+.input{padding-right:calc(var(--spectrum-textfield-texticon-invalid-icon-margin-left) + var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-texticon-icon-gap))}:host([multiline]) .icon-workflow~.input{height:var(\n--spectrum-textfield-texticon-height\n);min-height:var(--spectrum-textfield-texticon-height)}:host(:hover) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n);box-shadow:none}:host(:hover) .input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host(:hover) .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}:host(:active) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-down,var(--spectrum-alias-input-border-color-down)\n)}:host(:active) .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-down,var(--spectrum-alias-component-icon-color-down)\n)}:host([valid]) .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-valid,var(--spectrum-semantic-positive-icon-color)\n)}:host([invalid]) .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-invalid,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-hover,var(--spectrum-alias-input-border-color-invalid-hover)\n)}:host([disabled]) .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-invalid-disabled,var(--spectrum-alias-background-color-transparent)\n)}:host([disabled]) .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}.icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}.icon,.icon-workflow{pointer-events:none}.input{background-color:var(\n--spectrum-textfield-m-texticon-background-color,var(--spectrum-global-color-gray-50)\n);border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n);color:var(\n--spectrum-textfield-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}.input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color,var(--spectrum-global-color-gray-600)\n)}.input:focus,:host([focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-down,var(--spectrum-alias-input-border-color-down)\n)}.input.focus-visible,:host([focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}.input:focus-visible,:host([focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([focused][invalid]) .input,:host([invalid]) .input.focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([focused][invalid]) .input,:host([invalid]) .input:focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}.input :disabled,:host([disabled]) .input,:host([disabled]:hover) .input{-webkit-text-fill-color:var(\n--spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);background-color:var(\n--spectrum-textfield-m-texticon-background-color-disabled,var(--spectrum-global-color-gray-200)\n);border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n);color:var(\n--spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}.input :disabled::placeholder,:host([disabled]) .input::placeholder,:host([disabled]:hover) .input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([quiet]) .input{background-color:var(\n--spectrum-textfield-m-quiet-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([focused][quiet]) .input,:host([quiet]) .input:focus{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused][quiet]) .input,:host([quiet]) .input.focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([focused][quiet]) .input,:host([quiet]) .input:focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([invalid][quiet]) .input{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([focused][invalid][quiet]) .input,:host([invalid][quiet]) .input:focus{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid][quiet]) .input,:host([invalid][quiet]) .input.focus-visible{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([focused][invalid][quiet]) .input,:host([invalid][quiet]) .input:focus-visible{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled][quiet]) .input,:host([disabled][quiet]:hover) .input,:host([quiet]) .input :disabled{background-color:var(\n--spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}\n`"
+          "default": "css`\n:host{--spectrum-textfield-texticon-padding-left:var(\n--spectrum-textfield-m-texticon-padding-left\n);--spectrum-textfield-quiet-texticon-border-bottom-size:var(\n--spectrum-textfield-m-quiet-texticon-border-bottom-size,var(--spectrum-alias-input-border-size)\n);--spectrum-textfield-quiet-texticon-success-icon-margin-left:var(\n--spectrum-textfield-m-quiet-texticon-success-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-quiet-texticon-invalid-icon-margin-left:var(\n--spectrum-textfield-m-quiet-texticon-invalid-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-quiet-texticon-border-radius:var(\n--spectrum-textfield-m-quiet-texticon-border-radius,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-quiet-texticon-padding-left:var(\n--spectrum-textfield-m-quiet-texticon-padding-left,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-quiet-texticon-padding-right:var(\n--spectrum-textfield-m-quiet-texticon-padding-right,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-texticon-border-size:var(\n--spectrum-textfield-m-texticon-border-size,var(--spectrum-alias-input-border-size)\n);--spectrum-textfield-texticon-text-line-height:var(\n--spectrum-textfield-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-textfield-texticon-text-size:var(\n--spectrum-textfield-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-textfield-texticon-placeholder-text-font-style:var(\n--spectrum-textfield-m-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-textfield-texticon-placeholder-text-font-weight:var(\n--spectrum-textfield-m-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-textfield-texticon-success-icon-height:var(\n--spectrum-textfield-m-texticon-success-icon-height,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-textfield-texticon-success-icon-width:var(\n--spectrum-textfield-m-texticon-success-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-textfield-texticon-success-icon-margin-left:var(\n--spectrum-textfield-m-texticon-success-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-invalid-icon-height:var(\n--spectrum-textfield-m-texticon-invalid-icon-height,var(--spectrum-alias-ui-icon-alert-size-100)\n);--spectrum-textfield-texticon-invalid-icon-width:var(\n--spectrum-textfield-m-texticon-invalid-icon-width,var(--spectrum-alias-ui-icon-alert-size-100)\n);--spectrum-textfield-texticon-invalid-icon-margin-left:var(\n--spectrum-textfield-m-texticon-invalid-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-min-width:var(\n--spectrum-textfield-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-textfield-texticon-border-radius:var(\n--spectrum-textfield-m-texticon-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-textfield-texticon-padding-right:var(\n--spectrum-textfield-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-height:var(\n--spectrum-textfield-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-textarea-text-padding-top:var(\n--spectrum-textarea-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-textarea-text-padding-bottom:var(\n--spectrum-textarea-m-text-padding-bottom,var(--spectrum-global-dimension-size-115)\n);--spectrum-textarea-padding-left:var(\n--spectrum-textarea-m-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textarea-padding-right:var(\n--spectrum-textarea-m-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-textarea-height:var(\n--spectrum-textarea-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-textfield-texticon-padding-top:3px;--spectrum-textfield-texticon-padding-bottom:5px;--spectrum-textfield-texticon-text-font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);--spectrum-textfield-texticon-icon-gap:var(\n--spectrum-global-dimension-size-65\n);--spectrum-textfield-quiet-texticon-icon-gap:var(\n--spectrum-global-dimension-size-75\n);--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(\n--spectrum-textarea-text-padding-bottom\n)}#textfield{display:inline-flex;min-width:var(--spectrum-textfield-texticon-min-width);position:relative;width:var(\n--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400)\n)}:host([quiet][multiline]) #textfield .input{height:var(\n--spectrum-textfield-texticon-height\n);min-height:var(--spectrum-textfield-texticon-height)}#textfield:after{border-color:transparent;border-radius:calc(var(--spectrum-textfield-texticon-border-radius) + var(\n--spectrum-textfield-m-texticon-focus-ring-gap,\nvar(--spectrum-alias-input-focusring-gap)\n));bottom:0;content:\"\";left:0;margin:calc(var(\n--spectrum-textfield-m-texticon-focus-ring-gap,\nvar(--spectrum-alias-input-focusring-gap)\n)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([quiet]) #textfield:after{border-radius:0}.input{-webkit-appearance:none;-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);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);text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;width:100%}.input::placeholder{font-style:var(--spectrum-textfield-texticon-placeholder-text-font-style);font-weight:var(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n);opacity:1;transition:color var(--spectrum-global-animation-duration-100,.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(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n)}.input:disabled{opacity:1;resize:none}.input:disabled::placeholder{font-weight:var(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n)}.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(\n--spectrum-textfield-icon-inline-end-override,\nvar(--spectrum-textfield-texticon-success-icon-margin-left)\n))}:host([dir=rtl][valid]) #textfield .input{padding-left:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-success-icon-width) + var(\n--spectrum-textfield-icon-inline-end-override,\nvar(--spectrum-textfield-texticon-success-icon-margin-left)\n))}:host([dir=ltr][invalid]) #textfield .input{padding-right:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-invalid-icon-width) + var(\n--spectrum-textfield-icon-inline-end-override,\nvar(--spectrum-textfield-texticon-invalid-icon-margin-left)\n))}:host([dir=rtl][invalid]) #textfield .input{padding-left:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-invalid-icon-width) + var(\n--spectrum-textfield-icon-inline-end-override,\nvar(--spectrum-textfield-texticon-invalid-icon-margin-left)\n))}:host([multiline]) .input{height:var(\n--spectrum-textarea-height-adjusted\n);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(\n--spectrum-textfield-quiet-texticon-padding-left\n)}:host([dir=rtl][quiet]) .input{padding-right:var(\n--spectrum-textfield-quiet-texticon-padding-left\n)}:host([dir=ltr][quiet]) .input{padding-right:var(\n--spectrum-textfield-quiet-texticon-padding-right\n)}:host([dir=rtl][quiet]) .input{padding-left:var(\n--spectrum-textfield-quiet-texticon-padding-right\n)}:host([quiet]) .input{border-bottom-width:var(\n--spectrum-textfield-quiet-texticon-border-bottom-size\n);border-left-width:0;border-radius:var(\n--spectrum-textfield-quiet-texticon-border-radius\n);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([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([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([dir=rtl][valid][quiet]) .input{padding-left:calc(var(--spectrum-textfield-texticon-success-icon-width) + var(--spectrum-textfield-quiet-texticon-success-icon-margin-left))}.icon{pointer-events:all;position:absolute}:host([dir=ltr][quiet]) .icon{padding-right:0}:host([dir=rtl][quiet]) .icon{padding-left:0}:host([dir=ltr][invalid]) #textfield .icon{right:var(\n--spectrum-textfield-icon-inline-end-override,var(--spectrum-textfield-texticon-invalid-icon-margin-left)\n)}:host([dir=rtl][invalid]) #textfield .icon{left:var(\n--spectrum-textfield-icon-inline-end-override,var(--spectrum-textfield-texticon-invalid-icon-margin-left)\n)}:host([invalid]) #textfield .icon{bottom:calc(var(--spectrum-textfield-texticon-height)/2 - var(--spectrum-textfield-texticon-invalid-icon-height)/2);height:var(--spectrum-textfield-texticon-invalid-icon-height);width:var(\n--spectrum-textfield-texticon-invalid-icon-width\n)}:host([dir=ltr][quiet][invalid]) #textfield .icon{right:var(\n--spectrum-textfield-icon-inline-end-override,0\n)}:host([dir=rtl][quiet][invalid]) #textfield .icon{left:var(\n--spectrum-textfield-icon-inline-end-override,0\n)}:host([dir=ltr][valid]) #textfield .icon{right:var(\n--spectrum-textfield-icon-inline-end-override,var(--spectrum-textfield-texticon-success-icon-margin-left)\n)}:host([dir=rtl][valid]) #textfield .icon{left:var(\n--spectrum-textfield-icon-inline-end-override,var(--spectrum-textfield-texticon-success-icon-margin-left)\n)}:host([valid]) #textfield .icon{bottom:calc(var(--spectrum-textfield-texticon-height)/2 - var(--spectrum-textfield-texticon-success-icon-height)/2);height:var(--spectrum-textfield-texticon-success-icon-height);width:var(\n--spectrum-textfield-texticon-success-icon-width\n)}:host([dir=ltr][quiet][valid]) #textfield .icon{right:var(\n--spectrum-textfield-icon-inline-end-override,0\n)}:host([dir=rtl][quiet][valid]) #textfield .icon{left:var(\n--spectrum-textfield-icon-inline-end-override,0\n)}:host([dir=ltr]) .icon-workflow{left:var(\n--spectrum-textfield-texticon-padding-left\n)}:host([dir=rtl]) .icon-workflow{right:var(\n--spectrum-textfield-texticon-padding-left\n)}.icon-workflow{display:block;height:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n);position:absolute;top:calc(var(--spectrum-textfield-texticon-height)/2 - var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n)/2);width:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr][quiet]) .icon-workflow{left:0}:host([dir=rtl][quiet]) .icon-workflow{right:0}:host([dir=ltr][quiet]) .icon-workflow~.input{padding-left:calc(var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-quiet-texticon-icon-gap))}:host([dir=rtl][quiet]) .icon-workflow~.input{padding-right:calc(var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-quiet-texticon-icon-gap))}:host([dir=ltr]) .icon-workflow+.input{padding-left:calc(var(--spectrum-textfield-texticon-padding-left) + var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-texticon-icon-gap))}:host([dir=rtl]) .icon-workflow+.input{padding-right:calc(var(--spectrum-textfield-texticon-padding-left) + var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-texticon-icon-gap))}:host([multiline]) .icon-workflow~.input{height:var(\n--spectrum-textfield-texticon-height\n);min-height:var(--spectrum-textfield-texticon-height)}#textfield:hover .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n);box-shadow:none}#textfield:hover .input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#textfield:hover .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#textfield:active .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-down,var(--spectrum-alias-input-border-color-down)\n)}#textfield:active .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-down,var(--spectrum-alias-component-icon-color-down)\n)}:host([valid]) #textfield .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-valid,var(--spectrum-semantic-positive-icon-color)\n)}:host([invalid]) #textfield .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-invalid,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #textfield:hover .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-hover,var(--spectrum-alias-input-border-color-invalid-hover)\n)}:host([disabled]) #textfield .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-invalid-disabled,var(--spectrum-alias-background-color-transparent)\n)}:host([disabled]) #textfield .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}.icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}.icon,.icon-workflow{pointer-events:none}:host([focused]) #textfield:after{box-shadow:0 0 0 var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,var(--spectrum-alias-component-focusring-size)\n) var(\n--spectrum-textfield-m-textonly-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([focused][quiet]) #textfield .input{box-shadow:none}:host([focused][quiet]) #textfield:after{border-bottom:2px solid var(\n--spectrum-textfield-m-textonly-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);bottom:calc(var(\n--spectrum-alias-input-quiet-focusline-gap,\nvar(--spectrum-global-dimension-static-size-10)\n)*-1);box-shadow:none;margin:0}.input{background-color:var(\n--spectrum-textfield-m-texticon-background-color,var(--spectrum-global-color-gray-50)\n);border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n);color:var(\n--spectrum-textfield-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}.input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color,var(--spectrum-global-color-gray-600)\n)}.input:focus,:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-down,var(--spectrum-alias-input-border-color-down)\n)}.input.focus-visible,:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}.input:focus-visible,:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([focused][invalid]) #textfield .input,:host([invalid]) #textfield .input:focus{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .input,:host([invalid]) #textfield .input.focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([focused][invalid]) #textfield .input,:host([invalid]) #textfield .input:focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}.input :disabled,:host([disabled]) #textfield .input,:host([disabled]) #textfield:hover .input{-webkit-text-fill-color:var(\n--spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);background-color:var(\n--spectrum-textfield-m-texticon-background-color-disabled,var(--spectrum-global-color-gray-200)\n);border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n);color:var(\n--spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}.input :disabled::placeholder,:host([disabled]) #textfield .input::placeholder,:host([disabled]) #textfield:hover .input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([quiet]) .input{background-color:var(\n--spectrum-textfield-m-quiet-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([focused][quiet]) #textfield .input,:host([quiet]) .input:focus{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused][quiet]) #textfield .input,:host([quiet]) .input.focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([focused][quiet]) #textfield .input,:host([quiet]) .input:focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([invalid][quiet]) #textfield .input{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([focused][invalid][quiet]) #textfield .input,:host([invalid][quiet]) #textfield .input:focus{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid][quiet]) #textfield .input,:host([invalid][quiet]) #textfield .input.focus-visible{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([focused][invalid][quiet]) #textfield .input,:host([invalid][quiet]) #textfield .input:focus-visible{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{background-color:var(\n--spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}\n`"
         }
       ],
       "exports": [
@@ -1194,7 +1326,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-textfield-texticon-padding-left:var(\n--spectrum-textfield-m-texticon-padding-left\n);--spectrum-textfield-quiet-texticon-border-bottom-size:var(\n--spectrum-textfield-m-quiet-texticon-border-bottom-size,var(--spectrum-alias-input-border-size)\n);--spectrum-textfield-quiet-texticon-success-icon-margin-left:var(\n--spectrum-textfield-m-quiet-texticon-success-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-quiet-texticon-invalid-icon-margin-left:var(\n--spectrum-textfield-m-quiet-texticon-invalid-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-quiet-texticon-border-radius:var(\n--spectrum-textfield-m-quiet-texticon-border-radius,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-quiet-texticon-padding-left:var(\n--spectrum-textfield-m-quiet-texticon-padding-left,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-quiet-texticon-padding-right:var(\n--spectrum-textfield-m-quiet-texticon-padding-right,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-texticon-border-size:var(\n--spectrum-textfield-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-textfield-texticon-text-line-height:var(\n--spectrum-textfield-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-textfield-texticon-text-size:var(\n--spectrum-textfield-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-textfield-texticon-placeholder-text-font-style:var(\n--spectrum-textfield-m-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-textfield-texticon-placeholder-text-font-weight:var(\n--spectrum-textfield-m-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-textfield-texticon-success-icon-height:var(\n--spectrum-textfield-m-texticon-success-icon-height,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-textfield-texticon-success-icon-width:var(\n--spectrum-textfield-m-texticon-success-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-textfield-texticon-success-icon-margin-left:var(\n--spectrum-textfield-m-texticon-success-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-invalid-icon-height:var(\n--spectrum-textfield-m-texticon-invalid-icon-height,var(--spectrum-alias-ui-icon-alert-size-100)\n);--spectrum-textfield-texticon-invalid-icon-width:var(\n--spectrum-textfield-m-texticon-invalid-icon-width,var(--spectrum-alias-ui-icon-alert-size-100)\n);--spectrum-textfield-texticon-invalid-icon-margin-left:var(\n--spectrum-textfield-m-texticon-invalid-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-min-width:var(\n--spectrum-textfield-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-textfield-texticon-border-radius:var(\n--spectrum-textfield-m-texticon-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-textfield-texticon-padding-right:var(\n--spectrum-textfield-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-height:var(\n--spectrum-textfield-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-textarea-text-padding-top:var(\n--spectrum-textarea-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-textarea-text-padding-bottom:var(\n--spectrum-textarea-m-text-padding-bottom,var(--spectrum-global-dimension-size-115)\n);--spectrum-textarea-padding-left:var(\n--spectrum-textarea-m-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textarea-padding-right:var(\n--spectrum-textarea-m-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-textarea-height:var(\n--spectrum-textarea-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-textfield-texticon-padding-top:3px;--spectrum-textfield-texticon-padding-bottom:5px;--spectrum-textfield-texticon-text-font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);--spectrum-textfield-texticon-icon-gap:var(\n--spectrum-global-dimension-size-65\n);--spectrum-textfield-quiet-texticon-icon-gap:var(\n--spectrum-global-dimension-size-75\n);--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(\n--spectrum-textarea-text-padding-bottom\n)}:host{display:inline-flex;min-width:var(--spectrum-textfield-texticon-min-width);position:relative;width:var(\n--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400)\n)}:host([quiet][multiline]) .input{height:var(\n--spectrum-textfield-texticon-height\n);min-height:var(--spectrum-textfield-texticon-height)}.input{-webkit-appearance:none;-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);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);text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;width:100%}.input::placeholder{font-style:var(--spectrum-textfield-texticon-placeholder-text-font-style);font-weight:var(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n);opacity:1;transition:color var(--spectrum-global-animation-duration-100,.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(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n)}.input:disabled{opacity:1;resize:none}.input:disabled::placeholder{font-weight:var(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n)}.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]) .input{padding-right:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-success-icon-width) + var(--spectrum-textfield-texticon-success-icon-margin-left))}:host([dir=rtl][valid]) .input{padding-left:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-success-icon-width) + var(--spectrum-textfield-texticon-success-icon-margin-left))}:host([dir=ltr][invalid]) .input{padding-right:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-invalid-icon-width) + var(--spectrum-textfield-texticon-invalid-icon-margin-left))}:host([dir=rtl][invalid]) .input{padding-left:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-invalid-icon-width) + var(--spectrum-textfield-texticon-invalid-icon-margin-left))}:host([multiline]) .input{height:var(\n--spectrum-textarea-height-adjusted\n);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(\n--spectrum-textfield-quiet-texticon-padding-left\n)}:host([dir=rtl][quiet]) .input{padding-right:var(\n--spectrum-textfield-quiet-texticon-padding-left\n)}:host([dir=ltr][quiet]) .input{padding-right:var(\n--spectrum-textfield-quiet-texticon-padding-right\n)}:host([dir=rtl][quiet]) .input{padding-left:var(\n--spectrum-textfield-quiet-texticon-padding-right\n)}:host([quiet]) .input{border-bottom-width:var(\n--spectrum-textfield-quiet-texticon-border-bottom-size\n);border-left-width:0;border-radius:var(\n--spectrum-textfield-quiet-texticon-border-radius\n);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([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([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([dir=rtl][valid][quiet]) .input{padding-left:calc(var(--spectrum-textfield-texticon-success-icon-width) + var(--spectrum-textfield-quiet-texticon-success-icon-margin-left))}.icon{pointer-events:all;position:absolute}:host([dir=ltr][quiet]) .icon{padding-right:0}:host([dir=rtl][quiet]) .icon{padding-left:0}:host([dir=ltr][invalid]) .icon{right:var(\n--spectrum-textfield-texticon-invalid-icon-margin-left\n)}:host([dir=rtl][invalid]) .icon{left:var(\n--spectrum-textfield-texticon-invalid-icon-margin-left\n)}:host([invalid]) .icon{bottom:calc(var(--spectrum-textfield-texticon-height)/2 - var(--spectrum-textfield-texticon-invalid-icon-height)/2);height:var(--spectrum-textfield-texticon-invalid-icon-height);width:var(\n--spectrum-textfield-texticon-invalid-icon-width\n)}:host([dir=ltr][quiet][invalid]) .icon{right:0}:host([dir=rtl][quiet][invalid]) .icon{left:0}:host([dir=ltr][valid]) .icon{right:var(\n--spectrum-textfield-texticon-success-icon-margin-left\n)}:host([dir=rtl][valid]) .icon{left:var(\n--spectrum-textfield-texticon-success-icon-margin-left\n)}:host([valid]) .icon{bottom:calc(var(--spectrum-textfield-texticon-height)/2 - var(--spectrum-textfield-texticon-success-icon-height)/2);height:var(--spectrum-textfield-texticon-success-icon-height);width:var(\n--spectrum-textfield-texticon-success-icon-width\n)}:host([dir=ltr][quiet][valid]) .icon{right:0}:host([dir=rtl][quiet][valid]) .icon{left:0}:host([dir=ltr]) .icon-workflow{left:var(\n--spectrum-textfield-texticon-invalid-icon-margin-left\n)}:host([dir=rtl]) .icon-workflow{right:var(\n--spectrum-textfield-texticon-invalid-icon-margin-left\n)}.icon-workflow{display:block;height:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n);position:absolute;top:calc(var(--spectrum-textfield-texticon-height)/2 - var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n)/2);width:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr][quiet]) .icon-workflow{left:0}:host([dir=rtl][quiet]) .icon-workflow{right:0}:host([dir=ltr][quiet]) .icon-workflow~.input{padding-left:calc(var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-quiet-texticon-icon-gap))}:host([dir=rtl][quiet]) .icon-workflow~.input{padding-right:calc(var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-quiet-texticon-icon-gap))}:host([dir=ltr]) .icon-workflow+.input{padding-left:calc(var(--spectrum-textfield-texticon-invalid-icon-margin-left) + var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-texticon-icon-gap))}:host([dir=rtl]) .icon-workflow+.input{padding-right:calc(var(--spectrum-textfield-texticon-invalid-icon-margin-left) + var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-texticon-icon-gap))}:host([multiline]) .icon-workflow~.input{height:var(\n--spectrum-textfield-texticon-height\n);min-height:var(--spectrum-textfield-texticon-height)}:host(:hover) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n);box-shadow:none}:host(:hover) .input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}:host(:hover) .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}:host(:active) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-down,var(--spectrum-alias-input-border-color-down)\n)}:host(:active) .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-down,var(--spectrum-alias-component-icon-color-down)\n)}:host([valid]) .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-valid,var(--spectrum-semantic-positive-icon-color)\n)}:host([invalid]) .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-invalid,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-hover,var(--spectrum-alias-input-border-color-invalid-hover)\n)}:host([disabled]) .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-invalid-disabled,var(--spectrum-alias-background-color-transparent)\n)}:host([disabled]) .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}.icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}.input{background-color:var(\n--spectrum-textfield-m-texticon-background-color,var(--spectrum-global-color-gray-50)\n);border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n);color:var(\n--spectrum-textfield-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}.input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color,var(--spectrum-global-color-gray-600)\n)}.input:focus,:host([focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-down,var(--spectrum-alias-input-border-color-down)\n)}.input.focus-visible,:host([focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}.input:focus-visible,:host([focused]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([invalid]) .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([focused][invalid]) .input,:host([invalid]) .input.focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([focused][invalid]) .input,:host([invalid]) .input:focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}.input :disabled,:host([disabled]) .input,:host([disabled]:hover) .input{-webkit-text-fill-color:var(\n--spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);background-color:var(\n--spectrum-textfield-m-texticon-background-color-disabled,var(--spectrum-global-color-gray-200)\n);border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n);color:var(\n--spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}.input :disabled::placeholder,:host([disabled]) .input::placeholder,:host([disabled]:hover) .input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([quiet]) .input{background-color:var(\n--spectrum-textfield-m-quiet-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([focused][quiet]) .input,:host([quiet]) .input:focus{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused][quiet]) .input,:host([quiet]) .input.focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([focused][quiet]) .input,:host([quiet]) .input:focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([invalid][quiet]) .input{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([focused][invalid][quiet]) .input,:host([invalid][quiet]) .input:focus{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid][quiet]) .input,:host([invalid][quiet]) .input.focus-visible{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([focused][invalid][quiet]) .input,:host([invalid][quiet]) .input:focus-visible{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled][quiet]) .input,:host([disabled][quiet]:hover) .input,:host([quiet]) .input :disabled{background-color:var(\n--spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host([multiline]){resize:both}textarea{resize:inherit}:host([grows]) .input{height:100%;left:0;overflow:hidden;position:absolute;resize:none;top:0}:host([grows]) #sizer{-webkit-appearance:none;-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);line-height:var(--spectrum-textfield-texticon-text-line-height);margin:0;outline:none;overflow:visible;overflow-wrap:break-word;padding:var(--spectrum-textarea-padding-top) var(--spectrum-textarea-padding-right) var(--spectrum-textarea-padding-bottom) calc(var(--spectrum-textarea-padding-left) - 1px);text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;width:100%}:host([grows][quiet]) #sizer{border-bottom-width:var(--spectrum-textfield-quiet-texticon-border-size);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}.icon,.icon-workflow{pointer-events:none}\n`"
+          "default": "css`\n:host{--spectrum-textfield-texticon-padding-left:var(\n--spectrum-textfield-m-texticon-padding-left\n);--spectrum-textfield-quiet-texticon-border-bottom-size:var(\n--spectrum-textfield-m-quiet-texticon-border-bottom-size,var(--spectrum-alias-input-border-size)\n);--spectrum-textfield-quiet-texticon-success-icon-margin-left:var(\n--spectrum-textfield-m-quiet-texticon-success-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-quiet-texticon-invalid-icon-margin-left:var(\n--spectrum-textfield-m-quiet-texticon-invalid-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-quiet-texticon-border-radius:var(\n--spectrum-textfield-m-quiet-texticon-border-radius,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-quiet-texticon-padding-left:var(\n--spectrum-textfield-m-quiet-texticon-padding-left,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-quiet-texticon-padding-right:var(\n--spectrum-textfield-m-quiet-texticon-padding-right,var(--spectrum-global-dimension-size-0)\n);--spectrum-textfield-texticon-border-size:var(\n--spectrum-textfield-m-texticon-border-size,var(--spectrum-alias-input-border-size)\n);--spectrum-textfield-texticon-text-line-height:var(\n--spectrum-textfield-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-textfield-texticon-text-size:var(\n--spectrum-textfield-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-textfield-texticon-placeholder-text-font-style:var(\n--spectrum-textfield-m-texticon-placeholder-text-font-style,var(--spectrum-global-font-style-italic)\n);--spectrum-textfield-texticon-placeholder-text-font-weight:var(\n--spectrum-textfield-m-texticon-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular)\n);--spectrum-textfield-texticon-success-icon-height:var(\n--spectrum-textfield-m-texticon-success-icon-height,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-textfield-texticon-success-icon-width:var(\n--spectrum-textfield-m-texticon-success-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-textfield-texticon-success-icon-margin-left:var(\n--spectrum-textfield-m-texticon-success-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-invalid-icon-height:var(\n--spectrum-textfield-m-texticon-invalid-icon-height,var(--spectrum-alias-ui-icon-alert-size-100)\n);--spectrum-textfield-texticon-invalid-icon-width:var(\n--spectrum-textfield-m-texticon-invalid-icon-width,var(--spectrum-alias-ui-icon-alert-size-100)\n);--spectrum-textfield-texticon-invalid-icon-margin-left:var(\n--spectrum-textfield-m-texticon-invalid-icon-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-min-width:var(\n--spectrum-textfield-m-texticon-min-width,var(--spectrum-global-dimension-size-600)\n);--spectrum-textfield-texticon-border-radius:var(\n--spectrum-textfield-m-texticon-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-textfield-texticon-padding-right:var(\n--spectrum-textfield-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-textfield-texticon-height:var(\n--spectrum-textfield-m-texticon-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-textarea-text-padding-top:var(\n--spectrum-textarea-m-text-padding-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-textarea-text-padding-bottom:var(\n--spectrum-textarea-m-text-padding-bottom,var(--spectrum-global-dimension-size-115)\n);--spectrum-textarea-padding-left:var(\n--spectrum-textarea-m-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-textarea-padding-right:var(\n--spectrum-textarea-m-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-textarea-height:var(\n--spectrum-textarea-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-textfield-texticon-padding-top:3px;--spectrum-textfield-texticon-padding-bottom:5px;--spectrum-textfield-texticon-text-font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);--spectrum-textfield-texticon-icon-gap:var(\n--spectrum-global-dimension-size-65\n);--spectrum-textfield-quiet-texticon-icon-gap:var(\n--spectrum-global-dimension-size-75\n);--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(\n--spectrum-textarea-text-padding-bottom\n)}#textfield{display:inline-flex;min-width:var(--spectrum-textfield-texticon-min-width);position:relative;width:var(\n--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400)\n)}:host([quiet][multiline]) #textfield .input{height:var(\n--spectrum-textfield-texticon-height\n);min-height:var(--spectrum-textfield-texticon-height)}#textfield:after{border-color:transparent;border-radius:calc(var(--spectrum-textfield-texticon-border-radius) + var(\n--spectrum-textfield-m-texticon-focus-ring-gap,\nvar(--spectrum-alias-input-focusring-gap)\n));bottom:0;content:\"\";left:0;margin:calc(var(\n--spectrum-textfield-m-texticon-focus-ring-gap,\nvar(--spectrum-alias-input-focusring-gap)\n)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([quiet]) #textfield:after{border-radius:0}.input{-webkit-appearance:none;-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);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);text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;width:100%}.input::placeholder{font-style:var(--spectrum-textfield-texticon-placeholder-text-font-style);font-weight:var(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n);opacity:1;transition:color var(--spectrum-global-animation-duration-100,.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(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n)}.input:disabled{opacity:1;resize:none}.input:disabled::placeholder{font-weight:var(\n--spectrum-textfield-texticon-placeholder-text-font-weight\n)}.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(\n--spectrum-textfield-icon-inline-end-override,\nvar(--spectrum-textfield-texticon-success-icon-margin-left)\n))}:host([dir=rtl][valid]) #textfield .input{padding-left:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-success-icon-width) + var(\n--spectrum-textfield-icon-inline-end-override,\nvar(--spectrum-textfield-texticon-success-icon-margin-left)\n))}:host([dir=ltr][invalid]) #textfield .input{padding-right:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-invalid-icon-width) + var(\n--spectrum-textfield-icon-inline-end-override,\nvar(--spectrum-textfield-texticon-invalid-icon-margin-left)\n))}:host([dir=rtl][invalid]) #textfield .input{padding-left:calc(var(--spectrum-textfield-texticon-padding-right) + var(--spectrum-textfield-texticon-invalid-icon-width) + var(\n--spectrum-textfield-icon-inline-end-override,\nvar(--spectrum-textfield-texticon-invalid-icon-margin-left)\n))}:host([multiline]) .input{height:var(\n--spectrum-textarea-height-adjusted\n);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(\n--spectrum-textfield-quiet-texticon-padding-left\n)}:host([dir=rtl][quiet]) .input{padding-right:var(\n--spectrum-textfield-quiet-texticon-padding-left\n)}:host([dir=ltr][quiet]) .input{padding-right:var(\n--spectrum-textfield-quiet-texticon-padding-right\n)}:host([dir=rtl][quiet]) .input{padding-left:var(\n--spectrum-textfield-quiet-texticon-padding-right\n)}:host([quiet]) .input{border-bottom-width:var(\n--spectrum-textfield-quiet-texticon-border-bottom-size\n);border-left-width:0;border-radius:var(\n--spectrum-textfield-quiet-texticon-border-radius\n);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([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([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([dir=rtl][valid][quiet]) .input{padding-left:calc(var(--spectrum-textfield-texticon-success-icon-width) + var(--spectrum-textfield-quiet-texticon-success-icon-margin-left))}.icon{pointer-events:all;position:absolute}:host([dir=ltr][quiet]) .icon{padding-right:0}:host([dir=rtl][quiet]) .icon{padding-left:0}:host([dir=ltr][invalid]) #textfield .icon{right:var(\n--spectrum-textfield-icon-inline-end-override,var(--spectrum-textfield-texticon-invalid-icon-margin-left)\n)}:host([dir=rtl][invalid]) #textfield .icon{left:var(\n--spectrum-textfield-icon-inline-end-override,var(--spectrum-textfield-texticon-invalid-icon-margin-left)\n)}:host([invalid]) #textfield .icon{bottom:calc(var(--spectrum-textfield-texticon-height)/2 - var(--spectrum-textfield-texticon-invalid-icon-height)/2);height:var(--spectrum-textfield-texticon-invalid-icon-height);width:var(\n--spectrum-textfield-texticon-invalid-icon-width\n)}:host([dir=ltr][quiet][invalid]) #textfield .icon{right:var(\n--spectrum-textfield-icon-inline-end-override,0\n)}:host([dir=rtl][quiet][invalid]) #textfield .icon{left:var(\n--spectrum-textfield-icon-inline-end-override,0\n)}:host([dir=ltr][valid]) #textfield .icon{right:var(\n--spectrum-textfield-icon-inline-end-override,var(--spectrum-textfield-texticon-success-icon-margin-left)\n)}:host([dir=rtl][valid]) #textfield .icon{left:var(\n--spectrum-textfield-icon-inline-end-override,var(--spectrum-textfield-texticon-success-icon-margin-left)\n)}:host([valid]) #textfield .icon{bottom:calc(var(--spectrum-textfield-texticon-height)/2 - var(--spectrum-textfield-texticon-success-icon-height)/2);height:var(--spectrum-textfield-texticon-success-icon-height);width:var(\n--spectrum-textfield-texticon-success-icon-width\n)}:host([dir=ltr][quiet][valid]) #textfield .icon{right:var(\n--spectrum-textfield-icon-inline-end-override,0\n)}:host([dir=rtl][quiet][valid]) #textfield .icon{left:var(\n--spectrum-textfield-icon-inline-end-override,0\n)}:host([dir=ltr]) .icon-workflow{left:var(\n--spectrum-textfield-texticon-padding-left\n)}:host([dir=rtl]) .icon-workflow{right:var(\n--spectrum-textfield-texticon-padding-left\n)}.icon-workflow{display:block;height:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n);position:absolute;top:calc(var(--spectrum-textfield-texticon-height)/2 - var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n)/2);width:var(\n--spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr][quiet]) .icon-workflow{left:0}:host([dir=rtl][quiet]) .icon-workflow{right:0}:host([dir=ltr][quiet]) .icon-workflow~.input{padding-left:calc(var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-quiet-texticon-icon-gap))}:host([dir=rtl][quiet]) .icon-workflow~.input{padding-right:calc(var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-quiet-texticon-icon-gap))}:host([dir=ltr]) .icon-workflow+.input{padding-left:calc(var(--spectrum-textfield-texticon-padding-left) + var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-texticon-icon-gap))}:host([dir=rtl]) .icon-workflow+.input{padding-right:calc(var(--spectrum-textfield-texticon-padding-left) + var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n) + var(--spectrum-textfield-texticon-icon-gap))}:host([multiline]) .icon-workflow~.input{height:var(\n--spectrum-textfield-texticon-height\n);min-height:var(--spectrum-textfield-texticon-height)}#textfield:hover .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-hover,var(--spectrum-alias-input-border-color-hover)\n);box-shadow:none}#textfield:hover .input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover)\n)}#textfield:hover .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-hover,var(--spectrum-alias-component-icon-color-hover)\n)}#textfield:active .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-down,var(--spectrum-alias-input-border-color-down)\n)}#textfield:active .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-down,var(--spectrum-alias-component-icon-color-down)\n)}:host([valid]) #textfield .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-valid,var(--spectrum-semantic-positive-icon-color)\n)}:host([invalid]) #textfield .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-invalid,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) #textfield:hover .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-hover,var(--spectrum-alias-input-border-color-invalid-hover)\n)}:host([disabled]) #textfield .icon{color:var(\n--spectrum-textfield-m-texticon-validation-icon-color-invalid-disabled,var(--spectrum-alias-background-color-transparent)\n)}:host([disabled]) #textfield .icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)\n)}.icon-workflow{color:var(\n--spectrum-textfield-m-texticon-icon-color,var(--spectrum-alias-component-icon-color-default)\n)}:host([focused]) #textfield:after{box-shadow:0 0 0 var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,var(--spectrum-alias-component-focusring-size)\n) var(\n--spectrum-textfield-m-textonly-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([focused][quiet]) #textfield .input{box-shadow:none}:host([focused][quiet]) #textfield:after{border-bottom:2px solid var(\n--spectrum-textfield-m-textonly-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);bottom:calc(var(\n--spectrum-alias-input-quiet-focusline-gap,\nvar(--spectrum-global-dimension-static-size-10)\n)*-1);box-shadow:none;margin:0}.input{background-color:var(\n--spectrum-textfield-m-texticon-background-color,var(--spectrum-global-color-gray-50)\n);border-color:var(\n--spectrum-textfield-m-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n);color:var(\n--spectrum-textfield-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}.input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color,var(--spectrum-global-color-gray-600)\n)}.input:focus,:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-down,var(--spectrum-alias-input-border-color-down)\n)}.input.focus-visible,:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}.input:focus-visible,:host([focused]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([invalid]) #textfield .input{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([focused][invalid]) #textfield .input,:host([invalid]) #textfield .input:focus{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid]) #textfield .input,:host([invalid]) #textfield .input.focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([focused][invalid]) #textfield .input,:host([invalid]) #textfield .input:focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}.input :disabled,:host([disabled]) #textfield .input,:host([disabled]) #textfield:hover .input{-webkit-text-fill-color:var(\n--spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);background-color:var(\n--spectrum-textfield-m-texticon-background-color-disabled,var(--spectrum-global-color-gray-200)\n);border-color:var(\n--spectrum-textfield-m-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-disabled)\n);color:var(\n--spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}.input :disabled::placeholder,:host([disabled]) #textfield .input::placeholder,:host([disabled]) #textfield:hover .input::placeholder{color:var(\n--spectrum-textfield-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([quiet]) .input{background-color:var(\n--spectrum-textfield-m-quiet-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)\n)}:host([focused][quiet]) #textfield .input,:host([quiet]) .input:focus{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-mouse-focus,var(--spectrum-alias-input-border-color-mouse-focus)\n)}:host([focused][quiet]) #textfield .input,:host([quiet]) .input.focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([focused][quiet]) #textfield .input,:host([quiet]) .input:focus-visible{border-color:var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-texticon-border-color-key-focus,var(--spectrum-alias-input-border-color-key-focus)\n)}:host([invalid][quiet]) #textfield .input{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid,var(--spectrum-alias-input-border-color-invalid-default)\n)}:host([focused][invalid][quiet]) #textfield .input,:host([invalid][quiet]) #textfield .input:focus{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus,var(--spectrum-alias-input-border-color-invalid-mouse-focus)\n)}:host([focused][invalid][quiet]) #textfield .input,:host([invalid][quiet]) #textfield .input.focus-visible{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([focused][invalid][quiet]) #textfield .input,:host([invalid][quiet]) #textfield .input:focus-visible{border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n);box-shadow:0 1px 0 var(\n--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus,var(--spectrum-alias-input-border-color-invalid-key-focus)\n)}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{background-color:var(\n--spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)\n)}:host{display:inline-flex;flex-direction:column;width:var(\n--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400)\n)}:host([multiline]){resize:both}#textfield{width:100%}#textfield,textarea{resize:inherit}:host([grows]) .input{height:100%;left:0;overflow:hidden;position:absolute;resize:none;top:0}:host([grows]) #sizer{-webkit-appearance:none;-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);line-height:var(--spectrum-textfield-texticon-text-line-height);margin:0;outline:none;overflow:visible;overflow-wrap:break-word;padding:var(--spectrum-textarea-padding-top) var(--spectrum-textarea-padding-right) var(--spectrum-textarea-padding-bottom) calc(var(--spectrum-textarea-padding-left) - 1px);text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;width:100%}:host([grows][quiet]) #sizer{border-bottom-width:var(--spectrum-textfield-quiet-texticon-border-size);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}.icon,.icon-workflow{pointer-events:none}\n`"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/textfield",
-    "version": "0.10.0",
+    "version": "0.11.0",
     "publishConfig": {
         "access": "public"
     },
@@ -44,20 +44,21 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.0",
-        "@spectrum-web-components/icon": "^0.11.0",
-        "@spectrum-web-components/icons-ui": "^0.8.0",
-        "@spectrum-web-components/icons-workflow": "^0.8.0",
-        "@spectrum-web-components/shared": "^0.13.0",
+        "@spectrum-web-components/base": "^0.5.1",
+        "@spectrum-web-components/help-text": "^0.1.1",
+        "@spectrum-web-components/icon": "^0.11.2",
+        "@spectrum-web-components/icons-ui": "^0.8.2",
+        "@spectrum-web-components/icons-workflow": "^0.8.2",
+        "@spectrum-web-components/shared": "^0.13.3",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/textfield": "^3.0.4"
+        "@spectrum-css/textfield": "^3.1.3"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "7ce77352f6894043bceac9ef92b21e5f85420969"
+    "gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
 }

package/src/Textfield.d.ts

@@ -4,7 +4,15 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 declare const textfieldTypes: readonly ["text", "url", "tel", "email", "password"];
 export declare type TextfieldType = typeof textfieldTypes[number];
-export declare class TextfieldBase extends Focusable {
+declare const TextfieldBase_base: typeof Focusable & {
+    new (...args: any[]): import("@spectrum-web-components/help-text/src/manage-help-text.js").HelpTextElementInterface;
+    prototype: import("@spectrum-web-components/help-text/src/manage-help-text.js").HelpTextElementInterface;
+};
+/**
+ * @fires input - The value of the element has changed.
+ * @fires change - An alteration to the value of the element has been committed by the user.
+ */
+export declare class TextfieldBase extends TextfieldBase_base {
     static get styles(): CSSResultArray;
     allowedKeys: string;
     focused: boolean;
@@ -29,21 +37,38 @@ export declare class TextfieldBase extends Focusable {
     required: boolean;
     autocomplete?: HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'];
     get focusElement(): HTMLInputElement | HTMLTextAreaElement;
-    protected onInput(): void;
-    protected onChange(): void;
+    /**
+     * Sets the start and end positions of the current selection.
+     *
+     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the
+     *  element's value is treated as pointing to the end of the value.
+     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than
+     *  the length of the element's value is treated as pointing to the end of the value.
+     * @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
+     *  have been performed.
+     */
+    setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): void;
+    /**
+     * Selects all the text.
+     */
+    select(): void;
+    protected handleInput(): void;
+    protected handleChange(): void;
     protected onFocus(): void;
     protected onBlur(): void;
     protected renderStateIcons(): TemplateResult | typeof nothing;
     protected get displayValue(): string;
-    select(): void;
     private get renderMultiline();
     private get renderInput();
+    protected renderField(): TemplateResult;
     protected render(): TemplateResult;
     protected updated(changedProperties: PropertyValues): void;
     checkValidity(): boolean;
 }
 /**
  * @element sp-textfield
+ * @slot help-text - default or non-negative help text to associate to your form element
+ * @slot negative-help-text - negative help text to associate to your form element when `invalid`
  */
 export declare class Textfield extends TextfieldBase {
     set value(value: string);