diff --git a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap
index 89c2321e6..d505ac499 100644
--- a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap
@@ -33,6 +33,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (1)
                   <div class="gux-input-container">
                     <slot name="prefix"></slot>
                     <slot name="input"></slot>
+                    <div role="status"></div>
                     <slot name="suffix"></slot>
                   </div>
                 </div>
@@ -109,6 +110,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (2)
                   <div class="gux-input-container">
                     <slot name="prefix"></slot>
                     <slot name="input"></slot>
+                    <div role="status"></div>
                     <slot name="suffix"></slot>
                   </div>
                 </div>
@@ -185,6 +187,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (3)
                   <div class="gux-input-container">
                     <slot name="prefix"></slot>
                     <slot name="input"></slot>
+                    <div role="status"></div>
                     <slot name="suffix"></slot>
                   </div>
                 </div>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/example.html b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/example.html
index a6664ef75..64491b98c 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/example.html
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/example.html
@@ -213,6 +213,14 @@ <h2>Examples</h2>
     </gux-form-field-text-like>
   </fieldset>
 
+  <fieldset>
+    <legend>Loading dynamically set</legend>
+    <gux-form-field-text-like id="dynamic-loading" loading>
+      <input slot="input" type="text" name="e-1" />
+      <label slot="label">Default</label>
+    </gux-form-field-text-like>
+  </fieldset>
+
   <fieldset>
     <legend>Label Info</legend>
     <gux-form-field-text-like loading>
@@ -232,7 +240,13 @@ <h2>Examples</h2>
   </fieldset>
 </form>
 
