@spectrum-web-components/textfield 1.1.0-beta.8 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/package.json +9 -9
  2. package/sp-textfield.d.ts +0 -6
  3. package/sp-textfield.dev.js +0 -5
  4. package/sp-textfield.dev.js.map +0 -7
  5. package/sp-textfield.js +0 -2
  6. package/sp-textfield.js.map +0 -7
  7. package/src/Textfield.d.ts +0 -144
  8. package/src/Textfield.dev.js +0 -347
  9. package/src/Textfield.dev.js.map +0 -7
  10. package/src/Textfield.js +0 -68
  11. package/src/Textfield.js.map +0 -7
  12. package/src/index.d.ts +0 -1
  13. package/src/index.dev.js +0 -3
  14. package/src/index.dev.js.map +0 -7
  15. package/src/index.js +0 -2
  16. package/src/index.js.map +0 -7
  17. package/src/spectrum-textfield.css.d.ts +0 -2
  18. package/src/spectrum-textfield.css.dev.js +0 -7
  19. package/src/spectrum-textfield.css.dev.js.map +0 -7
  20. package/src/spectrum-textfield.css.js +0 -4
  21. package/src/spectrum-textfield.css.js.map +0 -7
  22. package/src/textfield-overrides.css.d.ts +0 -2
  23. package/src/textfield-overrides.css.dev.js +0 -7
  24. package/src/textfield-overrides.css.dev.js.map +0 -7
  25. package/src/textfield-overrides.css.js +0 -4
  26. package/src/textfield-overrides.css.js.map +0 -7
  27. package/src/textfield.css.d.ts +0 -2
  28. package/src/textfield.css.dev.js +0 -7
  29. package/src/textfield.css.dev.js.map +0 -7
  30. package/src/textfield.css.js +0 -4
  31. package/src/textfield.css.js.map +0 -7
  32. package/stories/textarea-sizes.stories.js +0 -35
  33. package/stories/textarea-sizes.stories.js.map +0 -7
  34. package/stories/textarea.stories.js +0 -212
  35. package/stories/textarea.stories.js.map +0 -7
  36. package/stories/textfield-sizes.stories.js +0 -30
  37. package/stories/textfield-sizes.stories.js.map +0 -7
  38. package/stories/textfield.stories.js +0 -139
  39. package/stories/textfield.stories.js.map +0 -7
  40. package/test/benchmark/test-basic.js +0 -8
  41. package/test/benchmark/test-basic.js.map +0 -7
  42. package/test/textarea-sizes.test-vrt.js +0 -5
  43. package/test/textarea-sizes.test-vrt.js.map +0 -7
  44. package/test/textarea.test-vrt.js +0 -5
  45. package/test/textarea.test-vrt.js.map +0 -7
  46. package/test/textfield-memory.test.js +0 -8
  47. package/test/textfield-memory.test.js.map +0 -7
  48. package/test/textfield-sizes.test-vrt.js +0 -5
  49. package/test/textfield-sizes.test-vrt.js.map +0 -7
  50. package/test/textfield.test-vrt.js +0 -5
  51. package/test/textfield.test-vrt.js.map +0 -7
  52. package/test/textfield.test.js +0 -926
  53. package/test/textfield.test.js.map +0 -7
