@spectrum-web-components/textfield
Version:
`sp-textfield` components are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.
1,230 lines • 79.8 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "sp-textfield.ts",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "sp-textfield",
"declaration": {
"name": "Textfield",
"module": "/src/Textfield.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/Textfield.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "TextfieldBase",
"members": [
{
"kind": "field",
"name": "allowedKeys",
"type": {
"text": "string"
},
"default": "''",
"attribute": "allowed-keys"
},
{
"kind": "field",
"name": "focused",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "focused",
"reflects": true
},
{
"kind": "field",
"name": "inputElement",
"type": {
"text": "HTMLInputElement | HTMLTextAreaElement"
},
"privacy": "protected"
},
{
"kind": "field",
"name": "invalid",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "invalid",
"reflects": true
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string"
},
"privacy": "public",
"default": "''",
"attribute": "label"
},
{
"kind": "field",
"name": "placeholder",
"type": {
"text": "string"
},
"privacy": "public",
"default": "''",
"attribute": "placeholder"
},
{
"kind": "field",
"name": "_type",
"type": {
"text": "TextfieldType"
},
"privacy": "private",
"default": "'text'",
"attribute": "type",
"reflects": true
},
{
"kind": "field",
"name": "type",
"type": {
"text": "TextfieldType"
}
},
{
"kind": "field",
"name": "pattern",
"type": {
"text": "string | undefined"
},
"privacy": "public",
"attribute": "pattern"
},
{
"kind": "field",
"name": "grows",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "grows",
"reflects": true
},
{
"kind": "field",
"name": "maxlength",
"type": {
"text": "number"
},
"privacy": "public",
"default": "-1",
"attribute": "maxlength"
},
{
"kind": "field",
"name": "minlength",
"type": {
"text": "number"
},
"privacy": "public",
"default": "-1",
"attribute": "minlength"
},
{
"kind": "field",
"name": "multiline",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "multiline",
"reflects": true
},
{
"kind": "field",
"name": "readonly",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "readonly",
"reflects": true
},
{
"kind": "field",
"name": "valid",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "valid",
"reflects": true
},
{
"kind": "field",
"name": "value",
"privacy": "public",
"type": {
"text": "string | number"
},
"attribute": "value"
},
{
"kind": "field",
"name": "_value",
"type": {
"text": "string | number"
},
"privacy": "protected",
"default": "''"
},
{
"kind": "field",
"name": "quiet",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "quiet",
"reflects": true
},
{
"kind": "field",
"name": "required",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "required",
"reflects": true
},
{
"kind": "field",
"name": "autocomplete",
"type": {
"text": "| HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'] | undefined"
},
"privacy": "public",
"attribute": "autocomplete",
"reflects": true
},
{
"kind": "field",
"name": "focusElement",
"type": {
"text": "HTMLInputElement | HTMLTextAreaElement"
},
"privacy": "public"
},
{
"kind": "method",
"name": "onInput",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "onChange",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "onFocus",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "onBlur",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "renderStateIcons",
"privacy": "protected",
"return": {
"type": {
"text": "TemplateResult | typeof nothing"
}
}
},
{
"kind": "field",
"name": "displayValue",
"type": {
"text": "string"
},
"privacy": "protected"
},
{
"kind": "method",
"name": "select",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "field",
"name": "renderMultiline",
"type": {
"text": "TemplateResult"
},
"privacy": "private"
},
{
"kind": "field",
"name": "renderInput",
"type": {
"text": "TemplateResult"
},
"privacy": "private"
},
{
"kind": "method",
"name": "renderField",
"privacy": "protected",
"return": {
"type": {
"text": "TemplateResult"
}
}
},
{
"kind": "method",
"name": "checkValidity",
"privacy": "public",
"return": {
"type": {
"text": "boolean"
}
}
}
],
"events": [
{
"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": [
{
"name": "allowed-keys",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "allowedKeys"
},
{
"name": "focused",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "focused"
},
{
"name": "invalid",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "invalid"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "label"
},
{
"name": "placeholder",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "placeholder"
},
{
"name": "type",
"type": {
"text": "TextfieldType"
},
"default": "'text'",
"fieldName": "_type"
},
{
"name": "pattern",
"type": {
"text": "string | undefined"
},
"fieldName": "pattern"
},
{
"name": "grows",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "grows"
},
{
"name": "maxlength",
"type": {
"text": "number"
},
"default": "-1",
"fieldName": "maxlength"
},
{
"name": "minlength",
"type": {
"text": "number"
},
"default": "-1",
"fieldName": "minlength"
},
{
"name": "multiline",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "multiline"
},
{
"name": "readonly",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "readonly"
},
{
"name": "valid",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "valid"
},
{
"name": "value",
"type": {
"text": "string | number"
},
"fieldName": "value"
},
{
"name": "quiet",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "quiet"
},
{
"name": "required",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "required"
},
{
"name": "autocomplete",
"type": {
"text": "| HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'] | undefined"
},
"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"
}
},
{
"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",
"name": "value",
"privacy": "public",
"type": {
"text": "string | number"
},
"attribute": "value",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "_value",
"type": {
"text": "string | number"
},
"privacy": "protected",
"default": "''",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "allowedKeys",
"type": {
"text": "string"
},
"default": "''",
"attribute": "allowed-keys",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "focused",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "focused",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "inputElement",
"type": {
"text": "HTMLInputElement | HTMLTextAreaElement"
},
"privacy": "protected",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "invalid",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "invalid",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string"
},
"privacy": "public",
"default": "''",
"attribute": "label",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "placeholder",
"type": {
"text": "string"
},
"privacy": "public",
"default": "''",
"attribute": "placeholder",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "_type",
"type": {
"text": "TextfieldType"
},
"privacy": "private",
"default": "'text'",
"attribute": "type",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "type",
"type": {
"text": "TextfieldType"
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "pattern",
"type": {
"text": "string | undefined"
},
"privacy": "public",
"attribute": "pattern",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "grows",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "grows",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "maxlength",
"type": {
"text": "number"
},
"privacy": "public",
"default": "-1",
"attribute": "maxlength",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "minlength",
"type": {
"text": "number"
},
"privacy": "public",
"default": "-1",
"attribute": "minlength",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "multiline",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "multiline",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "readonly",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "readonly",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "valid",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "valid",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "quiet",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "quiet",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "required",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "required",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "autocomplete",
"type": {
"text": "| HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'] | undefined"
},
"privacy": "public",
"attribute": "autocomplete",
"reflects": true,
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "focusElement",
"type": {
"text": "HTMLInputElement | HTMLTextAreaElement"
},
"privacy": "public",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "method",
"name": "onInput",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "method",
"name": "onChange",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "method",
"name": "onFocus",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "method",
"name": "onBlur",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "method",
"name": "renderStateIcons",
"privacy": "protected",
"return": {
"type": {
"text": "TemplateResult | typeof nothing"
}
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "displayValue",
"type": {
"text": "string"
},
"privacy": "protected",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "method",
"name": "select",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "renderMultiline",
"type": {
"text": "TemplateResult"
},
"privacy": "private",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "field",
"name": "renderInput",
"type": {
"text": "TemplateResult"
},
"privacy": "private",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "method",
"name": "renderField",
"privacy": "protected",
"return": {
"type": {
"text": "TemplateResult"
}
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "method",
"name": "checkValidity",
"privacy": "public",
"return": {
"type": {
"text": "boolean"
}
},
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
}
],
"attributes": [
{
"name": "value",
"type": {
"text": "string | number"
},
"fieldName": "value",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "allowed-keys",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "allowedKeys",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "focused",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "focused",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "invalid",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "invalid",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "label",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "placeholder",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "placeholder",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "type",
"type": {
"text": "TextfieldType"
},
"default": "'text'",
"fieldName": "_type",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "pattern",
"type": {
"text": "string | undefined"
},
"fieldName": "pattern",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "grows",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "grows",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "maxlength",
"type": {
"text": "number"
},
"default": "-1",
"fieldName": "maxlength",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "minlength",
"type": {
"text": "number"
},
"default": "-1",
"fieldName": "minlength",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "multiline",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "multiline",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "readonly",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "readonly",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "valid",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "valid",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "quiet",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "quiet",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "required",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "required",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"name": "autocomplete",
"type": {
"text": "| HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'] | undefined"
},
"fieldName": "autocomplete",
"inheritedFrom": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
}
],
"superclass": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
},
"tagName": "sp-textfield",
"customElement": true,
"events": [
{
"name": "change",
"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"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "TextfieldBase",
"declaration": {
"name": "TextfieldBase",
"module": "src/Textfield.ts"
}
},
{
"kind": "js",
"name": "Textfield",
"declaration": {
"name": "Textfield",
"module": "src/Textfield.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/index.ts",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./Textfield.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/spectrum-textfield.css.ts",
"declarations": [
{
"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-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