Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@spectrum-web-components/textfield

Package Overview
Dependencies
Maintainers
5
Versions
295
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/textfield - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

4

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log

## [0.3.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/textfield@0.3.2...@spectrum-web-components/textfield@0.3.3) (2020-03-11)
**Note:** Version bump only for package @spectrum-web-components/textfield
## [0.3.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/textfield@0.3.1...@spectrum-web-components/textfield@0.3.2) (2020-02-05)

@@ -8,0 +12,0 @@

16

lib/spectrum-textfield.css.js

@@ -22,9 +22,15 @@ /*

var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin)));text-indent:0;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));vertical-align:top;margin:0;overflow:visible;font-family:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));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;outline:none;-webkit-appearance:none;-moz-appearance:textfield;background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-global-color-gray-300));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}#input::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;opacity:1;color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#input:lang(ja)::placeholder,#input:lang(ko)::placeholder,#input:lang(zh)::placeholder{font-style:normal}#input:hover::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#input:disabled{resize:none;opacity:1}#input:disabled::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}#input::-ms-clear{width:0;height:0}#input::-webkit-inner-spin-button,#input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#input:-moz-ui-invalid{box-shadow:none}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-repeat:no-repeat}#input:invalid,:host([invalid]) #input{background-size:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin)));text-indent:0;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));vertical-align:top;margin:0;overflow:visible;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));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;outline:none;-webkit-appearance:none;-moz-appearance:textfield;background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-global-color-gray-300));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}#input::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;opacity:1;color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#input:lang(ja)::placeholder,#input:lang(ko)::placeholder,#input:lang(zh)::placeholder{font-style:normal}#input:hover::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#input:disabled{resize:none;opacity:1}#input:disabled::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}#input::-ms-clear{width:0;height:0}#input::-webkit-inner-spin-button,#input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#input:-moz-ui-invalid{box-shadow:none}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-repeat:no-repeat}#input:invalid,:host([invalid]) #input{background-size:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin))) calc(var(--spectrum-textfield-height,
var(--spectrum-alias-single-line-height))/2 - var(--spectrum-icon-alert-medium-height,
var(--spectrum-global-dimension-size-225))/2 - var(--spectrum-textfield-quiet-border-size,
var(--spectrum-alias-border-size-thin)));padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin)) + var(--spectrum-icon-alert-medium-width,
var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,
var(--spectrum-global-dimension-size-150)))}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)))}:host([valid]) #input{background-size:var(--spectrum-icon-checkmark-medium-width) var(--spectrum-icon-checkmark-medium-width);background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin))) 50%}:host([valid]) #input{background-size:var(--spectrum-icon-checkmark-medium-width) var(--spectrum-icon-checkmark-medium-width);padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin))) calc(var(--spectrum-textfield-height,
var(--spectrum-alias-single-line-height))/2 - var(--spectrum-icon-checkmark-medium-height)/2);padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,

@@ -40,7 +46,5 @@ var(--spectrum-alias-border-size-thin)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,

var(--spectrum-global-dimension-size-150)) - var(--spectrum-textarea-border-size,
var(--spectrum-alias-border-size-thin)));overflow:auto}:host([multiline]) #input:invalid,:host([multiline][invalid]) #input,:host([multiline][valid]) #input{background-position:calc(100% - var(--spectrum-textfield-icon-size,
var(--spectrum-global-dimension-size-225))/2) calc(100% - var(--spectrum-textfield-icon-size,
var(--spectrum-global-dimension-size-225))/2)}:host([quiet]) #input{border-radius:var(--spectrum-textfield-quiet-border-radius,0);border-left-width:0;border-bottom-width:var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin));border-right-width:0;border-top-width:0;padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);resize:none;overflow-y:hidden;background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-global-color-gray-300))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input,:host([quiet][valid]) #input{background-position:100% 50%}:host([quiet][multiline]) #input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}#input:hover{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-global-color-gray-400));box-shadow:none}#input:focus{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-down))}#input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}#input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input[disabled]::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input:invalid,:host([invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E")}#input:invalid.focus-visible:not(:active),:host([invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:hover{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-global-color-gray-400))}:host([quiet]) #input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-down))}:host([quiet]) #input:focus{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input:disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid:focus,:host([quiet][invalid]) #input:focus{box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid.focus-visible:not(:active),:host([quiet][invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}
var(--spectrum-alias-border-size-thin)));overflow:auto}:host([quiet]) #input{border-radius:var(--spectrum-textfield-quiet-border-radius,0);border-left-width:0;border-bottom-width:var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin));border-right-width:0;border-top-width:0;padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);resize:none;overflow-y:hidden;background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-global-color-gray-300))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input,:host([quiet][valid]) #input{background-position:100% 50%}:host([quiet][multiline]) #input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}#input:hover{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-global-color-gray-400));box-shadow:none}#input:focus{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-down))}#input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}#input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input[disabled]::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input:invalid,:host([invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E")}#input:invalid.focus-visible:not(:active),:host([invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:hover{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-global-color-gray-400))}:host([quiet]) #input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-down))}:host([quiet]) #input:focus{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input:disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid:focus,:host([quiet][invalid]) #input:focus{box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid.focus-visible:not(:active),:host([quiet][invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}
`;
export default styles;
//# sourceMappingURL=spectrum-textfield.css.js.map

16

lib/textfield.css.js

@@ -22,9 +22,15 @@ /*

var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin)));text-indent:0;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));vertical-align:top;margin:0;overflow:visible;font-family:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));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;outline:none;-webkit-appearance:none;-moz-appearance:textfield;background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-global-color-gray-300));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}#input::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;opacity:1;color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#input:lang(ja)::placeholder,#input:lang(ko)::placeholder,#input:lang(zh)::placeholder{font-style:normal}#input:hover::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#input:disabled{resize:none;opacity:1}#input:disabled::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}#input::-ms-clear{width:0;height:0}#input::-webkit-inner-spin-button,#input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#input:-moz-ui-invalid{box-shadow:none}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-repeat:no-repeat}#input:invalid,:host([invalid]) #input{background-size:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin)));text-indent:0;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));vertical-align:top;margin:0;overflow:visible;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));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;outline:none;-webkit-appearance:none;-moz-appearance:textfield;background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-global-color-gray-300));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}#input::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;opacity:1;color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#input:lang(ja)::placeholder,#input:lang(ko)::placeholder,#input:lang(zh)::placeholder{font-style:normal}#input:hover::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#input:disabled{resize:none;opacity:1}#input:disabled::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}#input::-ms-clear{width:0;height:0}#input::-webkit-inner-spin-button,#input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#input:-moz-ui-invalid{box-shadow:none}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-repeat:no-repeat}#input:invalid,:host([invalid]) #input{background-size:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin))) calc(var(--spectrum-textfield-height,
var(--spectrum-alias-single-line-height))/2 - var(--spectrum-icon-alert-medium-height,
var(--spectrum-global-dimension-size-225))/2 - var(--spectrum-textfield-quiet-border-size,
var(--spectrum-alias-border-size-thin)));padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin)) + var(--spectrum-icon-alert-medium-width,
var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,
var(--spectrum-global-dimension-size-150)))}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)))}:host([valid]) #input{background-size:var(--spectrum-icon-checkmark-medium-width) var(--spectrum-icon-checkmark-medium-width);background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin))) 50%}:host([valid]) #input{background-size:var(--spectrum-icon-checkmark-medium-width) var(--spectrum-icon-checkmark-medium-width);padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin))) calc(var(--spectrum-textfield-height,
var(--spectrum-alias-single-line-height))/2 - var(--spectrum-icon-checkmark-medium-height)/2);padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,

@@ -40,5 +46,3 @@ var(--spectrum-alias-border-size-thin)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,

var(--spectrum-global-dimension-size-150)) - var(--spectrum-textarea-border-size,
var(--spectrum-alias-border-size-thin)));overflow:auto}:host([multiline]) #input:invalid,:host([multiline][invalid]) #input,:host([multiline][valid]) #input{background-position:calc(100% - var(--spectrum-textfield-icon-size,
var(--spectrum-global-dimension-size-225))/2) calc(100% - var(--spectrum-textfield-icon-size,
var(--spectrum-global-dimension-size-225))/2)}:host([quiet]) #input{border-radius:var(--spectrum-textfield-quiet-border-radius,0);border-left-width:0;border-bottom-width:var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin));border-right-width:0;border-top-width:0;padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);resize:none;overflow-y:hidden;background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-global-color-gray-300))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input,:host([quiet][valid]) #input{background-position:100% 50%}:host([quiet][multiline]) #input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}#input:hover{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-global-color-gray-400));box-shadow:none}#input:focus{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-down))}#input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}#input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input[disabled]::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input:invalid,:host([invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E")}#input:invalid.focus-visible:not(:active),:host([invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:hover{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-global-color-gray-400))}:host([quiet]) #input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-down))}:host([quiet]) #input:focus{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input:disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid:focus,:host([quiet][invalid]) #input:focus{box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid.focus-visible:not(:active),:host([quiet][invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host{position:relative;display:inline-flex;vertical-align:top}#input:invalid,:host([invalid]) #input{background-image:none}#invalid,#valid{position:absolute;top:50%;right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin)));overflow:auto}:host([quiet]) #input{border-radius:var(--spectrum-textfield-quiet-border-radius,0);border-left-width:0;border-bottom-width:var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin));border-right-width:0;border-top-width:0;padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);resize:none;overflow-y:hidden;background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-global-color-gray-300))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input,:host([quiet][valid]) #input{background-position:100% 50%}:host([quiet][multiline]) #input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}#input:hover{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-global-color-gray-400));box-shadow:none}#input:focus{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-down))}#input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}#input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input[disabled]::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input:invalid,:host([invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E")}#input:invalid.focus-visible:not(:active),:host([invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:hover{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-global-color-gray-400))}:host([quiet]) #input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-down))}:host([quiet]) #input:focus{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input:disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid:focus,:host([quiet][invalid]) #input:focus{box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid.focus-visible:not(:active),:host([quiet][invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host{position:relative;display:inline-flex;vertical-align:top}#input:invalid,:host([invalid]) #input{background-image:none}#invalid,#valid{position:absolute;top:50%;right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - 3px);transform:translateY(-50%)}#valid{color:var(--spectrum-alert-success-icon-color,var(--spectrum-global-color-green-600))}#invalid{color:var(--spectrum-alert-error-border-color,var(--spectrum-global-color-red-400))}:host([valid]) #input{background-image:none}:host([grows]) #input{position:absolute;top:0;left:0;height:100%}:host([grows]) #sizer{box-sizing:border-box;padding:4px 8px;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));min-height:50px;border:1px solid transparent;pointer-events:none;opacity:0;font-family:adobe-clean,Helvetica,Arial,sans-serif;font-size:var(--spectrum-textfield-text-size,var(--spectrum-global-dimension-font-size-100));line-height:var(--spectrum-alias-line-height-medium,var(--spectrum-global-dimension-size-250))}:host([grows][quiet]) #sizer{padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);border-right-width:0;border-left-width:0}:host([quiet]) #invalid,:host([quiet]) #valid{right:-2px}:host([multiline]) #invalid,:host([multiline]) #valid{top:calc(100% - 12px)}

@@ -45,0 +49,0 @@ `;

8

package.json

@@ -21,3 +21,3 @@ {

],
"version": "0.3.2",
"version": "0.3.3",
"description": "",

@@ -42,6 +42,6 @@ "main": "lib/index.js",

"devDependencies": {
"@spectrum-css/textfield": "^2.0.4"
"@spectrum-css/textfield": "^2.0.5"
},
"dependencies": {
"@spectrum-web-components/icon": "^0.4.3",
"@spectrum-web-components/icon": "^0.4.4",
"@spectrum-web-components/icons": "^0.2.3",

@@ -51,3 +51,3 @@ "@spectrum-web-components/shared": "^0.4.3",

},
"gitHead": "02944b5006325e4ddc72f0a5f21b230d61401f0c"
"gitHead": "d5b370be9515cb1458c436fd4b7c8689e2bfb933"
}

16

src/spectrum-textfield.css.ts

@@ -22,9 +22,15 @@ /*

var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin)));text-indent:0;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));vertical-align:top;margin:0;overflow:visible;font-family:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));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;outline:none;-webkit-appearance:none;-moz-appearance:textfield;background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-global-color-gray-300));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}#input::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;opacity:1;color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#input:lang(ja)::placeholder,#input:lang(ko)::placeholder,#input:lang(zh)::placeholder{font-style:normal}#input:hover::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#input:disabled{resize:none;opacity:1}#input:disabled::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}#input::-ms-clear{width:0;height:0}#input::-webkit-inner-spin-button,#input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#input:-moz-ui-invalid{box-shadow:none}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-repeat:no-repeat}#input:invalid,:host([invalid]) #input{background-size:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin)));text-indent:0;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));vertical-align:top;margin:0;overflow:visible;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));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;outline:none;-webkit-appearance:none;-moz-appearance:textfield;background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-global-color-gray-300));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}#input::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;opacity:1;color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#input:lang(ja)::placeholder,#input:lang(ko)::placeholder,#input:lang(zh)::placeholder{font-style:normal}#input:hover::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#input:disabled{resize:none;opacity:1}#input:disabled::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}#input::-ms-clear{width:0;height:0}#input::-webkit-inner-spin-button,#input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#input:-moz-ui-invalid{box-shadow:none}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-repeat:no-repeat}#input:invalid,:host([invalid]) #input{background-size:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin))) calc(var(--spectrum-textfield-height,
var(--spectrum-alias-single-line-height))/2 - var(--spectrum-icon-alert-medium-height,
var(--spectrum-global-dimension-size-225))/2 - var(--spectrum-textfield-quiet-border-size,
var(--spectrum-alias-border-size-thin)));padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin)) + var(--spectrum-icon-alert-medium-width,
var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,
var(--spectrum-global-dimension-size-150)))}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)))}:host([valid]) #input{background-size:var(--spectrum-icon-checkmark-medium-width) var(--spectrum-icon-checkmark-medium-width);background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin))) 50%}:host([valid]) #input{background-size:var(--spectrum-icon-checkmark-medium-width) var(--spectrum-icon-checkmark-medium-width);padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin))) calc(var(--spectrum-textfield-height,
var(--spectrum-alias-single-line-height))/2 - var(--spectrum-icon-checkmark-medium-height)/2);padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,

@@ -40,6 +46,4 @@ var(--spectrum-alias-border-size-thin)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,

var(--spectrum-global-dimension-size-150)) - var(--spectrum-textarea-border-size,
var(--spectrum-alias-border-size-thin)));overflow:auto}:host([multiline]) #input:invalid,:host([multiline][invalid]) #input,:host([multiline][valid]) #input{background-position:calc(100% - var(--spectrum-textfield-icon-size,
var(--spectrum-global-dimension-size-225))/2) calc(100% - var(--spectrum-textfield-icon-size,
var(--spectrum-global-dimension-size-225))/2)}:host([quiet]) #input{border-radius:var(--spectrum-textfield-quiet-border-radius,0);border-left-width:0;border-bottom-width:var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin));border-right-width:0;border-top-width:0;padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);resize:none;overflow-y:hidden;background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-global-color-gray-300))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input,:host([quiet][valid]) #input{background-position:100% 50%}:host([quiet][multiline]) #input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}#input:hover{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-global-color-gray-400));box-shadow:none}#input:focus{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-down))}#input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}#input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input[disabled]::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input:invalid,:host([invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E")}#input:invalid.focus-visible:not(:active),:host([invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:hover{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-global-color-gray-400))}:host([quiet]) #input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-down))}:host([quiet]) #input:focus{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input:disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid:focus,:host([quiet][invalid]) #input:focus{box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid.focus-visible:not(:active),:host([quiet][invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}
var(--spectrum-alias-border-size-thin)));overflow:auto}:host([quiet]) #input{border-radius:var(--spectrum-textfield-quiet-border-radius,0);border-left-width:0;border-bottom-width:var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin));border-right-width:0;border-top-width:0;padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);resize:none;overflow-y:hidden;background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-global-color-gray-300))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input,:host([quiet][valid]) #input{background-position:100% 50%}:host([quiet][multiline]) #input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}#input:hover{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-global-color-gray-400));box-shadow:none}#input:focus{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-down))}#input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}#input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input[disabled]::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input:invalid,:host([invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E")}#input:invalid.focus-visible:not(:active),:host([invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:hover{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-global-color-gray-400))}:host([quiet]) #input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-down))}:host([quiet]) #input:focus{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input:disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid:focus,:host([quiet][invalid]) #input:focus{box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid.focus-visible:not(:active),:host([quiet][invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}
`;
export default styles;

16

src/textfield.css.ts

@@ -22,9 +22,15 @@ /*

var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin)));text-indent:0;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));vertical-align:top;margin:0;overflow:visible;font-family:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));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;outline:none;-webkit-appearance:none;-moz-appearance:textfield;background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-global-color-gray-300));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}#input::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;opacity:1;color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#input:lang(ja)::placeholder,#input:lang(ko)::placeholder,#input:lang(zh)::placeholder{font-style:normal}#input:hover::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#input:disabled{resize:none;opacity:1}#input:disabled::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}#input::-ms-clear{width:0;height:0}#input::-webkit-inner-spin-button,#input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#input:-moz-ui-invalid{box-shadow:none}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-repeat:no-repeat}#input:invalid,:host([invalid]) #input{background-size:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin)));text-indent:0;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));vertical-align:top;margin:0;overflow:visible;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));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;outline:none;-webkit-appearance:none;-moz-appearance:textfield;background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-global-color-gray-300));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}#input::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;opacity:1;color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}#input:lang(ja)::placeholder,#input:lang(ko)::placeholder,#input:lang(zh)::placeholder{font-style:normal}#input:hover::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}#input:disabled{resize:none;opacity:1}#input:disabled::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}#input::-ms-clear{width:0;height:0}#input::-webkit-inner-spin-button,#input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#input:-moz-ui-invalid{box-shadow:none}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-repeat:no-repeat}#input:invalid,:host([invalid]) #input{background-size:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin))) calc(var(--spectrum-textfield-height,
var(--spectrum-alias-single-line-height))/2 - var(--spectrum-icon-alert-medium-height,
var(--spectrum-global-dimension-size-225))/2 - var(--spectrum-textfield-quiet-border-size,
var(--spectrum-alias-border-size-thin)));padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin)) + var(--spectrum-icon-alert-medium-width,
var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,
var(--spectrum-global-dimension-size-150)))}#input:invalid,:host([invalid]) #input,:host([valid]) #input{background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)))}:host([valid]) #input{background-size:var(--spectrum-icon-checkmark-medium-width) var(--spectrum-icon-checkmark-medium-width);background-position:calc(100% - var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) + var(--spectrum-textfield-border-size,
var(--spectrum-alias-border-size-thin))) 50%}:host([valid]) #input{background-size:var(--spectrum-icon-checkmark-medium-width) var(--spectrum-icon-checkmark-medium-width);padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin))) calc(var(--spectrum-textfield-height,
var(--spectrum-alias-single-line-height))/2 - var(--spectrum-icon-checkmark-medium-height)/2);padding-right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - var(--spectrum-textfield-border-size,

@@ -40,7 +46,5 @@ var(--spectrum-alias-border-size-thin)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,

var(--spectrum-global-dimension-size-150)) - var(--spectrum-textarea-border-size,
var(--spectrum-alias-border-size-thin)));overflow:auto}:host([multiline]) #input:invalid,:host([multiline][invalid]) #input,:host([multiline][valid]) #input{background-position:calc(100% - var(--spectrum-textfield-icon-size,
var(--spectrum-global-dimension-size-225))/2) calc(100% - var(--spectrum-textfield-icon-size,
var(--spectrum-global-dimension-size-225))/2)}:host([quiet]) #input{border-radius:var(--spectrum-textfield-quiet-border-radius,0);border-left-width:0;border-bottom-width:var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin));border-right-width:0;border-top-width:0;padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);resize:none;overflow-y:hidden;background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-global-color-gray-300))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input,:host([quiet][valid]) #input{background-position:100% 50%}:host([quiet][multiline]) #input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}#input:hover{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-global-color-gray-400));box-shadow:none}#input:focus{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-down))}#input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}#input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input[disabled]::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input:invalid,:host([invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E")}#input:invalid.focus-visible:not(:active),:host([invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:hover{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-global-color-gray-400))}:host([quiet]) #input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-down))}:host([quiet]) #input:focus{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input:disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid:focus,:host([quiet][invalid]) #input:focus{box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid.focus-visible:not(:active),:host([quiet][invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host{position:relative;display:inline-flex;vertical-align:top}#input:invalid,:host([invalid]) #input{background-image:none}#invalid,#valid{position:absolute;top:50%;right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-alias-border-size-thin)));overflow:auto}:host([quiet]) #input{border-radius:var(--spectrum-textfield-quiet-border-radius,0);border-left-width:0;border-bottom-width:var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin));border-right-width:0;border-top-width:0;padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);resize:none;overflow-y:hidden;background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-global-color-gray-300))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input,:host([quiet][valid]) #input{background-position:100% 50%}:host([quiet][multiline]) #input{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}#input:hover{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-global-color-gray-400));box-shadow:none}#input:focus{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-down))}#input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}#input[disabled]{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input[disabled]::placeholder{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input:invalid,:host([invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E")}#input:invalid.focus-visible:not(:active),:host([invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:hover{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-global-color-gray-400))}:host([quiet]) #input:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-down))}:host([quiet]) #input:focus{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #input:disabled{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}:host([quiet]) #input:invalid,:host([quiet][invalid]) #input{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid:focus,:host([quiet][invalid]) #input:focus{box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host([quiet]) #input:invalid.focus-visible:not(:active),:host([quiet][invalid]) #input.focus-visible:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-error,var(--spectrum-global-color-red-500))}:host{position:relative;display:inline-flex;vertical-align:top}#input:invalid,:host([invalid]) #input{background-image:none}#invalid,#valid{position:absolute;top:50%;right:calc(var(--spectrum-textfield-padding-x,
var(--spectrum-global-dimension-size-150)) - 3px);transform:translateY(-50%)}#valid{color:var(--spectrum-alert-success-icon-color,var(--spectrum-global-color-green-600))}#invalid{color:var(--spectrum-alert-error-border-color,var(--spectrum-global-color-red-400))}:host([valid]) #input{background-image:none}:host([grows]) #input{position:absolute;top:0;left:0;height:100%}:host([grows]) #sizer{box-sizing:border-box;padding:4px 8px;min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));min-height:50px;border:1px solid transparent;pointer-events:none;opacity:0;font-family:adobe-clean,Helvetica,Arial,sans-serif;font-size:var(--spectrum-textfield-text-size,var(--spectrum-global-dimension-font-size-100));line-height:var(--spectrum-alias-line-height-medium,var(--spectrum-global-dimension-size-250))}:host([grows][quiet]) #sizer{padding-left:var(--spectrum-textfield-quiet-padding-x,0);padding-right:var(--spectrum-textfield-quiet-padding-x,0);border-right-width:0;border-left-width:0}:host([quiet]) #invalid,:host([quiet]) #valid{right:-2px}:host([multiline]) #invalid,:host([multiline]) #valid{top:calc(100% - 12px)}
`;
export default styles;
lib/spectrum-textfield.css.js.map

Sorry, the diff of this file is not supported yet

lib/textfield.css.js.map

Sorry, the diff of this file is not supported yet

src/spectrum-textfield.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc