v5: Floating labels (#30449)

* v5: Promote floating labels example to component

- Adds new .form-floating
- Stubs out basics of a docs page
- Removes existing Example

* Update floating labels to support .form-select, make inputs and selects more consistent

- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity

* Streamline and bulletproof some things

- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC

* Move some values to variables, switch from scaling font-size to scale, update transforms

* Bring over changes from #30966 and add to them to tighten things up

* Delete the now unused example images

* Fix typo

* Allowlist the calc function

* Add transform-origin, update transform values

* Test out autofill fix

* Fix linter issue

* Mention it in the migration guide

* Bump bundlesize

* Add one more variable per review

* Shave .25rem off the height

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

.bundlewatch.config.json

@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "21.5 kB"
+      "maxSize": "21.6 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

dist/css/bootstrap-reboot.css

@@ -11,9 +11,15 @@
   box-sizing: border-box;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -183,7 +189,7 @@ a {
 }
 
 a:hover {
-  color: #024dbc;
+  color: #0a58ca;
 }
 
 a:not([href]):not([class]), a:not([href]):not([class]):hover {

dist/css/bootstrap-utilities.css

@@ -48,6 +48,14 @@
   overflow: hidden !important;
 }
 
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
 .d-inline {
   display: inline !important;
 }
@@ -242,7 +250,7 @@
 }
 
 .border-dark {
-  border-color: #343a40 !important;
+  border-color: #212529 !important;
 }
 
 .border-white {
@@ -899,6 +907,38 @@
   padding-left: 3rem !important;
 }
 
+.fs-1 {
+  font-size: calc(1.375rem + 1.5vw) !important;
+}
+
+.fs-2 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+
+.fs-3 {
+  font-size: calc(1.3rem + 0.6vw) !important;
+}
+
+.fs-4 {
+  font-size: calc(1.275rem + 0.3vw) !important;
+}
+
+.fs-5 {
+  font-size: 1.25rem !important;
+}
+
+.fs-6 {
+  font-size: 1rem !important;
+}
+
+.fst-italic {
+  font-style: italic !important;
+}
+
+.fst-normal {
+  font-style: normal !important;
+}
+
 .font-weight-light {
   font-weight: 300 !important;
 }
@@ -972,7 +1012,7 @@
 }
 
 .text-dark {
-  color: #343a40 !important;
+  color: #212529 !important;
 }
 
 .text-white {
@@ -1044,7 +1084,7 @@
 }
 
 .bg-dark {
-  background-color: #343a40 !important;
+  background-color: #212529 !important;
 }
 
 .bg-body {
@@ -1083,14 +1123,6 @@
   text-decoration: line-through !important;
 }
 
-.font-italic {
-  font-style: italic !important;
-}
-
-.font-normal {
-  font-style: normal !important;
-}
-
 .text-break {
   word-wrap: break-word !important;
   word-break: break-word !important;
@@ -3561,6 +3593,57 @@
   }
 }
 
+@media (min-width: 1200px) {
+  .fs-1 {
+    font-size: 2.5rem !important;
+  }
+  .fs-2 {
+    font-size: 2rem !important;
+  }
+  .fs-3 {
+    font-size: 1.75rem !important;
+  }
+  .fs-4 {
+    font-size: 1.5rem !important;
+  }
+  .fs-sm-1 {
+    font-size: 2.5rem !important;
+  }
+  .fs-sm-2 {
+    font-size: 2rem !important;
+  }
+  .fs-sm-3 {
+    font-size: 1.75rem !important;
+  }
+  .fs-sm-4 {
+    font-size: 1.5rem !important;
+  }
+  .fs-md-1 {
+    font-size: 2.5rem !important;
+  }
+  .fs-md-2 {
+    font-size: 2rem !important;
+  }
+  .fs-md-3 {
+    font-size: 1.75rem !important;
+  }
+  .fs-md-4 {
+    font-size: 1.5rem !important;
+  }
+  .fs-lg-1 {
+    font-size: 2.5rem !important;
+  }
+  .fs-lg-2 {
+    font-size: 2rem !important;
+  }
+  .fs-lg-3 {
+    font-size: 1.75rem !important;
+  }
+  .fs-lg-4 {
+    font-size: 1.5rem !important;
+  }
+}
+
 @media print {
   .d-print-inline {
     display: inline !important;

dist/js/bootstrap.bundle.js

@@ -975,17 +975,6 @@
         top: element.offsetTop,
         left: element.offsetLeft
       };
-    },
-    toggleClass: function toggleClass(element, className) {
-      if (!element) {
-        return;
-      }
-
-      if (element.classList.contains(className)) {
-        element.classList.remove(className);
-      } else {
-        element.classList.add(className);
-      }
     }
   };
 
@@ -4844,8 +4833,10 @@
 
       this._element.setAttribute('aria-expanded', true);
 
-      Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
-      Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
+      this._menu.classList.toggle(CLASS_NAME_SHOW$1);
+
+      this._element.classList.toggle(CLASS_NAME_SHOW$1);
+
       EventHandler.trigger(parent, EVENT_SHOWN$1, relatedTarget);
     };
 
@@ -4868,8 +4859,10 @@
         this._popper.destroy();
       }
 
-      Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
-      Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
+      this._menu.classList.toggle(CLASS_NAME_SHOW$1);
+
+      this._element.classList.toggle(CLASS_NAME_SHOW$1);
+
       EventHandler.trigger(parent, EVENT_HIDDEN$1, relatedTarget);
     };
 

dist/js/bootstrap.esm.js

@@ -971,17 +971,6 @@ var Manipulator = {
       top: element.offsetTop,
       left: element.offsetLeft
     };
-  },
-  toggleClass: function toggleClass(element, className) {
-    if (!element) {
-      return;
-    }
-
-    if (element.classList.contains(className)) {
-      element.classList.remove(className);
-    } else {
-      element.classList.add(className);
-    }
   }
 };
 
@@ -2226,8 +2215,10 @@ var Dropdown = /*#__PURE__*/function () {
 
     this._element.setAttribute('aria-expanded', true);
 
-    Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
-    Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
+    this._menu.classList.toggle(CLASS_NAME_SHOW$1);
+
+    this._element.classList.toggle(CLASS_NAME_SHOW$1);
+
     EventHandler.trigger(parent, EVENT_SHOWN$1, relatedTarget);
   };
 
@@ -2250,8 +2241,10 @@ var Dropdown = /*#__PURE__*/function () {
       this._popper.destroy();
     }
 
-    Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
-    Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
+    this._menu.classList.toggle(CLASS_NAME_SHOW$1);
+
+    this._element.classList.toggle(CLASS_NAME_SHOW$1);
+
     EventHandler.trigger(parent, EVENT_HIDDEN$1, relatedTarget);
   };
 

dist/js/bootstrap.js

@@ -979,17 +979,6 @@
         top: element.offsetTop,
         left: element.offsetLeft
       };
-    },
-    toggleClass: function toggleClass(element, className) {
-      if (!element) {
-        return;
-      }
-
-      if (element.classList.contains(className)) {
-        element.classList.remove(className);
-      } else {
-        element.classList.add(className);
-      }
     }
   };
 
@@ -2234,8 +2223,10 @@
 
       this._element.setAttribute('aria-expanded', true);
 
-      Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
-      Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
+      this._menu.classList.toggle(CLASS_NAME_SHOW$1);
+
+      this._element.classList.toggle(CLASS_NAME_SHOW$1);
+
       EventHandler.trigger(parent, EVENT_SHOWN$1, relatedTarget);
     };
 
@@ -2258,8 +2249,10 @@
         this._popper.destroy();
       }
 
-      Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW$1);
-      Manipulator.toggleClass(this._element, CLASS_NAME_SHOW$1);
+      this._menu.classList.toggle(CLASS_NAME_SHOW$1);
+
+      this._element.classList.toggle(CLASS_NAME_SHOW$1);
+
       EventHandler.trigger(parent, EVENT_HIDDEN$1, relatedTarget);
     };
 

js/dist/dom/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":["../../src/dom/data.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/data.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst mapData = (() => {\n  const storeData = {}\n  let id = 1\n  return {\n    set(element, key, data) {\n      if (typeof element.bsKey === 'undefined') {\n        element.bsKey = {\n          key,\n          id\n        }\n        id++\n      }\n\n      storeData[element.bsKey.id] = data\n    },\n    get(element, key) {\n      if (!element || typeof element.bsKey === 'undefined') {\n        return null\n      }\n\n      const keyProperties = element.bsKey\n      if (keyProperties.key === key) {\n        return storeData[keyProperties.id]\n      }\n\n      return null\n    },\n    delete(element, key) {\n      if (typeof element.bsKey === 'undefined') {\n        return\n      }\n\n      const keyProperties = element.bsKey\n      if (keyProperties.key === key) {\n        delete storeData[keyProperties.id]\n        delete element.bsKey\n      }\n    }\n  }\n})()\n\nconst Data = {\n  setData(instance, key, data) {\n    mapData.set(instance, key, data)\n  },\n  getData(instance, key) {\n    return mapData.get(instance, key)\n  },\n  removeData(instance, key) {\n    mapData.delete(instance, key)\n  }\n}\n\nexport default Data\n"],"names":["mapData","storeData","id","set","element","key","data","bsKey","get","keyProperties","delete","Data","setData","instance","getData","removeData"],"mappings":";;;;;;;;;;;EAAA;;;;;;;EAOA;;;;;EAMA,IAAMA,OAAO,GAAI,YAAM;EACrB,MAAMC,SAAS,GAAG,EAAlB;EACA,MAAIC,EAAE,GAAG,CAAT;EACA,SAAO;EACLC,IAAAA,GADK,eACDC,OADC,EACQC,GADR,EACaC,IADb,EACmB;EACtB,UAAI,OAAOF,OAAO,CAACG,KAAf,KAAyB,WAA7B,EAA0C;EACxCH,QAAAA,OAAO,CAACG,KAAR,GAAgB;EACdF,UAAAA,GAAG,EAAHA,GADc;EAEdH,UAAAA,EAAE,EAAFA;EAFc,SAAhB;EAIAA,QAAAA,EAAE;EACH;;EAEDD,MAAAA,SAAS,CAACG,OAAO,CAACG,KAAR,CAAcL,EAAf,CAAT,GAA8BI,IAA9B;EACD,KAXI;EAYLE,IAAAA,GAZK,eAYDJ,OAZC,EAYQC,GAZR,EAYa;EAChB,UAAI,CAACD,OAAD,IAAY,OAAOA,OAAO,CAACG,KAAf,KAAyB,WAAzC,EAAsD;EACpD,eAAO,IAAP;EACD;;EAED,UAAME,aAAa,GAAGL,OAAO,CAACG,KAA9B;;EACA,UAAIE,aAAa,CAACJ,GAAd,KAAsBA,GAA1B,EAA+B;EAC7B,eAAOJ,SAAS,CAACQ,aAAa,CAACP,EAAf,CAAhB;EACD;;EAED,aAAO,IAAP;EACD,KAvBI;EAwBLQ,IAAAA,MAxBK,mBAwBEN,OAxBF,EAwBWC,GAxBX,EAwBgB;EACnB,UAAI,OAAOD,OAAO,CAACG,KAAf,KAAyB,WAA7B,EAA0C;EACxC;EACD;;EAED,UAAME,aAAa,GAAGL,OAAO,CAACG,KAA9B;;EACA,UAAIE,aAAa,CAACJ,GAAd,KAAsBA,GAA1B,EAA+B;EAC7B,eAAOJ,SAAS,CAACQ,aAAa,CAACP,EAAf,CAAhB;EACA,eAAOE,OAAO,CAACG,KAAf;EACD;EACF;EAlCI,GAAP;EAoCD,CAvCe,EAAhB;;MAyCMI,IAAI,GAAG;EACXC,EAAAA,OADW,mBACHC,QADG,EACOR,GADP,EACYC,IADZ,EACkB;EAC3BN,IAAAA,OAAO,CAACG,GAAR,CAAYU,QAAZ,EAAsBR,GAAtB,EAA2BC,IAA3B;EACD,GAHU;EAIXQ,EAAAA,OAJW,mBAIHD,QAJG,EAIOR,GAJP,EAIY;EACrB,WAAOL,OAAO,CAACQ,GAAR,CAAYK,QAAZ,EAAsBR,GAAtB,CAAP;EACD,GANU;EAOXU,EAAAA,UAPW,sBAOAF,QAPA,EAOUR,GAPV,EAOe;EACxBL,IAAAA,OAAO,CAACU,MAAR,CAAeG,QAAf,EAAyBR,GAAzB;EACD;EATU;;;;;;;;"}
+{"version":3,"file":"data.js","sources":["../../src/dom/data.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/data.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst mapData = (() => {\n  const storeData = {}\n  let id = 1\n  return {\n    set(element, key, data) {\n      if (typeof element.bsKey === 'undefined') {\n        element.bsKey = {\n          key,\n          id\n        }\n        id++\n      }\n\n      storeData[element.bsKey.id] = data\n    },\n    get(element, key) {\n      if (!element || typeof element.bsKey === 'undefined') {\n        return null\n      }\n\n      const keyProperties = element.bsKey\n      if (keyProperties.key === key) {\n        return storeData[keyProperties.id]\n      }\n\n      return null\n    },\n    delete(element, key) {\n      if (typeof element.bsKey === 'undefined') {\n        return\n      }\n\n      const keyProperties = element.bsKey\n      if (keyProperties.key === key) {\n        delete storeData[keyProperties.id]\n        delete element.bsKey\n      }\n    }\n  }\n})()\n\nconst Data = {\n  setData(instance, key, data) {\n    mapData.set(instance, key, data)\n  },\n  getData(instance, key) {\n    return mapData.get(instance, key)\n  },\n  removeData(instance, key) {\n    mapData.delete(instance, key)\n  }\n}\n\nexport default Data\n"],"names":["mapData","storeData","id","set","element","key","data","bsKey","get","keyProperties","delete","Data","setData","instance","getData","removeData"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;EACA;EAEA,IAAMA,OAAO,GAAI,YAAM;EACrB,MAAMC,SAAS,GAAG,EAAlB;EACA,MAAIC,EAAE,GAAG,CAAT;EACA,SAAO;EACLC,IAAAA,GADK,eACDC,OADC,EACQC,GADR,EACaC,IADb,EACmB;EACtB,UAAI,OAAOF,OAAO,CAACG,KAAf,KAAyB,WAA7B,EAA0C;EACxCH,QAAAA,OAAO,CAACG,KAAR,GAAgB;EACdF,UAAAA,GAAG,EAAHA,GADc;EAEdH,UAAAA,EAAE,EAAFA;EAFc,SAAhB;EAIAA,QAAAA,EAAE;EACH;;EAEDD,MAAAA,SAAS,CAACG,OAAO,CAACG,KAAR,CAAcL,EAAf,CAAT,GAA8BI,IAA9B;EACD,KAXI;EAYLE,IAAAA,GAZK,eAYDJ,OAZC,EAYQC,GAZR,EAYa;EAChB,UAAI,CAACD,OAAD,IAAY,OAAOA,OAAO,CAACG,KAAf,KAAyB,WAAzC,EAAsD;EACpD,eAAO,IAAP;EACD;;EAED,UAAME,aAAa,GAAGL,OAAO,CAACG,KAA9B;;EACA,UAAIE,aAAa,CAACJ,GAAd,KAAsBA,GAA1B,EAA+B;EAC7B,eAAOJ,SAAS,CAACQ,aAAa,CAACP,EAAf,CAAhB;EACD;;EAED,aAAO,IAAP;EACD,KAvBI;EAwBLQ,IAAAA,MAxBK,mBAwBEN,OAxBF,EAwBWC,GAxBX,EAwBgB;EACnB,UAAI,OAAOD,OAAO,CAACG,KAAf,KAAyB,WAA7B,EAA0C;EACxC;EACD;;EAED,UAAME,aAAa,GAAGL,OAAO,CAACG,KAA9B;;EACA,UAAIE,aAAa,CAACJ,GAAd,KAAsBA,GAA1B,EAA+B;EAC7B,eAAOJ,SAAS,CAACQ,aAAa,CAACP,EAAf,CAAhB;EACA,eAAOE,OAAO,CAACG,KAAf;EACD;EACF;EAlCI,GAAP;EAoCD,CAvCe,EAAhB;;MAyCMI,IAAI,GAAG;EACXC,EAAAA,OADW,mBACHC,QADG,EACOR,GADP,EACYC,IADZ,EACkB;EAC3BN,IAAAA,OAAO,CAACG,GAAR,CAAYU,QAAZ,EAAsBR,GAAtB,EAA2BC,IAA3B;EACD,GAHU;EAIXQ,EAAAA,OAJW,mBAIHD,QAJG,EAIOR,GAJP,EAIY;EACrB,WAAOL,OAAO,CAACQ,GAAR,CAAYK,QAAZ,EAAsBR,GAAtB,CAAP;EACD,GANU;EAOXU,EAAAA,UAPW,sBAOAF,QAPA,EAOUR,GAPV,EAOe;EACxBL,IAAAA,OAAO,CAACU,MAAR,CAAeG,QAAf,EAAyBR,GAAzB;EACD;EATU;;;;;;;;"}

js/dist/dom/manipulator.js

@@ -77,17 +77,6 @@
         top: element.offsetTop,
         left: element.offsetLeft
       };
-    },
-    toggleClass: function toggleClass(element, className) {
-      if (!element) {
-        return;
-      }
-
-      if (element.classList.contains(className)) {
-        element.classList.remove(className);
-      } else {
-        element.classList.add(className);
-      }
     }
   };
 

