@spectrum-web-components/textfield 0.11.4 → 0.11.7

package/custom-elements.json

@@ -1282,63 +1282,6 @@
           }
         }
       ]
-    },
-    {
-      "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-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": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "styles",
-            "module": "src/spectrum-textfield.css.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/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)}: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}.input{caret-color:var(--swc-test-caret-color);min-width:var(--spectrum-textfield-texticon-min-width)}: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;white-space:pre-wrap;width:100%;word-break:break-word}: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}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{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([multiline][focused]:not([quiet])) textarea,:host([multiline][focused]:not([quiet]):hover) textarea{box-shadow:0 0 0 calc(var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,\nvar(--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)!important}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "styles",
-            "module": "src/textfield.css.ts"
-          }
-        }
-      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/textfield",
-    "version": "0.11.4",
+    "version": "0.11.7",
     "publishConfig": {
         "access": "public"
     },
@@ -44,21 +44,21 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.4",
-        "@spectrum-web-components/help-text": "^0.1.4",
-        "@spectrum-web-components/icon": "^0.11.5",
-        "@spectrum-web-components/icons-ui": "^0.8.5",
-        "@spectrum-web-components/icons-workflow": "^0.8.5",
-        "@spectrum-web-components/shared": "^0.13.7",
+        "@spectrum-web-components/base": "^0.5.6",
+        "@spectrum-web-components/help-text": "^0.1.7",
+        "@spectrum-web-components/icon": "^0.11.8",
+        "@spectrum-web-components/icons-ui": "^0.8.8",
+        "@spectrum-web-components/icons-workflow": "^0.8.8",
+        "@spectrum-web-components/shared": "^0.14.1",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/textfield": "^3.1.6"
+        "@spectrum-css/textfield": "^3.2.2"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "dd76f9532fdea946880147cc7645f113b998c326"
+    "gitHead": "8f5ea3556e160b6e30815edb2414dc5a5999a925"
 }

package/src/Textfield.js

