@spectrum-web-components/textfield 1.1.0 → 1.1.2

package/src/textfield.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    #textfield{--spectrum-textfield-input-line-height:var(--spectrum-textfield-height);text-overflow:ellipsis;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #textfield:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width));position:absolute;inset-block-end:calc(( var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width)))*-1);inset-inline-start:0}:host([quiet][focused]) #textfield:after{background-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)))}:host([quiet][invalid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)))}:host([quiet][valid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)))}:host([invalid]) #textfield .icon,:host([valid]) #textfield .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0}#textfield.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #textfield .icon{color:var(--highcontrast-textfield-icon-color-valid,var(--mod-textfield-icon-color-valid,var(--spectrum-textfield-icon-color-valid)));inset-block-start:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-block-end:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid))}:host([invalid]) #textfield .icon{block-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));inline-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));color:var(--highcontrast-textfield-icon-color-invalid,var(--mod-textfield-icon-color-invalid,var(--spectrum-textfield-icon-color-invalid)));inset-block-start:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-block-end:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid))}:host([disabled]) #textfield .icon,:host([readonly]) #textfield .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-valid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid))}:host([quiet][invalid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-invalid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid))}#textfield .spectrum-FieldLabel{grid-area:1/1/auto/span 1;margin-block-end:var(--mod-textfield-label-spacing-block,var(--spectrum-textfield-label-spacing-block))}:host([quiet]) .spectrum-FieldLabel{margin-block-end:var(--mod-textfield-label-spacing-block-quiet,var(--spectrum-textfield-label-spacing-block-quiet))}:host([disabled]) .spectrum-FieldLabel{color:var(--spectrum-textfield-text-color-disabled)}#textfield .spectrum-HelpText{grid-area:3/1/auto/span 2;margin-block-start:var(--mod-textfield-helptext-spacing-block,var(--spectrum-textfield-helptext-spacing-block))}.spectrum-Textfield-characterCount{inline-size:auto;font-size:var(--mod-textfield-character-count-font-size,var(--spectrum-textfield-character-count-font-size));font-family:var(--mod-textfield-character-count-font-family,var(--spectrum-textfield-character-count-font-family));font-weight:var(--mod-textfield-character-count-font-weight,var(--spectrum-textfield-character-count-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--mod-textfield-character-count-spacing-block,var(--spectrum-textfield-character-count-spacing-block));margin-inline-start:var(--mod-textfield-character-count-spacing-inline,var(--spectrum-textfield-character-count-spacing-inline));margin-inline-end:0;padding-inline-end:calc(var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius))/2);display:inline-flex}:host([quiet]) .spectrum-Textfield-characterCount{margin-block-end:var(--mod-textfield-character-count-spacing-block-quiet,var(--spectrum-textfield-character-count-spacing-block-quiet))}.input{line-height:var(--spectrum-textfield-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--mod-textfield-min-width,var(--spectrum-textfield-min-width));block-size:var(--mod-textfield-height,var(--spectrum-textfield-height));padding-block-start:calc(var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-block-end:calc(var(--mod-textfield-spacing-block-end,var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-inline:calc(var(--mod-textfield-spacing-inline,var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));vertical-align:top;background-color:var(--mod-textfield-background-color,var(--spectrum-textfield-background-color));border-color:var(--highcontrast-textfield-border-color,var(--mod-textfield-border-color,var(--spectrum-textfield-border-color)));border-style:solid;border-width:var(--mod-textfield-border-width,var(--spectrum-textfield-border-width));border-radius:var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius));transition:border-color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));text-overflow:ellipsis;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:textfield}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));transition:color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-textfield-border-color-focus,var(--mod-textfield-border-color-focus,var(--spectrum-textfield-border-color-focus)))}:host([focused]) .input,:host([focused]) .input::placeholder,.input:focus,.input:focus::placeholder{color:var(--highcontrast-textfield-text-color-focus,var(--mod-textfield-text-color-focus,var(--spectrum-textfield-text-color-focus)))}:host([focused]) .input{border-color:var(--highcontrast-textfield-border-color-keyboard-focus,var(--mod-textfield-border-color-keyboard-focus,var(--spectrum-textfield-border-color-keyboard-focus)));outline:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width))solid;outline-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)));outline-offset:var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))}:host([focused]) .input,:host([focused]) .input::placeholder{color:var(--highcontrast-textfield-text-color-keyboard-focus,var(--mod-textfield-text-color-keyboard-focus,var(--spectrum-textfield-text-color-keyboard-focus)))}:host([valid]) .input{color:var(--highcontrast-textfield-text-color-valid,var(--mod-textfield-text-color-valid,var(--spectrum-textfield-text-color-valid)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input{color:var(--highcontrast-textfield-text-color-invalid,var(--mod-textfield-text-color-invalid,var(--spectrum-textfield-text-color-invalid)));border-color:var(--highcontrast-textfield-border-color-invalid-default,var(--mod-textfield-border-color-invalid-default,var(--spectrum-textfield-border-color-invalid-default)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-textfield-border-color-invalid-focus,var(--mod-textfield-border-color-invalid-focus,var(--spectrum-textfield-border-color-invalid-focus)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-textfield-border-color-invalid-keyboard-focus,var(--mod-textfield-border-color-invalid-keyboard-focus,var(--spectrum-textfield-border-color-invalid-keyboard-focus)))}.input:disabled,:host([disabled]) #textfield .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #textfield .input,:host([disabled]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet]) .input{padding-block-start:var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start));padding-inline:var(--mod-textfield-spacing-inline-quiet,var(--spectrum-textfield-spacing-inline-quiet));background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--mod-textfield-spacing-block-quiet,var(--spectrum-textfield-spacing-block-quiet));overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}.input:read-only,:host([readonly]) #textfield .input{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:initial}@media (hover:hover){.input:hover,#textfield:hover .input{border-color:var(--highcontrast-textfield-border-color-hover,var(--mod-textfield-border-color-hover,var(--spectrum-textfield-border-color-hover)))}.input:hover,.input:hover::placeholder,#textfield:hover .input,#textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-hover,var(--mod-textfield-text-color-hover,var(--spectrum-textfield-text-color-hover)))}:host([focused]) .input:hover,.input:focus:hover{border-color:var(--highcontrast-textfield-border-color-focus-hover,var(--mod-textfield-border-color-focus-hover,var(--spectrum-textfield-border-color-focus-hover)))}:host([focused]) .input:hover,:host([focused]) .input:hover::placeholder,.input:focus:hover,.input:focus:hover::placeholder{color:var(--highcontrast-textfield-text-color-focus-hover,var(--mod-textfield-text-color-focus-hover,var(--spectrum-textfield-text-color-focus-hover)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-textfield-border-color-invalid-hover,var(--mod-textfield-border-color-invalid-hover,var(--spectrum-textfield-border-color-invalid-hover)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-textfield-border-color-invalid-focus-hover,var(--mod-textfield-border-color-invalid-focus-hover,var(--spectrum-textfield-border-color-invalid-focus-hover)))}:host([disabled]) #textfield:hover .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #textfield:hover .input,:host([disabled]) #textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([readonly]) #textfield:hover .input{border-color:#0000;outline:none}:host([readonly]) #textfield:hover .input,:host([readonly]) #textfield:hover .input::placeholder{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)))}}.spectrum-Textfield--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.spectrum-Textfield--sideLabel:after{grid-area:1/2/span 1/span 1}.spectrum-Textfield--sideLabel .spectrum-FieldLabel{grid-area:1/1/span 2/span 1;margin-inline-end:var(--mod-textfield-label-spacing-inline-side-label,var(--spectrum-textfield-label-spacing-inline-side-label))}.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--mod-textfield-character-count-spacing-block-side,var(--spectrum-textfield-character-count-spacing-block-side));margin-inline-start:var(--mod-textfield-character-count-spacing-inline-side,var(--spectrum-textfield-character-count-spacing-inline-side))}.spectrum-Textfield--sideLabel .spectrum-HelpText{grid-area:2/2/auto/span 1}.spectrum-Textfield--sideLabel .input,.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--spectrum-textfield-input-line-height:normal}:host([multiline]) .input{min-inline-size:var(--mod-text-area-min-inline-size,var(--spectrum-text-area-min-inline-size));min-block-size:var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size));resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .spectrum-Textfield--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--mod-text-area-min-block-size-quiet,var(--spectrum-text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors:active){:host{--highcontrast-textfield-border-color-hover:Highlight;--highcontrast-textfield-border-color-focus:Highlight;--highcontrast-textfield-border-color-keyboard-focus:CanvasText;--highcontrast-textfield-focus-indicator-color:Highlight;--highcontrast-textfield-border-color-invalid-default:Highlight;--highcontrast-textfield-border-color-invalid-hover:Highlight;--highcontrast-textfield-border-color-invalid-focus:Highlight;--highcontrast-textfield-border-color-invalid-keyboard-focus:Highlight;--highcontrast-textfield-text-color-valid:CanvasText;--highcontrast-textfield-text-color-invalid:CanvasText}#textfield .input{--highcontrast-textfield-text-color-default:CanvasText;--highcontrast-textfield-text-color-hover:CanvasText;--highcontrast-textfield-text-color-keyboard-focus:CanvasText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}#textfield .input::placeholder{--highcontrast-textfield-text-color-default:GrayText;--highcontrast-textfield-text-color-hover:GrayText;--highcontrast-textfield-text-color-keyboard-focus:GrayText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}}:host{--spectrum-textfield-border-color:var(--system-textfield-border-color);--spectrum-textfield-border-color-hover:var(--system-textfield-border-color-hover);--spectrum-textfield-border-color-focus:var(--system-textfield-border-color-focus);--spectrum-textfield-border-color-focus-hover:var(--system-textfield-border-color-focus-hover);--spectrum-textfield-border-color-keyboard-focus:var(--system-textfield-border-color-keyboard-focus);--spectrum-textfield-border-width:var(--system-textfield-border-width);--spectrum-texfield-animation-duration:var(--system-textfield-texfield-animation-duration);--spectrum-textfield-width:var(--system-textfield-width);--spectrum-textfield-min-width:var(--system-textfield-min-width);--spectrum-textfield-corner-radius:var(--system-textfield-corner-radius);--spectrum-textfield-spacing-inline-quiet:var(--system-textfield-spacing-inline-quiet);--spectrum-textfield-spacing-block-start:var(--system-textfield-spacing-block-start);--spectrum-textfield-spacing-block-end:var(--system-textfield-spacing-block-end);--spectrum-textfield-spacing-block-quiet:var(--system-textfield-spacing-block-quiet);--spectrum-textfield-label-spacing-block:var(--system-textfield-label-spacing-block);--spectrum-textfield-helptext-spacing-block:var(--system-textfield-helptext-spacing-block);--spectrum-textfield-icon-spacing-inline-end-quiet-invalid:var(--system-textfield-icon-spacing-inline-end-quiet-invalid);--spectrum-textfield-icon-spacing-inline-end-quiet-valid:var(--system-textfield-icon-spacing-inline-end-quiet-valid);--spectrum-textfield-font-family:var(--system-textfield-font-family);--spectrum-textfield-font-weight:var(--system-textfield-font-weight);--spectrum-textfield-character-count-font-family:var(--system-textfield-character-count-font-family);--spectrum-textfield-character-count-font-weight:var(--system-textfield-character-count-font-weight);--spectrum-textfield-character-count-spacing-inline:var(--system-textfield-character-count-spacing-inline);--spectrum-textfield-character-count-spacing-inline-side:var(--system-textfield-character-count-spacing-inline-side);--spectrum-textfield-focus-indicator-width:var(--system-textfield-focus-indicator-width);--spectrum-textfield-focus-indicator-gap:var(--system-textfield-focus-indicator-gap);--spectrum-textfield-background-color:var(--system-textfield-background-color);--spectrum-textfield-text-color-default:var(--system-textfield-text-color-default);--spectrum-textfield-text-color-hover:var(--system-textfield-text-color-hover);--spectrum-textfield-text-color-focus:var(--system-textfield-text-color-focus);--spectrum-textfield-text-color-focus-hover:var(--system-textfield-text-color-focus-hover);--spectrum-textfield-text-color-keyboard-focus:var(--system-textfield-text-color-keyboard-focus);--spectrum-textfield-text-color-readonly:var(--system-textfield-text-color-readonly);--spectrum-textfield-background-color-disabled:var(--system-textfield-background-color-disabled);--spectrum-textfield-border-color-disabled:var(--system-textfield-border-color-disabled);--spectrum-textfield-text-color-disabled:var(--system-textfield-text-color-disabled);--spectrum-textfield-border-color-invalid-default:var(--system-textfield-border-color-invalid-default);--spectrum-textfield-border-color-invalid-hover:var(--system-textfield-border-color-invalid-hover);--spectrum-textfield-border-color-invalid-focus:var(--system-textfield-border-color-invalid-focus);--spectrum-textfield-border-color-invalid-focus-hover:var(--system-textfield-border-color-invalid-focus-hover);--spectrum-textfield-border-color-invalid-keyboard-focus:var(--system-textfield-border-color-invalid-keyboard-focus);--spectrum-textfield-icon-color-invalid:var(--system-textfield-icon-color-invalid);--spectrum-textfield-text-color-invalid:var(--system-textfield-text-color-invalid);--spectrum-textfield-text-color-valid:var(--system-textfield-text-color-valid);--spectrum-textfield-icon-color-valid:var(--system-textfield-icon-color-valid);--spectrum-textfield-focus-indicator-color:var(--system-textfield-focus-indicator-color);--spectrum-text-area-min-inline-size:var(--system-textfield-text-area-min-inline-size);--spectrum-text-area-min-block-size:var(--system-textfield-text-area-min-block-size);--spectrum-textfield-height:var(--system-textfield-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-text-area-min-block-size-quiet)}:host([size=s]){--spectrum-textfield-height:var(--system-textfield-size-s-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-s-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-s-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-s-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-s-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-s-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-s-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-s-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-s-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-s-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-s-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-s-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-s-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-s-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-s-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-s-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-s-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-s-text-area-min-block-size-quiet)}:host{--spectrum-textfield-height:var(--system-textfield-size-m-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-m-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-m-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-m-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-m-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-m-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-m-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-m-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-m-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-m-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-m-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-m-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-m-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-m-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-m-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-m-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-m-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-m-text-area-min-block-size-quiet)}:host([size=l]){--spectrum-textfield-height:var(--system-textfield-size-l-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-l-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-l-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-l-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-l-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-l-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-l-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-l-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-l-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-l-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-l-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-l-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-l-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-l-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-l-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-l-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-l-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-l-text-area-min-block-size-quiet)}:host([size=xl]){--spectrum-textfield-height:var(--system-textfield-size-xl-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-xl-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-xl-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-xl-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-xl-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-xl-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-xl-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-xl-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-xl-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-xl-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-xl-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-xl-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-xl-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-xl-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-xl-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-xl-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-xl-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-xl-text-area-min-block-size-quiet)}:host{inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));flex-direction:column;display:inline-flex}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{--spectrum-textfield-input-line-height:normal;display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-animation-duration-100,.13s)ease-in-out,border-color var(--spectrum-animation-duration-100,.13s)ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));background-color:#0000}:host([disabled]) #textfield .icon.icon-search,:host([readonly]) #textfield .icon.icon-search{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([multiline][grows]:not([quiet])) #textfield:after{grid-area:unset;min-block-size:calc(var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size)) + var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))*2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){height:100%;resize:none;position:absolute;top:0;left:0;overflow:hidden}
+`;
+export default styles;
+//# sourceMappingURL=textfield.css.dev.js.map

package/src/textfield.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["textfield.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 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    #textfield{--spectrum-textfield-input-line-height:var(--spectrum-textfield-height);text-overflow:ellipsis;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #textfield:after{content:\"\";pointer-events:none;inline-size:100%;block-size:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width));position:absolute;inset-block-end:calc(( var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width)))*-1);inset-inline-start:0}:host([quiet][focused]) #textfield:after{background-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)))}:host([quiet][invalid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)))}:host([quiet][valid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)))}:host([invalid]) #textfield .icon,:host([valid]) #textfield .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0}#textfield.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #textfield .icon{color:var(--highcontrast-textfield-icon-color-valid,var(--mod-textfield-icon-color-valid,var(--spectrum-textfield-icon-color-valid)));inset-block-start:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-block-end:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid))}:host([invalid]) #textfield .icon{block-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));inline-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));color:var(--highcontrast-textfield-icon-color-invalid,var(--mod-textfield-icon-color-invalid,var(--spectrum-textfield-icon-color-invalid)));inset-block-start:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-block-end:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid))}:host([disabled]) #textfield .icon,:host([readonly]) #textfield .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-valid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid))}:host([quiet][invalid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-invalid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid))}#textfield .spectrum-FieldLabel{grid-area:1/1/auto/span 1;margin-block-end:var(--mod-textfield-label-spacing-block,var(--spectrum-textfield-label-spacing-block))}:host([quiet]) .spectrum-FieldLabel{margin-block-end:var(--mod-textfield-label-spacing-block-quiet,var(--spectrum-textfield-label-spacing-block-quiet))}:host([disabled]) .spectrum-FieldLabel{color:var(--spectrum-textfield-text-color-disabled)}#textfield .spectrum-HelpText{grid-area:3/1/auto/span 2;margin-block-start:var(--mod-textfield-helptext-spacing-block,var(--spectrum-textfield-helptext-spacing-block))}.spectrum-Textfield-characterCount{inline-size:auto;font-size:var(--mod-textfield-character-count-font-size,var(--spectrum-textfield-character-count-font-size));font-family:var(--mod-textfield-character-count-font-family,var(--spectrum-textfield-character-count-font-family));font-weight:var(--mod-textfield-character-count-font-weight,var(--spectrum-textfield-character-count-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--mod-textfield-character-count-spacing-block,var(--spectrum-textfield-character-count-spacing-block));margin-inline-start:var(--mod-textfield-character-count-spacing-inline,var(--spectrum-textfield-character-count-spacing-inline));margin-inline-end:0;padding-inline-end:calc(var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius))/2);display:inline-flex}:host([quiet]) .spectrum-Textfield-characterCount{margin-block-end:var(--mod-textfield-character-count-spacing-block-quiet,var(--spectrum-textfield-character-count-spacing-block-quiet))}.input{line-height:var(--spectrum-textfield-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--mod-textfield-min-width,var(--spectrum-textfield-min-width));block-size:var(--mod-textfield-height,var(--spectrum-textfield-height));padding-block-start:calc(var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-block-end:calc(var(--mod-textfield-spacing-block-end,var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-inline:calc(var(--mod-textfield-spacing-inline,var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));vertical-align:top;background-color:var(--mod-textfield-background-color,var(--spectrum-textfield-background-color));border-color:var(--highcontrast-textfield-border-color,var(--mod-textfield-border-color,var(--spectrum-textfield-border-color)));border-style:solid;border-width:var(--mod-textfield-border-width,var(--spectrum-textfield-border-width));border-radius:var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius));transition:border-color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));text-overflow:ellipsis;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:textfield}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));transition:color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-textfield-border-color-focus,var(--mod-textfield-border-color-focus,var(--spectrum-textfield-border-color-focus)))}:host([focused]) .input,:host([focused]) .input::placeholder,.input:focus,.input:focus::placeholder{color:var(--highcontrast-textfield-text-color-focus,var(--mod-textfield-text-color-focus,var(--spectrum-textfield-text-color-focus)))}:host([focused]) .input{border-color:var(--highcontrast-textfield-border-color-keyboard-focus,var(--mod-textfield-border-color-keyboard-focus,var(--spectrum-textfield-border-color-keyboard-focus)));outline:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width))solid;outline-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)));outline-offset:var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))}:host([focused]) .input,:host([focused]) .input::placeholder{color:var(--highcontrast-textfield-text-color-keyboard-focus,var(--mod-textfield-text-color-keyboard-focus,var(--spectrum-textfield-text-color-keyboard-focus)))}:host([valid]) .input{color:var(--highcontrast-textfield-text-color-valid,var(--mod-textfield-text-color-valid,var(--spectrum-textfield-text-color-valid)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input{color:var(--highcontrast-textfield-text-color-invalid,var(--mod-textfield-text-color-invalid,var(--spectrum-textfield-text-color-invalid)));border-color:var(--highcontrast-textfield-border-color-invalid-default,var(--mod-textfield-border-color-invalid-default,var(--spectrum-textfield-border-color-invalid-default)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-textfield-border-color-invalid-focus,var(--mod-textfield-border-color-invalid-focus,var(--spectrum-textfield-border-color-invalid-focus)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-textfield-border-color-invalid-keyboard-focus,var(--mod-textfield-border-color-invalid-keyboard-focus,var(--spectrum-textfield-border-color-invalid-keyboard-focus)))}.input:disabled,:host([disabled]) #textfield .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #textfield .input,:host([disabled]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet]) .input{padding-block-start:var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start));padding-inline:var(--mod-textfield-spacing-inline-quiet,var(--spectrum-textfield-spacing-inline-quiet));background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--mod-textfield-spacing-block-quiet,var(--spectrum-textfield-spacing-block-quiet));overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}.input:read-only,:host([readonly]) #textfield .input{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:initial}@media (hover:hover){.input:hover,#textfield:hover .input{border-color:var(--highcontrast-textfield-border-color-hover,var(--mod-textfield-border-color-hover,var(--spectrum-textfield-border-color-hover)))}.input:hover,.input:hover::placeholder,#textfield:hover .input,#textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-hover,var(--mod-textfield-text-color-hover,var(--spectrum-textfield-text-color-hover)))}:host([focused]) .input:hover,.input:focus:hover{border-color:var(--highcontrast-textfield-border-color-focus-hover,var(--mod-textfield-border-color-focus-hover,var(--spectrum-textfield-border-color-focus-hover)))}:host([focused]) .input:hover,:host([focused]) .input:hover::placeholder,.input:focus:hover,.input:focus:hover::placeholder{color:var(--highcontrast-textfield-text-color-focus-hover,var(--mod-textfield-text-color-focus-hover,var(--spectrum-textfield-text-color-focus-hover)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-textfield-border-color-invalid-hover,var(--mod-textfield-border-color-invalid-hover,var(--spectrum-textfield-border-color-invalid-hover)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-textfield-border-color-invalid-focus-hover,var(--mod-textfield-border-color-invalid-focus-hover,var(--spectrum-textfield-border-color-invalid-focus-hover)))}:host([disabled]) #textfield:hover .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #textfield:hover .input,:host([disabled]) #textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([readonly]) #textfield:hover .input{border-color:#0000;outline:none}:host([readonly]) #textfield:hover .input,:host([readonly]) #textfield:hover .input::placeholder{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)))}}.spectrum-Textfield--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.spectrum-Textfield--sideLabel:after{grid-area:1/2/span 1/span 1}.spectrum-Textfield--sideLabel .spectrum-FieldLabel{grid-area:1/1/span 2/span 1;margin-inline-end:var(--mod-textfield-label-spacing-inline-side-label,var(--spectrum-textfield-label-spacing-inline-side-label))}.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--mod-textfield-character-count-spacing-block-side,var(--spectrum-textfield-character-count-spacing-block-side));margin-inline-start:var(--mod-textfield-character-count-spacing-inline-side,var(--spectrum-textfield-character-count-spacing-inline-side))}.spectrum-Textfield--sideLabel .spectrum-HelpText{grid-area:2/2/auto/span 1}.spectrum-Textfield--sideLabel .input,.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--spectrum-textfield-input-line-height:normal}:host([multiline]) .input{min-inline-size:var(--mod-text-area-min-inline-size,var(--spectrum-text-area-min-inline-size));min-block-size:var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size));resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .spectrum-Textfield--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--mod-text-area-min-block-size-quiet,var(--spectrum-text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors:active){:host{--highcontrast-textfield-border-color-hover:Highlight;--highcontrast-textfield-border-color-focus:Highlight;--highcontrast-textfield-border-color-keyboard-focus:CanvasText;--highcontrast-textfield-focus-indicator-color:Highlight;--highcontrast-textfield-border-color-invalid-default:Highlight;--highcontrast-textfield-border-color-invalid-hover:Highlight;--highcontrast-textfield-border-color-invalid-focus:Highlight;--highcontrast-textfield-border-color-invalid-keyboard-focus:Highlight;--highcontrast-textfield-text-color-valid:CanvasText;--highcontrast-textfield-text-color-invalid:CanvasText}#textfield .input{--highcontrast-textfield-text-color-default:CanvasText;--highcontrast-textfield-text-color-hover:CanvasText;--highcontrast-textfield-text-color-keyboard-focus:CanvasText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}#textfield .input::placeholder{--highcontrast-textfield-text-color-default:GrayText;--highcontrast-textfield-text-color-hover:GrayText;--highcontrast-textfield-text-color-keyboard-focus:GrayText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}}:host{--spectrum-textfield-border-color:var(--system-textfield-border-color);--spectrum-textfield-border-color-hover:var(--system-textfield-border-color-hover);--spectrum-textfield-border-color-focus:var(--system-textfield-border-color-focus);--spectrum-textfield-border-color-focus-hover:var(--system-textfield-border-color-focus-hover);--spectrum-textfield-border-color-keyboard-focus:var(--system-textfield-border-color-keyboard-focus);--spectrum-textfield-border-width:var(--system-textfield-border-width);--spectrum-texfield-animation-duration:var(--system-textfield-texfield-animation-duration);--spectrum-textfield-width:var(--system-textfield-width);--spectrum-textfield-min-width:var(--system-textfield-min-width);--spectrum-textfield-corner-radius:var(--system-textfield-corner-radius);--spectrum-textfield-spacing-inline-quiet:var(--system-textfield-spacing-inline-quiet);--spectrum-textfield-spacing-block-start:var(--system-textfield-spacing-block-start);--spectrum-textfield-spacing-block-end:var(--system-textfield-spacing-block-end);--spectrum-textfield-spacing-block-quiet:var(--system-textfield-spacing-block-quiet);--spectrum-textfield-label-spacing-block:var(--system-textfield-label-spacing-block);--spectrum-textfield-helptext-spacing-block:var(--system-textfield-helptext-spacing-block);--spectrum-textfield-icon-spacing-inline-end-quiet-invalid:var(--system-textfield-icon-spacing-inline-end-quiet-invalid);--spectrum-textfield-icon-spacing-inline-end-quiet-valid:var(--system-textfield-icon-spacing-inline-end-quiet-valid);--spectrum-textfield-font-family:var(--system-textfield-font-family);--spectrum-textfield-font-weight:var(--system-textfield-font-weight);--spectrum-textfield-character-count-font-family:var(--system-textfield-character-count-font-family);--spectrum-textfield-character-count-font-weight:var(--system-textfield-character-count-font-weight);--spectrum-textfield-character-count-spacing-inline:var(--system-textfield-character-count-spacing-inline);--spectrum-textfield-character-count-spacing-inline-side:var(--system-textfield-character-count-spacing-inline-side);--spectrum-textfield-focus-indicator-width:var(--system-textfield-focus-indicator-width);--spectrum-textfield-focus-indicator-gap:var(--system-textfield-focus-indicator-gap);--spectrum-textfield-background-color:var(--system-textfield-background-color);--spectrum-textfield-text-color-default:var(--system-textfield-text-color-default);--spectrum-textfield-text-color-hover:var(--system-textfield-text-color-hover);--spectrum-textfield-text-color-focus:var(--system-textfield-text-color-focus);--spectrum-textfield-text-color-focus-hover:var(--system-textfield-text-color-focus-hover);--spectrum-textfield-text-color-keyboard-focus:var(--system-textfield-text-color-keyboard-focus);--spectrum-textfield-text-color-readonly:var(--system-textfield-text-color-readonly);--spectrum-textfield-background-color-disabled:var(--system-textfield-background-color-disabled);--spectrum-textfield-border-color-disabled:var(--system-textfield-border-color-disabled);--spectrum-textfield-text-color-disabled:var(--system-textfield-text-color-disabled);--spectrum-textfield-border-color-invalid-default:var(--system-textfield-border-color-invalid-default);--spectrum-textfield-border-color-invalid-hover:var(--system-textfield-border-color-invalid-hover);--spectrum-textfield-border-color-invalid-focus:var(--system-textfield-border-color-invalid-focus);--spectrum-textfield-border-color-invalid-focus-hover:var(--system-textfield-border-color-invalid-focus-hover);--spectrum-textfield-border-color-invalid-keyboard-focus:var(--system-textfield-border-color-invalid-keyboard-focus);--spectrum-textfield-icon-color-invalid:var(--system-textfield-icon-color-invalid);--spectrum-textfield-text-color-invalid:var(--system-textfield-text-color-invalid);--spectrum-textfield-text-color-valid:var(--system-textfield-text-color-valid);--spectrum-textfield-icon-color-valid:var(--system-textfield-icon-color-valid);--spectrum-textfield-focus-indicator-color:var(--system-textfield-focus-indicator-color);--spectrum-text-area-min-inline-size:var(--system-textfield-text-area-min-inline-size);--spectrum-text-area-min-block-size:var(--system-textfield-text-area-min-block-size);--spectrum-textfield-height:var(--system-textfield-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-text-area-min-block-size-quiet)}:host([size=s]){--spectrum-textfield-height:var(--system-textfield-size-s-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-s-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-s-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-s-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-s-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-s-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-s-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-s-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-s-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-s-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-s-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-s-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-s-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-s-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-s-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-s-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-s-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-s-text-area-min-block-size-quiet)}:host{--spectrum-textfield-height:var(--system-textfield-size-m-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-m-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-m-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-m-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-m-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-m-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-m-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-m-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-m-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-m-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-m-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-m-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-m-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-m-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-m-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-m-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-m-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-m-text-area-min-block-size-quiet)}:host([size=l]){--spectrum-textfield-height:var(--system-textfield-size-l-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-l-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-l-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-l-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-l-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-l-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-l-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-l-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-l-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-l-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-l-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-l-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-l-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-l-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-l-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-l-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-l-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-l-text-area-min-block-size-quiet)}:host([size=xl]){--spectrum-textfield-height:var(--system-textfield-size-xl-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-xl-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-xl-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-xl-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-xl-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-xl-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-xl-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-xl-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-xl-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-xl-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-xl-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-xl-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-xl-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-xl-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-xl-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-xl-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-xl-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-xl-text-area-min-block-size-quiet)}:host{inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));flex-direction:column;display:inline-flex}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{--spectrum-textfield-input-line-height:normal;display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-animation-duration-100,.13s)ease-in-out,border-color var(--spectrum-animation-duration-100,.13s)ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows=\"1\"]) .input{min-block-size:auto}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));background-color:#0000}:host([disabled]) #textfield .icon.icon-search,:host([readonly]) #textfield .icon.icon-search{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([multiline][grows]:not([quiet])) #textfield:after{grid-area:unset;min-block-size:calc(var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size)) + var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))*2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){height:100%;resize:none;position:absolute;top:0;left:0;overflow:hidden}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
+  "names": []
+}

package/src/textfield.css.js

@@ -0,0 +1,4 @@
+"use strict";import{css as e}from"@spectrum-web-components/base";const t=e`
+    #textfield{--spectrum-textfield-input-line-height:var(--spectrum-textfield-height);text-overflow:ellipsis;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #textfield:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width));position:absolute;inset-block-end:calc(( var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width)))*-1);inset-inline-start:0}:host([quiet][focused]) #textfield:after{background-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)))}:host([quiet][invalid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)))}:host([quiet][valid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)))}:host([invalid]) #textfield .icon,:host([valid]) #textfield .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0}#textfield.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #textfield .icon{color:var(--highcontrast-textfield-icon-color-valid,var(--mod-textfield-icon-color-valid,var(--spectrum-textfield-icon-color-valid)));inset-block-start:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-block-end:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid))}:host([invalid]) #textfield .icon{block-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));inline-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));color:var(--highcontrast-textfield-icon-color-invalid,var(--mod-textfield-icon-color-invalid,var(--spectrum-textfield-icon-color-invalid)));inset-block-start:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-block-end:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid))}:host([disabled]) #textfield .icon,:host([readonly]) #textfield .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-valid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid))}:host([quiet][invalid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-invalid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid))}#textfield .spectrum-FieldLabel{grid-area:1/1/auto/span 1;margin-block-end:var(--mod-textfield-label-spacing-block,var(--spectrum-textfield-label-spacing-block))}:host([quiet]) .spectrum-FieldLabel{margin-block-end:var(--mod-textfield-label-spacing-block-quiet,var(--spectrum-textfield-label-spacing-block-quiet))}:host([disabled]) .spectrum-FieldLabel{color:var(--spectrum-textfield-text-color-disabled)}#textfield .spectrum-HelpText{grid-area:3/1/auto/span 2;margin-block-start:var(--mod-textfield-helptext-spacing-block,var(--spectrum-textfield-helptext-spacing-block))}.spectrum-Textfield-characterCount{inline-size:auto;font-size:var(--mod-textfield-character-count-font-size,var(--spectrum-textfield-character-count-font-size));font-family:var(--mod-textfield-character-count-font-family,var(--spectrum-textfield-character-count-font-family));font-weight:var(--mod-textfield-character-count-font-weight,var(--spectrum-textfield-character-count-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--mod-textfield-character-count-spacing-block,var(--spectrum-textfield-character-count-spacing-block));margin-inline-start:var(--mod-textfield-character-count-spacing-inline,var(--spectrum-textfield-character-count-spacing-inline));margin-inline-end:0;padding-inline-end:calc(var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius))/2);display:inline-flex}:host([quiet]) .spectrum-Textfield-characterCount{margin-block-end:var(--mod-textfield-character-count-spacing-block-quiet,var(--spectrum-textfield-character-count-spacing-block-quiet))}.input{line-height:var(--spectrum-textfield-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--mod-textfield-min-width,var(--spectrum-textfield-min-width));block-size:var(--mod-textfield-height,var(--spectrum-textfield-height));padding-block-start:calc(var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-block-end:calc(var(--mod-textfield-spacing-block-end,var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-inline:calc(var(--mod-textfield-spacing-inline,var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));vertical-align:top;background-color:var(--mod-textfield-background-color,var(--spectrum-textfield-background-color));border-color:var(--highcontrast-textfield-border-color,var(--mod-textfield-border-color,var(--spectrum-textfield-border-color)));border-style:solid;border-width:var(--mod-textfield-border-width,var(--spectrum-textfield-border-width));border-radius:var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius));transition:border-color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));text-overflow:ellipsis;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:textfield}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));transition:color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-textfield-border-color-focus,var(--mod-textfield-border-color-focus,var(--spectrum-textfield-border-color-focus)))}:host([focused]) .input,:host([focused]) .input::placeholder,.input:focus,.input:focus::placeholder{color:var(--highcontrast-textfield-text-color-focus,var(--mod-textfield-text-color-focus,var(--spectrum-textfield-text-color-focus)))}:host([focused]) .input{border-color:var(--highcontrast-textfield-border-color-keyboard-focus,var(--mod-textfield-border-color-keyboard-focus,var(--spectrum-textfield-border-color-keyboard-focus)));outline:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width))solid;outline-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)));outline-offset:var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))}:host([focused]) .input,:host([focused]) .input::placeholder{color:var(--highcontrast-textfield-text-color-keyboard-focus,var(--mod-textfield-text-color-keyboard-focus,var(--spectrum-textfield-text-color-keyboard-focus)))}:host([valid]) .input{color:var(--highcontrast-textfield-text-color-valid,var(--mod-textfield-text-color-valid,var(--spectrum-textfield-text-color-valid)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input{color:var(--highcontrast-textfield-text-color-invalid,var(--mod-textfield-text-color-invalid,var(--spectrum-textfield-text-color-invalid)));border-color:var(--highcontrast-textfield-border-color-invalid-default,var(--mod-textfield-border-color-invalid-default,var(--spectrum-textfield-border-color-invalid-default)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-textfield-border-color-invalid-focus,var(--mod-textfield-border-color-invalid-focus,var(--spectrum-textfield-border-color-invalid-focus)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-textfield-border-color-invalid-keyboard-focus,var(--mod-textfield-border-color-invalid-keyboard-focus,var(--spectrum-textfield-border-color-invalid-keyboard-focus)))}.input:disabled,:host([disabled]) #textfield .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #textfield .input,:host([disabled]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet]) .input{padding-block-start:var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start));padding-inline:var(--mod-textfield-spacing-inline-quiet,var(--spectrum-textfield-spacing-inline-quiet));background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--mod-textfield-spacing-block-quiet,var(--spectrum-textfield-spacing-block-quiet));overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}.input:read-only,:host([readonly]) #textfield .input{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:initial}@media (hover:hover){.input:hover,#textfield:hover .input{border-color:var(--highcontrast-textfield-border-color-hover,var(--mod-textfield-border-color-hover,var(--spectrum-textfield-border-color-hover)))}.input:hover,.input:hover::placeholder,#textfield:hover .input,#textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-hover,var(--mod-textfield-text-color-hover,var(--spectrum-textfield-text-color-hover)))}:host([focused]) .input:hover,.input:focus:hover{border-color:var(--highcontrast-textfield-border-color-focus-hover,var(--mod-textfield-border-color-focus-hover,var(--spectrum-textfield-border-color-focus-hover)))}:host([focused]) .input:hover,:host([focused]) .input:hover::placeholder,.input:focus:hover,.input:focus:hover::placeholder{color:var(--highcontrast-textfield-text-color-focus-hover,var(--mod-textfield-text-color-focus-hover,var(--spectrum-textfield-text-color-focus-hover)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-textfield-border-color-invalid-hover,var(--mod-textfield-border-color-invalid-hover,var(--spectrum-textfield-border-color-invalid-hover)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-textfield-border-color-invalid-focus-hover,var(--mod-textfield-border-color-invalid-focus-hover,var(--spectrum-textfield-border-color-invalid-focus-hover)))}:host([disabled]) #textfield:hover .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #textfield:hover .input,:host([disabled]) #textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([readonly]) #textfield:hover .input{border-color:#0000;outline:none}:host([readonly]) #textfield:hover .input,:host([readonly]) #textfield:hover .input::placeholder{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)))}}.spectrum-Textfield--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.spectrum-Textfield--sideLabel:after{grid-area:1/2/span 1/span 1}.spectrum-Textfield--sideLabel .spectrum-FieldLabel{grid-area:1/1/span 2/span 1;margin-inline-end:var(--mod-textfield-label-spacing-inline-side-label,var(--spectrum-textfield-label-spacing-inline-side-label))}.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--mod-textfield-character-count-spacing-block-side,var(--spectrum-textfield-character-count-spacing-block-side));margin-inline-start:var(--mod-textfield-character-count-spacing-inline-side,var(--spectrum-textfield-character-count-spacing-inline-side))}.spectrum-Textfield--sideLabel .spectrum-HelpText{grid-area:2/2/auto/span 1}.spectrum-Textfield--sideLabel .input,.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--spectrum-textfield-input-line-height:normal}:host([multiline]) .input{min-inline-size:var(--mod-text-area-min-inline-size,var(--spectrum-text-area-min-inline-size));min-block-size:var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size));resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .spectrum-Textfield--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--mod-text-area-min-block-size-quiet,var(--spectrum-text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors:active){:host{--highcontrast-textfield-border-color-hover:Highlight;--highcontrast-textfield-border-color-focus:Highlight;--highcontrast-textfield-border-color-keyboard-focus:CanvasText;--highcontrast-textfield-focus-indicator-color:Highlight;--highcontrast-textfield-border-color-invalid-default:Highlight;--highcontrast-textfield-border-color-invalid-hover:Highlight;--highcontrast-textfield-border-color-invalid-focus:Highlight;--highcontrast-textfield-border-color-invalid-keyboard-focus:Highlight;--highcontrast-textfield-text-color-valid:CanvasText;--highcontrast-textfield-text-color-invalid:CanvasText}#textfield .input{--highcontrast-textfield-text-color-default:CanvasText;--highcontrast-textfield-text-color-hover:CanvasText;--highcontrast-textfield-text-color-keyboard-focus:CanvasText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}#textfield .input::placeholder{--highcontrast-textfield-text-color-default:GrayText;--highcontrast-textfield-text-color-hover:GrayText;--highcontrast-textfield-text-color-keyboard-focus:GrayText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}}:host{--spectrum-textfield-border-color:var(--system-textfield-border-color);--spectrum-textfield-border-color-hover:var(--system-textfield-border-color-hover);--spectrum-textfield-border-color-focus:var(--system-textfield-border-color-focus);--spectrum-textfield-border-color-focus-hover:var(--system-textfield-border-color-focus-hover);--spectrum-textfield-border-color-keyboard-focus:var(--system-textfield-border-color-keyboard-focus);--spectrum-textfield-border-width:var(--system-textfield-border-width);--spectrum-texfield-animation-duration:var(--system-textfield-texfield-animation-duration);--spectrum-textfield-width:var(--system-textfield-width);--spectrum-textfield-min-width:var(--system-textfield-min-width);--spectrum-textfield-corner-radius:var(--system-textfield-corner-radius);--spectrum-textfield-spacing-inline-quiet:var(--system-textfield-spacing-inline-quiet);--spectrum-textfield-spacing-block-start:var(--system-textfield-spacing-block-start);--spectrum-textfield-spacing-block-end:var(--system-textfield-spacing-block-end);--spectrum-textfield-spacing-block-quiet:var(--system-textfield-spacing-block-quiet);--spectrum-textfield-label-spacing-block:var(--system-textfield-label-spacing-block);--spectrum-textfield-helptext-spacing-block:var(--system-textfield-helptext-spacing-block);--spectrum-textfield-icon-spacing-inline-end-quiet-invalid:var(--system-textfield-icon-spacing-inline-end-quiet-invalid);--spectrum-textfield-icon-spacing-inline-end-quiet-valid:var(--system-textfield-icon-spacing-inline-end-quiet-valid);--spectrum-textfield-font-family:var(--system-textfield-font-family);--spectrum-textfield-font-weight:var(--system-textfield-font-weight);--spectrum-textfield-character-count-font-family:var(--system-textfield-character-count-font-family);--spectrum-textfield-character-count-font-weight:var(--system-textfield-character-count-font-weight);--spectrum-textfield-character-count-spacing-inline:var(--system-textfield-character-count-spacing-inline);--spectrum-textfield-character-count-spacing-inline-side:var(--system-textfield-character-count-spacing-inline-side);--spectrum-textfield-focus-indicator-width:var(--system-textfield-focus-indicator-width);--spectrum-textfield-focus-indicator-gap:var(--system-textfield-focus-indicator-gap);--spectrum-textfield-background-color:var(--system-textfield-background-color);--spectrum-textfield-text-color-default:var(--system-textfield-text-color-default);--spectrum-textfield-text-color-hover:var(--system-textfield-text-color-hover);--spectrum-textfield-text-color-focus:var(--system-textfield-text-color-focus);--spectrum-textfield-text-color-focus-hover:var(--system-textfield-text-color-focus-hover);--spectrum-textfield-text-color-keyboard-focus:var(--system-textfield-text-color-keyboard-focus);--spectrum-textfield-text-color-readonly:var(--system-textfield-text-color-readonly);--spectrum-textfield-background-color-disabled:var(--system-textfield-background-color-disabled);--spectrum-textfield-border-color-disabled:var(--system-textfield-border-color-disabled);--spectrum-textfield-text-color-disabled:var(--system-textfield-text-color-disabled);--spectrum-textfield-border-color-invalid-default:var(--system-textfield-border-color-invalid-default);--spectrum-textfield-border-color-invalid-hover:var(--system-textfield-border-color-invalid-hover);--spectrum-textfield-border-color-invalid-focus:var(--system-textfield-border-color-invalid-focus);--spectrum-textfield-border-color-invalid-focus-hover:var(--system-textfield-border-color-invalid-focus-hover);--spectrum-textfield-border-color-invalid-keyboard-focus:var(--system-textfield-border-color-invalid-keyboard-focus);--spectrum-textfield-icon-color-invalid:var(--system-textfield-icon-color-invalid);--spectrum-textfield-text-color-invalid:var(--system-textfield-text-color-invalid);--spectrum-textfield-text-color-valid:var(--system-textfield-text-color-valid);--spectrum-textfield-icon-color-valid:var(--system-textfield-icon-color-valid);--spectrum-textfield-focus-indicator-color:var(--system-textfield-focus-indicator-color);--spectrum-text-area-min-inline-size:var(--system-textfield-text-area-min-inline-size);--spectrum-text-area-min-block-size:var(--system-textfield-text-area-min-block-size);--spectrum-textfield-height:var(--system-textfield-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-text-area-min-block-size-quiet)}:host([size=s]){--spectrum-textfield-height:var(--system-textfield-size-s-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-s-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-s-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-s-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-s-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-s-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-s-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-s-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-s-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-s-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-s-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-s-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-s-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-s-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-s-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-s-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-s-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-s-text-area-min-block-size-quiet)}:host{--spectrum-textfield-height:var(--system-textfield-size-m-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-m-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-m-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-m-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-m-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-m-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-m-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-m-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-m-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-m-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-m-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-m-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-m-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-m-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-m-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-m-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-m-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-m-text-area-min-block-size-quiet)}:host([size=l]){--spectrum-textfield-height:var(--system-textfield-size-l-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-l-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-l-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-l-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-l-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-l-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-l-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-l-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-l-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-l-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-l-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-l-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-l-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-l-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-l-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-l-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-l-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-l-text-area-min-block-size-quiet)}:host([size=xl]){--spectrum-textfield-height:var(--system-textfield-size-xl-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-xl-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-xl-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-xl-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-xl-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-xl-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-xl-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-xl-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-xl-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-xl-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-xl-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-xl-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-xl-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-xl-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-xl-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-xl-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-xl-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-xl-text-area-min-block-size-quiet)}:host{inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));flex-direction:column;display:inline-flex}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{--spectrum-textfield-input-line-height:normal;display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-animation-duration-100,.13s)ease-in-out,border-color var(--spectrum-animation-duration-100,.13s)ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));background-color:#0000}:host([disabled]) #textfield .icon.icon-search,:host([readonly]) #textfield .icon.icon-search{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([multiline][grows]:not([quiet])) #textfield:after{grid-area:unset;min-block-size:calc(var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size)) + var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))*2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){height:100%;resize:none;position:absolute;top:0;left:0;overflow:hidden}
+`;export default t;
+//# sourceMappingURL=textfield.css.js.map

package/src/textfield.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["textfield.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 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    #textfield{--spectrum-textfield-input-line-height:var(--spectrum-textfield-height);text-overflow:ellipsis;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #textfield:after{content:\"\";pointer-events:none;inline-size:100%;block-size:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width));position:absolute;inset-block-end:calc(( var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width)))*-1);inset-inline-start:0}:host([quiet][focused]) #textfield:after{background-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)))}:host([quiet][invalid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)))}:host([quiet][valid]) #textfield .input{padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)))}:host([invalid]) #textfield .icon,:host([valid]) #textfield .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0}#textfield.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #textfield .icon{color:var(--highcontrast-textfield-icon-color-valid,var(--mod-textfield-icon-color-valid,var(--spectrum-textfield-icon-color-valid)));inset-block-start:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-block-end:var(--mod-textfield-icon-spacing-block-valid,var(--spectrum-textfield-icon-spacing-block-valid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid))}:host([invalid]) #textfield .icon{block-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));inline-size:var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid));color:var(--highcontrast-textfield-icon-color-invalid,var(--mod-textfield-icon-color-invalid,var(--spectrum-textfield-icon-color-invalid)));inset-block-start:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-block-end:var(--mod-textfield-icon-spacing-block-invalid,var(--spectrum-textfield-icon-spacing-block-invalid));inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid))}:host([disabled]) #textfield .icon,:host([readonly]) #textfield .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-valid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid))}:host([quiet][invalid]) .icon{inset-inline-end:var(--mod-textfield-icon-spacing-inline-end-quiet-invalid,var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid))}#textfield .spectrum-FieldLabel{grid-area:1/1/auto/span 1;margin-block-end:var(--mod-textfield-label-spacing-block,var(--spectrum-textfield-label-spacing-block))}:host([quiet]) .spectrum-FieldLabel{margin-block-end:var(--mod-textfield-label-spacing-block-quiet,var(--spectrum-textfield-label-spacing-block-quiet))}:host([disabled]) .spectrum-FieldLabel{color:var(--spectrum-textfield-text-color-disabled)}#textfield .spectrum-HelpText{grid-area:3/1/auto/span 2;margin-block-start:var(--mod-textfield-helptext-spacing-block,var(--spectrum-textfield-helptext-spacing-block))}.spectrum-Textfield-characterCount{inline-size:auto;font-size:var(--mod-textfield-character-count-font-size,var(--spectrum-textfield-character-count-font-size));font-family:var(--mod-textfield-character-count-font-family,var(--spectrum-textfield-character-count-font-family));font-weight:var(--mod-textfield-character-count-font-weight,var(--spectrum-textfield-character-count-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--mod-textfield-character-count-spacing-block,var(--spectrum-textfield-character-count-spacing-block));margin-inline-start:var(--mod-textfield-character-count-spacing-inline,var(--spectrum-textfield-character-count-spacing-inline));margin-inline-end:0;padding-inline-end:calc(var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius))/2);display:inline-flex}:host([quiet]) .spectrum-Textfield-characterCount{margin-block-end:var(--mod-textfield-character-count-spacing-block-quiet,var(--spectrum-textfield-character-count-spacing-block-quiet))}.input{line-height:var(--spectrum-textfield-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--mod-textfield-min-width,var(--spectrum-textfield-min-width));block-size:var(--mod-textfield-height,var(--spectrum-textfield-height));padding-block-start:calc(var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-block-end:calc(var(--mod-textfield-spacing-block-end,var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));padding-inline:calc(var(--mod-textfield-spacing-inline,var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)));vertical-align:top;background-color:var(--mod-textfield-background-color,var(--spectrum-textfield-background-color));border-color:var(--highcontrast-textfield-border-color,var(--mod-textfield-border-color,var(--spectrum-textfield-border-color)));border-style:solid;border-width:var(--mod-textfield-border-width,var(--spectrum-textfield-border-width));border-radius:var(--mod-textfield-corner-radius,var(--spectrum-textfield-corner-radius));transition:border-color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));text-overflow:ellipsis;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:textfield}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--mod-textfield-placeholder-font-size,var(--spectrum-textfield-placeholder-font-size));font-family:var(--mod-textfield-font-family,var(--spectrum-textfield-font-family));font-weight:var(--mod-textfield-font-weight,var(--spectrum-textfield-font-weight));color:var(--highcontrast-textfield-text-color-default,var(--mod-textfield-text-color-default,var(--spectrum-textfield-text-color-default)));transition:color var(--mod-texfield-animation-duration,var(--spectrum-texfield-animation-duration))ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-textfield-border-color-focus,var(--mod-textfield-border-color-focus,var(--spectrum-textfield-border-color-focus)))}:host([focused]) .input,:host([focused]) .input::placeholder,.input:focus,.input:focus::placeholder{color:var(--highcontrast-textfield-text-color-focus,var(--mod-textfield-text-color-focus,var(--spectrum-textfield-text-color-focus)))}:host([focused]) .input{border-color:var(--highcontrast-textfield-border-color-keyboard-focus,var(--mod-textfield-border-color-keyboard-focus,var(--spectrum-textfield-border-color-keyboard-focus)));outline:var(--mod-textfield-focus-indicator-width,var(--spectrum-textfield-focus-indicator-width))solid;outline-color:var(--highcontrast-textfield-focus-indicator-color,var(--mod-textfield-focus-indicator-color,var(--spectrum-textfield-focus-indicator-color)));outline-offset:var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))}:host([focused]) .input,:host([focused]) .input::placeholder{color:var(--highcontrast-textfield-text-color-keyboard-focus,var(--mod-textfield-text-color-keyboard-focus,var(--spectrum-textfield-text-color-keyboard-focus)))}:host([valid]) .input{color:var(--highcontrast-textfield-text-color-valid,var(--mod-textfield-text-color-valid,var(--spectrum-textfield-text-color-valid)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-valid,var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid,var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid,var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input{color:var(--highcontrast-textfield-text-color-invalid,var(--mod-textfield-text-color-invalid,var(--spectrum-textfield-text-color-invalid)));border-color:var(--highcontrast-textfield-border-color-invalid-default,var(--mod-textfield-border-color-invalid-default,var(--spectrum-textfield-border-color-invalid-default)));padding-inline-end:calc(var(--mod-textfield-icon-spacing-inline-start-invalid,var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid,var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid,var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width,var(--spectrum-textfield-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-textfield-border-color-invalid-focus,var(--mod-textfield-border-color-invalid-focus,var(--spectrum-textfield-border-color-invalid-focus)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-textfield-border-color-invalid-keyboard-focus,var(--mod-textfield-border-color-invalid-keyboard-focus,var(--spectrum-textfield-border-color-invalid-keyboard-focus)))}.input:disabled,:host([disabled]) #textfield .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #textfield .input,:host([disabled]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet]) .input{padding-block-start:var(--mod-textfield-spacing-block-start,var(--spectrum-textfield-spacing-block-start));padding-inline:var(--mod-textfield-spacing-inline-quiet,var(--spectrum-textfield-spacing-inline-quiet));background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--mod-textfield-spacing-block-quiet,var(--spectrum-textfield-spacing-block-quiet));overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}.input:read-only,:host([readonly]) #textfield .input{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #textfield .input::placeholder{color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)));background-color:initial}@media (hover:hover){.input:hover,#textfield:hover .input{border-color:var(--highcontrast-textfield-border-color-hover,var(--mod-textfield-border-color-hover,var(--spectrum-textfield-border-color-hover)))}.input:hover,.input:hover::placeholder,#textfield:hover .input,#textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-hover,var(--mod-textfield-text-color-hover,var(--spectrum-textfield-text-color-hover)))}:host([focused]) .input:hover,.input:focus:hover{border-color:var(--highcontrast-textfield-border-color-focus-hover,var(--mod-textfield-border-color-focus-hover,var(--spectrum-textfield-border-color-focus-hover)))}:host([focused]) .input:hover,:host([focused]) .input:hover::placeholder,.input:focus:hover,.input:focus:hover::placeholder{color:var(--highcontrast-textfield-text-color-focus-hover,var(--mod-textfield-text-color-focus-hover,var(--spectrum-textfield-text-color-focus-hover)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-textfield-border-color-invalid-hover,var(--mod-textfield-border-color-invalid-hover,var(--spectrum-textfield-border-color-invalid-hover)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-textfield-border-color-invalid-focus-hover,var(--mod-textfield-border-color-invalid-focus-hover,var(--spectrum-textfield-border-color-invalid-focus-hover)))}:host([disabled]) #textfield:hover .input{background-color:var(--mod-textfield-background-color-disabled,var(--spectrum-textfield-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #textfield:hover .input,:host([disabled]) #textfield:hover .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([readonly]) #textfield:hover .input{border-color:#0000;outline:none}:host([readonly]) #textfield:hover .input,:host([readonly]) #textfield:hover .input::placeholder{background-color:initial;color:var(--highcontrast-textfield-text-color-readonly,var(--mod-textfield-text-color-readonly,var(--spectrum-textfield-text-color-readonly)))}}.spectrum-Textfield--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.spectrum-Textfield--sideLabel:after{grid-area:1/2/span 1/span 1}.spectrum-Textfield--sideLabel .spectrum-FieldLabel{grid-area:1/1/span 2/span 1;margin-inline-end:var(--mod-textfield-label-spacing-inline-side-label,var(--spectrum-textfield-label-spacing-inline-side-label))}.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--mod-textfield-character-count-spacing-block-side,var(--spectrum-textfield-character-count-spacing-block-side));margin-inline-start:var(--mod-textfield-character-count-spacing-inline-side,var(--spectrum-textfield-character-count-spacing-inline-side))}.spectrum-Textfield--sideLabel .spectrum-HelpText{grid-area:2/2/auto/span 1}.spectrum-Textfield--sideLabel .input,.spectrum-Textfield--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--spectrum-textfield-input-line-height:normal}:host([multiline]) .input{min-inline-size:var(--mod-text-area-min-inline-size,var(--spectrum-text-area-min-inline-size));min-block-size:var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size));resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .spectrum-Textfield--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--mod-text-area-min-block-size-quiet,var(--spectrum-text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors:active){:host{--highcontrast-textfield-border-color-hover:Highlight;--highcontrast-textfield-border-color-focus:Highlight;--highcontrast-textfield-border-color-keyboard-focus:CanvasText;--highcontrast-textfield-focus-indicator-color:Highlight;--highcontrast-textfield-border-color-invalid-default:Highlight;--highcontrast-textfield-border-color-invalid-hover:Highlight;--highcontrast-textfield-border-color-invalid-focus:Highlight;--highcontrast-textfield-border-color-invalid-keyboard-focus:Highlight;--highcontrast-textfield-text-color-valid:CanvasText;--highcontrast-textfield-text-color-invalid:CanvasText}#textfield .input{--highcontrast-textfield-text-color-default:CanvasText;--highcontrast-textfield-text-color-hover:CanvasText;--highcontrast-textfield-text-color-keyboard-focus:CanvasText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}#textfield .input::placeholder{--highcontrast-textfield-text-color-default:GrayText;--highcontrast-textfield-text-color-hover:GrayText;--highcontrast-textfield-text-color-keyboard-focus:GrayText;--highcontrast-textfield-text-color-disabled:GrayText;--highcontrast-textfield-text-color-readonly:CanvasText}}:host{--spectrum-textfield-border-color:var(--system-textfield-border-color);--spectrum-textfield-border-color-hover:var(--system-textfield-border-color-hover);--spectrum-textfield-border-color-focus:var(--system-textfield-border-color-focus);--spectrum-textfield-border-color-focus-hover:var(--system-textfield-border-color-focus-hover);--spectrum-textfield-border-color-keyboard-focus:var(--system-textfield-border-color-keyboard-focus);--spectrum-textfield-border-width:var(--system-textfield-border-width);--spectrum-texfield-animation-duration:var(--system-textfield-texfield-animation-duration);--spectrum-textfield-width:var(--system-textfield-width);--spectrum-textfield-min-width:var(--system-textfield-min-width);--spectrum-textfield-corner-radius:var(--system-textfield-corner-radius);--spectrum-textfield-spacing-inline-quiet:var(--system-textfield-spacing-inline-quiet);--spectrum-textfield-spacing-block-start:var(--system-textfield-spacing-block-start);--spectrum-textfield-spacing-block-end:var(--system-textfield-spacing-block-end);--spectrum-textfield-spacing-block-quiet:var(--system-textfield-spacing-block-quiet);--spectrum-textfield-label-spacing-block:var(--system-textfield-label-spacing-block);--spectrum-textfield-helptext-spacing-block:var(--system-textfield-helptext-spacing-block);--spectrum-textfield-icon-spacing-inline-end-quiet-invalid:var(--system-textfield-icon-spacing-inline-end-quiet-invalid);--spectrum-textfield-icon-spacing-inline-end-quiet-valid:var(--system-textfield-icon-spacing-inline-end-quiet-valid);--spectrum-textfield-font-family:var(--system-textfield-font-family);--spectrum-textfield-font-weight:var(--system-textfield-font-weight);--spectrum-textfield-character-count-font-family:var(--system-textfield-character-count-font-family);--spectrum-textfield-character-count-font-weight:var(--system-textfield-character-count-font-weight);--spectrum-textfield-character-count-spacing-inline:var(--system-textfield-character-count-spacing-inline);--spectrum-textfield-character-count-spacing-inline-side:var(--system-textfield-character-count-spacing-inline-side);--spectrum-textfield-focus-indicator-width:var(--system-textfield-focus-indicator-width);--spectrum-textfield-focus-indicator-gap:var(--system-textfield-focus-indicator-gap);--spectrum-textfield-background-color:var(--system-textfield-background-color);--spectrum-textfield-text-color-default:var(--system-textfield-text-color-default);--spectrum-textfield-text-color-hover:var(--system-textfield-text-color-hover);--spectrum-textfield-text-color-focus:var(--system-textfield-text-color-focus);--spectrum-textfield-text-color-focus-hover:var(--system-textfield-text-color-focus-hover);--spectrum-textfield-text-color-keyboard-focus:var(--system-textfield-text-color-keyboard-focus);--spectrum-textfield-text-color-readonly:var(--system-textfield-text-color-readonly);--spectrum-textfield-background-color-disabled:var(--system-textfield-background-color-disabled);--spectrum-textfield-border-color-disabled:var(--system-textfield-border-color-disabled);--spectrum-textfield-text-color-disabled:var(--system-textfield-text-color-disabled);--spectrum-textfield-border-color-invalid-default:var(--system-textfield-border-color-invalid-default);--spectrum-textfield-border-color-invalid-hover:var(--system-textfield-border-color-invalid-hover);--spectrum-textfield-border-color-invalid-focus:var(--system-textfield-border-color-invalid-focus);--spectrum-textfield-border-color-invalid-focus-hover:var(--system-textfield-border-color-invalid-focus-hover);--spectrum-textfield-border-color-invalid-keyboard-focus:var(--system-textfield-border-color-invalid-keyboard-focus);--spectrum-textfield-icon-color-invalid:var(--system-textfield-icon-color-invalid);--spectrum-textfield-text-color-invalid:var(--system-textfield-text-color-invalid);--spectrum-textfield-text-color-valid:var(--system-textfield-text-color-valid);--spectrum-textfield-icon-color-valid:var(--system-textfield-icon-color-valid);--spectrum-textfield-focus-indicator-color:var(--system-textfield-focus-indicator-color);--spectrum-text-area-min-inline-size:var(--system-textfield-text-area-min-inline-size);--spectrum-text-area-min-block-size:var(--system-textfield-text-area-min-block-size);--spectrum-textfield-height:var(--system-textfield-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-text-area-min-block-size-quiet)}:host([size=s]){--spectrum-textfield-height:var(--system-textfield-size-s-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-s-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-s-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-s-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-s-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-s-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-s-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-s-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-s-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-s-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-s-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-s-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-s-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-s-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-s-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-s-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-s-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-s-text-area-min-block-size-quiet)}:host{--spectrum-textfield-height:var(--system-textfield-size-m-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-m-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-m-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-m-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-m-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-m-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-m-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-m-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-m-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-m-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-m-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-m-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-m-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-m-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-m-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-m-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-m-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-m-text-area-min-block-size-quiet)}:host([size=l]){--spectrum-textfield-height:var(--system-textfield-size-l-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-l-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-l-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-l-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-l-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-l-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-l-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-l-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-l-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-l-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-l-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-l-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-l-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-l-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-l-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-l-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-l-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-l-text-area-min-block-size-quiet)}:host([size=xl]){--spectrum-textfield-height:var(--system-textfield-size-xl-height);--spectrum-textfield-label-spacing-block-quiet:var(--system-textfield-size-xl-label-spacing-block-quiet);--spectrum-textfield-label-spacing-inline-side-label:var(--system-textfield-size-xl-label-spacing-inline-side-label);--spectrum-textfield-placeholder-font-size:var(--system-textfield-size-xl-placeholder-font-size);--spectrum-textfield-spacing-inline:var(--system-textfield-size-xl-spacing-inline);--spectrum-textfield-icon-size-invalid:var(--system-textfield-size-xl-icon-size-invalid);--spectrum-textfield-icon-size-valid:var(--system-textfield-size-xl-icon-size-valid);--spectrum-textfield-icon-spacing-inline-end-invalid:var(--system-textfield-size-xl-icon-spacing-inline-end-invalid);--spectrum-textfield-icon-spacing-inline-end-valid:var(--system-textfield-size-xl-icon-spacing-inline-end-valid);--spectrum-textfield-icon-spacing-block-invalid:var(--system-textfield-size-xl-icon-spacing-block-invalid);--spectrum-textfield-icon-spacing-block-valid:var(--system-textfield-size-xl-icon-spacing-block-valid);--spectrum-textfield-icon-spacing-inline-start-invalid:var(--system-textfield-size-xl-icon-spacing-inline-start-invalid);--spectrum-textfield-icon-spacing-inline-start-valid:var(--system-textfield-size-xl-icon-spacing-inline-start-valid);--spectrum-textfield-character-count-font-size:var(--system-textfield-size-xl-character-count-font-size);--spectrum-textfield-character-count-spacing-block:var(--system-textfield-size-xl-character-count-spacing-block);--spectrum-textfield-character-count-spacing-block-quiet:var(--system-textfield-size-xl-character-count-spacing-block-quiet);--spectrum-textfield-character-count-spacing-block-side:var(--system-textfield-size-xl-character-count-spacing-block-side);--spectrum-text-area-min-block-size-quiet:var(--system-textfield-size-xl-text-area-min-block-size-quiet)}:host{inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width));flex-direction:column;display:inline-flex}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{--spectrum-textfield-input-line-height:normal;display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-animation-duration-100,.13s)ease-in-out,border-color var(--spectrum-animation-duration-100,.13s)ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows=\"1\"]) .input{min-block-size:auto}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{border-color:var(--mod-textfield-border-color-disabled,var(--spectrum-textfield-border-color-disabled));color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)));background-color:#0000}:host([disabled]) #textfield .icon.icon-search,:host([readonly]) #textfield .icon.icon-search{color:var(--highcontrast-textfield-text-color-disabled,var(--mod-textfield-text-color-disabled,var(--spectrum-textfield-text-color-disabled)))}:host([multiline][grows]:not([quiet])) #textfield:after{grid-area:unset;min-block-size:calc(var(--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size)) + var(--mod-textfield-focus-indicator-gap,var(--spectrum-textfield-focus-indicator-gap))*2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){height:100%;resize:none;position:absolute;top:0;left:0;overflow:hidden}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}

package/stories/textarea-sizes.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+export default {
+  component: "sp-textfield",
+  title: "Textarea/Sizes"
+};
+const template = ({
+  size
+} = {}) => {
+  return html`
+        <sp-field-label for="name" size=${ifDefined(size)}>
+            Enter your life story
+        </sp-field-label>
+        <sp-textfield
+            id="name"
+            multiline
+            size=${ifDefined(size)}
+            value="Sized Textarea"
+        >
+            <sp-help-text size=${ifDefined(size)} slot="help-text">
+                Spare no expense.
+            </sp-help-text>
+        </sp-textfield>
+    `;
+};
+export const s = () => template({ size: "s" });
+export const noSize = () => template();
+export const m = () => template({ size: "m" });
+export const l = () => template({ size: "l" });
+export const XL = () => template({ size: "xl" });
+//# sourceMappingURL=textarea-sizes.stories.js.map

package/stories/textarea-sizes.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["textarea-sizes.stories.ts"],
+  "sourcesContent": ["/*\nCopyright 2018 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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/textfield/sp-textfield.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/help-text/sp-help-text.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nexport default {\n    component: 'sp-textfield',\n    title: 'Textarea/Sizes',\n};\n\nconst template = ({\n    size,\n}: {\n    size?: 's' | 'm' | 'l' | 'xl';\n} = {}): TemplateResult => {\n    return html`\n        <sp-field-label for=\"name\" size=${ifDefined(size)}>\n            Enter your life story\n        </sp-field-label>\n        <sp-textfield\n            id=\"name\"\n            multiline\n            size=${ifDefined(size)}\n            value=\"Sized Textarea\"\n        >\n            <sp-help-text size=${ifDefined(size)} slot=\"help-text\">\n                Spare no expense.\n            </sp-help-text>\n        </sp-textfield>\n    `;\n};\n\nexport const s = (): TemplateResult => template({ size: 's' });\nexport const noSize = (): TemplateResult => template();\nexport const m = (): TemplateResult => template({ size: 'm' });\nexport const l = (): TemplateResult => template({ size: 'l' });\nexport const XL = (): TemplateResult => template({ size: 'xl' });\n"],
+  "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,iBAAiB;AAE1B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AACJ,IAEI,CAAC,MAAsB;AACvB,SAAO;AAAA,0CAC+B,UAAU,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMtC,UAAU,IAAI,CAAC;AAAA;AAAA;AAAA,iCAGD,UAAU,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAKhD;AAEO,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,aAAM,SAAS,MAAsB,SAAS;AAC9C,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,aAAM,KAAK,MAAsB,SAAS,EAAE,MAAM,KAAK,CAAC;",
+  "names": []
+}