js/dist/dom/manipulator.js.map

@@ -1 +1 @@
-{"version":3,"file":"manipulator.js","sources":["../../src/dom/manipulator.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/manipulator.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nfunction normalizeData(val) {\n  if (val === 'true') {\n    return true\n  }\n\n  if (val === 'false') {\n    return false\n  }\n\n  if (val === Number(val).toString()) {\n    return Number(val)\n  }\n\n  if (val === '' || val === 'null') {\n    return null\n  }\n\n  return val\n}\n\nfunction normalizeDataKey(key) {\n  return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`)\n}\n\nconst Manipulator = {\n  setDataAttribute(element, key, value) {\n    element.setAttribute(`data-${normalizeDataKey(key)}`, value)\n  },\n\n  removeDataAttribute(element, key) {\n    element.removeAttribute(`data-${normalizeDataKey(key)}`)\n  },\n\n  getDataAttributes(element) {\n    if (!element) {\n      return {}\n    }\n\n    const attributes = {\n      ...element.dataset\n    }\n\n    Object.keys(attributes).forEach(key => {\n      attributes[key] = normalizeData(attributes[key])\n    })\n\n    return attributes\n  },\n\n  getDataAttribute(element, key) {\n    return normalizeData(element.getAttribute(`data-${normalizeDataKey(key)}`))\n  },\n\n  offset(element) {\n    const rect = element.getBoundingClientRect()\n\n    return {\n      top: rect.top + document.body.scrollTop,\n      left: rect.left + document.body.scrollLeft\n    }\n  },\n\n  position(element) {\n    return {\n      top: element.offsetTop,\n      left: element.offsetLeft\n    }\n  },\n\n  toggleClass(element, className) {\n    if (!element) {\n      return\n    }\n\n    if (element.classList.contains(className)) {\n      element.classList.remove(className)\n    } else {\n      element.classList.add(className)\n    }\n  }\n}\n\nexport default Manipulator\n"],"names":["normalizeData","val","Number","toString","normalizeDataKey","key","replace","chr","toLowerCase","Manipulator","setDataAttribute","element","value","setAttribute","removeDataAttribute","removeAttribute","getDataAttributes","attributes","dataset","Object","keys","forEach","getDataAttribute","getAttribute","offset","rect","getBoundingClientRect","top","document","body","scrollTop","left","scrollLeft","position","offsetTop","offsetLeft","toggleClass","className","classList","contains","remove","add"],"mappings":";;;;;;;;;;;;;EAAA;;;;;;EAOA,SAASA,aAAT,CAAuBC,GAAvB,EAA4B;EAC1B,MAAIA,GAAG,KAAK,MAAZ,EAAoB;EAClB,WAAO,IAAP;EACD;;EAED,MAAIA,GAAG,KAAK,OAAZ,EAAqB;EACnB,WAAO,KAAP;EACD;;EAED,MAAIA,GAAG,KAAKC,MAAM,CAACD,GAAD,CAAN,CAAYE,QAAZ,EAAZ,EAAoC;EAClC,WAAOD,MAAM,CAACD,GAAD,CAAb;EACD;;EAED,MAAIA,GAAG,KAAK,EAAR,IAAcA,GAAG,KAAK,MAA1B,EAAkC;EAChC,WAAO,IAAP;EACD;;EAED,SAAOA,GAAP;EACD;;EAED,SAASG,gBAAT,CAA0BC,GAA1B,EAA+B;EAC7B,SAAOA,GAAG,CAACC,OAAJ,CAAY,QAAZ,EAAsB,UAAAC,GAAG;EAAA,iBAAQA,GAAG,CAACC,WAAJ,EAAR;EAAA,GAAzB,CAAP;EACD;;MAEKC,WAAW,GAAG;EAClBC,EAAAA,gBADkB,4BACDC,OADC,EACQN,GADR,EACaO,KADb,EACoB;EACpCD,IAAAA,OAAO,CAACE,YAAR,WAA6BT,gBAAgB,CAACC,GAAD,CAA7C,EAAsDO,KAAtD;EACD,GAHiB;EAKlBE,EAAAA,mBALkB,+BAKEH,OALF,EAKWN,GALX,EAKgB;EAChCM,IAAAA,OAAO,CAACI,eAAR,WAAgCX,gBAAgB,CAACC,GAAD,CAAhD;EACD,GAPiB;EASlBW,EAAAA,iBATkB,6BASAL,OATA,EASS;EACzB,QAAI,CAACA,OAAL,EAAc;EACZ,aAAO,EAAP;EACD;;EAED,QAAMM,UAAU,gBACXN,OAAO,CAACO,OADG,CAAhB;;EAIAC,IAAAA,MAAM,CAACC,IAAP,CAAYH,UAAZ,EAAwBI,OAAxB,CAAgC,UAAAhB,GAAG,EAAI;EACrCY,MAAAA,UAAU,CAACZ,GAAD,CAAV,GAAkBL,aAAa,CAACiB,UAAU,CAACZ,GAAD,CAAX,CAA/B;EACD,KAFD;EAIA,WAAOY,UAAP;EACD,GAvBiB;EAyBlBK,EAAAA,gBAzBkB,4BAyBDX,OAzBC,EAyBQN,GAzBR,EAyBa;EAC7B,WAAOL,aAAa,CAACW,OAAO,CAACY,YAAR,WAA6BnB,gBAAgB,CAACC,GAAD,CAA7C,CAAD,CAApB;EACD,GA3BiB;EA6BlBmB,EAAAA,MA7BkB,kBA6BXb,OA7BW,EA6BF;EACd,QAAMc,IAAI,GAAGd,OAAO,CAACe,qBAAR,EAAb;EAEA,WAAO;EACLC,MAAAA,GAAG,EAAEF,IAAI,CAACE,GAAL,GAAWC,QAAQ,CAACC,IAAT,CAAcC,SADzB;EAELC,MAAAA,IAAI,EAAEN,IAAI,CAACM,IAAL,GAAYH,QAAQ,CAACC,IAAT,CAAcG;EAF3B,KAAP;EAID,GApCiB;EAsClBC,EAAAA,QAtCkB,oBAsCTtB,OAtCS,EAsCA;EAChB,WAAO;EACLgB,MAAAA,GAAG,EAAEhB,OAAO,CAACuB,SADR;EAELH,MAAAA,IAAI,EAAEpB,OAAO,CAACwB;EAFT,KAAP;EAID,GA3CiB;EA6ClBC,EAAAA,WA7CkB,uBA6CNzB,OA7CM,EA6CG0B,SA7CH,EA6Cc;EAC9B,QAAI,CAAC1B,OAAL,EAAc;EACZ;EACD;;EAED,QAAIA,OAAO,CAAC2B,SAAR,CAAkBC,QAAlB,CAA2BF,SAA3B,CAAJ,EAA2C;EACzC1B,MAAAA,OAAO,CAAC2B,SAAR,CAAkBE,MAAlB,CAAyBH,SAAzB;EACD,KAFD,MAEO;EACL1B,MAAAA,OAAO,CAAC2B,SAAR,CAAkBG,GAAlB,CAAsBJ,SAAtB;EACD;EACF;EAvDiB;;;;;;;;"}
+{"version":3,"file":"manipulator.js","sources":["../../src/dom/manipulator.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/manipulator.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nfunction normalizeData(val) {\n  if (val === 'true') {\n    return true\n  }\n\n  if (val === 'false') {\n    return false\n  }\n\n  if (val === Number(val).toString()) {\n    return Number(val)\n  }\n\n  if (val === '' || val === 'null') {\n    return null\n  }\n\n  return val\n}\n\nfunction normalizeDataKey(key) {\n  return key.replace(/[A-Z]/g, chr => `-${chr.toLowerCase()}`)\n}\n\nconst Manipulator = {\n  setDataAttribute(element, key, value) {\n    element.setAttribute(`data-${normalizeDataKey(key)}`, value)\n  },\n\n  removeDataAttribute(element, key) {\n    element.removeAttribute(`data-${normalizeDataKey(key)}`)\n  },\n\n  getDataAttributes(element) {\n    if (!element) {\n      return {}\n    }\n\n    const attributes = {\n      ...element.dataset\n    }\n\n    Object.keys(attributes).forEach(key => {\n      attributes[key] = normalizeData(attributes[key])\n    })\n\n    return attributes\n  },\n\n  getDataAttribute(element, key) {\n    return normalizeData(element.getAttribute(`data-${normalizeDataKey(key)}`))\n  },\n\n  offset(element) {\n    const rect = element.getBoundingClientRect()\n\n    return {\n      top: rect.top + document.body.scrollTop,\n      left: rect.left + document.body.scrollLeft\n    }\n  },\n\n  position(element) {\n    return {\n      top: element.offsetTop,\n      left: element.offsetLeft\n    }\n  }\n}\n\nexport default Manipulator\n"],"names":["normalizeData","val","Number","toString","normalizeDataKey","key","replace","chr","toLowerCase","Manipulator","setDataAttribute","element","value","setAttribute","removeDataAttribute","removeAttribute","getDataAttributes","attributes","dataset","Object","keys","forEach","getDataAttribute","getAttribute","offset","rect","getBoundingClientRect","top","document","body","scrollTop","left","scrollLeft","position","offsetTop","offsetLeft"],"mappings":";;;;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;EAEA,SAASA,aAAT,CAAuBC,GAAvB,EAA4B;EAC1B,MAAIA,GAAG,KAAK,MAAZ,EAAoB;EAClB,WAAO,IAAP;EACD;;EAED,MAAIA,GAAG,KAAK,OAAZ,EAAqB;EACnB,WAAO,KAAP;EACD;;EAED,MAAIA,GAAG,KAAKC,MAAM,CAACD,GAAD,CAAN,CAAYE,QAAZ,EAAZ,EAAoC;EAClC,WAAOD,MAAM,CAACD,GAAD,CAAb;EACD;;EAED,MAAIA,GAAG,KAAK,EAAR,IAAcA,GAAG,KAAK,MAA1B,EAAkC;EAChC,WAAO,IAAP;EACD;;EAED,SAAOA,GAAP;EACD;;EAED,SAASG,gBAAT,CAA0BC,GAA1B,EAA+B;EAC7B,SAAOA,GAAG,CAACC,OAAJ,CAAY,QAAZ,EAAsB,UAAAC,GAAG;EAAA,iBAAQA,GAAG,CAACC,WAAJ,EAAR;EAAA,GAAzB,CAAP;EACD;;MAEKC,WAAW,GAAG;EAClBC,EAAAA,gBADkB,4BACDC,OADC,EACQN,GADR,EACaO,KADb,EACoB;EACpCD,IAAAA,OAAO,CAACE,YAAR,WAA6BT,gBAAgB,CAACC,GAAD,CAA7C,EAAsDO,KAAtD;EACD,GAHiB;EAKlBE,EAAAA,mBALkB,+BAKEH,OALF,EAKWN,GALX,EAKgB;EAChCM,IAAAA,OAAO,CAACI,eAAR,WAAgCX,gBAAgB,CAACC,GAAD,CAAhD;EACD,GAPiB;EASlBW,EAAAA,iBATkB,6BASAL,OATA,EASS;EACzB,QAAI,CAACA,OAAL,EAAc;EACZ,aAAO,EAAP;EACD;;EAED,QAAMM,UAAU,gBACXN,OAAO,CAACO,OADG,CAAhB;;EAIAC,IAAAA,MAAM,CAACC,IAAP,CAAYH,UAAZ,EAAwBI,OAAxB,CAAgC,UAAAhB,GAAG,EAAI;EACrCY,MAAAA,UAAU,CAACZ,GAAD,CAAV,GAAkBL,aAAa,CAACiB,UAAU,CAACZ,GAAD,CAAX,CAA/B;EACD,KAFD;EAIA,WAAOY,UAAP;EACD,GAvBiB;EAyBlBK,EAAAA,gBAzBkB,4BAyBDX,OAzBC,EAyBQN,GAzBR,EAyBa;EAC7B,WAAOL,aAAa,CAACW,OAAO,CAACY,YAAR,WAA6BnB,gBAAgB,CAACC,GAAD,CAA7C,CAAD,CAApB;EACD,GA3BiB;EA6BlBmB,EAAAA,MA7BkB,kBA6BXb,OA7BW,EA6BF;EACd,QAAMc,IAAI,GAAGd,OAAO,CAACe,qBAAR,EAAb;EAEA,WAAO;EACLC,MAAAA,GAAG,EAAEF,IAAI,CAACE,GAAL,GAAWC,QAAQ,CAACC,IAAT,CAAcC,SADzB;EAELC,MAAAA,IAAI,EAAEN,IAAI,CAACM,IAAL,GAAYH,QAAQ,CAACC,IAAT,CAAcG;EAF3B,KAAP;EAID,GApCiB;EAsClBC,EAAAA,QAtCkB,oBAsCTtB,OAtCS,EAsCA;EAChB,WAAO;EACLgB,MAAAA,GAAG,EAAEhB,OAAO,CAACuB,SADR;EAELH,MAAAA,IAAI,EAAEpB,OAAO,CAACwB;EAFT,KAAP;EAID;EA3CiB;;;;;;;;"}