@@ -109,10 +109,10 @@ export class TextfieldBase extends ManageHelpText(Focusable) {
         }));
     }
     onFocus() {
-        this.focused = true;
+        this.focused = !this.readonly && true;
     }
     onBlur() {
-        this.focused = false;
+        this.focused = !this.readonly && false;
     }
     renderStateIcons() {
         if (this.invalid) {

package/src/Textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textfield.js","sourceRoot":"","sources":["Textfield.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(Focusable) {\n    public static get styles(): CSSResultArray {\n        return [textfieldStyles, checkmarkStyles];\n    }\n\n    @property({ attribute: 'allowed-keys' })\n    allowedKeys = '';\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @query('.input')\n    protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property()\n    public label = '';\n\n    @property()\n    public placeholder = '';\n\n    @property({ attribute: 'type', reflect: true })\n    private _type: TextfieldType = 'text';\n\n    @state()\n    get type(): TextfieldType {\n        return textfieldTypes.find((t) => t === this._type) ?? 'text';\n    }\n\n    set type(val: TextfieldType) {\n        const prev = this._type;\n        this._type = val;\n        this.requestUpdate('type', prev);\n    }\n\n    @property()\n    public pattern?: string;\n\n    @property({ type: Boolean, reflect: true })\n    public grows = false;\n\n    @property({ type: Number })\n    public maxlength = -1;\n\n    @property({ type: Number })\n    public minlength = -1;\n\n    @property({ type: Boolean, reflect: true })\n    public multiline = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    public valid = false;\n\n    @property({ type: String })\n    public set value(value: string | number) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string | number {\n        return this._value;\n    }\n\n    protected _value: string | number = '';\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    @property({ type: String, reflect: true })\n    public autocomplete?:\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'];\n\n    public get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n        return this.inputElement;\n    }\n\n    /**\n     * Sets the start and end positions of the current selection.\n     *\n     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n     *  element's value is treated as pointing to the end of the value.\n     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n     *  the length of the element's value is treated as pointing to the end of the value.\n     * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n     *  have been performed.\n     */\n    public setSelectionRange(\n        selectionStart: number,\n        selectionEnd: number,\n        selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n    ): void {\n        this.inputElement.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n        );\n    }\n\n    /**\n     * Selects all the text.\n     */\n    public select(): void {\n        this.inputElement.select();\n    }\n\n    protected handleInput(): void {\n        if (this.allowedKeys && this.inputElement.value) {\n            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n            if (!regExp.test(this.inputElement.value)) {\n                const selectionStart = this.inputElement\n                    .selectionStart as number;\n                const nextSelectStart = selectionStart - 1;\n                this.inputElement.value = this.value.toString();\n                this.inputElement.setSelectionRange(\n                    nextSelectStart,\n                    nextSelectStart\n                );\n                return;\n            }\n        }\n        this.value = this.inputElement.value;\n    }\n\n    protected handleChange(): void {\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected onFocus(): void {\n        this.focused = true;\n    }\n\n    protected onBlur(): void {\n        this.focused = false;\n    }\n\n    protected renderStateIcons(): TemplateResult | typeof nothing {\n        if (this.invalid) {\n            return html`\n                <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n            `;\n        } else if (this.valid) {\n            return html`\n                <sp-icon-checkmark100\n                    id=\"valid\"\n                    class=\"icon spectrum-UIIcon-Checkmark100\"\n                ></sp-icon-checkmark100>\n            `;\n        }\n        return nothing;\n    }\n\n    protected get displayValue(): string {\n        return this.value.toString();\n    }\n\n    private get renderMultiline(): TemplateResult {\n        return html`\n            ${this.grows && !this.quiet\n                ? html`\n                      <div id=\"sizer\">${this.value}&#8203;</div>\n                  `\n                : nothing}\n            <!-- @ts-ignore -->\n            <textarea\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label || this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${this.displayValue}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            ></textarea>\n        `;\n    }\n\n    private get renderInput(): TemplateResult {\n        return html`\n            <!-- @ts-ignore -->\n            <input\n                type=${this.type}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label || this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${live(this.displayValue)}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            />\n        `;\n    }\n\n    protected renderField(): TemplateResult {\n        return html`\n            ${this.renderStateIcons()}\n            ${this.multiline ? this.renderMultiline : this.renderInput}\n        `;\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <div id=\"textfield\">${this.renderField()}</div>\n            ${this.renderHelpText(this.invalid)}\n        `;\n    }\n\n    protected updated(changedProperties: PropertyValues): void {\n        if (\n            changedProperties.has('value') ||\n            (changedProperties.has('required') && this.required)\n        ) {\n            this.checkValidity();\n        }\n    }\n\n    public checkValidity(): boolean {\n        let validity = this.inputElement.checkValidity();\n        if (this.required || (this.value && this.pattern)) {\n            if ((this.disabled || this.multiline) && this.pattern) {\n                const regex = new RegExp(`^${this.pattern}$`, 'u');\n                validity = regex.test(this.value.toString());\n            }\n            if (typeof this.minlength !== 'undefined') {\n                validity =\n                    validity && this.value.toString().length > this.minlength;\n            }\n            this.valid = validity;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n    @property({ type: String })\n    public set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string {\n        return this._value;\n    }\n\n    protected _value = '';\n}\n"]}
+{"version":3,"file":"Textfield.js","sourceRoot":"","sources":["Textfield.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(Focusable) {\n    public static get styles(): CSSResultArray {\n        return [textfieldStyles, checkmarkStyles];\n    }\n\n    @property({ attribute: 'allowed-keys' })\n    allowedKeys = '';\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @query('.input')\n    protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property()\n    public label = '';\n\n    @property()\n    public placeholder = '';\n\n    @property({ attribute: 'type', reflect: true })\n    private _type: TextfieldType = 'text';\n\n    @state()\n    get type(): TextfieldType {\n        return textfieldTypes.find((t) => t === this._type) ?? 'text';\n    }\n\n    set type(val: TextfieldType) {\n        const prev = this._type;\n        this._type = val;\n        this.requestUpdate('type', prev);\n    }\n\n    @property()\n    public pattern?: string;\n\n    @property({ type: Boolean, reflect: true })\n    public grows = false;\n\n    @property({ type: Number })\n    public maxlength = -1;\n\n    @property({ type: Number })\n    public minlength = -1;\n\n    @property({ type: Boolean, reflect: true })\n    public multiline = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    public valid = false;\n\n    @property({ type: String })\n    public set value(value: string | number) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string | number {\n        return this._value;\n    }\n\n    protected _value: string | number = '';\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    @property({ type: String, reflect: true })\n    public autocomplete?:\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'];\n\n    public get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n        return this.inputElement;\n    }\n\n    /**\n     * Sets the start and end positions of the current selection.\n     *\n     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n     *  element's value is treated as pointing to the end of the value.\n     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n     *  the length of the element's value is treated as pointing to the end of the value.\n     * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n     *  have been performed.\n     */\n    public setSelectionRange(\n        selectionStart: number,\n        selectionEnd: number,\n        selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n    ): void {\n        this.inputElement.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n        );\n    }\n\n    /**\n     * Selects all the text.\n     */\n    public select(): void {\n        this.inputElement.select();\n    }\n\n    protected handleInput(): void {\n        if (this.allowedKeys && this.inputElement.value) {\n            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n            if (!regExp.test(this.inputElement.value)) {\n                const selectionStart = this.inputElement\n                    .selectionStart as number;\n                const nextSelectStart = selectionStart - 1;\n                this.inputElement.value = this.value.toString();\n                this.inputElement.setSelectionRange(\n                    nextSelectStart,\n                    nextSelectStart\n                );\n                return;\n            }\n        }\n        this.value = this.inputElement.value;\n    }\n\n    protected handleChange(): void {\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected onFocus(): void {\n        this.focused = !this.readonly && true;\n    }\n\n    protected onBlur(): void {\n        this.focused = !this.readonly && false;\n    }\n\n    protected renderStateIcons(): TemplateResult | typeof nothing {\n        if (this.invalid) {\n            return html`\n                <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n            `;\n        } else if (this.valid) {\n            return html`\n                <sp-icon-checkmark100\n                    id=\"valid\"\n                    class=\"icon spectrum-UIIcon-Checkmark100\"\n                ></sp-icon-checkmark100>\n            `;\n        }\n        return nothing;\n    }\n\n    protected get displayValue(): string {\n        return this.value.toString();\n    }\n\n    private get renderMultiline(): TemplateResult {\n        return html`\n            ${this.grows && !this.quiet\n                ? html`\n                      <div id=\"sizer\">${this.value}&#8203;</div>\n                  `\n                : nothing}\n            <!-- @ts-ignore -->\n            <textarea\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label || this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${this.displayValue}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            ></textarea>\n        `;\n    }\n\n    private get renderInput(): TemplateResult {\n        return html`\n            <!-- @ts-ignore -->\n            <input\n                type=${this.type}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label || this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${live(this.displayValue)}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            />\n        `;\n    }\n\n    protected renderField(): TemplateResult {\n        return html`\n            ${this.renderStateIcons()}\n            ${this.multiline ? this.renderMultiline : this.renderInput}\n        `;\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <div id=\"textfield\">${this.renderField()}</div>\n            ${this.renderHelpText(this.invalid)}\n        `;\n    }\n\n    protected updated(changedProperties: PropertyValues): void {\n        if (\n            changedProperties.has('value') ||\n            (changedProperties.has('required') && this.required)\n        ) {\n            this.checkValidity();\n        }\n    }\n\n    public checkValidity(): boolean {\n        let validity = this.inputElement.checkValidity();\n        if (this.required || (this.value && this.pattern)) {\n            if ((this.disabled || this.multiline) && this.pattern) {\n                const regex = new RegExp(`^${this.pattern}$`, 'u');\n                validity = regex.test(this.value.toString());\n            }\n            if (typeof this.minlength !== 'undefined') {\n                validity =\n                    validity && this.value.toString().length > this.minlength;\n            }\n            this.valid = validity;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n    @property({ type: String })\n    public set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string {\n        return this._value;\n    }\n\n    protected _value = '';\n}\n"]}

package/src/spectrum-config.js

@@ -74,6 +74,11 @@ const config = {
                     selector: '.is-disabled',
                     name: 'disabled',
                 },
+                {
+                    type: 'boolean',
+                    selector: '.is-readOnly',
+                    name: 'readonly',
+                },
             ],
         },
     ],