package/stories/textarea.stories.js

@@ -0,0 +1,212 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+export default {
+  component: "sp-textfield",
+  title: "Textarea"
+};
+export const Default = () => {
+  return html`
+        <sp-textfield
+            multiline
+            label="Enter your life story"
+            placeholder="Enter your life story"
+        ></sp-textfield>
+        <sp-textfield
+            multiline
+            label="Enter your life story"
+            disabled
+            placeholder="Enter your life story"
+        ></sp-textfield>
+        <sp-textfield
+            multiline
+            label="Enter your life story"
+            pattern="[\\w\\s]+"
+            required
+            valid
+            value="A valid input"
+            placeholder="Enter your life story"
+        ></sp-textfield>
+        <sp-textfield
+            multiline
+            label="Enter your life story"
+            required
+            valid
+            value="A valid input"
+            disabled
+            placeholder="Enter your life story"
+        ></sp-textfield>
+        <sp-textfield
+            multiline
+            label="Enter your life story"
+            pattern="[\\d]+"
+            required
+            value="Not a valid input"
+            placeholder="Enter your life story"
+        ></sp-textfield>
+        <sp-textfield
+            multiline
+            label="Enter your life story"
+            pattern="[\\d]+"
+            invalid
+            required
+            value="Not a valid input"
+            disabled
+            placeholder="Enter your life story"
+        ></sp-textfield>
+    `;
+};
+export const quiet = () => html`
+    <sp-field-label for="story">Enter your life story...</sp-field-label>
+    <sp-textfield
+        autofocus
+        multiline
+        id="story"
+        quiet
+        placeholder="Enter your life story"
+    ></sp-textfield>
+`;
+export const grows = () => html`
+    <sp-field-label for="story">Enter your life story...</sp-field-label>
+    <sp-textfield
+        multiline
+        id="story"
+        value="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
+        grows
+        placeholder="Enter your life story"
+    ></sp-textfield>
+`;
+export const growsQuiet = () => html`
+    <sp-field-label for="story">Enter your life story...</sp-field-label>
+    <sp-textfield
+        multiline
+        id="story"
+        value="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
+        grows
+        quiet
+        placeholder="Enter your life story"
+    ></sp-textfield>
+`;
+export const growsEmpty = () => html`
+    <sp-field-label for="empty">
+        This textfield hasn't been used yet
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        id="empty"
+        grows
+        placeholder="You can type here"
+        autofocus
+    >
+        <sp-help-text slot="help-text">
+            Even empty Textfield display correctly while waiting for content.
+        </sp-help-text>
+    </sp-textfield>
+`;
+export const growsWithLargeWords = () => html`
+    <sp-field-label for="story">
+        Enter your life story with very long words...
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        id="story"
+        value="Sed utperspiciatisundeomnisistenatuserrorsitvoluptatemaccusantiumdoloremquelaudantium,totamemaperiam, eaque ipsa quae ab illo inventore veritatis etquasiarchitectobeataevitaedictasuntexplicabo. Nemo enimipsamvoluptatemquiavoluptassitaspernaturautoditautfugitsedquiaconsequunturmagnidoloreseosquirationevoluptatemsequinesciunt."
+        grows
+        placeholder="Enter your life story"
+    ></sp-textfield>
+`;
+export const readonly = () => html`
+    <sp-textfield
+        multiline
+        label="Enter your life story"
+        value="A readonly textarea"
+        readonly
+        placeholder="Enter your life story"
+    ></sp-textfield>
+`;
+export const resizeControls = () => html`
+    <sp-textfield
+        multiline
+        style="resize: none;"
+        label="No resize control"
+        placeholder="No resize control"
+    ></sp-textfield>
+
+    <sp-textfield
+        multiline
+        style="resize: vertical;"
+        label="Vertical resize control"
+        placeholder="Vertical resize control"
+    ></sp-textfield>
+
+    <sp-textfield
+        multiline
+        style="resize: horizontal;"
+        label="Horizontal resize control"
+        placeholder="Horizontal resize control"
+    ></sp-textfield>
+`;
+export const sized = () => html`
+    <sp-field-label for="sized">
+        This textfield hasn't been used yet
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        id="sized"
+        placeholder="You can type here"
+        autofocus
+        style="width: 400px"
+    >
+        <sp-help-text slot="help-text">
+            Even empty Textfield display correctly while waiting for content.
+        </sp-help-text>
+    </sp-textfield>
+`;
+export const with5Rows = () => html`
+    <sp-field-label for="predefinedRows">
+        Enter your life story with very long words...
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        id="predefinedRows"
+        value="Line 1
+Line 2
+Line 3
+Line 4
+Line 5"
+        placeholder="Enter your life story"
+        rows="5"
+    ></sp-textfield>
+`;
+export const rowsDefeatsGrows = () => html`
+    <sp-field-label for="predefinedRows">
+        Enter your life story with very long words...
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        grows
+        id="predefinedRows"
+        value="Line 1
+Line 2
+Line 3
+Line 4
+Line 5"
+        placeholder="Enter your life story"
+        rows="3"
+    ></sp-textfield>
+`;
+export const with1Row = () => html`
+    <sp-field-label for="predefinedRows">
+        Enter your life story with very long words...
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        id="predefinedRows"
+        value="Line 1"
+        placeholder="Enter your life story"
+        rows="1"
+    ></sp-textfield>
+`;
+//# sourceMappingURL=textarea.stories.js.map