@react-spectrum/textfield 3.11.3 → 3.12.0

package/dist/vars.07716e14.css

@@ -0,0 +1,549 @@
+.YO3Nla_i18nFontFamily {
+  font-synthesis: weight;
+  font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.YO3Nla_i18nFontFamily:lang(ar) {
+  font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.YO3Nla_i18nFontFamily:lang(he) {
+  font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.YO3Nla_i18nFontFamily:lang(zh) {
+  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+}
+
+.YO3Nla_i18nFontFamily:lang(zh-Hans) {
+  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+}
+
+.YO3Nla_i18nFontFamily:lang(zh-Hant) {
+  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+}
+
+.YO3Nla_i18nFontFamily:lang(zh-SG), .YO3Nla_i18nFontFamily:lang(zh-CN) {
+  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+}
+
+.YO3Nla_i18nFontFamily:lang(ko) {
+  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+}
+
+.YO3Nla_i18nFontFamily:lang(ja) {
+  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+}
+
+.YO3Nla_spectrum-FocusRing-ring {
+  --spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
+  --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
+  --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
+  --spectrum-focus-ring-border-size: 0px;
+  --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
+}
+
+.YO3Nla_spectrum-FocusRing-ring:after {
+  border-radius: calc(var(--spectrum-focus-ring-border-radius)  + var(--spectrum-focus-ring-gap));
+  content: "";
+  margin: calc(-1 * var(--spectrum-focus-ring-border-size));
+  pointer-events: none;
+  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
+.YO3Nla_spectrum-FocusRing.YO3Nla_focus-ring:after {
+  margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+  box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+}
+
+.YO3Nla_spectrum-FocusRing--quiet:after {
+  border-radius: 0;
+}
+
+.YO3Nla_spectrum-FocusRing--quiet.YO3Nla_focus-ring:after {
+  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
+  box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+}
+
+@media (forced-colors: active) {
+  .YO3Nla_spectrum-FocusRing, .YO3Nla_spectrum-FocusRing-ring, .YO3Nla_spectrum-FocusRing--quiet {
+    --spectrum-high-contrast-focus-ring-color: Highlight;
+  }
+
+  :is(.YO3Nla_spectrum-FocusRing, .YO3Nla_spectrum-FocusRing-ring, .YO3Nla_spectrum-FocusRing--quiet):after {
+    forced-color-adjust: none;
+  }
+}
+
+.YO3Nla_spectrum-Textfield {
+  min-width: var(--spectrum-textfield-min-width, var(--spectrum-global-dimension-size-600));
+  width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
+  display: inline-flex;
+  position: relative;
+}
+
+.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--quiet.YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input {
+  height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+  min-height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+  overflow-x: hidden;
+}
+
+.YO3Nla_spectrum-Textfield-input {
+  box-sizing: border-box;
+  border: var(--spectrum-alias-input-border-size) solid;
+  border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
+  padding: 3px var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) 5px calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150))  - 1px);
+  text-indent: 0;
+  height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+  vertical-align: top;
+  font-size: var(--spectrum-textfield-text-size, var(--spectrum-alias-font-size-default));
+  line-height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+  text-overflow: ellipsis;
+  transition: border-color var(--spectrum-global-animation-duration-100, .13s) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+  outline: none;
+  inline-size: 100%;
+  margin: 0;
+  overflow: visible;
+}
+
+.YO3Nla_spectrum-Textfield-input::placeholder, .YO3Nla_spectrum-Textfield-input.YO3Nla_is-placeholder {
+  font-weight: var(--spectrum-textfield-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
+  font-style: var(--spectrum-textfield-placeholder-text-font-style, var(--spectrum-global-font-style-italic));
+  font-synthesis: none;
+  transition: color var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
+  opacity: 1;
+}
+
+.YO3Nla_spectrum-Textfield-input::-moz-placeholder {
+  font-weight: var(--spectrum-textfield-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
+  font-style: var(--spectrum-textfield-placeholder-text-font-style, var(--spectrum-global-font-style-italic));
+  transition: color var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
+  opacity: 1;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(ja)::placeholder, .YO3Nla_spectrum-Textfield-input:lang(ja).YO3Nla_is-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(ja)::-moz-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(zh)::placeholder, .YO3Nla_spectrum-Textfield-input:lang(zh).YO3Nla_is-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(zh)::-moz-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(ko)::placeholder, .YO3Nla_spectrum-Textfield-input:lang(ko).YO3Nla_is-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(ko)::-moz-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(ar)::placeholder, .YO3Nla_spectrum-Textfield-input:lang(ar).YO3Nla_is-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(ar)::-moz-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(he)::placeholder, .YO3Nla_spectrum-Textfield-input:lang(he).YO3Nla_is-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input:lang(he)::-moz-placeholder {
+  font-style: normal;
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered::placeholder {
+  font-weight: var(--spectrum-textfield-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
+}
+
+.YO3Nla_spectrum-Textfield-input:disabled {
+  resize: none;
+  opacity: 1;
+}
+
+.YO3Nla_spectrum-Textfield-input:disabled::placeholder, .YO3Nla_spectrum-Textfield-input:disabled.YO3Nla_is-placeholder {
+  font-weight: var(--spectrum-textfield-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
+}
+
+.YO3Nla_spectrum-Textfield-input::-ms-clear {
+  width: 0;
+  height: 0;
+}
+
+.YO3Nla_spectrum-Textfield-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.YO3Nla_spectrum-Textfield-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.YO3Nla_spectrum-Textfield-input:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+.YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input {
+  min-height: var(--spectrum-global-dimension-size-700);
+  padding: 3px var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) 5px calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150))  - 1px);
+  resize: none;
+  height: auto;
+  overflow: auto;
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input {
+  border-width: 0 0 var(--spectrum-alias-input-border-size) 0;
+  border-radius: 0;
+  padding-inline-start: var(--spectrum-textfield-quiet-padding-x, 0);
+  padding-inline-end: var(--spectrum-textfield-quiet-padding-x, 0);
+}
+
+.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-input {
+  padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150))  + var(--spectrum-icon-checkmark-medium-width)  + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
+}
+
+.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input, .YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-input {
+  padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150))  + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225))  + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
+}
+
+.YO3Nla_spectrum-Textfield-wrapper.YO3Nla_spectrum-Textfield-wrapper--quiet {
+  grid-template-rows: auto;
+}
+
+.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline {
+  flex: auto;
+  min-height: 0;
+}
+
+.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline .YO3Nla_spectrum-Textfield-input {
+  line-height: var(--spectrum-textfield-text-line-height, var(--spectrum-alias-body-text-line-height));
+}
+
+.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline.YO3Nla_spectrum-Textfield--quiet {
+  flex: 0 auto;
+  max-height: 100%;
+}
+
+.YO3Nla_spectrum-Textfield-wrapper .YO3Nla_spectrum-Textfield--multiline.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input {
+  max-height: 100%;
+}
+
+.YO3Nla_spectrum-Textfield-validationIcon {
+  pointer-events: all;
+  transition: color var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
+  padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2);
+  position: absolute;
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-validationIcon {
+  padding-inline-end: 0;
+}
+
+.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon {
+  width: var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225));
+  height: var(--spectrum-icon-alert-medium-height, var(--spectrum-global-dimension-size-225));
+  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-height, var(--spectrum-global-dimension-size-225)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon {
+  width: var(--spectrum-icon-checkmark-medium-width);
+  height: var(--spectrum-icon-checkmark-medium-height);
+  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-checkmark-medium-height) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: var(--spectrum-global-dimension-size-150);
+}
+
+.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: var(--spectrum-global-dimension-size-150);
+}
+
+.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: var(--spectrum-global-dimension-size-150);
+}
+
+.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: var(--spectrum-global-dimension-size-150);
+}
+
+.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon {
+  height: var(--spectrum-icon-info-medium-height, var(--spectrum-global-dimension-size-225));
+  width: var(--spectrum-icon-info-medium-width, var(--spectrum-global-dimension-size-225));
+  top: var(--spectrum-global-dimension-size-85);
+  transition: fill var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
+  display: block;
+  position: absolute;
+}
+
+.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  left: var(--spectrum-global-dimension-size-150);
+}
+
+.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  left: var(--spectrum-global-dimension-size-150);
+}
+
+.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  right: var(--spectrum-global-dimension-size-150);
+}
+
+.YO3Nla_spectrum-Textfield .YO3Nla_spectrum-Textfield-icon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  right: var(--spectrum-global-dimension-size-150);
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon {
+  padding-inline-start: calc(var(--spectrum-global-dimension-size-150)  + var(--spectrum-global-dimension-size-225)  + var(--spectrum-global-dimension-size-65));
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon {
+  padding-inline-start: calc(var(--spectrum-global-dimension-size-100)  + var(--spectrum-icon-info-medium-width, var(--spectrum-global-dimension-size-225)));
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon ~ .YO3Nla_spectrum-Textfield-icon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  left: 0;
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon ~ .YO3Nla_spectrum-Textfield-icon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  left: 0;
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon ~ .YO3Nla_spectrum-Textfield-icon:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  right: 0;
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon ~ .YO3Nla_spectrum-Textfield-icon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  right: 0;
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield-inputIcon.YO3Nla_spectrum-Textfield--multiline {
+  height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+  min-height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+}
+
+.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader {
+  top: calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-loader-circle-small-width, var(--spectrum-global-dimension-static-size-200)) / 2));
+  position: absolute;
+}
+
+.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: calc(calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) / 2))  + calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
+  right: calc(calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) / 2))  + calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: calc(calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) / 2))  + calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  left: calc(calc(calc(var(--spectrum-textfield-icon-frame) / 2)  - calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) / 2))  + calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2));
+}
+
+.YO3Nla_spectrum-Textfield--quiet:is(.YO3Nla_spectrum-Textfield--loadable .YO3Nla_spectrum-Textfield-circleLoader) {
+  padding-inline-end: 0;
+}
+
+.YO3Nla_spectrum-Textfield-input {
+  background-color: var(--spectrum-textfield-background-color, var(--spectrum-global-color-gray-50));
+  border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
+  color: var(--spectrum-textfield-text-color, var(--spectrum-alias-text-color));
+}
+
+.YO3Nla_spectrum-Textfield-input::placeholder, .YO3Nla_spectrum-Textfield-input.YO3Nla_is-placeholder {
+  color: var(--spectrum-textfield-placeholder-text-color, var(--spectrum-alias-placeholder-text-color));
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered {
+  border-color: var(--spectrum-textfield-border-color-hover, var(--spectrum-alias-border-color-hover));
+  box-shadow: none;
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered::placeholder, .YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered.YO3Nla_is-placeholder {
+  color: var(--spectrum-textfield-placeholder-text-color-hover, var(--spectrum-alias-placeholder-text-color-hover));
+}
+
+.YO3Nla_spectrum-Textfield-input:active {
+  background-color: var(--spectrum-textfield-background-color-down, var(--spectrum-global-color-gray-50));
+  border-color: var(--spectrum-textfield-border-color-down, var(--spectrum-alias-border-color-mouse-focus));
+  color: var(--spectrum-textfield-text-color-down, var(--spectrum-alias-text-color-down));
+}
+
+.YO3Nla_spectrum-Textfield-input:active::placeholder, .YO3Nla_spectrum-Textfield-input:active.YO3Nla_is-placeholder {
+  color: var(--spectrum-textfield-placeholder-text-color-down, var(--spectrum-alias-placeholder-text-color-down));
+}
+
+.YO3Nla_spectrum-Textfield-input:focus, .YO3Nla_spectrum-Textfield-input.YO3Nla_is-focused {
+  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active) {
+  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+  box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield-input[disabled] {
+  background-color: var(--spectrum-textfield-background-color-disabled, var(--spectrum-global-color-gray-200));
+  border-color: var(--spectrum-textfield-border-color-disabled, var(--spectrum-alias-border-color-transparent));
+  color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+  -webkit-text-fill-color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+}
+
+.YO3Nla_spectrum-Textfield-input[disabled]::placeholder, .YO3Nla_spectrum-Textfield-input[disabled].YO3Nla_is-placeholder {
+  color: var(--spectrum-textfield-placeholder-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+}
+
+.YO3Nla_spectrum-Textfield-input[disabled] ~ .YO3Nla_spectrum-Textfield-icon {
+  fill: var(--spectrum-textfield-icon-color-disabled, var(--spectrum-global-color-gray-500));
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled {
+  background-color: var(--spectrum-textfield-background-color-disabled, var(--spectrum-global-color-gray-200));
+  border-color: var(--spectrum-textfield-border-color-disabled, var(--spectrum-alias-border-color-transparent));
+  color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+  -webkit-text-fill-color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled::placeholder, .YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled.YO3Nla_is-placeholder {
+  color: var(--spectrum-textfield-placeholder-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled ~ .YO3Nla_spectrum-Textfield-icon {
+  fill: var(--spectrum-textfield-icon-color-disabled, var(--spectrum-global-color-gray-500));
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid {
+  border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_is-hovered, .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid:active, .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid:focus, .YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_is-focused {
+  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield-input.YO3Nla_spectrum-Textfield--invalid.YO3Nla_focus-ring:not(:active) {
+  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+  box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input {
+  background-color: var(--spectrum-textfield-quiet-background-color, var(--spectrum-alias-background-color-transparent));
+  border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered {
+  border-color: var(--spectrum-textfield-quiet-border-color-hover, var(--spectrum-alias-border-color-hover));
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:active {
+  border-color: var(--spectrum-textfield-quiet-border-color-down, var(--spectrum-alias-border-color-mouse-focus));
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:focus, .YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-focused {
+  border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active) {
+  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+  box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input:disabled, .YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_is-disabled {
+  background-color: var(--spectrum-textfield-quiet-background-color-disabled, var(--spectrum-alias-background-color-transparent));
+  border-color: var(--spectrum-textfield-quiet-border-color-disabled, var(--spectrum-alias-border-color-mid));
+}
+
+.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input {
+  border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
+}
+
+.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_is-hovered {
+  border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
+}
+
+.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:active {
+  border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
+}
+
+.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input:focus, .YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_is-focused {
+  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active) {
+  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+  box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield--quiet.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring:not(:active) {
+  box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+}
+
+.YO3Nla_spectrum-Textfield--valid .YO3Nla_spectrum-Textfield-validationIcon {
+  fill: var(--spectrum-alert-success-icon-color, var(--spectrum-semantic-positive-color-icon));
+}
+
+.YO3Nla_spectrum-Textfield--invalid .YO3Nla_spectrum-Textfield-validationIcon {
+  fill: var(--spectrum-alert-error-icon-color, var(--spectrum-semantic-negative-color-icon));
+}
+
+@media (forced-colors: active) {
+  .YO3Nla_spectrum-Textfield-input {
+    --spectrum-textfield-border-color: CanvasText;
+    --spectrum-textfield-text-color-disabled: GrayText;
+    --spectrum-textfield-border-color-disabled: GrayText;
+    --spectrum-textfield-quiet-border-color-disabled: GrayText;
+    --spectrum-textfield-quiet-border-color-key-focus: Highlight;
+    --spectrum-textfield-border-color-key-focus: Highlight;
+    --spectrum-textfield-placeholder-text-color: GrayText;
+    --spectrum-textfield-placeholder-text-color-hover: GrayText;
+    --spectrum-high-contrast-focus-ring-color: Highlight;
+  }
+
+  .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring {
+    outline: 2px solid var(--spectrum-high-contrast-focus-ring-color);
+    outline: 2px solid var(--spectrum-high-contrast-focus-ring-color);
+  }
+
+  .YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring {
+    forced-color-adjust: none;
+    box-shadow: 0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    outline: 0;
+  }
+
+  .YO3Nla_spectrum-Textfield--quiet .YO3Nla_spectrum-Textfield-input.YO3Nla_focus-ring .YO3Nla_spectrum-Textfield-input {
+    border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+  }
+}
+/*# sourceMappingURL=vars.07716e14.css.map */

package/dist/vars.07716e14.css.map

@@ -0,0 +1 @@
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;AAQE;;;;;;AAWF;;;;;;;;;;;;;;;;;;;;AA4CE;;;;;;;;AAYA;;;;;;;AAWE;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAMA;;;;AAKF;;;;;AAME;;;;AAQF;;;;;AAOA;;;;;AAAA;;;;;AAOA;;;;AAIA;;;;;;;;AAUA;;;;;;;AASA;;;;AAIA;;;;AASF;;;;AAIA;;;;;AAKE;;;;AAIA;;;;;AAME;;;;AAOJ;;;;;;;AASE;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAaA;;;;AASE;;;;AAIE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKF;;;;;AAQF;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;AAiBF;;;;;;AAKE;;;;AAKA;;;;;AAIE;;;;AAMF;;;;;;AAKE;;;;AAMF;;;;AAME;;;;;AAMF;;;;;;;AASE;;;;AAKA;;;;AAdF;;;;;;;AASE;;;;AAKA;;;;AAKF;;;;AAGE;;;;AAcE;;;;;AAOJ;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AAMF;;;;;AAOF;;;;AAGE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AASA;;;;AASJ;;;;AAIA;;;;AAKF;EACE;;;;;;;;;;;;EAUE;;;;;EAKE;;;;;;EAKE","sources":["packages/@adobe/spectrum-css-temp/components/textfield/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.07716e14.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/textfield",
-  "version": "3.11.3",
+  "version": "3.12.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,17 +36,17 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.16.1",
-    "@react-aria/interactions": "^3.21.0",
-    "@react-aria/textfield": "^3.14.2",
-    "@react-aria/utils": "^3.23.1",
-    "@react-spectrum/form": "^3.7.3",
-    "@react-spectrum/label": "^3.16.3",
-    "@react-spectrum/utils": "^3.11.4",
-    "@react-stately/utils": "^3.9.0",
-    "@react-types/shared": "^3.22.0",
-    "@react-types/textfield": "^3.9.0",
-    "@spectrum-icons/ui": "^3.6.4",
+    "@react-aria/focus": "^3.17.0",
+    "@react-aria/interactions": "^3.21.2",
+    "@react-aria/textfield": "^3.14.4",
+    "@react-aria/utils": "^3.24.0",
+    "@react-spectrum/form": "^3.7.5",
+    "@react-spectrum/label": "^3.16.5",
+    "@react-spectrum/utils": "^3.11.6",
+    "@react-stately/utils": "^3.10.0",
+    "@react-types/shared": "^3.23.0",
+    "@react-types/textfield": "^3.9.2",
+    "@spectrum-icons/ui": "^3.6.6",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f040ff62678e6a31375b96c05396df0bae660350"
+  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
 }

package/src/index.ts

@@ -15,4 +15,4 @@
 export {TextArea} from './TextArea';
 export {TextField} from './TextField';
 export {TextFieldBase} from './TextFieldBase';
-export type {SpectrumTextFieldProps} from '@react-types/textfield';
+export type {SpectrumTextFieldProps, SpectrumTextAreaProps} from '@react-types/textfield';