js/dist/dom/selector-engine.js.map

@@ -1 +1 @@
-{"version":3,"file":"selector-engine.js","sources":["../../src/dom/selector-engine.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/selector-engine.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport { find as findFn, findOne } from './polyfill'\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst NODE_TEXT = 3\n\nconst SelectorEngine = {\n  matches(element, selector) {\n    return element.matches(selector)\n  },\n\n  find(selector, element = document.documentElement) {\n    return [].concat(...findFn.call(element, selector))\n  },\n\n  findOne(selector, element = document.documentElement) {\n    return findOne.call(element, selector)\n  },\n\n  children(element, selector) {\n    const children = [].concat(...element.children)\n\n    return children.filter(child => child.matches(selector))\n  },\n\n  parents(element, selector) {\n    const parents = []\n\n    let ancestor = element.parentNode\n\n    while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== NODE_TEXT) {\n      if (this.matches(ancestor, selector)) {\n        parents.push(ancestor)\n      }\n\n      ancestor = ancestor.parentNode\n    }\n\n    return parents\n  },\n\n  prev(element, selector) {\n    let previous = element.previousElementSibling\n\n    while (previous) {\n      if (previous.matches(selector)) {\n        return [previous]\n      }\n\n      previous = previous.previousElementSibling\n    }\n\n    return []\n  },\n\n  next(element, selector) {\n    let next = element.nextElementSibling\n\n    while (next) {\n      if (this.matches(next, selector)) {\n        return [next]\n      }\n\n      next = next.nextElementSibling\n    }\n\n    return []\n  }\n}\n\nexport default SelectorEngine\n"],"names":["NODE_TEXT","SelectorEngine","matches","element","selector","find","document","documentElement","concat","findFn","call","findOne","children","filter","child","parents","ancestor","parentNode","nodeType","Node","ELEMENT_NODE","push","prev","previous","previousElementSibling","next","nextElementSibling"],"mappings":";;;;;;;;;;;EAAA;;;;;;EASA;;;;;;EAMA,IAAMA,SAAS,GAAG,CAAlB;MAEMC,cAAc,GAAG;EACrBC,EAAAA,OADqB,mBACbC,OADa,EACJC,QADI,EACM;EACzB,WAAOD,OAAO,CAACD,OAAR,CAAgBE,QAAhB,CAAP;EACD,GAHoB;EAKrBC,EAAAA,IALqB,gBAKhBD,QALgB,EAKND,OALM,EAK8B;EAAA;;EAAA,QAApCA,OAAoC;EAApCA,MAAAA,OAAoC,GAA1BG,QAAQ,CAACC,eAAiB;EAAA;;EACjD,WAAO,YAAGC,MAAH,aAAaC,gBAAM,CAACC,IAAP,CAAYP,OAAZ,EAAqBC,QAArB,CAAb,CAAP;EACD,GAPoB;EASrBO,EAAAA,OATqB,mBASbP,QATa,EASHD,OATG,EASiC;EAAA,QAApCA,OAAoC;EAApCA,MAAAA,OAAoC,GAA1BG,QAAQ,CAACC,eAAiB;EAAA;;EACpD,WAAOI,mBAAO,CAACD,IAAR,CAAaP,OAAb,EAAsBC,QAAtB,CAAP;EACD,GAXoB;EAarBQ,EAAAA,QAbqB,oBAaZT,OAbY,EAaHC,QAbG,EAaO;EAAA;;EAC1B,QAAMQ,QAAQ,GAAG,aAAGJ,MAAH,cAAaL,OAAO,CAACS,QAArB,CAAjB;;EAEA,WAAOA,QAAQ,CAACC,MAAT,CAAgB,UAAAC,KAAK;EAAA,aAAIA,KAAK,CAACZ,OAAN,CAAcE,QAAd,CAAJ;EAAA,KAArB,CAAP;EACD,GAjBoB;EAmBrBW,EAAAA,OAnBqB,mBAmBbZ,OAnBa,EAmBJC,QAnBI,EAmBM;EACzB,QAAMW,OAAO,GAAG,EAAhB;EAEA,QAAIC,QAAQ,GAAGb,OAAO,CAACc,UAAvB;;EAEA,WAAOD,QAAQ,IAAIA,QAAQ,CAACE,QAAT,KAAsBC,IAAI,CAACC,YAAvC,IAAuDJ,QAAQ,CAACE,QAAT,KAAsBlB,SAApF,EAA+F;EAC7F,UAAI,KAAKE,OAAL,CAAac,QAAb,EAAuBZ,QAAvB,CAAJ,EAAsC;EACpCW,QAAAA,OAAO,CAACM,IAAR,CAAaL,QAAb;EACD;;EAEDA,MAAAA,QAAQ,GAAGA,QAAQ,CAACC,UAApB;EACD;;EAED,WAAOF,OAAP;EACD,GAjCoB;EAmCrBO,EAAAA,IAnCqB,gBAmChBnB,OAnCgB,EAmCPC,QAnCO,EAmCG;EACtB,QAAImB,QAAQ,GAAGpB,OAAO,CAACqB,sBAAvB;;EAEA,WAAOD,QAAP,EAAiB;EACf,UAAIA,QAAQ,CAACrB,OAAT,CAAiBE,QAAjB,CAAJ,EAAgC;EAC9B,eAAO,CAACmB,QAAD,CAAP;EACD;;EAEDA,MAAAA,QAAQ,GAAGA,QAAQ,CAACC,sBAApB;EACD;;EAED,WAAO,EAAP;EACD,GA/CoB;EAiDrBC,EAAAA,IAjDqB,gBAiDhBtB,OAjDgB,EAiDPC,QAjDO,EAiDG;EACtB,QAAIqB,IAAI,GAAGtB,OAAO,CAACuB,kBAAnB;;EAEA,WAAOD,IAAP,EAAa;EACX,UAAI,KAAKvB,OAAL,CAAauB,IAAb,EAAmBrB,QAAnB,CAAJ,EAAkC;EAChC,eAAO,CAACqB,IAAD,CAAP;EACD;;EAEDA,MAAAA,IAAI,GAAGA,IAAI,CAACC,kBAAZ;EACD;;EAED,WAAO,EAAP;EACD;EA7DoB;;;;;;;;"}
+{"version":3,"file":"selector-engine.js","sources":["../../src/dom/selector-engine.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.0.0-alpha2): dom/selector-engine.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport { find as findFn, findOne } from './polyfill'\n\n/**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\nconst NODE_TEXT = 3\n\nconst SelectorEngine = {\n  matches(element, selector) {\n    return element.matches(selector)\n  },\n\n  find(selector, element = document.documentElement) {\n    return [].concat(...findFn.call(element, selector))\n  },\n\n  findOne(selector, element = document.documentElement) {\n    return findOne.call(element, selector)\n  },\n\n  children(element, selector) {\n    const children = [].concat(...element.children)\n\n    return children.filter(child => child.matches(selector))\n  },\n\n  parents(element, selector) {\n    const parents = []\n\n    let ancestor = element.parentNode\n\n    while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== NODE_TEXT) {\n      if (this.matches(ancestor, selector)) {\n        parents.push(ancestor)\n      }\n\n      ancestor = ancestor.parentNode\n    }\n\n    return parents\n  },\n\n  prev(element, selector) {\n    let previous = element.previousElementSibling\n\n    while (previous) {\n      if (previous.matches(selector)) {\n        return [previous]\n      }\n\n      previous = previous.previousElementSibling\n    }\n\n    return []\n  },\n\n  next(element, selector) {\n    let next = element.nextElementSibling\n\n    while (next) {\n      if (this.matches(next, selector)) {\n        return [next]\n      }\n\n      next = next.nextElementSibling\n    }\n\n    return []\n  }\n}\n\nexport default SelectorEngine\n"],"names":["NODE_TEXT","SelectorEngine","matches","element","selector","find","document","documentElement","concat","findFn","call","findOne","children","filter","child","parents","ancestor","parentNode","nodeType","Node","ELEMENT_NODE","push","prev","previous","previousElementSibling","next","nextElementSibling"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;;EAEA,IAAMA,SAAS,GAAG,CAAlB;MAEMC,cAAc,GAAG;EACrBC,EAAAA,OADqB,mBACbC,OADa,EACJC,QADI,EACM;EACzB,WAAOD,OAAO,CAACD,OAAR,CAAgBE,QAAhB,CAAP;EACD,GAHoB;EAKrBC,EAAAA,IALqB,gBAKhBD,QALgB,EAKND,OALM,EAK8B;EAAA;;EAAA,QAApCA,OAAoC;EAApCA,MAAAA,OAAoC,GAA1BG,QAAQ,CAACC,eAAiB;EAAA;;EACjD,WAAO,YAAGC,MAAH,aAAaC,gBAAM,CAACC,IAAP,CAAYP,OAAZ,EAAqBC,QAArB,CAAb,CAAP;EACD,GAPoB;EASrBO,EAAAA,OATqB,mBASbP,QATa,EASHD,OATG,EASiC;EAAA,QAApCA,OAAoC;EAApCA,MAAAA,OAAoC,GAA1BG,QAAQ,CAACC,eAAiB;EAAA;;EACpD,WAAOI,mBAAO,CAACD,IAAR,CAAaP,OAAb,EAAsBC,QAAtB,CAAP;EACD,GAXoB;EAarBQ,EAAAA,QAbqB,oBAaZT,OAbY,EAaHC,QAbG,EAaO;EAAA;;EAC1B,QAAMQ,QAAQ,GAAG,aAAGJ,MAAH,cAAaL,OAAO,CAACS,QAArB,CAAjB;;EAEA,WAAOA,QAAQ,CAACC,MAAT,CAAgB,UAAAC,KAAK;EAAA,aAAIA,KAAK,CAACZ,OAAN,CAAcE,QAAd,CAAJ;EAAA,KAArB,CAAP;EACD,GAjBoB;EAmBrBW,EAAAA,OAnBqB,mBAmBbZ,OAnBa,EAmBJC,QAnBI,EAmBM;EACzB,QAAMW,OAAO,GAAG,EAAhB;EAEA,QAAIC,QAAQ,GAAGb,OAAO,CAACc,UAAvB;;EAEA,WAAOD,QAAQ,IAAIA,QAAQ,CAACE,QAAT,KAAsBC,IAAI,CAACC,YAAvC,IAAuDJ,QAAQ,CAACE,QAAT,KAAsBlB,SAApF,EAA+F;EAC7F,UAAI,KAAKE,OAAL,CAAac,QAAb,EAAuBZ,QAAvB,CAAJ,EAAsC;EACpCW,QAAAA,OAAO,CAACM,IAAR,CAAaL,QAAb;EACD;;EAEDA,MAAAA,QAAQ,GAAGA,QAAQ,CAACC,UAApB;EACD;;EAED,WAAOF,OAAP;EACD,GAjCoB;EAmCrBO,EAAAA,IAnCqB,gBAmChBnB,OAnCgB,EAmCPC,QAnCO,EAmCG;EACtB,QAAImB,QAAQ,GAAGpB,OAAO,CAACqB,sBAAvB;;EAEA,WAAOD,QAAP,EAAiB;EACf,UAAIA,QAAQ,CAACrB,OAAT,CAAiBE,QAAjB,CAAJ,EAAgC;EAC9B,eAAO,CAACmB,QAAD,CAAP;EACD;;EAEDA,MAAAA,QAAQ,GAAGA,QAAQ,CAACC,sBAApB;EACD;;EAED,WAAO,EAAP;EACD,GA/CoB;EAiDrBC,EAAAA,IAjDqB,gBAiDhBtB,OAjDgB,EAiDPC,QAjDO,EAiDG;EACtB,QAAIqB,IAAI,GAAGtB,OAAO,CAACuB,kBAAnB;;EAEA,WAAOD,IAAP,EAAa;EACX,UAAI,KAAKvB,OAAL,CAAauB,IAAb,EAAmBrB,QAAnB,CAAJ,EAAkC;EAChC,eAAO,CAACqB,IAAD,CAAP;EACD;;EAEDA,MAAAA,IAAI,GAAGA,IAAI,CAACC,kBAAZ;EACD;;EAED,WAAO,EAAP;EACD;EA7DoB;;;;;;;;"}

js/dist/dropdown.js

@@ -258,8 +258,10 @@
 
       this._element.setAttribute('aria-expanded', true);
 
-      Manipulator__default['default'].toggleClass(this._menu, CLASS_NAME_SHOW);
-      Manipulator__default['default'].toggleClass(this._element, CLASS_NAME_SHOW);
+      this._menu.classList.toggle(CLASS_NAME_SHOW);
+
+      this._element.classList.toggle(CLASS_NAME_SHOW);
+
       EventHandler__default['default'].trigger(parent, EVENT_SHOWN, relatedTarget);
     };
 
@@ -282,8 +284,10 @@
         this._popper.destroy();
       }
 