package/src/spectrum-textfield.css.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -223,7 +223,11 @@ var(--spectrum-global-dimension-static-size-10)
 --spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
 )}.input :disabled::placeholder,:host([disabled]) #textfield .input::placeholder,:host([disabled]) #textfield:hover .input::placeholder{color:var(
 --spectrum-textfield-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)
-)}:host([quiet]) .input{background-color:var(
+)}.input:read-only,:host([readonly]) #textfield .input,:host([readonly]) #textfield:hover .input{-webkit-text-fill-color:var(--spectrum-global-color-gray-800);background-color:var(
+--spectrum-alias-background-color-transparent,transparent
+);border-color:var(
+--spectrum-alias-background-color-transparent,transparent
+);color:var(--spectrum-global-color-gray-800)}:host([quiet]) .input{background-color:var(
 --spectrum-textfield-m-quiet-texticon-background-color,var(--spectrum-alias-background-color-transparent)
 );border-color:var(
 --spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)
@@ -253,7 +257,7 @@ var(--spectrum-global-dimension-static-size-10)
 --spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)
 );border-color:var(
 --spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)
-)}
+)}@media (forced-colors:active){#textfield{--spectrum-textfield-m-quiet-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-quiet-texticon-border-color-down:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-hover:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-down:Highlight;--spectrum-textfield-m-texticon-border-color-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-placeholder-text-color:GrayText;--spectrum-textfield-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-textfield-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-textfield-m-texticon-text-color-disabled:GrayText;--spectrum-textfield-m-textonly-focus-ring-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-focus-ring-border-width:2px}:host([focused]) #textfield:after{forced-color-adjust:none}}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-textfield.css.js.map

package/src/spectrum-textfield.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"spectrum-textfield.css.js","sourceRoot":"","sources":["spectrum-textfield.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoPjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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`;\nexport default styles;"]}
+{"version":3,"file":"spectrum-textfield.css.js","sourceRoot":"","sources":["spectrum-textfield.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwPjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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)}.input:read-only,:host([readonly]) #textfield .input,:host([readonly]) #textfield:hover .input{-webkit-text-fill-color:var(--spectrum-global-color-gray-800);background-color:var(\n--spectrum-alias-background-color-transparent,transparent\n);border-color:var(\n--spectrum-alias-background-color-transparent,transparent\n);color:var(--spectrum-global-color-gray-800)}: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)}@media (forced-colors:active){#textfield{--spectrum-textfield-m-quiet-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-quiet-texticon-border-color-down:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-hover:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-down:Highlight;--spectrum-textfield-m-texticon-border-color-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-placeholder-text-color:GrayText;--spectrum-textfield-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-textfield-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-textfield-m-texticon-text-color-disabled:GrayText;--spectrum-textfield-m-textonly-focus-ring-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-focus-ring-border-width:2px}:host([focused]) #textfield:after{forced-color-adjust:none}}\n`;\nexport default styles;"]}