@@ -1,7 +0,0 @@
1
- "use strict";
2
- import { css } from "@spectrum-web-components/base";
3
- const styles = css`
4
- #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-global-animation-duration-100,.13s)ease-in-out,border-color var(--spectrum-global-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}
5
- `;
6
- export default styles;
7
- //# sourceMappingURL=textfield.css.dev.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["textfield.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 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-global-animation-duration-100,.13s)ease-in-out,border-color var(--spectrum-global-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;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
- "names": []
7
- }
@@ -1,4 +0,0 @@
1
- "use strict";import{css as e}from"@spectrum-web-components/base";const t=e`
2
- #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-global-animation-duration-100,.13s)ease-in-out,border-color var(--spectrum-global-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}
3
- `;export default t;
4
- //# sourceMappingURL=textfield.css.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["textfield.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 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-global-animation-duration-100,.13s)ease-in-out,border-color var(--spectrum-global-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;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
- "names": ["css", "styles"]
7
- }
@@ -1,35 +0,0 @@
1
- "use strict";
2
- import { html } from "@spectrum-web-components/base";
3
- import "@spectrum-web-components/textfield/sp-textfield.js";
4
- import "@spectrum-web-components/field-label/sp-field-label.js";
5
- import "@spectrum-web-components/help-text/sp-help-text.js";
6
- import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
7
- export default {
8
- component: "sp-textfield",
9
- title: "Textarea/Sizes"
10
- };
11
- const template = ({
12
- size
13
- } = {}) => {
14
- return html`
15
- <sp-field-label for="name" size=${ifDefined(size)}>
16
- Enter your life story
17
- </sp-field-label>
18
- <sp-textfield
19
- id="name"
20
- multiline
21
- size=${ifDefined(size)}
22
- value="Sized Textarea"
23
- >
24
- <sp-help-text size=${ifDefined(size)} slot="help-text">
25
- Spare no expense.
26
- </sp-help-text>
27
- </sp-textfield>
28
- `;
29
- };
30
- export const s = () => template({ size: "s" });
31
- export const noSize = () => template();
32
- export const m = () => template({ size: "m" });
33
- export const l = () => template({ size: "l" });
34
- export const XL = () => template({ size: "xl" });
35
- //# sourceMappingURL=textarea-sizes.stories.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["textarea-sizes.stories.ts"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,212 +0,0 @@
1
- "use strict";
2
- import { html } from "@spectrum-web-components/base";
3
- import "@spectrum-web-components/textfield/sp-textfield.js";
4
- import "@spectrum-web-components/field-label/sp-field-label.js";
5
- import "@spectrum-web-components/help-text/sp-help-text.js";
6
- export default {
7
- component: "sp-textfield",
8
- title: "Textarea"
9
- };
10
- export const Default = () => {
11
- return html`
12
- <sp-textfield
13
- multiline
14
- label="Enter your life story"
15
- placeholder="Enter your life story"
16
- ></sp-textfield>
17
- <sp-textfield
18
- multiline
19
- label="Enter your life story"
20
- disabled
21
- placeholder="Enter your life story"
22
- ></sp-textfield>
23
- <sp-textfield
24
- multiline
25
- label="Enter your life story"
26
- pattern="[\\w\\s]+"
27
- required
28
- valid
29
- value="A valid input"
30
- placeholder="Enter your life story"
31
- ></sp-textfield>
32
- <sp-textfield
33
- multiline
34
- label="Enter your life story"
35
- required
36
- valid
37
- value="A valid input"
38
- disabled
39
- placeholder="Enter your life story"
40
- ></sp-textfield>
41
- <sp-textfield
42
- multiline
43
- label="Enter your life story"
44
- pattern="[\\d]+"
45
- required
46
- value="Not a valid input"
47
- placeholder="Enter your life story"
48
- ></sp-textfield>
49
- <sp-textfield
50
- multiline
51
- label="Enter your life story"
52
- pattern="[\\d]+"
53
- invalid
54
- required
55
- value="Not a valid input"
56
- disabled
57
- placeholder="Enter your life story"
58
- ></sp-textfield>
59
- `;
60
- };
61
- export const quiet = () => html`
62
- <sp-field-label for="story">Enter your life story...</sp-field-label>
63
- <sp-textfield
64
- autofocus
65
- multiline
66
- id="story"
67
- quiet
68
- placeholder="Enter your life story"
69
- ></sp-textfield>
70
- `;
71
- export const grows = () => html`
72
- <sp-field-label for="story">Enter your life story...</sp-field-label>
73
- <sp-textfield
74
- multiline
75
- id="story"
76
- 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."
77
- grows
78
- placeholder="Enter your life story"
79
- ></sp-textfield>
80
- `;
81
- export const growsQuiet = () => html`
82
- <sp-field-label for="story">Enter your life story...</sp-field-label>
83
- <sp-textfield
84
- multiline
85
- id="story"
86
- 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."
87
- grows
88
- quiet
89
- placeholder="Enter your life story"
90
- ></sp-textfield>
91
- `;
92
- export const growsEmpty = () => html`
93
- <sp-field-label for="empty">
94
- This textfield hasn't been used yet
95
- </sp-field-label>
96
- <sp-textfield
97
- multiline
98
- id="empty"
99
- grows
100
- placeholder="You can type here"
101
- autofocus
102
- >
103
- <sp-help-text slot="help-text">
104
- Even empty Textfield display correctly while waiting for content.
105
- </sp-help-text>
106
- </sp-textfield>
107
- `;
108
- export const growsWithLargeWords = () => html`
109
- <sp-field-label for="story">
110
- Enter your life story with very long words...
111
- </sp-field-label>
112
- <sp-textfield
113
- multiline
114
- id="story"
115
- value="Sed utperspiciatisundeomnisistenatuserrorsitvoluptatemaccusantiumdoloremquelaudantium,totamemaperiam, eaque ipsa quae ab illo inventore veritatis etquasiarchitectobeataevitaedictasuntexplicabo. Nemo enimipsamvoluptatemquiavoluptassitaspernaturautoditautfugitsedquiaconsequunturmagnidoloreseosquirationevoluptatemsequinesciunt."
116
- grows
117
- placeholder="Enter your life story"
118
- ></sp-textfield>
119
- `;
120
- export const readonly = () => html`
121
- <sp-textfield
122
- multiline
123
- label="Enter your life story"
124
- value="A readonly textarea"
125
- readonly
126
- placeholder="Enter your life story"
127
- ></sp-textfield>
128
- `;
129
- export const resizeControls = () => html`
130
- <sp-textfield
131
- multiline
132
- style="resize: none;"
133
- label="No resize control"
134
- placeholder="No resize control"
135
- ></sp-textfield>
136
-
137
- <sp-textfield
138
- multiline
139
- style="resize: vertical;"
140
- label="Vertical resize control"
141
- placeholder="Vertical resize control"
142
- ></sp-textfield>
143
-
144
- <sp-textfield
145
- multiline
146
- style="resize: horizontal;"
147
- label="Horizontal resize control"
148
- placeholder="Horizontal resize control"
149
- ></sp-textfield>
150
- `;
151
- export const sized = () => html`
152
- <sp-field-label for="sized">
153
- This textfield hasn't been used yet
154
- </sp-field-label>
155
- <sp-textfield
156
- multiline
157
- id="sized"
158
- placeholder="You can type here"
159
- autofocus
160
- style="width: 400px"
161
- >
162
- <sp-help-text slot="help-text">
163
- Even empty Textfield display correctly while waiting for content.
164
- </sp-help-text>
165
- </sp-textfield>
166
- `;
167
- export const with5Rows = () => html`
168
- <sp-field-label for="predefinedRows">
169
- Enter your life story with very long words...
170
- </sp-field-label>
171
- <sp-textfield
172
- multiline
173
- id="predefinedRows"
174
- value="Line 1
175
- Line 2
176
- Line 3
177
- Line 4
178
- Line 5"
179
- placeholder="Enter your life story"
180
- rows="5"
181
- ></sp-textfield>
182
- `;
183
- export const rowsDefeatsGrows = () => html`
184
- <sp-field-label for="predefinedRows">
185
- Enter your life story with very long words...
186
- </sp-field-label>
187
- <sp-textfield
188
- multiline
189
- grows
190
- id="predefinedRows"
191
- value="Line 1
192
- Line 2
193
- Line 3
194
- Line 4
195
- Line 5"
196
- placeholder="Enter your life story"
197
- rows="3"
198
- ></sp-textfield>
199
- `;
200
- export const with1Row = () => html`
201
- <sp-field-label for="predefinedRows">
202
- Enter your life story with very long words...
203
- </sp-field-label>
204
- <sp-textfield
205
- multiline
206
- id="predefinedRows"
207
- value="Line 1"
208
- placeholder="Enter your life story"
209
- rows="1"
210
- ></sp-textfield>
211
- `;
212
- //# sourceMappingURL=textarea.stories.js.map