-      Manipulator__default['default'].toggleClass(this._menu, CLASS_NAME_SHOW);
-      Manipulator__default['default'].toggleClass(this._element, CLASS_NAME_SHOW);
+      this._menu.classList.toggle(CLASS_NAME_SHOW);
+
+      this._element.classList.toggle(CLASS_NAME_SHOW);
+
       EventHandler__default['default'].trigger(parent, EVENT_HIDDEN, relatedTarget);
     };
 

scss/_forms.scss

@@ -5,5 +5,6 @@
 @import "forms/form-check";
 @import "forms/form-file";
 @import "forms/form-range";
+@import "forms/floating-labels";
 @import "forms/input-group";
 @import "forms/validation";

scss/_variables.scss

@@ -648,7 +648,7 @@ $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-200 !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           $gray-700 !default;
+$input-color:                           $body-color !default;
 $input-border-color:                    $gray-400 !default;
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      $box-shadow-inset !default;
@@ -733,7 +733,6 @@ $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
 
-
 $form-select-padding-y:             $input-padding-y !default;
 $form-select-padding-x:             $input-padding-x !default;
 $form-select-font-family:           $input-font-family !default;
@@ -824,6 +823,14 @@ $form-file-padding-x-lg:          $input-padding-x-lg !default;
 $form-file-font-size-lg:          $input-font-size-lg !default;
 $form-file-height-lg:             $input-height-lg !default;
 
