@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.1

package/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap

@@ -8,68 +8,82 @@ exports[`numberInput disables lower threshold 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="true"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-Button-control-13"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-control-13"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-14"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-14"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -83,68 +97,82 @@ exports[`numberInput disables upper threshold 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-15"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-15"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-8"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="100"
-      />
-      <button
-        aria-disabled="true"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-Button-control-16"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="100"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-control-16"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -158,69 +186,83 @@ exports[`numberInput passes button props successfully 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-25"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        id="minus-id"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-25"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          id="minus-id"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-13"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-26"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        id="plus-id"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-13"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-26"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          id="plus-id"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -234,67 +276,82 @@ exports[`numberInput passes input props successfully 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-23"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-23"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-12"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        name="test-name"
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-24"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            name="test-name"
+            type="number"
+            value="5"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-24"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -309,67 +366,81 @@ exports[`numberInput renders custom width 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-21"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-21"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-11"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-22"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-22"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -384,67 +455,81 @@ exports[`numberInput renders defaults & extra props 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-2"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -458,70 +543,84 @@ exports[`numberInput renders disabled 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="true"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-Button-control-11"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-control-11"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        disabled=""
-        readonly=""
-        type="number"
-        value="90"
-      />
-      <button
-        aria-disabled="true"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-Button-control-12"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control pf-m-disabled"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            type="number"
+            value="90"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-control-12"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -535,67 +634,100 @@ exports[`numberInput renders error validated 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-5"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-5"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control pf-m-error"
+        >
+          <input
+            aria-invalid="true"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="true"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-6"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-6"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -609,67 +741,100 @@ exports[`numberInput renders success validated 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-3"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-3"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control pf-m-success"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-4"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control pf-m-success"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
+          >
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-4"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -688,67 +853,81 @@ exports[`numberInput renders unit & position 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-19"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-19"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-20"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-20"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -762,67 +941,81 @@ exports[`numberInput renders unit 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-17"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-17"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-9"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-18"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-18"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
     <div
       class="pf-v5-c-number-input__unit"
@@ -841,67 +1034,81 @@ exports[`numberInput renders value 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-9"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-9"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="90"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-10"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="90"
+          />
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-10"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -915,67 +1122,100 @@ exports[`numberInput renders warning validated 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-7"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-7"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control pf-m-warning"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-8"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <div
+          class="pf-v5-c-form-control pf-m-warning"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
+          >
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 576 512"
+              >
+                <path
+                  d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-8"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>