package/src/textfield.css.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -223,7 +223,11 @@ var(--spectrum-global-dimension-static-size-10)
 --spectrum-textfield-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
 )}.input :disabled::placeholder,:host([disabled]) #textfield .input::placeholder,:host([disabled]) #textfield:hover .input::placeholder{color:var(
 --spectrum-textfield-m-texticon-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled)
-)}:host([quiet]) .input{background-color:var(
+)}.input:read-only,:host([readonly]) #textfield .input,:host([readonly]) #textfield:hover .input{-webkit-text-fill-color:var(--spectrum-global-color-gray-800);background-color:var(
+--spectrum-alias-background-color-transparent,transparent
+);border-color:var(
+--spectrum-alias-background-color-transparent,transparent
+);color:var(--spectrum-global-color-gray-800)}:host([quiet]) .input{background-color:var(
 --spectrum-textfield-m-quiet-texticon-background-color,var(--spectrum-alias-background-color-transparent)
 );border-color:var(
 --spectrum-textfield-m-quiet-texticon-border-color,var(--spectrum-alias-input-border-color-default)
@@ -253,9 +257,9 @@ var(--spectrum-global-dimension-static-size-10)
 --spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)
 );border-color:var(
 --spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)
-)}:host{display:inline-flex;flex-direction:column;width:var(
+)}@media (forced-colors:active){#textfield{--spectrum-textfield-m-quiet-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-quiet-texticon-border-color-down:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-hover:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-down:Highlight;--spectrum-textfield-m-texticon-border-color-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-placeholder-text-color:GrayText;--spectrum-textfield-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-textfield-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-textfield-m-texticon-text-color-disabled:GrayText;--spectrum-textfield-m-textonly-focus-ring-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-focus-ring-border-width:2px}:host([focused]) #textfield:after{forced-color-adjust:none}}:host{display:inline-flex;flex-direction:column;width:var(
 --spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400)
