Merge branch 'main' into floating-always-visible

diff --cc scss/forms/_floating-labels.scss
index 7bcc1e46f73acbb05b12f88eead7445cbaa70c80,3ca4264d7819fa30edfb6e68ffed3cbac0bc1eb6..6bbbaef5a73875de5e8bfaf5af9707f55eba2122
--- 1/scss/forms/_floating-labels.scss
--- 2/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@@ -60,14 -56,25 +66,26 @@@
    > .form-control-plaintext,
    > .form-select {
      ~ label {
 -      transform: $form-floating-label-transform;
 +      @include form-floating-active-label-styles();
+       color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+ 
+       &::after {
+         position: absolute;
+         inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+         z-index: -1;
+         height: $form-floating-label-height;
+         content: "";
+         background-color: $input-bg;
+         @include border-radius($input-border-radius);
+       }
      }
    }
 +
    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
    > .form-control:-webkit-autofill {
      ~ label {
 -      transform: $form-floating-label-transform;
 +      @include form-floating-active-label-styles();
+       color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
      }
    }
  
@@@ -76,22 -83,12 +94,30 @@@
        border-width: $input-border-width 0; // Required to properly position label text - as explained above
      }
    }
+ 
+   > :disabled ~ label {
+     color: $form-floating-label-disabled-color;
+ 
+     &::after {
+       background-color: $input-disabled-bg;
+     }
+   }
  }
 +
 +// Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS?
 +.form-floating-always {
 +  > .form-control {
 +    @include form-floating-active-input-styles();
 +
 +    &::placeholder {
 +      color: $input-color;
 +    }
 +    &:focus::placeholder {
 +      color: $input-placeholder-color;
 +    }
 +  }
 +
 +  > label {
 +    @include form-floating-active-label-styles();
 +  }
 +}

diff --cc site/content/docs/5.3/forms/floating-labels.md
index 58170525bd7b31c632c9259edacf14a0745938b0,a65a8579779888c8258ef392a16cd8feb1059a14..0e24cd7db3076bfed213a01f1c9aa4fc8b9c90bb
--- 1/site/content/docs/5.1/forms/floating-labels.md
--- 2/site/content/docs/5.3/forms/floating-labels.md
+++ b/site/content/docs/5.3/forms/floating-labels.md
@@@ -90,21 -118,35 +118,50 @@@ Floating labels also support `.form-con
  </div>
  {{< /example >}}
  
+ ## Input groups
+ 
+ Floating labels also support `.input-group`.
+ 
+ {{< example >}}
+ <div class="input-group mb-3">
+   <span class="input-group-text">@</span>
+   <div class="form-floating">
+     <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
+     <label for="floatingInputGroup1">Username</label>
+   </div>
+ </div>
+ {{< /example >}}
+ 
+ When using `.input-group` and `.form-floating` along with form validation, the `-feedback` should be placed outside of the `.form-floating`, but inside of the `.input-group`. This means that the feedback will need to be shown using javascript.
+ 
+ {{< example >}}
+ <div class="input-group has-validation">
+   <span class="input-group-text">@</span>
+   <div class="form-floating is-invalid">
+     <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
+     <label for="floatingInputGroup2">Username</label>
+   </div>
+   <div class="invalid-feedback">
+     Please choose a username.
+   </div>
+ </div>
+ {{< /example >}}
+ 
 +## Always floating
 +
 +Make any `.form-control` always use a floating label with visible placeholder with the `.form-floating-always` modifier class. Visible placeholders use the default input `color`  and lighten to the placeholder color on focus. This matches them with other floating labels built with plaintext inputs and selects.
 +
 +{{< example >}}
 +<div class="form-floating form-floating-always mb-3">
 +  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
 +  <label for="floatingInput">Email address</label>
 +</div>
 +<div class="form-floating form-floating-always">
 +  <input type="password" class="form-control" id="floatingPassword" placeholder="••••••••">
 +  <label for="floatingPassword">Password</label>
 +</div>
 +{{< /example >}}
 +
  ## Layout
  
  When working with the Bootstrap grid system, be sure to place form elements within column classes.