Floating labels incorrectly positioned for inputs with autofill, but no value

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Floating labels get stuck in their transformed position for inputs that were initially auto-filled by the browser, but cleared programmatically using javascript.
ex.

$('input').val('')

example html:

<div class="form-floating string">
  <input class="form-control string" id="field" placeholder="placeholder" type="text">
  <label class="string" for="field"> Username </label>
</div>

Even though the input in its current state doesn't have any value attribute (the same applies if value=""),
it still holds its :autofill pseudo-class, therefore incorrect css rules are being applied to its label.

important note:

I observed this issue in the Firefox browser. This may be irrelevant for other browsers.

Reduced test cases

here is an example html body

<form id="login-form" action="/" accept-charset="UTF-8">
  <div class="form-floating mb-3 string required col-4">
    <input class="form-control string required" required="required" aria-required="true" placeholder="Username" type="text" id="username">
    <label class="string required custom-label" for="username"> Username </label>
  </div>

  <div class="form-floating mb-3 password required col-4">
    <input class="form-control password required" required="required" aria-required="true" placeholder="Password" type="password" id="password">
    <label class="password required custom-label" for="password"> Password </label>
  </div>

  <div class="actions mt-3">
    <input type="submit" value="Sign Up" class="btn btn-primary" data-disable-with="Sign Up">
  </div>
</form>
<br>
In order to reproduce the issue, fill up and submit the form. Then save the data in your browser and refresh the page.
<script>
  $( () => $('input').val('') )
</script>

Potential solution:
Exclude inputs with no value attribute or it being empty from the :autofill, :-webkit-autofill etc. selectors.

Edit: The solution might not work since apparently autofill in Firefox doesn't add nor update the value attribute 😮

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.3

Start with the reduced HTML test case and reproduce the behavior in Firefox after autofill, form submission, refresh, and the jQuery value clear. Inspect Bootstrap v5.3.3 floating-label autofill selectors and confirm that the label returns to its untransformed position when the input has no current value.