-<style>
+<style
+  onload="(function () {
+  window.setInterval(() => {
+    document.getElementById('dynamic-loading').toggleAttribute('loading');
+  }, 3000);
+})()"
+>
   gux-form-field-text-like {
     margin: 10px;
   }
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx
index 5942e1e94..5d15c0077 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx
@@ -153,7 +153,9 @@ export class GuxFormFieldTextLike {
   private renderRadialLoading(): JSX.Element {
     if (this.loading) {
       return (
-        <gux-radial-loading context="input"></gux-radial-loading>
+        <div role="status">
+          <gux-radial-loading context="input"></gux-radial-loading>
+        </div>
       ) as JSX.Element;
     }
   }
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.e2e.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.e2e.ts.snap
index 46e774e78..7743c09d3 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.e2e.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.e2e.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`gux-form-field-text-like #render clearable should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render clearable should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render clearable should render component as expected (1) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -14,6 +14,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -32,7 +33,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
 </div>
 `;
 
-exports[`gux-form-field-text-like #render clearable should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" clearable="" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot><gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render clearable should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" clearable="" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot><gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render clearable should render component as expected (2) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -46,6 +47,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
         <gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button>
       </div>
@@ -65,7 +67,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
 </div>
 `;
 
-exports[`gux-form-field-text-like #render clearable should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" clearable="true" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot><gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render clearable should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" clearable="true" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot><gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render clearable should render component as expected (3) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -79,6 +81,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
         <gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button>
       </div>
@@ -98,7 +101,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
 </div>
 `;
 
-exports[`gux-form-field-text-like #render clearable should render component as expected (4) 1`] = `"<gux-form-field-text-like lang="en" clearable="false" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render clearable should render component as expected (4) 1`] = `"<gux-form-field-text-like lang="en" clearable="false" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render clearable should render component as expected (4) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -112,6 +115,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -130,7 +134,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
 </div>
 `;
 
-exports[`gux-form-field-text-like #render clearable should render component as expected (5) 1`] = `"<gux-form-field-text-like lang="en" clearable="" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-disabled"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" disabled="" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render clearable should render component as expected (5) 1`] = `"<gux-form-field-text-like lang="en" clearable="" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-disabled"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" disabled="" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render clearable should render component as expected (5) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -144,6 +148,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
       <div class="gux-disabled gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -162,7 +167,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
 </div>
 `;
 
-exports[`gux-form-field-text-like #render help should render component as expected 1`] = `"<gux-form-field-text-like hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help gux-show"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" name="e-1" id="gux-form-field-input-i" aria-describedby="gux-form-field-help-i"> <label slot="label" for="gux-form-field-input-i">Default</label> <span slot="help" id="gux-form-field-help-i">This is a help message</span> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render help should render component as expected 1`] = `"<gux-form-field-text-like hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help gux-show"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" name="e-1" id="gux-form-field-input-i" aria-describedby="gux-form-field-help-i"> <label slot="label" for="gux-form-field-input-i">Default</label> <span slot="help" id="gux-form-field-help-i">This is a help message</span> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render help should render component as expected 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -176,6 +181,7 @@ exports[`gux-form-field-text-like #render help should render component as expect
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -194,7 +200,7 @@ exports[`gux-form-field-text-like #render help should render component as expect
 </div>
 `;
 
-exports[`gux-form-field-text-like #render input type attribute should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="email" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render input type attribute should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="email" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render input type attribute should render component as expected (1) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -208,6 +214,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -226,7 +233,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
 </div>
 `;
 
-exports[`gux-form-field-text-like #render input type attribute should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="password" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render input type attribute should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="password" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render input type attribute should render component as expected (2) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -240,6 +247,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -258,7 +266,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
 </div>
 `;
 
-exports[`gux-form-field-text-like #render input type attribute should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render input type attribute should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render input type attribute should render component as expected (3) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -272,6 +280,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -290,7 +299,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
 </div>
 `;
 
-exports[`gux-form-field-text-like #render label-position should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render label-position should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render label-position should render component as expected (1) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -304,6 +313,7 @@ exports[`gux-form-field-text-like #render label-position should render component
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -322,7 +332,7 @@ exports[`gux-form-field-text-like #render label-position should render component
 </div>
 `;
 
-exports[`gux-form-field-text-like #render label-position should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" label-position="above" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-above"><div class="gux-form-field-label gux-above"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render label-position should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" label-position="above" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-above"><div class="gux-form-field-label gux-above"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render label-position should render component as expected (2) 2`] = `
 <div class="gux-above gux-form-field-container">
@@ -336,6 +346,7 @@ exports[`gux-form-field-text-like #render label-position should render component
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -354,7 +365,7 @@ exports[`gux-form-field-text-like #render label-position should render component
 </div>
 `;
 
-exports[`gux-form-field-text-like #render label-position should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" label-position="beside" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render label-position should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" label-position="beside" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render label-position should render component as expected (3) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -368,6 +379,7 @@ exports[`gux-form-field-text-like #render label-position should render component
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -386,7 +398,7 @@ exports[`gux-form-field-text-like #render label-position should render component
 </div>
 `;
 
-exports[`gux-form-field-text-like #render label-position should render component as expected (4) 1`] = `"<gux-form-field-text-like lang="en" label-position="screenreader" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-screenreader"><div class="gux-form-field-label gux-screenreader"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render label-position should render component as expected (4) 1`] = `"<gux-form-field-text-like lang="en" label-position="screenreader" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-screenreader"><div class="gux-form-field-label gux-screenreader"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render label-position should render component as expected (4) 2`] = `
 <div class="gux-form-field-container gux-screenreader">
@@ -400,6 +412,7 @@ exports[`gux-form-field-text-like #render label-position should render component
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -418,7 +431,7 @@ exports[`gux-form-field-text-like #render label-position should render component
 </div>
 `;
 
-exports[`gux-form-field-text-like #render loading should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render loading should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render loading should render component as expected (1) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -432,6 +445,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -450,7 +464,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
 </div>
 `;
 
-exports[`gux-form-field-text-like #render loading should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" loading="" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><gux-radial-loading hydrated=""></gux-radial-loading><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render loading should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" loading="" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"><gux-radial-loading hydrated=""></gux-radial-loading></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render loading should render component as expected (2) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -464,7 +478,9 @@ exports[`gux-form-field-text-like #render loading should render component as exp
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
-        <gux-radial-loading hydrated=""></gux-radial-loading>
+        <div role="status">
+          <gux-radial-loading hydrated=""></gux-radial-loading>
+        </div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -483,7 +499,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
 </div>
 `;
 
-exports[`gux-form-field-text-like #render loading should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" loading="true" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><gux-radial-loading hydrated=""></gux-radial-loading><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render loading should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" loading="true" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"><gux-radial-loading hydrated=""></gux-radial-loading></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render loading should render component as expected (3) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -497,7 +513,9 @@ exports[`gux-form-field-text-like #render loading should render component as exp
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
-        <gux-radial-loading hydrated=""></gux-radial-loading>
+        <div role="status">
+          <gux-radial-loading hydrated=""></gux-radial-loading>
+        </div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -516,7 +534,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
 </div>
 `;
 
-exports[`gux-form-field-text-like #render loading should render component as expected (4) 1`] = `"<gux-form-field-text-like lang="en" loading="false" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render loading should render component as expected (4) 1`] = `"<gux-form-field-text-like lang="en" loading="false" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render loading should render component as expected (4) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -530,6 +548,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -548,7 +567,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
 </div>
 `;
 
-exports[`gux-form-field-text-like #render loading should render component as expected (5) 1`] = `"<gux-form-field-text-like lang="en" loading="" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-disabled"><slot name="prefix"></slot><slot name="input"></slot><gux-radial-loading hydrated=""></gux-radial-loading><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" disabled="" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render loading should render component as expected (5) 1`] = `"<gux-form-field-text-like lang="en" loading="" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-disabled"><slot name="prefix"></slot><slot name="input"></slot><div role="status"><gux-radial-loading hydrated=""></gux-radial-loading></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" disabled="" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render loading should render component as expected (5) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -562,7 +581,9 @@ exports[`gux-form-field-text-like #render loading should render component as exp
       <div class="gux-disabled gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
-        <gux-radial-loading hydrated=""></gux-radial-loading>
+        <div role="status">
+          <gux-radial-loading hydrated=""></gux-radial-loading>
+        </div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -581,7 +602,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
 </div>
 `;
 
-exports[`gux-form-field-text-like #render prefix should render component as expected 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-has-prefix"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <span slot="prefix" id="gux-prefix-i">Prefix</span> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i" aria-describedby="gux-prefix-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render prefix should render component as expected 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-has-prefix"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <span slot="prefix" id="gux-prefix-i">Prefix</span> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i" aria-describedby="gux-prefix-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render prefix should render component as expected 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -595,6 +616,7 @@ exports[`gux-form-field-text-like #render prefix should render component as expe
       <div class="gux-has-prefix gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -613,7 +635,7 @@ exports[`gux-form-field-text-like #render prefix should render component as expe
 </div>
 `;
 
-exports[`gux-form-field-text-like #render suffix should render component as expected 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-has-suffix"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i" aria-describedby="gux-suffix-i"> <span slot="suffix" id="gux-suffix-i">Suffix</span> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like #render suffix should render component as expected 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-has-suffix"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i" aria-describedby="gux-suffix-i"> <span slot="suffix" id="gux-suffix-i">Suffix</span> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like #render suffix should render component as expected 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -627,6 +649,7 @@ exports[`gux-form-field-text-like #render suffix should render component as expe
       <div class="gux-has-suffix gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -645,7 +668,7 @@ exports[`gux-form-field-text-like #render suffix should render component as expe
 </div>
 `;
 
-exports[`gux-form-field-text-like input attributes should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like input attributes should render component as expected (1) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like input attributes should render component as expected (1) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -659,6 +682,7 @@ exports[`gux-form-field-text-like input attributes should render component as ex
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -677,7 +701,7 @@ exports[`gux-form-field-text-like input attributes should render component as ex
 </div>
 `;
 
-exports[`gux-form-field-text-like input attributes should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-disabled"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" disabled="" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like input attributes should render component as expected (2) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container gux-disabled"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" disabled="" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like input attributes should render component as expected (2) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -691,6 +715,7 @@ exports[`gux-form-field-text-like input attributes should render component as ex
       <div class="gux-disabled gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
@@ -709,7 +734,7 @@ exports[`gux-form-field-text-like input attributes should render component as ex
 </div>
 `;
 
-exports[`gux-form-field-text-like input attributes should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-required gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""><span class="gux-form-field-label-indicator-required" aria-hidden="true">*</span></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div></template> <input slot="input" type="text" value="Sample text" required="" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
+exports[`gux-form-field-text-like input attributes should render component as expected (3) 1`] = `"<gux-form-field-text-like lang="en" hydrated=""><template shadowrootmode="open"><div class="gux-form-field-container gux-beside"><div class="gux-form-field-label gux-required gux-beside"><slot name="label"></slot><gux-form-field-label-indicator hydrated=""><span class="gux-form-field-label-indicator-required" aria-hidden="true">*</span></gux-form-field-label-indicator><slot name="label-info"></slot></div><div class="gux-input-and-error-container"><div class="gux-input"><div class="gux-input-container"><slot name="prefix"></slot><slot name="input"></slot><div role="status"></div><slot name="suffix"></slot></div></div><div class="gux-form-field-error"><gux-icon icon-name="fa/hexagon-exclamation-solid" size="small" hydrated=""></gux-icon><div class="gux-message"><slot name="error"></slot></div></div><div class="gux-form-field-help"><div class="gux-message"><slot name="help"></slot></div></div></div></div><style>.gux-form-field-label-indicator-required{padding-inline-start:var(--gse-ui-formControl-formField-gap);color:var(--gse-ui-formControl-label-indicator-requiredColor)}.gux-form-field-label-indicator-optional{margin-inline-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-label-indicator-text-fontFamily);font-size:var(--gse-ui-formControl-label-indicator-text-fontSize);font-weight:var(--gse-ui-formControl-label-indicator-text-fontWeight);line-height:var(--gse-ui-formControl-label-indicator-text-lineHeight);color:var(--gse-ui-formControl-label-indicator-optionalColor)}</style></template> <input slot="input" type="text" value="Sample text" required="" id="gux-form-field-input-i"> <label slot="label" for="gux-form-field-input-i">Label</label> </gux-form-field-text-like>"`;
 
 exports[`gux-form-field-text-like input attributes should render component as expected (3) 2`] = `
 <div class="gux-beside gux-form-field-container">
@@ -727,6 +752,7 @@ exports[`gux-form-field-text-like input attributes should render component as ex
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
+        <div role="status"></div>
         <slot name="suffix"></slot>
       </div>
     </div>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.spec.ts.snap
index b523ae08d..6baa05f68 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -52,6 +53,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
             <gux-form-field-input-clear-button></gux-form-field-input-clear-button>
           </div>
@@ -91,6 +93,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
             <gux-form-field-input-clear-button></gux-form-field-input-clear-button>
           </div>
@@ -130,6 +133,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -168,6 +172,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
           <div class="gux-disabled gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -206,6 +211,7 @@ exports[`gux-form-field-text-like #render error should render component as expec
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -247,6 +253,7 @@ exports[`gux-form-field-text-like #render help should render component as expect
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -288,6 +295,7 @@ exports[`gux-form-field-text-like #render indicator marks should render componen
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -326,6 +334,7 @@ exports[`gux-form-field-text-like #render indicator marks should render componen
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -364,6 +373,7 @@ exports[`gux-form-field-text-like #render indicator marks should render componen
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -402,6 +412,7 @@ exports[`gux-form-field-text-like #render input attributes should render compone
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -440,6 +451,7 @@ exports[`gux-form-field-text-like #render input attributes should render compone
           <div class="gux-disabled gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -478,6 +490,7 @@ exports[`gux-form-field-text-like #render input attributes should render compone
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -516,6 +529,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -554,6 +568,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -592,6 +607,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -630,6 +646,7 @@ exports[`gux-form-field-text-like #render label-info should render component as
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -673,6 +690,7 @@ exports[`gux-form-field-text-like #render label-position should render component
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -711,6 +729,7 @@ exports[`gux-form-field-text-like #render label-position should render component
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -749,6 +768,7 @@ exports[`gux-form-field-text-like #render label-position should render component
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -787,6 +807,7 @@ exports[`gux-form-field-text-like #render label-position should render component
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -825,6 +846,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -863,7 +885,9 @@ exports[`gux-form-field-text-like #render loading should render component as exp
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
-            <gux-radial-loading context="input"></gux-radial-loading>
+            <div role="status">
+              <gux-radial-loading context="input"></gux-radial-loading>
+            </div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -902,7 +926,9 @@ exports[`gux-form-field-text-like #render loading should render component as exp
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
-            <gux-radial-loading context="input"></gux-radial-loading>
+            <div role="status">
+              <gux-radial-loading context="input"></gux-radial-loading>
+            </div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -941,6 +967,7 @@ exports[`gux-form-field-text-like #render loading should render component as exp
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -979,7 +1006,9 @@ exports[`gux-form-field-text-like #render loading should render component as exp
           <div class="gux-disabled gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
-            <gux-radial-loading context="input"></gux-radial-loading>
+            <div role="status">
+              <gux-radial-loading context="input"></gux-radial-loading>
+            </div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -1018,6 +1047,7 @@ exports[`gux-form-field-text-like #render prefix should render component as expe
           <div class="gux-has-prefix gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>
@@ -1059,6 +1089,7 @@ exports[`gux-form-field-text-like #render suffix should render component as expe
           <div class="gux-has-suffix gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
+            <div role="status"></div>
             <slot name="suffix"></slot>
           </div>
         </div>