@wordpress/components 30.2.1-next.0f6f9d12c.0 → 30.2.1-next.f34ab90e9.0

package/build-style/style-rtl.css

@@ -594,8 +594,8 @@ p + .components-button.is-tertiary {
   position: relative; /* Required to position the navigation toolbar. */
   box-sizing: border-box;
   display: inline flow-root;
-  color: #1e1e1e;
-  background-color: #fff;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  background-color: var(--wp-components-color-background, #fff);
   font-size: 13px;
   font-weight: 400;
   z-index: 0;
@@ -611,7 +611,7 @@ p + .components-button.is-tertiary {
   position: relative;
 }
 .components-calendar__day:has(.components-calendar__day-button:disabled) {
-  color: #949494;
+  color: var(--wp-components-color-gray-600, #949494);
 }
 .components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -626,8 +626,8 @@ p + .components-button.is-tertiary {
   align-items: center;
   display: flex;
   position: relative;
-  width: 2rem;
-  height: 2rem;
+  width: 32px;
+  height: 32px;
   border: none;
   border-radius: 2px;
   font: inherit;
@@ -687,15 +687,15 @@ p + .components-button.is-tertiary {
   justify-content: center;
   position: relative;
   appearance: none;
-  width: 2rem;
-  height: 2rem;
+  width: 32px;
+  height: 32px;
   color: inherit;
 }
 .components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
 .components-calendar__button-previous:disabled,
 .components-calendar__button-previous[aria-disabled=true] {
   cursor: revert;
-  color: #949494;
+  color: var(--wp-components-color-gray-600, #949494);
 }
 .components-calendar__button-next:focus-visible,
 .components-calendar__button-previous:focus-visible {
@@ -718,7 +718,7 @@ p + .components-button.is-tertiary {
   display: flex;
   justify-content: center;
   align-content: center;
-  height: 2rem;
+  height: 32px;
   margin-bottom: 12px;
 }
 
@@ -727,7 +727,7 @@ p + .components-button.is-tertiary {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 16px;
   max-width: fit-content;
 }
 
@@ -744,14 +744,14 @@ p + .components-button.is-tertiary {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 2rem;
+  height: 32px;
 }
 
 .components-calendar__weekday {
-  width: 2rem;
-  height: 2rem;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   text-align: center;
   text-transform: uppercase;
 }
@@ -771,17 +771,17 @@ p + .components-button.is-tertiary {
 
 .components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
 .components-calendar__day-button:hover:not(:disabled)) {
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
-  background-color: #1e1e1e;
+  background-color: var(--wp-components-color-foreground, #1e1e1e);
   border: 1px solid transparent;
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
-  background-color: #949494;
+  background-color: var(--wp-components-color-gray-600, #949494);
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
-  background-color: #2f2f2f;
+  background-color: var(--wp-components-color-gray-800, #2f2f2f);
 }
 
 .components-calendar__day--hidden {
@@ -3851,7 +3851,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   pointer-events: none;
 }
 
-.components-validated-control__error {
+.components-validated-control__indicator {
   display: flex;
   align-items: flex-start;
   gap: 4px;
@@ -3859,15 +3859,27 @@ div.components-toolbar > div + div.has-left-divider::before {
   font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 0.75rem;
   line-height: 16px;
+  color: var(--wp-components-color-gray-700, #757575);
+  animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+.components-validated-control__indicator.is-invalid {
   color: #cc1818;
-  animation: components-validated-control__error-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+.components-validated-control__indicator.is-valid {
+  color: color-mix(in srgb, #000 30%, #4ab866);
 }
 
-.components-validated-control__error-icon {
+.components-validated-control__indicator-icon {
   flex-shrink: 0;
 }
 
-@keyframes components-validated-control__error-jump {
+.components-validated-control__indicator-spinner {
+  margin: 2px;
+  width: 12px;
+  height: 12px;
+}
+
+@keyframes components-validated-control__indicator-jump {
   0% {
     transform: translateY(-4px);
     opacity: 0;

package/build-style/style.css

@@ -594,8 +594,8 @@ p + .components-button.is-tertiary {
   position: relative; /* Required to position the navigation toolbar. */
   box-sizing: border-box;
   display: inline flow-root;
-  color: #1e1e1e;
-  background-color: #fff;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  background-color: var(--wp-components-color-background, #fff);
   font-size: 13px;
   font-weight: 400;
   z-index: 0;
@@ -611,7 +611,7 @@ p + .components-button.is-tertiary {
   position: relative;
 }
 .components-calendar__day:has(.components-calendar__day-button:disabled) {
-  color: #949494;
+  color: var(--wp-components-color-gray-600, #949494);
 }
 .components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -626,8 +626,8 @@ p + .components-button.is-tertiary {
   align-items: center;
   display: flex;
   position: relative;
-  width: 2rem;
-  height: 2rem;
+  width: 32px;
+  height: 32px;
   border: none;
   border-radius: 2px;
   font: inherit;
@@ -687,15 +687,15 @@ p + .components-button.is-tertiary {
   justify-content: center;
   position: relative;
   appearance: none;
-  width: 2rem;
-  height: 2rem;
+  width: 32px;
+  height: 32px;
   color: inherit;
 }
 .components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
 .components-calendar__button-previous:disabled,
 .components-calendar__button-previous[aria-disabled=true] {
   cursor: revert;
-  color: #949494;
+  color: var(--wp-components-color-gray-600, #949494);
 }
 .components-calendar__button-next:focus-visible,
 .components-calendar__button-previous:focus-visible {
@@ -718,7 +718,7 @@ p + .components-button.is-tertiary {
   display: flex;
   justify-content: center;
   align-content: center;
-  height: 2rem;
+  height: 32px;
   margin-bottom: 12px;
 }
 
@@ -727,7 +727,7 @@ p + .components-button.is-tertiary {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 16px;
   max-width: fit-content;
 }
 
@@ -744,14 +744,14 @@ p + .components-button.is-tertiary {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 2rem;
+  height: 32px;
 }
 
 .components-calendar__weekday {
-  width: 2rem;
-  height: 2rem;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   text-align: center;
   text-transform: uppercase;
 }
@@ -771,17 +771,17 @@ p + .components-button.is-tertiary {
 
 .components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
 .components-calendar__day-button:hover:not(:disabled)) {
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
-  background-color: #1e1e1e;
+  background-color: var(--wp-components-color-foreground, #1e1e1e);
   border: 1px solid transparent;
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
-  background-color: #949494;
+  background-color: var(--wp-components-color-gray-600, #949494);
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
-  background-color: #2f2f2f;
+  background-color: var(--wp-components-color-gray-800, #2f2f2f);
 }
 
 .components-calendar__day--hidden {
@@ -3864,7 +3864,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   pointer-events: none;
 }
 
-.components-validated-control__error {
+.components-validated-control__indicator {
   display: flex;
   align-items: flex-start;
   gap: 4px;
@@ -3872,15 +3872,27 @@ div.components-toolbar > div + div.has-left-divider::before {
   font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 0.75rem;
   line-height: 16px;
+  color: var(--wp-components-color-gray-700, #757575);
+  animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+.components-validated-control__indicator.is-invalid {
   color: #cc1818;
-  animation: components-validated-control__error-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+.components-validated-control__indicator.is-valid {
+  color: color-mix(in srgb, #000 30%, #4ab866);
 }
 
-.components-validated-control__error-icon {
+.components-validated-control__indicator-icon {
   flex-shrink: 0;
 }
 
-@keyframes components-validated-control__error-jump {
+.components-validated-control__indicator-spinner {
+  margin: 2px;
+  width: 12px;
+  height: 12px;
+}
+
+@keyframes components-validated-control__indicator-jump {
   0% {
     transform: translateY(-4px);
     opacity: 0;

package/build-types/menu-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/menu-item/index.tsx"],"names":[],"mappings":"AAsFA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,QAAQ;;;;WAhFjB,IAAK,OAAO;;;;;;;;;;wUAgFyC,CAAC;AAE1D,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/menu-item/index.tsx"],"names":[],"mappings":"AAuFA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,QAAQ;;;;WAjFjB,IAAK,OAAO;;;;;;;;;;wUAiFyC,CAAC;AAE1D,eAAe,QAAQ,CAAC"}

package/build-types/validated-form-controls/components/checkbox-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/checkbox-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAmDrD,eAAO,MAAM,wBAAwB;;;;;;sXAEpC,CAAC"}
+{"version":3,"file":"checkbox-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/checkbox-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAqDrD,eAAO,MAAM,wBAAwB;;;;;;sXAEpC,CAAC"}

package/build-types/validated-form-controls/components/combobox-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/combobox-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AA8DzE,eAAO,MAAM,wBAAwB;;;UAjDQ,MAAO,SAElD;;;;;;;;;;;;;;6JAiDD,CAAC"}
+{"version":3,"file":"combobox-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/combobox-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAgEzE,eAAO,MAAM,wBAAwB;;;UAlDL,MAAO,SAAS;;;;;;;;;;;;;;6JAoD/C,CAAC"}

package/build-types/validated-form-controls/components/custom-select-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-select-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/custom-select-control.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,KAAK,EACX,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,mCAAmC,CAAC;AAqE3C,eAAO,MAAM,4BAA4B,kOAExC,CAAC"}
+{"version":3,"file":"custom-select-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/custom-select-control.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,KAAK,EACX,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,mCAAmC,CAAC;AAuE3C,eAAO,MAAM,4BAA4B,kOAExC,CAAC"}

package/build-types/validated-form-controls/components/input-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/input-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AA4CnE,eAAO,MAAM,qBAAqB,0PAEjC,CAAC"}
+{"version":3,"file":"input-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/input-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AA8CnE,eAAO,MAAM,qBAAqB,0PAEjC,CAAC"}

package/build-types/validated-form-controls/components/number-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/number-control.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+CrD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;urLAElC,CAAC"}
+{"version":3,"file":"number-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/number-control.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiDrD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;urLAElC,CAAC"}

package/build-types/validated-form-controls/components/radio-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/radio-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+CrD,eAAO,MAAM,qBAAqB;;;;;mBAhCJ,CAAC;;;kUAkC9B,CAAC"}
+{"version":3,"file":"radio-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/radio-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiDrD,eAAO,MAAM,qBAAqB;;;;;mBAjCjB,CAAC;;;kUAmCjB,CAAC"}

package/build-types/validated-form-controls/components/range-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/range-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+CrD,eAAO,MAAM,qBAAqB;;;;aAnBZ,CAAC;;;;;;;;;;;;;;qBAsBq9E,CAAC;;;;;iCAAmuB,CAAC;;;;;;;;;;45BADhtG,CAAC"}
+{"version":3,"file":"range-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/range-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiDrD,eAAO,MAAM,qBAAqB;;;;aApBzB,CAAC;;;;;;;;;;;;;;qBAuB07E,CAAC;;;;;iCAAmuB,CAAC;;;;;;;;;;45BADxqG,CAAC"}

package/build-types/validated-form-controls/components/select-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/select-control.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AA4D5F,eAAO,MAAM,sBAAsB;UAGkxF,MAAO,GAAG;;YAnCrzF,MAAM;cACJ,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI;yGAiCpC,CAAC"}
+{"version":3,"file":"select-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/select-control.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AA8D5F,eAAO,MAAM,sBAAsB;UAG0uF,MAAO,GAAG;;YApC7wF,MAAM;cACJ,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI;yGAkCpC,CAAC"}

package/build-types/validated-form-controls/components/stories/checkbox-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/checkbox-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,wBAAwB,CAYhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CAe9D,CAAC"}
+{"version":3,"file":"checkbox-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/checkbox-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,wBAAwB,CAYhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CAgC9D,CAAC"}

package/build-types/validated-form-controls/components/stories/combobox-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/combobox-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,wBAAwB,CAUhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CAoB9D,CAAC"}
+{"version":3,"file":"combobox-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/combobox-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,wBAAwB,CAUhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CAqC9D,CAAC"}

package/build-types/validated-form-controls/components/stories/custom-select-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-select-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/custom-select-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAGxE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,4BAA4B,CAUpD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,4BAA4B,CAoBlE,CAAC"}
+{"version":3,"file":"custom-select-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/custom-select-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAGxE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,4BAA4B,CAUpD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,4BAA4B,CAqClE,CAAC"}

package/build-types/validated-form-controls/components/stories/input-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/input-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAOvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAKzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAgB7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkB3D,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAgC5D,CAAC"}
+{"version":3,"file":"input-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/input-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAOvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAKzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAgB7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAmC3D,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkE5D,CAAC"}

package/build-types/validated-form-controls/components/stories/number-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/number-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAc9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAkB5D,CAAC"}
+{"version":3,"file":"number-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/number-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAc9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAmC5D,CAAC"}

package/build-types/validated-form-controls/components/stories/overview.story.d.ts

@@ -2,6 +2,10 @@
  * External dependencies
  */
 import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { ValidatedInputControl } from '..';
 import type { ControlWithError } from '../../control-with-error';
 declare const meta: Meta<typeof ControlWithError>;
 export default meta;
@@ -16,4 +20,13 @@ export declare const WithMultipleControls: Story;
  * will depend on context.
  */
 export declare const WithHelpTextReplacement: Story;
+/**
+ * To provide feedback from server-side validation, the `customValidity` prop can be used
+ * to show additional status indicators while waiting for the server response,
+ * and after the response is received.
+ *
+ * These indicators are intended for asynchronous validation calls that may take more than 1 second to complete.
+ * They may be unnecessary when responses are generally quick.
+ */
+export declare const AsyncValidation: StoryObj<typeof ValidatedInputControl>;
 //# sourceMappingURL=overview.story.d.ts.map

package/build-types/validated-form-controls/components/stories/overview.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/overview.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAIxC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,gBAAgB,CAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAoClC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KA2BrC,CAAC"}
+{"version":3,"file":"overview.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/overview.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAIxC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,gBAAgB,CAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA0DlC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAmCrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA8DnE,CAAC"}

package/build-types/validated-form-controls/components/stories/radio-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/radio-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAU7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAoB3D,CAAC"}
+{"version":3,"file":"radio-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/radio-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAU7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAqC3D,CAAC"}

package/build-types/validated-form-controls/components/stories/range-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/range-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAU7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkB3D,CAAC"}
+{"version":3,"file":"range-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/range-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAU7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAmC3D,CAAC"}

package/build-types/validated-form-controls/components/stories/select-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/select-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAe5D,CAAC"}
+{"version":3,"file":"select-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/select-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAgC5D,CAAC"}

package/build-types/validated-form-controls/components/stories/text-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/text-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,oBAAoB,CAU5C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,oBAAoB,CAe1D,CAAC"}
+{"version":3,"file":"text-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/text-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,oBAAoB,CAU5C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,oBAAoB,CAgC1D,CAAC"}

package/build-types/validated-form-controls/components/stories/textarea-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/textarea-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,wBAAwB,CAQhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CAe9D,CAAC"}
+{"version":3,"file":"textarea-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/textarea-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,wBAAwB,CAQhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CAgC9D,CAAC"}

package/build-types/validated-form-controls/components/stories/toggle-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAe5D,CAAC"}
+{"version":3,"file":"toggle-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAgC5D,CAAC"}

package/build-types/validated-form-controls/components/stories/toggle-group-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-group-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAGtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,2BAA2B,CAUnD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,2BAA2B,CAoBjE,CAAC"}
+{"version":3,"file":"toggle-group-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-group-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAGtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,2BAA2B,CAUnD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,2BAA2B,CAqCjE,CAAC"}

package/build-types/validated-form-controls/components/text-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/text-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+CrD,eAAO,MAAM,oBAAoB;;;;;+eAEhC,CAAC"}
+{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/text-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiDrD,eAAO,MAAM,oBAAoB;;;;;+eAEhC,CAAC"}

package/build-types/validated-form-controls/components/textarea-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/textarea-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA8CrD,eAAO,MAAM,wBAAwB;;;;mbAEpC,CAAC"}
+{"version":3,"file":"textarea-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/textarea-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAgDrD,eAAO,MAAM,wBAAwB;;;;mbAEpC,CAAC"}

package/build-types/validated-form-controls/components/toggle-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAwDrD,eAAO,MAAM,sBAAsB;;;;6aAElC,CAAC"}
+{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA0DrD,eAAO,MAAM,sBAAsB;;;;6aAElC,CAAC"}

package/build-types/validated-form-controls/components/toggle-group-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-group-control.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAsErD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;2lBAEvC,CAAC"}
+{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-group-control.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAwErD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;2lBAEvC,CAAC"}

package/build-types/validated-form-controls/components/types.d.ts

@@ -10,18 +10,29 @@ export type ValidatedControlProps<V> = {
      */
     markWhenOptional?: boolean;
     /**
-     * A function that returns a custom validity message when applicable. This error message will be applied to the
-     * underlying element using the native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).
-     * This means the custom validator will be run _in addition_ to any other HTML attribute-based validation, and
-     * will be prioritized over any existing validity messages dictated by the HTML attributes.
-     * An empty string or `undefined` return value will clear any existing custom validity message.
+     * Optional callback to run when the input should be validated. Use this to set
+     * a `customValidity` as necessary.
      *
-     * Make sure you don't programatically pass a value (such as an initial value) to the control component
-     * that fails this validator, because the validator will only run for user-initiated changes.
+     * Always prefer using standard HTML attributes like `required` and `min`/`max` over
+     * custom validators when possible, as they are simpler and have localized error messages built in.
+     */
+    onValidate?: (currentValue: V) => void;
+    /**
+     * Show a custom message based on the validation status.
      *
-     * Always prefer using standard HTML attributes like `required` and `min`/`max` over custom validators
-     * when possible, as they are simpler and have localized error messages built in.
+     * - When `type` is `invalid`, the message will be applied to the underlying element using the
+     * native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).
+     * This means the custom message will be prioritized over any existing validity messages
+     * triggered by HTML attribute-based validation.
+     * - When `type` is `validating` or `valid`, the custom validity message of the underlying element
+     * will be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,
+     * the message will be presented as a status indicator rather than an error. These indicators are intended
+     * for asynchronous validation calls that may take more than 1 second to complete.
+     * Otherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`.
      */
-    customValidator?: (currentValue: V) => string | void;
+    customValidity?: {
+        type: 'validating' | 'valid' | 'invalid';
+        message: string;
+    };
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/validated-form-controls/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,CAAE,CAAC,IAAK;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;;;;;;OAYG;IAGH,eAAe,CAAC,EAAE,CAAE,YAAY,EAAE,CAAC,KAAM,MAAM,GAAG,IAAI,CAAC;CACvD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,CAAE,CAAC,IAAK;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAE,YAAY,EAAE,CAAC,KAAM,IAAI,CAAC;IACzC;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE;QAChB,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;QACzC,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;CACF,CAAC"}

package/build-types/validated-form-controls/control-with-error.d.ts

@@ -1,3 +1,4 @@
+import type { ValidatedControlProps } from './components/types';
 /**
  * HTML elements that support the Constraint Validation API.
  *
@@ -17,12 +18,10 @@ export declare const ControlWithError: import("react").ForwardRefExoticComponent
      */
     markWhenOptional?: boolean;
     /**
-     * A function that returns a custom validity message when applicable.
-     *
-     * This message will be applied to the element returned by `getValidityTarget`.
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity
+     * The callback to run when the input should be validated.
      */
-    customValidator?: () => string | void;
+    onValidate?: () => void;
+    customValidity?: ValidatedControlProps<unknown>["customValidity"];
     /**
      * A function that returns the actual element on which the validity data should be applied.
      */

package/build-types/validated-form-controls/control-with-error.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AA6CA;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AA4IvB,eAAO,MAAM,gBAAgB;IAlI3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;;;;OAKG;sBACe,MAAM,MAAM,GAAG,IAAI;IACrC;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;OAEG;;kDA6GoE,CAAC"}
+{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyBhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAgMvB,eAAO,MAAM,gBAAgB;IArL3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;OAEG;iBACU,MAAM,IAAI;qBACN,qBAAqB,CAAE,OAAO,CAAE,CAAE,gBAAgB,CAAE;IACrE;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;OAEG;;kDAkKoE,CAAC"}

package/build-types/validated-form-controls/validity-indicator.d.ts

@@ -0,0 +1,5 @@
+export declare function ValidityIndicator({ type, message, }: {
+    type: 'validating' | 'valid' | 'invalid';
+    message?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=validity-indicator.d.ts.map

package/build-types/validated-form-controls/validity-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validity-indicator.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/validity-indicator.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAE,EAClC,IAAI,EACJ,OAAO,GACP,EAAE;IACF,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,+BAyBA"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.2.1-next.0f6f9d12c.0",
+	"version": "30.2.1-next.f34ab90e9.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.28.1-next.0f6f9d12c.0",
-		"@wordpress/compose": "^7.28.1-next.0f6f9d12c.0",
-		"@wordpress/date": "^5.28.1-next.0f6f9d12c.0",
-		"@wordpress/deprecated": "^4.28.1-next.0f6f9d12c.0",
-		"@wordpress/dom": "^4.28.1-next.0f6f9d12c.0",
-		"@wordpress/element": "^6.28.1-next.0f6f9d12c.0",
-		"@wordpress/escape-html": "^3.28.1-next.0f6f9d12c.0",
-		"@wordpress/hooks": "^4.28.1-next.0f6f9d12c.0",
-		"@wordpress/html-entities": "^4.28.1-next.0f6f9d12c.0",
-		"@wordpress/i18n": "^6.1.1-next.0f6f9d12c.0",
-		"@wordpress/icons": "^10.28.2-next.0f6f9d12c.0",
-		"@wordpress/is-shallow-equal": "^5.28.1-next.0f6f9d12c.0",
-		"@wordpress/keycodes": "^4.28.1-next.0f6f9d12c.0",
-		"@wordpress/primitives": "^4.28.1-next.0f6f9d12c.0",
-		"@wordpress/private-apis": "^1.28.1-next.0f6f9d12c.0",
-		"@wordpress/rich-text": "^7.28.1-next.0f6f9d12c.0",
-		"@wordpress/warning": "^3.28.1-next.0f6f9d12c.0",
+		"@wordpress/a11y": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/compose": "^7.29.1-next.f34ab90e9.0",
+		"@wordpress/date": "^5.29.1-next.f34ab90e9.0",
+		"@wordpress/deprecated": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/dom": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/element": "^6.29.1-next.f34ab90e9.0",
+		"@wordpress/escape-html": "^3.29.1-next.f34ab90e9.0",
+		"@wordpress/hooks": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/html-entities": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/i18n": "^6.2.1-next.f34ab90e9.0",
+		"@wordpress/icons": "^10.29.1-next.f34ab90e9.0",
+		"@wordpress/is-shallow-equal": "^5.29.1-next.f34ab90e9.0",
+		"@wordpress/keycodes": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/primitives": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/private-apis": "^1.29.1-next.f34ab90e9.0",
+		"@wordpress/rich-text": "^7.29.1-next.f34ab90e9.0",
+		"@wordpress/warning": "^3.29.1-next.f34ab90e9.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7d4f4367e2f76deddf4a09b540e6b2f9f4c3fe9f"
+	"gitHead": "91f58004986ec6faf118825f925ac7873d171986"
 }