Replace .form-select with .form-control

Replace usages of .form-select with .form-control across tests, examples, and docs. Update size variants (form-select-sm/lg -> form-control-sm/lg) and related comments in the floating-label visual test. Also adjust migration guide wording to reflect the consolidation. Files updated include js/tests/visual/floating-label.html, site/src/assets/examples/{cheatsheet,checkout,menus}/index.astro, and docs under site/src/content (components/toasts.mdx, forms/layout.mdx, forms/overview.mdx, guides/migration.mdx).

Author: coliff

js/tests/visual/floating-label.html

@@ -325,7 +325,7 @@ export const body_class = 'bg-body-tertiary'
           </div>
           <div class="mb-3">
             <label for="exampleSelect" class="form-label">Select menu</label>
-            <select class="form-select" id="exampleSelect">
+            <select class="form-control" id="exampleSelect">
               <option selected>Open this select menu</option>
               <option value="1">One</option>
               <option value="2">Two</option>
@@ -379,7 +379,7 @@ export const body_class = 'bg-body-tertiary'
             </div>
             <div class="mb-3">
               <label for="disabledSelect" class="form-label">Disabled select menu</label>
-              <select id="disabledSelect" class="form-select">
+              <select id="disabledSelect" class="form-control">
                 <option>Disabled select</option>
               </select>
             </div>
@@ -431,7 +431,7 @@ export const body_class = 'bg-body-tertiary'
           <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
         </div>
         <div class="mb-3">
-          <select class="form-select form-select-lg" aria-label=".form-select-lg example">
+          <select class="form-control form-control-lg" aria-label=".form-control-lg example">
             <option selected>Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -447,7 +447,7 @@ export const body_class = 'bg-body-tertiary'
           <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
         </div>
         <div class="mb-3">
-          <select class="form-select form-select-sm" aria-label=".form-select-sm example">
+          <select class="form-control form-control-sm" aria-label=".form-control-sm example">
             <option selected>Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -556,7 +556,7 @@ export const body_class = 'bg-body-tertiary'
           </div>
           <div class="md:col-3">
             <label for="validationServer04" class="form-label">State</label>
-            <select class="form-select is-invalid" id="validationServer04" required>
+            <select class="form-control is-invalid" id="validationServer04" required>
               <option selected disabled value="">Choose...</option>
               <option>...</option>
             </select>

site/src/assets/examples/cheatsheet/index.astro

@@ -117,7 +117,7 @@ export const body_class = 'bg-body-tertiary'
 
             <div class="md:col-5">
               <label for="country" class="form-label">Country</label>
-              <select class="form-select" id="country" required>
+              <select class="form-control" id="country" required>
                 <option value="">Choose...</option>
                 <option>United States</option>
               </select>
@@ -128,7 +128,7 @@ export const body_class = 'bg-body-tertiary'
 
             <div class="md:col-4">
               <label for="state" class="form-label">State</label>
-              <select class="form-select" id="state" required>
+              <select class="form-control" id="state" required>
                 <option value="">Choose...</option>
                 <option>California</option>
               </select>

site/src/assets/examples/checkout/index.astro

@@ -181,7 +181,7 @@ export const extra_css = ['menus.css']
             <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
-          <select class="form-select cal-month-name d-none">
+          <select class="form-control cal-month-name d-none">
             <option value="January">January</option>
             <option value="February">February</option>
             <option value="March">March</option>
@@ -260,7 +260,7 @@ export const extra_css = ['menus.css']
             <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
-          <select class="form-select cal-month-name d-none">
+          <select class="form-control cal-month-name d-none">
             <option value="January">January</option>
             <option value="February">February</option>
             <option value="March">March</option>

site/src/assets/examples/menus/index.astro

@@ -234,7 +234,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
 <Example addStackblitzJs code={`<form>
     <div class="mb-3">
       <label for="selectToastPlacement">Toast placement</label>
-      <select class="form-select mt-2" id="selectToastPlacement">
+      <select class="form-control mt-2" id="selectToastPlacement">
         <option value="" selected>Select a position...</option>
         <option value="top-0 start-0">Top left</option>
         <option value="top-0 start-50 translate-middle-x">Top center</option>

site/src/content/docs/components/toasts.mdx

@@ -79,7 +79,7 @@ More complex layouts can also be created with the grid system.
     </div>
     <div class="md:col-4">
       <label for="inputState" class="form-label">State</label>
-      <select id="inputState" class="form-select">
+      <select id="inputState" class="form-control">
         <option selected>Choose...</option>
         <option>...</option>
       </select>
@@ -213,7 +213,7 @@ The example below uses a flexbox utility to vertically center the contents and c
     </div>
     <div class="col-auto">
       <label class="visually-hidden" for="autoSizingSelect">Preference</label>
-      <select class="form-select" id="autoSizingSelect">
+      <select class="form-control" id="autoSizingSelect">
         <option selected>Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
@@ -249,7 +249,7 @@ You can then remix that once again with size-specific column classes.
     </div>
     <div class="sm:col-3">
       <label class="visually-hidden" for="specificSizeSelect">Preference</label>
-      <select class="form-select" id="specificSizeSelect">
+      <select class="form-control" id="specificSizeSelect">
         <option selected>Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
@@ -284,7 +284,7 @@ Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding
 
     <div class="col-12">
       <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
-      <select class="form-select" id="inlineFormSelectPref">
+      <select class="form-control" id="inlineFormSelectPref">
         <option selected>Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>

site/src/content/docs/forms/layout.mdx

@@ -68,7 +68,7 @@ However, if your form also includes custom button-like elements such as `<a clas
       </div>
       <div class="mb-3">
         <label for="disabledSelect" class="form-label">Disabled select menu</label>
-        <select id="disabledSelect" class="form-select">
+        <select id="disabledSelect" class="form-control">
           <option>Disabled select</option>
         </select>
       </div>

site/src/content/docs/forms/overview.mdx

@@ -229,8 +229,8 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
   - Checkboxes now have a wrapping element and an SVG in the DOM for checked and indeterminate states. Radios and switches do not.
   - Revamped layout for checks, radios, and switches with labels (and descriptions). We now have custom elements for layout that include basic flexbox styling.
   - Refactored toggle buttons to use a nested input structure. The `.btn-check` class now goes on the label (not the input), with the input nested inside. This eliminates the need for `id`/`for` attributes and uses CSS `:has()` selector instead of sibling selectors. Example: `<label class="btn-check btn-solid theme-primary"><input type="checkbox">Toggle</label>`.
-- **Consolidate `.form-select` into `.form-control`.**
-  - Removed `.form-select`—use `.form-control` on `<select>` elements now. Too much abstraction and duplication at the same time.
+- **Consolidate `.form-control` into `.form-control`.**
+  - Removed `.form-control`—use `.form-control` on `<select>` elements now. Too much abstraction and duplication at the same time.
   - Adds new CSS variables on `.form-control` for easier customization without Sass compilation.
   - `.form-control` now has a `min-height` at all times as opposed to just on `<textarea>` elements. This reduces some CSS for us.
 - **Added new Combobox form component.** A searchable, filterable select with single and multi-select modes, built on top of the Menu component. See the [Combobox docs]([[docsref:/forms/combobox]]).