-)}:host([multiline]){resize:both}#textfield{width:100%}#textfield,textarea{resize:inherit}.input{caret-color:var(--swc-test-caret-color);min-width:var(--spectrum-textfield-texticon-min-width)}: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;white-space:pre-wrap;width:100%;word-break:break-word}: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}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{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([multiline][focused]:not([quiet])) textarea,:host([multiline][focused]:not([quiet]):hover) textarea{box-shadow:0 0 0 calc(var(
+)}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}#textfield{width:100%}#textfield,textarea{resize:inherit}.input{caret-color:var(--swc-test-caret-color);min-width:var(--spectrum-textfield-texticon-min-width)}: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;white-space:pre-wrap;width:100%;word-break:break-word}: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}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{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([multiline][focused]:not([quiet])) textarea,:host([multiline][focused]:not([quiet]):hover) textarea{box-shadow:0 0 0 calc(var(
 --spectrum-textfield-m-texticon-focus-ring-border-width,
 var(--spectrum-alias-component-focusring-size)
 )) var(

package/src/textfield.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.css.js","sourceRoot":"","sources":["textfield.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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}.input{caret-color:var(--swc-test-caret-color);min-width:var(--spectrum-textfield-texticon-min-width)}: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;white-space:pre-wrap;width:100%;word-break:break-word}: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}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{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([multiline][focused]:not([quiet])) textarea,:host([multiline][focused]:not([quiet]):hover) textarea{box-shadow:0 0 0 calc(var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,\nvar(--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)!important}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}\n`;\nexport default styles;"]}
+{"version":3,"file":"textfield.css.js","sourceRoot":"","sources":["textfield.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+PjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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)}.input:read-only,:host([readonly]) #textfield .input,:host([readonly]) #textfield:hover .input{-webkit-text-fill-color:var(--spectrum-global-color-gray-800);background-color:var(\n--spectrum-alias-background-color-transparent,transparent\n);border-color:var(\n--spectrum-alias-background-color-transparent,transparent\n);color:var(--spectrum-global-color-gray-800)}: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)}@media (forced-colors:active){#textfield{--spectrum-textfield-m-quiet-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-quiet-texticon-border-color-down:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-hover:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-quiet-texticon-border-color-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-disabled:GrayText;--spectrum-textfield-m-texticon-border-color-down:Highlight;--spectrum-textfield-m-texticon-border-color-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-hover:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-key-focus:Highlight;--spectrum-textfield-m-texticon-border-color-invalid-mouse-focus:Highlight;--spectrum-textfield-m-texticon-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-placeholder-text-color:GrayText;--spectrum-textfield-m-texticon-placeholder-text-color-disabled:GrayText;--spectrum-textfield-m-texticon-placeholder-text-color-hover:GrayText;--spectrum-textfield-m-texticon-text-color-disabled:GrayText;--spectrum-textfield-m-textonly-focus-ring-border-color-key-focus:Highlight;--spectrum-textfield-m-texticon-focus-ring-border-width:2px}:host([focused]) #textfield:after{forced-color-adjust:none}}: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}:host([multiline][readonly]){resize:none}#textfield{width:100%}#textfield,textarea{resize:inherit}.input{caret-color:var(--swc-test-caret-color);min-width:var(--spectrum-textfield-texticon-min-width)}: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;white-space:pre-wrap;width:100%;word-break:break-word}: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}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{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([multiline][focused]:not([quiet])) textarea,:host([multiline][focused]:not([quiet]):hover) textarea{box-shadow:0 0 0 calc(var(\n--spectrum-textfield-m-texticon-focus-ring-border-width,\nvar(--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)!important}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}\n`;\nexport default styles;"]}