+$form-floating-height:            add(3.5rem, $input-height-border) !default;
+$form-floating-padding-x:         $input-padding-x !default;
+$form-floating-padding-y:         1rem !default;
+$form-floating-input-padding-t:   1.625rem !default;
+$form-floating-input-padding-b:   .625rem !default;
+$form-floating-label-opacity:     .65 !default;
+$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
 
 // Form validation
 

scss/forms/_floating-labels.scss

@@ -0,0 +1,85 @@
+// stylelint-disable selector-no-vendor-prefix
+
+.form-floating {
+  position: relative;
+
+  > .form-control,
+  > .form-select {
+    height: $form-floating-height;
+    padding: $form-floating-padding-y $form-floating-padding-x;
+  }
+
+  > label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%; // allow textareas
+    padding: $form-floating-padding-y $form-floating-padding-x;
+    pointer-events: none;
+    border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+    transform-origin: 0 0;
+    @include transition($form-floating-transition);
+  }
+
+  // stylelint-disable no-duplicate-selectors
+  > .form-control {
+    &::placeholder {
+      color: transparent;
+    }
+
+    &:focus,
+    &:not(:placeholder-shown) {
+      padding-top: $form-floating-input-padding-t;
+      padding-bottom: $form-floating-input-padding-b;
+    }
+    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+    &:-webkit-autofill {
+      padding-top: $form-floating-input-padding-t;
+      padding-bottom: $form-floating-input-padding-b;
+    }
+  }
+
+  > .form-select {
+    padding-top: $form-floating-input-padding-t;
+    padding-bottom: $form-floating-input-padding-b;
+  }
+
+  > .form-control:focus,
+  > .form-control:not(:placeholder-shown),
+  > .form-select {
+    ~ label {
+      opacity: $form-floating-label-opacity;
+      transform: $form-floating-label-transform;
+    }
+  }
+  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+  > .form-control:-webkit-autofill {
+    ~ label {
+      opacity: $form-floating-label-opacity;
+      transform: $form-floating-label-transform;
+    }
+  }
+  // stylelint-enable no-duplicate-selectors
+}
+
+
+//
+// Fallback for classic Edge
+//
+
+@supports (-ms-ime-align: auto) {
+  .form-floating {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .form-floating > label {
+    position: static;
+    padding: 0;
+    margin-bottom: calc(#{$form-floating-padding-y} / 2); // stylelint-disable-line function-disallowed-list
+    border: 0;
+    @include transition(none);
+  }
+  .form-floating > .form-control::-ms-input-placeholder {
+    color: $input-placeholder-color;
+  }
+}

scss/forms/_form-select.scss

@@ -6,7 +6,7 @@
 .form-select {
   display: block;
   width: 100%;
-  height: $form-select-height;
+  min-height: $form-select-height;
   padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);

site/content/docs/5.0/examples/floating-labels/floating-labels.css

@@ -1,101 +0,0 @@
-html,
-body {
-  height: 100%;
-}
-
-body {
-  display: flex;
-  align-items: center;
-  padding-top: 40px;
-  padding-bottom: 40px;
-  background-color: #f5f5f5;
-}
-
-.form-signin {
-  width: 100%;
-  max-width: 420px;
-  padding: 15px;
-  margin: auto;
-}
-
-.form-label-group {
-  position: relative;
-  margin-bottom: 1rem;
-}
-
-.form-label-group input,
-.form-label-group label {
-  height: 3.125rem;
-  padding: .75rem;
-}
-
-.form-label-group label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  color: #495057;
-  pointer-events: none;
-  cursor: text; /* Match the input under the label */
-  border: 1px solid transparent;
-  border-radius: .25rem;
-  transition: all .1s ease-in-out;
-}
-
-.form-label-group input::-webkit-input-placeholder {
-  color: transparent;
-}
-
-.form-label-group input::-moz-placeholder {
-  color: transparent;
-}
-
-.form-label-group input::-ms-input-placeholder {
-  color: transparent;
-}
-
-.form-label-group input::placeholder {
-  color: transparent;
-}
-
-.form-label-group input:not(:-moz-placeholder-shown) {
-  padding-top: 1.25rem;
-  padding-bottom: .25rem;
-}
-
-.form-label-group input:not(:placeholder-shown) {
-  padding-top: 1.25rem;
-  padding-bottom: .25rem;
-}
-
-.form-label-group input:not(:-moz-placeholder-shown) ~ label {
-  padding-top: .25rem;
-  padding-bottom: .25rem;
-  font-size: 12px;
-  color: #777;
-}
-
-.form-label-group input:not(:placeholder-shown) ~ label {
-  padding-top: .25rem;
-  padding-bottom: .25rem;
-  font-size: 12px;
-  color: #777;
-}
-
-/* Fallback for Edge
--------------------------------------------------- */
-@supports (-ms-ime-align: auto) {
-  .form-label-group {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-  .form-label-group label {
-    position: static;
-  }
-
-  .form-label-group input::-ms-input-placeholder {
-    color: #777;
-  }
-}

site/content/docs/5.0/examples/floating-labels/index.html

@@ -1,35 +0,0 @@
----
-layout: examples
-title: Floating labels example
-extra_css:
-  - "floating-labels.css"
-include_js: false
----
-
-<main class="form-signin">
-  <form>
-    <div class="text-center mb-4">
-      <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-      <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
-      <p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
-    </div>
-
-    <div class="form-label-group">
-      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
-      <label for="inputEmail">Email address</label>
-    </div>
-
-    <div class="form-label-group">
-      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
-      <label for="inputPassword">Password</label>
-    </div>
-
-    <div class="checkbox mb-3">
-      <label>
-        <input type="checkbox" value="remember-me"> Remember me
-      </label>
-    </div>
-    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
-    <p class="mt-5 mb-3 text-muted text-center">&copy; 2017-{{< year >}}</p>
-  </form>
-</main>

site/content/docs/5.0/forms/floating-labels.md

@@ -0,0 +1,104 @@
+---
+layout: docs
+title: Floating labels
+description: Create beautifully simple form labels that float over your input fields.
+group: forms
+toc: true
+---
+
+## Example
+
+Wrap a pair of `<input class="form-control">` and `<label>` elements in `.form-floating` to enable floating labels with Bootstrap's textual form fields. A `placeholder` is required on each `<input>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `<input>` must come first so we can utilize a sibling selector (e.g., `~`).
+
+This approach works in the new Microsoft Edge built on Chromium and gracefully degrades on older versions.
+
+{{< example >}}
+<div class="form-floating 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">
+  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+  <label for="floatingPassword">Password</label>
+</div>
+{{< /example >}}
+
+When there's a `value` already defined, `<label>`s will automatically adjust to their floated position.
+
+{{< example >}}
+<form class="form-floating">
+  <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
+  <label for="floatingInputValue">Input with value</label>
+</form>
+{{< /example >}}
+
+Form validation styles also work as expected.
+
+{{< example >}}
+<form class="form-floating">
+  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
+  <label for="floatingInputInvalid">Invalid input</label>
+</form>
+{{< /example >}}
+
+## Textareas
+
+By default, `<textarea>`s with `.form-control` will be the same height as `<input>`s.
+
+{{< example >}}
+<div class="form-floating">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
+  <label for="floatingTextarea">Comments</label>
+</div>
+{{< /example >}}
+
+To set a custom height on your `<textarea>`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).
+
+{{< example >}}
+<div class="form-floating">
+  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
+  <label for="floatingTextarea2">Comments</label>
+</div>
+{{< /example >}}
+
+## Selects
+
+Other than `.form-control`, floating labels only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they'll always show the `<label>` in its floated state.
+
+{{< example >}}
+<div class="form-floating">
+  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+  <label for="floatingSelect">Works with selects</label>
+</div>
+{{< /example >}}
+
+## Layout
+
+When working with the Bootstrap grid system, be sure to place form elements within column classes.
+
+{{< example >}}
+<div class="row g-2">
+  <div class="col-md">
+    <div class="form-floating">
+      <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
+      <label for="floatingInputGrid">Email address</label>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="form-floating">
+      <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
+        <option selected>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+      <label for="floatingSelectGrid">Works with selects</label>
+    </div>
+  </div>
+</div>
+{{< /example >}}

site/content/docs/5.0/forms/overview.md

@@ -18,6 +18,8 @@ sections:
     description: Replace browser default range inputs with our custom version.
   - title: Input group
     description: Attach labels and buttons to your inputs for increased semantic value.
+  - title: Floating labels
+    description: Create beautifully simple form labels that float over your input fields.
   - title: Layout
     description: Create inline, horizontal, or complex grid-based layouts with your forms.
   - title: Validation

site/content/docs/5.0/migration.md

@@ -24,6 +24,7 @@ toc: true
 ### Forms
 
 - The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
+- Promoted the Floating labels example to fully supported form component. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
 
 ### Utilities
 

site/data/examples.yml

@@ -47,8 +47,6 @@
 - category: Experiments
   description: "Examples that focus on future-friendly features or techniques."
   examples:
-    - name: Floating labels
-      description: "Beautifully simple forms with floating labels over your inputs."
     - name: Offcanvas
       description: "Turn your expandable navbar into a sliding offcanvas menu."
 

site/data/sidebar.yml

@@ -48,6 +48,7 @@
     - title: File
     - title: Range
     - title: Input group
+    - title: Floating labels
     - title: Layout
     - title: Validation