From a95e0b0dc5a8ead7a09459005d8eced8913b4264 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Sat, 4 Apr 2020 04:54:48 +0200
Subject: [PATCH 01/49] feat: code size improvements

---
 docs/plugins/play.js                          | 16 +++---
 .../button-toolbar/button-toolbar.js          |  6 +--
 src/components/button/button.js               |  8 +--
 src/components/calendar/calendar.js           | 16 ++++--
 src/components/carousel/carousel.js           |  8 +--
 src/components/form-file/form-file.js         |  2 +-
 .../form-spinbutton/form-spinbutton.js        |  6 +--
 src/components/form-tags/form-tag.js          |  7 +--
 src/components/form-tags/form-tags.js         |  5 +-
 src/components/image/img.js                   |  2 +-
 src/components/modal/modal.js                 |  6 +--
 src/components/sidebar/sidebar.js             |  6 +--
 src/components/table/helpers/mixin-tbody.js   | 18 +++----
 src/components/table/helpers/mixin-thead.js   |  4 +-
 src/components/tabs/tabs.js                   | 12 ++---
 src/components/time/time.js                   |  7 +--
 src/components/tooltip/tooltip.js             |  2 +-
 src/directives/modal/modal.js                 |  7 +--
 src/mixins/dropdown.js                        | 13 ++---
 src/mixins/pagination.js                      | 10 ++--
 src/utils/key-codes.js                        | 51 ++++++++-----------
 21 files changed, 94 insertions(+), 118 deletions(-)

diff --git a/docs/plugins/play.js b/docs/plugins/play.js
index 841a01999b1..3cb4dcfa32c 100644
--- a/docs/plugins/play.js
+++ b/docs/plugins/play.js
@@ -10,11 +10,9 @@ const RX_NAME_DEFINITION = /<!-- .*\.vue -->/
 const RX_TEMPLATE = /<template>([\s\S]*)<\/template>/
 const RX_SCRIPT = /<script>([\s\S]*)<\/script>/
 
-const CLASS_NAMES = {
-  editable: 'editable',
-  live: 'live',
-  error: 'error'
-}
+const CLASS_NAMES_EDITABLE = 'editable'
+const CLASS_NAMES_LIVE = 'live'
+const CLASS_NAMES_ERROR = 'error'
 
 // --- Helper functions ---
 
@@ -117,7 +115,7 @@ const processExamples = (el, binding, vnode) => {
     hljs.highlightBlock(pre)
 
     // Add editable class
-    pre.classList.add(CLASS_NAMES.editable)
+    pre.classList.add(CLASS_NAMES_EDITABLE)
 
     // Store "previous" content on pre element
     pre.$_v_play_content = pre.textContent.trim()
@@ -131,7 +129,7 @@ const processExamples = (el, binding, vnode) => {
     // Enable live edit on double click
     pre.ondblclick = async () => {
       // Add live class
-      pre.classList.add(CLASS_NAMES.live)
+      pre.classList.add(CLASS_NAMES_LIVE)
       // Make editable
       pre.contentEditable = true
 
@@ -158,9 +156,9 @@ const processExamples = (el, binding, vnode) => {
 
         // Toggle error class
         if (vm === null) {
-          pre.classList.add(CLASS_NAMES.error)
+          pre.classList.add(CLASS_NAMES_ERROR)
         } else {
-          pre.classList.remove(CLASS_NAMES.error)
+          pre.classList.remove(CLASS_NAMES_ERROR)
         }
       }, 500)
     }
diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js
index 77be692fa2d..f42b0c7ee77 100644
--- a/src/components/button-toolbar/button-toolbar.js
+++ b/src/components/button-toolbar/button-toolbar.js
@@ -1,7 +1,7 @@
 import Vue from '../../utils/vue'
 import { isVisible, selectAll } from '../../utils/dom'
+import { DOWN, LEFT, RIGHT, UP } from '../../utils/key-codes'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
-import KeyCodes from '../../utils/key-codes'
 
 const ITEM_SELECTOR = [
   '.btn:not(.disabled):not([disabled]):not(.dropdown-item)',
@@ -50,10 +50,10 @@ export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
       }
       const key = evt.keyCode
       const shift = evt.shiftKey
-      if (key === KeyCodes.UP || key === KeyCodes.LEFT) {
+      if (key === UP || key === LEFT) {
         this.stop(evt)
         shift ? this.focusFirst(evt) : this.focusPrev(evt)
-      } else if (key === KeyCodes.DOWN || key === KeyCodes.RIGHT) {
+      } else if (key === DOWN || key === RIGHT) {
         this.stop(evt)
         shift ? this.focusLast(evt) : this.focusNext(evt)
       }
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 730eeb94903..eef02904bd5 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -1,11 +1,11 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
-import KeyCodes from '../../utils/key-codes'
+import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { addClass, removeClass } from '../../utils/dom'
 import { isBoolean, isEvent, isFunction } from '../../utils/inspect'
+import { ENTER, SPACE } from '../../utils/key-codes'
 import { keys } from '../../utils/object'
 import { toString } from '../../utils/string'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
@@ -62,7 +62,7 @@ const linkPropKeys = keys(linkProps)
 
 export const props = { ...linkProps, ...btnProps }
 
-// --- Helper methods ---
+// --- Helper functions ---
 
 // Returns `true` if a tag's name equals `name`
 const tagIs = (tag, name) => toString(tag).toLowerCase() === toString(name).toLowerCase()
@@ -162,7 +162,7 @@ export const BButton = /*#__PURE__*/ Vue.extend({
         }
         const { keyCode } = evt
         // Add SPACE handler for `href="#"` and ENTER handler for non-standard tags
-        if (keyCode === KeyCodes.SPACE || (keyCode === KeyCodes.ENTER && nonStandardTag)) {
+        if (keyCode === SPACE || (keyCode === ENTER && nonStandardTag)) {
           const target = evt.currentTarget || evt.target
           evt.preventDefault()
           target.click()
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index 1eefcd1a90b..3a2c74f0435 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -1,5 +1,4 @@
 import Vue from '../../utils/vue'
-import KeyCodes from '../../utils/key-codes'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
 import { arrayIncludes, concat } from '../../utils/array'
@@ -21,6 +20,18 @@ import {
 } from '../../utils/date'
 import { requestAF } from '../../utils/dom'
 import { isArray, isFunction, isPlainObject, isString } from '../../utils/inspect'
+import {
+  DOWN,
+  END,
+  ENTER,
+  HOME,
+  LEFT,
+  PAGEDOWN,
+  PAGEUP,
+  RIGHT,
+  SPACE,
+  UP
+} from '../../utils/key-codes'
 import { isLocaleRTL } from '../../utils/locale'
 import { toInteger } from '../../utils/number'
 import { toString } from '../../utils/string'
@@ -32,9 +43,6 @@ import { BIconChevronLeft, BIconChevronDoubleLeft, BIconCircleFill } from '../..
 
 const NAME = 'BCalendar'
 
-// Key Codes
-const { UP, DOWN, LEFT, RIGHT, PAGEUP, PAGEDOWN, HOME, END, ENTER, SPACE } = KeyCodes
-
 // --- BCalendar component ---
 
 // @vue/component
diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js
index a8445997f9f..2268b6ff17e 100644
--- a/src/components/carousel/carousel.js
+++ b/src/components/carousel/carousel.js
@@ -1,5 +1,4 @@
 import Vue from '../../utils/vue'
-import KeyCodes from '../../utils/key-codes'
 import noop from '../../utils/noop'
 import observeDom from '../../utils/observe-dom'
 import { getComponentConfig } from '../../utils/config'
@@ -7,6 +6,7 @@ import { selectAll, reflow, addClass, removeClass, setAttr } from '../../utils/d
 import { isBrowser, hasTouchSupport, hasPointerEventSupport } from '../../utils/env'
 import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../../utils/events'
 import { isUndefined } from '../../utils/inspect'
+import { ENTER, LEFT, RIGHT, SPACE } from '../../utils/key-codes'
 import { toInteger } from '../../utils/number'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -416,7 +416,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
     },
     handleClick(evt, fn) {
       const keyCode = evt.keyCode
-      if (evt.type === 'click' || keyCode === KeyCodes.SPACE || keyCode === KeyCodes.ENTER) {
+      if (evt.type === 'click' || keyCode === SPACE || keyCode === ENTER) {
         evt.preventDefault()
         evt.stopPropagation()
         fn()
@@ -609,10 +609,10 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
           return
         }
         const keyCode = evt.keyCode
-        if (keyCode === KeyCodes.LEFT || keyCode === KeyCodes.RIGHT) {
+        if (keyCode === LEFT || keyCode === RIGHT) {
           evt.preventDefault()
           evt.stopPropagation()
-          this[keyCode === KeyCodes.LEFT ? 'prev' : 'next']()
+          this[keyCode === LEFT ? 'prev' : 'next']()
         }
       }
     }
diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js
index 72787d75d80..44925d9b5ee 100644
--- a/src/components/form-file/form-file.js
+++ b/src/components/form-file/form-file.js
@@ -19,7 +19,7 @@ const NAME = 'BFormFile'
 const VALUE_EMPTY_DEPRECATED_MSG =
   'Setting "value"/"v-model" to an empty string for reset is deprecated. Set to "null" instead.'
 
-// --- Helper methods ---
+// --- Helper functions ---
 
 const isValidValue = value => isFile(value) || (isArray(value) && value.every(v => isValidValue(v)))
 
diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js
index 57f95b86302..7fabc966ba2 100644
--- a/src/components/form-spinbutton/form-spinbutton.js
+++ b/src/components/form-spinbutton/form-spinbutton.js
@@ -1,13 +1,13 @@
 import Vue from '../../utils/vue'
+import identity from '../../utils/identity'
 import { arrayIncludes, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { eventOnOff } from '../../utils/events'
 import { isFunction, isNull } from '../../utils/inspect'
+import { DOWN, END, HOME, PAGEUP, UP, PAGEDOWN } from '../../utils/key-codes'
 import { isLocaleRTL } from '../../utils/locale'
 import { toFloat, toInteger } from '../../utils/number'
 import { toString } from '../../utils/string'
-import identity from '../../utils/identity'
-import KeyCodes from '../../utils/key-codes'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BIconPlus, BIconDash } from '../../icons/icons'
@@ -16,8 +16,6 @@ import { BIconPlus, BIconDash } from '../../icons/icons'
 
 const NAME = 'BFormSpinbutton'
 
-const { UP, DOWN, HOME, END, PAGEUP, PAGEDOWN } = KeyCodes
-
 // Default for spin button range and step
 const DEFAULT_MIN = 1
 const DEFAULT_MAX = 100
diff --git a/src/components/form-tags/form-tag.js b/src/components/form-tags/form-tag.js
index 969d2eb47bc..12d20f2d544 100644
--- a/src/components/form-tags/form-tag.js
+++ b/src/components/form-tags/form-tag.js
@@ -1,6 +1,6 @@
 import Vue from '../../utils/vue'
-import KeyCodes from '../../utils/key-codes'
 import { getComponentConfig } from '../../utils/config'
+import { DELETE } from '../../utils/key-codes'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BBadge } from '../badge/badge'
@@ -40,10 +40,7 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
   methods: {
     onDelete(evt) {
       const { type, keyCode } = evt
-      if (
-        !this.disabled &&
-        (type === 'click' || (type === 'keydown' && keyCode === KeyCodes.DELETE))
-      ) {
+      if (!this.disabled && (type === 'click' || (type === 'keydown' && keyCode === DELETE))) {
         this.$emit('remove')
       }
     }
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
index 58f229117e5..d81ae0c905c 100644
--- a/src/components/form-tags/form-tags.js
+++ b/src/components/form-tags/form-tags.js
@@ -1,13 +1,13 @@
 // Tagged input form control
 // Based loosely on https://adamwathan.me/renderless-components-in-vuejs/
 import Vue from '../../utils/vue'
-import KeyCodes from '../../utils/key-codes'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
 import { arrayIncludes, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { matches, requestAF, select } from '../../utils/dom'
 import { isEvent, isFunction, isString } from '../../utils/inspect'
+import { BACKSPACE, DELETE, ENTER } from '../../utils/key-codes'
 import { escapeRegExp, toString, trim, trimLeft } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -26,9 +26,6 @@ const TYPES = ['text', 'email', 'tel', 'url', 'number']
 // Pre-compiled regular expressions for performance reasons
 const RX_SPACES = /[\s\uFEFF\xA0]+/g
 
-// KeyCode constants
-const { ENTER, BACKSPACE, DELETE } = KeyCodes
-
 // --- Utility methods ---
 
 // Escape special chars in string and replace
diff --git a/src/components/image/img.js b/src/components/image/img.js
index 3f69d25467d..a618d46afc3 100644
--- a/src/components/image/img.js
+++ b/src/components/image/img.js
@@ -96,7 +96,7 @@ export const props = {
   }
 }
 
-// --- Helper methods ---
+// --- Helper functions ---
 
 const makeBlankImgSrc = (width, height, color) => {
   const src = encodeURIComponent(
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 0ef9b96b4bc..f994867f413 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -1,6 +1,5 @@
-import Vue from '../../utils/vue'
 import BVTransition from '../../utils/bv-transition'
-import KeyCodes from '../../utils/key-codes'
+import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import observeDom from '../../utils/observe-dom'
 import { arrayIncludes, concat } from '../../utils/array'
@@ -10,6 +9,7 @@ import { isBrowser } from '../../utils/env'
 import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../../utils/events'
 import { stripTags } from '../../utils/html'
 import { isString, isUndefinedOrNull } from '../../utils/inspect'
+import { ESC } from '../../utils/key-codes'
 import { HTMLElement } from '../../utils/safe-types'
 import { BTransporterSingle } from '../../utils/transporter'
 import idMixin from '../../mixins/id'
@@ -706,7 +706,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
     },
     onEsc(evt) {
       // If ESC pressed, hide modal
-      if (evt.keyCode === KeyCodes.ESC && this.isVisible && !this.noCloseOnEsc) {
+      if (evt.keyCode === ESC && this.isVisible && !this.noCloseOnEsc) {
         this.hide('esc')
       }
     },
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index 75b699b1a0c..98bcd805cfd 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -1,7 +1,7 @@
 import Vue from '../../utils/vue'
-import KeyCodes from '../../utils/key-codes'
-import { contains } from '../../utils/dom'
 import { getComponentConfig } from '../../utils/config'
+import { contains } from '../../utils/dom'
+import { ESC } from '../../utils/key-codes'
 import { toString } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import listenOnRootMixin from '../../mixins/listen-on-root'
@@ -299,7 +299,7 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
     },
     onKeydown(evt) {
       const { keyCode } = evt
-      if (!this.noCloseOnEsc && keyCode === KeyCodes.ESC) {
+      if (!this.noCloseOnEsc && keyCode === ESC) {
         this.hide()
       }
     },
diff --git a/src/components/table/helpers/mixin-tbody.js b/src/components/table/helpers/mixin-tbody.js
index 7141f92c40a..36976c897e4 100644
--- a/src/components/table/helpers/mixin-tbody.js
+++ b/src/components/table/helpers/mixin-tbody.js
@@ -1,6 +1,6 @@
-import KeyCodes from '../../../utils/key-codes'
 import { arrayIncludes, from as arrayFrom } from '../../../utils/array'
 import { closest, isElement } from '../../../utils/dom'
+import { DOWN, END, ENTER, HOME, SPACE, UP } from '../../../utils/key-codes'
 import { props as tbodyProps, BTbody } from '../tbody'
 import filterEvent from './filter-event'
 import textSelectionActive from './text-selection-active'
@@ -18,7 +18,7 @@ export default {
   mixins: [tbodyRowMixin],
   props,
   methods: {
-    // Helper methods
+    // Helper functions
     getTbodyTrs() {
       // Returns all the item TR elements (excludes detail and spacer rows)
       // `this.$refs.itemRows` is an array of item TR components/elements
@@ -69,14 +69,12 @@ export default {
         return
       }
       const keyCode = evt.keyCode
-      if (arrayIncludes([KeyCodes.ENTER, KeyCodes.SPACE], keyCode)) {
+      if (arrayIncludes([ENTER, SPACE], keyCode)) {
         // Emulated click for keyboard users, transfer to click handler
         evt.stopPropagation()
         evt.preventDefault()
         this.onTBodyRowClicked(evt)
-      } else if (
-        arrayIncludes([KeyCodes.UP, KeyCodes.DOWN, KeyCodes.HOME, KeyCodes.END], keyCode)
-      ) {
+      } else if (arrayIncludes([UP, DOWN, HOME, END], keyCode)) {
         // Keyboard navigation
         const rowIndex = this.getTbodyTrIndex(target)
         if (rowIndex > -1) {
@@ -84,16 +82,16 @@ export default {
           evt.preventDefault()
           const trs = this.getTbodyTrs()
           const shift = evt.shiftKey
-          if (keyCode === KeyCodes.HOME || (shift && keyCode === KeyCodes.UP)) {
+          if (keyCode === HOME || (shift && keyCode === UP)) {
             // Focus first row
             trs[0].focus()
-          } else if (keyCode === KeyCodes.END || (shift && keyCode === KeyCodes.DOWN)) {
+          } else if (keyCode === END || (shift && keyCode === DOWN)) {
             // Focus last row
             trs[trs.length - 1].focus()
-          } else if (keyCode === KeyCodes.UP && rowIndex > 0) {
+          } else if (keyCode === UP && rowIndex > 0) {
             // Focus previous row
             trs[rowIndex - 1].focus()
-          } else if (keyCode === KeyCodes.DOWN && rowIndex < trs.length - 1) {
+          } else if (keyCode === DOWN && rowIndex < trs.length - 1) {
             // Focus next row
             trs[rowIndex + 1].focus()
           }
diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js
index 8083951c79e..4071c32491e 100644
--- a/src/components/table/helpers/mixin-thead.js
+++ b/src/components/table/helpers/mixin-thead.js
@@ -1,9 +1,9 @@
 import identity from '../../../utils/identity'
-import KeyCodes from '../../../utils/key-codes'
 import startCase from '../../../utils/startcase'
 import { getComponentConfig } from '../../../utils/config'
 import { htmlOrText } from '../../../utils/html'
 import { isUndefinedOrNull } from '../../../utils/inspect'
+import { ENTER, SPACE } from '../../../utils/key-codes'
 import filterEvent from './filter-event'
 import textSelectionActive from './text-selection-active'
 import { BThead } from '../thead'
@@ -83,7 +83,7 @@ export default {
           }
           handlers.keydown = evt => {
             const keyCode = evt.keyCode
-            if (keyCode === KeyCodes.ENTER || keyCode === KeyCodes.SPACE) {
+            if (keyCode === ENTER || keyCode === SPACE) {
               this.headClicked(evt, field, isFoot)
             }
           }
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index cf6e649ae07..2d6a656c3c3 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -1,6 +1,5 @@
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
-import KeyCodes from '../../utils/key-codes'
 import looseEqual from '../../utils/loose-equal'
 import observeDom from '../../utils/observe-dom'
 import stableSort from '../../utils/stable-sort'
@@ -8,6 +7,7 @@ import { arrayIncludes, concat } from '../../utils/array'
 import { BvEvent } from '../../utils/bv-event.class'
 import { requestAF, selectAll } from '../../utils/dom'
 import { isEvent } from '../../utils/inspect'
+import { DOWN, END, HOME, LEFT, RIGHT, SPACE, UP } from '../../utils/key-codes'
 import { toInteger } from '../../utils/number'
 import { omit } from '../../utils/object'
 import idMixin from '../../mixins/id'
@@ -73,7 +73,7 @@ const BTabButtonHelper = /*#__PURE__*/ Vue.extend({
       if (type === 'click') {
         stop()
         this.$emit('click', evt)
-      } else if (type === 'keydown' && key === KeyCodes.SPACE) {
+      } else if (type === 'keydown' && key === SPACE) {
         // For ARIA tabs the SPACE key will also trigger a click/select
         // Even with keyboard navigation disabled, SPACE should "click" the button
         // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/4323
@@ -81,16 +81,16 @@ const BTabButtonHelper = /*#__PURE__*/ Vue.extend({
         this.$emit('click', evt)
       } else if (type === 'keydown' && !this.noKeyNav) {
         // For keyboard navigation
-        if (key === KeyCodes.UP || key === KeyCodes.LEFT || key === KeyCodes.HOME) {
+        if (key === UP || key === LEFT || key === HOME) {
           stop()
-          if (shift || key === KeyCodes.HOME) {
+          if (shift || key === HOME) {
             this.$emit('first', evt)
           } else {
             this.$emit('prev', evt)
           }
-        } else if (key === KeyCodes.DOWN || key === KeyCodes.RIGHT || key === KeyCodes.END) {
+        } else if (key === DOWN || key === RIGHT || key === END) {
           stop()
-          if (shift || key === KeyCodes.END) {
+          if (shift || key === END) {
             this.$emit('last', evt)
           } else {
             this.$emit('next', evt)
diff --git a/src/components/time/time.js b/src/components/time/time.js
index 649b9a76be2..992c69cbe15 100644
--- a/src/components/time/time.js
+++ b/src/components/time/time.js
@@ -1,21 +1,18 @@
 // BTime control (not form input control)
 import Vue from '../../utils/vue'
-// Utilities
 import identity from '../../utils/identity'
-import KeyCodes from '../../utils/key-codes'
 import looseEqual from '../../utils/loose-equal'
 import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { createDate, createDateFormatter } from '../../utils/date'
 import { contains, requestAF } from '../../utils/dom'
 import { isNull, isUndefinedOrNull } from '../../utils/inspect'
+import { LEFT, RIGHT } from '../../utils/key-codes'
 import { isLocaleRTL } from '../../utils/locale'
 import { toInteger } from '../../utils/number'
 import { toString } from '../../utils/string'
-// Mixins
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
-// Sub components used
 import { BFormSpinbutton } from '../form-spinbutton/form-spinbutton'
 import { BIconCircleFill, BIconChevronUp } from '../../icons/icons'
 
@@ -25,8 +22,6 @@ const NAME = 'BTime'
 
 const NUMERIC = 'numeric'
 
-const { LEFT, RIGHT } = KeyCodes
-
 // Time string RegExpr (optional seconds)
 const RE_TIME = /^([0-1]?[0-9]|2[0-3]):[0-5]?[0-9](:[0-5]?[0-9])?$/
 
diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
index 512b38625d1..a51592357b5 100644
--- a/src/components/tooltip/tooltip.js
+++ b/src/components/tooltip/tooltip.js
@@ -253,7 +253,7 @@ export const BTooltip = /*#__PURE__*/ Vue.extend({
       // And pass the title prop as a fallback
       this.setTitle(this.$scopedSlots.default || this.title)
     },
-    // Helper methods for `updateContent()`
+    // Helper functions for `updateContent()`
     setTitle(val) {
       val = isUndefinedOrNull(val) ? '' : val
       // We only update the value if it has changed
diff --git a/src/directives/modal/modal.js b/src/directives/modal/modal.js
index 21ee73e1c39..71595001ffc 100644
--- a/src/directives/modal/modal.js
+++ b/src/directives/modal/modal.js
@@ -1,7 +1,7 @@
-import KeyCodes from '../../utils/key-codes'
 import { getAttr, hasAttr, isDisabled, matches, select, setAttr } from '../../utils/dom'
 import { EVENT_OPTIONS_PASSIVE, eventOn, eventOff } from '../../utils/events'
 import { isString } from '../../utils/inspect'
+import { ENTER, SPACE } from '../../utils/key-codes'
 import { keys } from '../../utils/object'
 
 // Emitted show event for modal
@@ -46,10 +46,7 @@ const bind = (el, binding, vnode) => {
         const type = evt.type
         const key = evt.keyCode
         // Open modal only if trigger is not disabled
-        if (
-          type === 'click' ||
-          (type === 'keydown' && (key === KeyCodes.ENTER || key === KeyCodes.SPACE))
-        ) {
+        if (type === 'click' || (type === 'keydown' && (key === ENTER || key === SPACE))) {
           vnode.context.$root.$emit(EVENT_SHOW, target, currentTarget)
         }
       }
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
index 2bfb80041a5..d22f419cdf8 100644
--- a/src/mixins/dropdown.js
+++ b/src/mixins/dropdown.js
@@ -1,8 +1,8 @@
 import Popper from 'popper.js'
-import KeyCodes from '../utils/key-codes'
 import { BvEvent } from '../utils/bv-event.class'
 import { closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
 import { isNull } from '../utils/inspect'
+import { DOWN, ENTER, ESC, SPACE, UP } from '../utils/key-codes'
 import { HTMLElement } from '../utils/safe-types'
 import { warn } from '../utils/warn'
 import clickOutMixin from './click-out'
@@ -317,10 +317,7 @@ export default {
       const { type, keyCode } = evt
       if (
         type !== 'click' &&
-        !(
-          type === 'keydown' &&
-          [KeyCodes.ENTER, KeyCodes.SPACE, KeyCodes.DOWN].indexOf(keyCode) !== -1
-        )
+        !(type === 'keydown' && [ENTER, SPACE, DOWN].indexOf(keyCode) !== -1)
       ) {
         /* istanbul ignore next */
         return
@@ -355,13 +352,13 @@ export default {
     // Called from dropdown menu context
     onKeydown(evt) {
       const { keyCode } = evt
-      if (keyCode === KeyCodes.ESC) {
+      if (keyCode === ESC) {
         // Close on ESC
         this.onEsc(evt)
-      } else if (keyCode === KeyCodes.DOWN) {
+      } else if (keyCode === DOWN) {
         // Down Arrow
         this.focusNext(evt, false)
-      } else if (keyCode === KeyCodes.UP) {
+      } else if (keyCode === UP) {
         // Up Arrow
         this.focusNext(evt, true)
       }
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
index 15a742d6f5f..69460098d9e 100644
--- a/src/mixins/pagination.js
+++ b/src/mixins/pagination.js
@@ -1,7 +1,7 @@
-import KeyCodes from '../utils/key-codes'
 import range from '../utils/range'
 import { isVisible, isDisabled, selectAll, getAttr } from '../utils/dom'
 import { isFunction, isNull } from '../utils/inspect'
+import { DOWN, LEFT, RIGHT, SPACE, UP } from '../utils/key-codes'
 import { toInteger } from '../utils/number'
 import { toString } from '../utils/string'
 import { warn } from '../utils/warn'
@@ -19,7 +19,7 @@ const ELLIPSIS_THRESHOLD = 3
 // Default # of buttons limit
 const DEFAULT_LIMIT = 5
 
-// --- Helper methods ---
+// --- Helper functions ---
 
 // Make an array of N to N+X
 const makePageArray = (startNumber, numberOfPages) =>
@@ -40,7 +40,7 @@ const sanitizeCurrentPage = (val, numberOfPages) => {
 // Links don't normally respond to SPACE, so we add that
 // functionality via this handler
 const onSpaceKey = evt => {
-  if (evt.keyCode === KeyCodes.SPACE) {
+  if (evt.keyCode === SPACE) {
     evt.preventDefault() // Stop page from scrolling
     evt.stopImmediatePropagation()
     evt.stopPropagation()
@@ -355,10 +355,10 @@ export default {
         // We disable left/right keyboard navigation in `<b-pagination-nav>`
         return
       }
-      if (keyCode === KeyCodes.LEFT || keyCode === KeyCodes.UP) {
+      if (keyCode === LEFT || keyCode === UP) {
         evt.preventDefault()
         shiftKey ? this.focusFirst() : this.focusPrev()
-      } else if (keyCode === KeyCodes.RIGHT || keyCode === KeyCodes.DOWN) {
+      } else if (keyCode === RIGHT || keyCode === DOWN) {
         evt.preventDefault()
         shiftKey ? this.focusLast() : this.focusNext()
       }
diff --git a/src/utils/key-codes.js b/src/utils/key-codes.js
index 8d47db5bb91..1cab07d4ed7 100644
--- a/src/utils/key-codes.js
+++ b/src/utils/key-codes.js
@@ -1,30 +1,21 @@
-/*
- * Key Codes (events)
- */
-import { freeze } from './object'
-
-const KEY_CODES = freeze({
-  SPACE: 32,
-  ENTER: 13,
-  ESC: 27,
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
-  PAGEUP: 33,
-  PAGEDOWN: 34,
-  HOME: 36,
-  END: 35,
-  TAB: 9,
-  SHIFT: 16,
-  CTRL: 17,
-  BACKSPACE: 8,
-  ALT: 18,
-  PAUSE: 19,
-  BREAK: 19,
-  INSERT: 45,
-  INS: 45,
-  DELETE: 46
-})
-
-export default KEY_CODES
+export const ALT = 18
+export const BACKSPACE = 8
+export const BREAK = 19
+export const CTRL = 17
+export const DELETE = 46
+export const DOWN = 40
+export const END = 35
+export const ENTER = 13
+export const ESC = 27
+export const HOME = 36
+export const INS = 45
+export const INSERT = 45
+export const LEFT = 37
+export const PAGEDOWN = 34
+export const PAGEUP = 33
+export const PAUSE = 19
+export const RIGHT = 39
+export const SHIFT = 16
+export const SPACE = 32
+export const TAB = 9
+export const UP = 38

From f3a13cdd964fd4143f8254ed67782b9aafa47de9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 09:27:19 +0200
Subject: [PATCH 02/49] Update form-rating.js

---
 src/components/form-rating/form-rating.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/form-rating/form-rating.js b/src/components/form-rating/form-rating.js
index 6cff0db2d76..42cc8396941 100644
--- a/src/components/form-rating/form-rating.js
+++ b/src/components/form-rating/form-rating.js
@@ -1,12 +1,12 @@
 import Vue from '../../utils/vue'
+import identity from '../../utils/identity'
 import { arrayIncludes, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { isNull } from '../../utils/inspect'
+import { LEFT, RIGHT, UP, DOWN } from '../../utils/key-codes'
 import { isLocaleRTL } from '../../utils/locale'
 import { toInteger, toFloat } from '../../utils/number'
 import { toString } from '../../utils/string'
-import identity from '../../utils/identity'
-import KeyCodes from '../../utils/key-codes'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BIcon } from '../../icons/icon'
@@ -17,8 +17,6 @@ const NAME = 'BFormRating'
 const MIN_STARS = 3
 const DEFAULT_STARS = 5
 
-const { LEFT, RIGHT, UP, DOWN } = KeyCodes
-
 // --- Private helper component ---
 // @vue/component
 const BVFormRatingStar = Vue.extend({

From 01954f54dc87e0ccb02fcd6beadaa37b4ab54421 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 09:28:28 +0200
Subject: [PATCH 03/49] Unify comments

---
 docs/pages/play.vue                         | 2 +-
 docs/plugins/play.js                        | 2 +-
 src/components/button/button.js             | 2 +-
 src/components/form-file/form-file.js       | 2 +-
 src/components/image/img.js                 | 2 +-
 src/components/pagination/pagination.js     | 2 +-
 src/components/table/helpers/mixin-tbody.js | 2 +-
 src/components/tooltip/tooltip.js           | 2 +-
 src/mixins/pagination.js                    | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/pages/play.vue b/docs/pages/play.vue
index ecbe7a1036f..5bd29ca1551 100644
--- a/docs/pages/play.vue
+++ b/docs/pages/play.vue
@@ -356,7 +356,7 @@ const STORAGE_KEYS = {
 // Maximum age of localStorage before we revert back to defaults
 const STORAGE_MAX_RETENTION = 7 * 24 * 60 * 60 * 1000 // 7 days
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 // Remove a node from its parent's children
 const removeNode = node => node && node.parentNode && node.parentNode.removeChild(node)
diff --git a/docs/plugins/play.js b/docs/plugins/play.js
index 3cb4dcfa32c..09ee07eace2 100644
--- a/docs/plugins/play.js
+++ b/docs/plugins/play.js
@@ -14,7 +14,7 @@ const CLASS_NAMES_EDITABLE = 'editable'
 const CLASS_NAMES_LIVE = 'live'
 const CLASS_NAMES_ERROR = 'error'
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 // Default "transpiler" function
 let compiler = code => code
diff --git a/src/components/button/button.js b/src/components/button/button.js
index eef02904bd5..2fe1fc98dcf 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -62,7 +62,7 @@ const linkPropKeys = keys(linkProps)
 
 export const props = { ...linkProps, ...btnProps }
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 // Returns `true` if a tag's name equals `name`
 const tagIs = (tag, name) => toString(tag).toLowerCase() === toString(name).toLowerCase()
diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js
index b7ae45e21ce..dc257a9acae 100644
--- a/src/components/form-file/form-file.js
+++ b/src/components/form-file/form-file.js
@@ -19,7 +19,7 @@ const NAME = 'BFormFile'
 const VALUE_EMPTY_DEPRECATED_MSG =
   'Setting "value"/"v-model" to an empty string for reset is deprecated. Set to "null" instead.'
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 const isValidValue = value => isFile(value) || (isArray(value) && value.every(v => isValidValue(v)))
 
diff --git a/src/components/image/img.js b/src/components/image/img.js
index a618d46afc3..254237231cd 100644
--- a/src/components/image/img.js
+++ b/src/components/image/img.js
@@ -96,7 +96,7 @@ export const props = {
   }
 }
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 const makeBlankImgSrc = (width, height, color) => {
   const src = encodeURIComponent(
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index aa629c6d0f6..7b202a2ec97 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -31,7 +31,7 @@ const props = {
   }
 }
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 // Sanitize the provided per page number (converting to a number)
 const sanitizePerPage = val => Math.max(toInteger(val) || DEFAULT_PER_PAGE, 1)
diff --git a/src/components/table/helpers/mixin-tbody.js b/src/components/table/helpers/mixin-tbody.js
index cbebe8c589c..4e7aeb49188 100644
--- a/src/components/table/helpers/mixin-tbody.js
+++ b/src/components/table/helpers/mixin-tbody.js
@@ -18,7 +18,7 @@ export default {
   mixins: [tbodyRowMixin],
   props,
   methods: {
-    // Helper functions
+    // Utility methods
     getTbodyTrs() {
       // Returns all the item TR elements (excludes detail and spacer rows)
       // `this.$refs.itemRows` is an array of item TR components/elements
diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
index a51592357b5..6dd9fa4da52 100644
--- a/src/components/tooltip/tooltip.js
+++ b/src/components/tooltip/tooltip.js
@@ -253,7 +253,7 @@ export const BTooltip = /*#__PURE__*/ Vue.extend({
       // And pass the title prop as a fallback
       this.setTitle(this.$scopedSlots.default || this.title)
     },
-    // Helper functions for `updateContent()`
+    // Utility methods for `updateContent()`
     setTitle(val) {
       val = isUndefinedOrNull(val) ? '' : val
       // We only update the value if it has changed
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
index b8759a87d97..26d06fa070f 100644
--- a/src/mixins/pagination.js
+++ b/src/mixins/pagination.js
@@ -19,7 +19,7 @@ const ELLIPSIS_THRESHOLD = 3
 // Default # of buttons limit
 const DEFAULT_LIMIT = 5
 
-// --- Helper functions ---
+// --- Utility methods ---
 
 // Make an array of N to N+X
 const makePageArray = (startNumber, numberOfPages) =>

From eb45f87c1447ce1f53e811b4f1216064fc3bf740 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 23:47:53 +0200
Subject: [PATCH 04/49] Update form-rating.spec.js

---
 src/components/form-rating/form-rating.spec.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/form-rating/form-rating.spec.js b/src/components/form-rating/form-rating.spec.js
index c5ba39be158..4f08388b2f8 100644
--- a/src/components/form-rating/form-rating.spec.js
+++ b/src/components/form-rating/form-rating.spec.js
@@ -221,7 +221,9 @@ describe('form-rating', () => {
       propsData: {
         showValue: true,
         value: '3.5',
-        precision: 2
+        precision: 2,
+        // Define a fixed locale to reliably test formatted text
+        locale: 'en'
       }
     })
 
@@ -315,7 +317,9 @@ describe('form-rating', () => {
     const wrapper = mount(BFormRating, {
       propsData: {
         showValue: true,
-        value: null
+        value: null,
+        // Define a fixed locale to reliably test formatted text
+        locale: 'en'
       }
     })
 

From 8855171c844f617073818b332b239a5ba4ff3dfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 23:48:31 +0200
Subject: [PATCH 05/49] Enhance `b-alert` code

---
 src/components/alert/alert.js | 55 ++++++++++++++++++-----------------
 src/utils/number.js           |  3 ++
 src/utils/number.spec.js      | 22 +++++++++++---
 3 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index 7b83ff04e92..487e737ae4f 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -1,13 +1,17 @@
+import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { requestAF } from '../../utils/dom'
 import { isBoolean } from '../../utils/inspect'
-import { toInteger } from '../../utils/number'
-import BVTransition from '../../utils/bv-transition'
+import { isNumeric, toInteger } from '../../utils/number'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButtonClose } from '../button/button-close'
 
+// --- Constants ---
 const NAME = 'BAlert'
+const CLASS_NAME = 'alert'
+
+// --- Utility methods ---
 
 // Convert `show` value to a number
 const parseCountDown = show => {
@@ -30,9 +34,7 @@ const parseShow = show => {
   return !!show
 }
 
-// Is a value number like (i.e. a number or a number as string)
-const isNumericLike = value => !isNaN(toInteger(value))
-
+// --- Main component ---
 // @vue/component
 export const BAlert = /*#__PURE__*/ Vue.extend({
   name: NAME,
@@ -65,8 +67,8 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
   },
   data() {
     return {
-      countDownTimerId: null,
       countDown: 0,
+      countDownTimeout: null,
       // If initially shown, we need to set these for SSR
       localShow: parseShow(this.show)
     }
@@ -77,8 +79,8 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
       this.localShow = parseShow(newVal)
     },
     countDown(newVal) {
-      this.clearTimer()
-      if (isNumericLike(this.show)) {
+      this.clearCountDownInterval()
+      if (isNumeric(this.show)) {
         // Ignore if this.show transitions to a boolean value.
         this.$emit('dismiss-count-down', newVal)
         if (this.show !== newVal) {
@@ -87,7 +89,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
         }
         if (newVal > 0) {
           this.localShow = true
-          this.countDownTimerId = setTimeout(() => {
+          this.countDownTimeout = setTimeout(() => {
             this.countDown--
           }, 1000)
         } else {
@@ -101,11 +103,11 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
       }
     },
     localShow(newVal) {
-      if (!newVal && (this.dismissible || isNumericLike(this.show))) {
+      if (!newVal && (this.dismissible || isNumeric(this.show))) {
         // Only emit dismissed events for dismissible or auto dismissing alerts
         this.$emit('dismissed')
       }
-      if (!isNumericLike(this.show) && this.show !== newVal) {
+      if (!isNumeric(this.show) && this.show !== newVal) {
         // Only emit booleans if we weren't passed a number via `this.show`
         this.$emit('input', newVal)
       }
@@ -120,27 +122,27 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
     this.localShow = parseShow(this.show)
   },
   beforeDestroy() {
-    this.clearTimer()
+    this.clearCountDownInterval()
   },
   methods: {
     dismiss() {
-      this.clearTimer()
+      this.clearCountDownInterval()
       this.countDown = 0
       this.localShow = false
     },
-    clearTimer() {
-      if (this.countDownTimerId) {
-        clearInterval(this.countDownTimerId)
-        this.countDownTimerId = null
+    clearCountDownInterval() {
+      if (this.countDownTimeout) {
+        clearTimeout(this.countDownTimeout)
+        this.countDownTimeout = null
       }
     }
   },
   render(h) {
-    let $alert // undefined
+    let $alert = h()
     if (this.localShow) {
+      const { dismissible, variant } = this
       let $dismissBtn = h()
-      if (this.dismissible) {
-        // Add dismiss button
+      if (dismissible) {
         $dismissBtn = h(
           BButtonClose,
           { attrs: { 'aria-label': this.dismissLabel }, on: { click: this.dismiss } },
@@ -150,18 +152,17 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
       $alert = h(
         'div',
         {
-          key: this._uid,
-          staticClass: 'alert',
+          staticClass: CLASS_NAME,
           class: {
-            'alert-dismissible': this.dismissible,
-            [`alert-${this.variant}`]: this.variant
+            [`${CLASS_NAME}-dismissible`]: dismissible,
+            [`${CLASS_NAME}-${variant}`]: !!variant
           },
-          attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true }
+          attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true },
+          key: this._uid
         },
         [$dismissBtn, this.normalizeSlot('default')]
       )
-      $alert = [$alert]
     }
-    return h(BVTransition, { props: { noFade: !this.fade } }, $alert)
+    return h(BVTransition, { props: { noFade: !this.fade } }, [$alert])
   }
 })
diff --git a/src/utils/number.js b/src/utils/number.js
index 2892515bca9..5a9895c52cb 100644
--- a/src/utils/number.js
+++ b/src/utils/number.js
@@ -17,3 +17,6 @@ export const toFloat = (value, defaultValue = NaN) => {
 // representation with `precision` digits after the decimal
 // Returns the string 'NaN' if the value cannot be converted
 export const toFixed = (val, precision) => toFloat(val).toFixed(toInteger(precision, 0))
+
+// Is a value number like (i.e. a number or a number as string)
+export const isNumeric = value => toInteger(value, null) !== null
diff --git a/src/utils/number.spec.js b/src/utils/number.spec.js
index 6ff1e2b6ed5..137030a3e25 100644
--- a/src/utils/number.spec.js
+++ b/src/utils/number.spec.js
@@ -1,7 +1,7 @@
-import { toFixed, toFloat, toInteger } from './number'
+import { isNumeric, toFixed, toFloat, toInteger } from './number'
 
 describe('utils/number', () => {
-  it('toInteger works', async () => {
+  it('toInteger() works', async () => {
     expect(toInteger(1)).toBe(1)
     expect(toInteger('1')).toBe(1)
     expect(toInteger(1e5)).toBe(100000)
@@ -17,7 +17,7 @@ describe('utils/number', () => {
     expect(toInteger(undefined, -1)).toBe(-1)
   })
 
-  it('toFloat works', async () => {
+  it('toFloat() works', async () => {
     expect(toFloat(1)).toBe(1)
     expect(toFloat('1')).toBe(1)
     expect(toFloat(1.23)).toBe(1.23)
@@ -37,7 +37,7 @@ describe('utils/number', () => {
     expect(toFloat(undefined, -1)).toBe(-1)
   })
 
-  it('toFixed works', async () => {
+  it('toFixed() works', async () => {
     expect(toFixed(1)).toBe('1')
     expect(toFixed(1.23)).toBe('1')
     expect(toFixed(1.78)).toBe('2')
@@ -69,4 +69,18 @@ describe('utils/number', () => {
     expect(toFixed('1 foo', null)).toBe('1')
     expect(toFixed('foo 1 bar', {})).toBe('NaN')
   })
+
+  it('isNumeric() works', async () => {
+    expect(isNumeric(1)).toBe(true)
+    expect(isNumeric('1')).toBe(true)
+    expect(isNumeric(1e5)).toBe(true)
+    expect(isNumeric('1e5')).toBe(true)
+    expect(isNumeric('256 foobar')).toBe(true)
+    expect(isNumeric('foo 256bar')).toBe(false)
+    expect(isNumeric({})).toBe(false)
+    expect(isNumeric([])).toBe(false)
+    expect(isNumeric(new Date())).toBe(false)
+    expect(isNumeric(null)).toBe(false)
+    expect(isNumeric(undefined)).toBe(false)
+  })
 })

From 74e8d2d5c48b5d39a4ca1bc6950af58d4e080ea7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 23:50:13 +0200
Subject: [PATCH 06/49] Update aspect.js

---
 src/components/aspect/aspect.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index 5ed4791c246..44e90ef384b 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -9,7 +9,8 @@ const CLASS_NAME = 'b-aspect'
 const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
 const RX_SEPARATOR = /[/:]/
 
-// --- Main Component ---
+// --- Main component ---
+// @vue/component
 export const BAspect = /*#__PURE__*/ Vue.extend({
   name: NAME,
   mixins: [normalizeSlotMixin],

From 8b2f40780ead92c4da2c974b4354ed476fbbc485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 23:51:32 +0200
Subject: [PATCH 07/49] Update avatar.js

---
 src/components/avatar/avatar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index 3fa6f1538b7..afd9b8089df 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -3,11 +3,11 @@ import pluckProps from '../../utils/pluck-props'
 import { getComponentConfig } from '../../utils/config'
 import { isNumber, isString } from '../../utils/inspect'
 import { toFloat } from '../../utils/number'
+import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButton } from '../button/button'
 import { BLink } from '../link/link'
 import { BIcon } from '../../icons/icon'
 import { BIconPersonFill } from '../../icons/icons'
-import normalizeSlotMixin from '../../mixins/normalize-slot'
 
 // --- Constants ---
 const NAME = 'BAvatar'

From 331c997126e3ca97dc91d61ea18ff9f74426c212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 23:54:45 +0200
Subject: [PATCH 08/49] Update badge.js

---
 src/components/badge/badge.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js
index 9094a2d6356..edb81708ac6 100644
--- a/src/components/badge/badge.js
+++ b/src/components/badge/badge.js
@@ -1,5 +1,5 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import pluckProps from '../../utils/pluck-props'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'

From 5eb2433b9a3103b3e1db1c85c149acff7d17d85f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 23:54:50 +0200
Subject: [PATCH 09/49] Update breadcrumb-link.js

---
 src/components/breadcrumb/breadcrumb-link.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js
index 038e6a379f2..b4590f16ce6 100644
--- a/src/components/breadcrumb/breadcrumb-link.js
+++ b/src/components/breadcrumb/breadcrumb-link.js
@@ -1,5 +1,5 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { htmlOrText } from '../../utils/html'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'

From 7ded553c7e9a8a3c23a1ef3412f7b4fa9a25a222 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 15 Apr 2020 23:59:46 +0200
Subject: [PATCH 10/49] Update breadcrumb.js

---
 src/components/breadcrumb/breadcrumb.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
index 542dce762bc..b61be677d68 100644
--- a/src/components/breadcrumb/breadcrumb.js
+++ b/src/components/breadcrumb/breadcrumb.js
@@ -1,5 +1,5 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import Vue from '../../utils/vue'
 import { isArray, isObject } from '../../utils/inspect'
 import { toString } from '../../utils/string'
 import { BBreadcrumbItem } from './breadcrumb-item'
@@ -17,22 +17,27 @@ export const BBreadcrumb = /*#__PURE__*/ Vue.extend({
   functional: true,
   props,
   render(h, { props, data, children }) {
+    const { items } = props
     let childNodes = children
-    // Build child nodes from items if given.
-    if (isArray(props.items)) {
+
+    // Build child nodes from items if given
+    if (isArray(items)) {
+      const itemsCount = props.items.length
       let activeDefined = false
-      childNodes = props.items.map((item, idx) => {
+      childNodes = items.map((item, idx) => {
         if (!isObject(item)) {
           item = { text: toString(item) }
         }
-        // Copy the value here so we can normalize it.
+
+        // Copy the value here so we can normalize it
         let active = item.active
         if (active) {
           activeDefined = true
         }
+
+        // Auto-detect active by position in list
         if (!active && !activeDefined) {
-          // Auto-detect active by position in list.
-          active = idx + 1 === props.items.length
+          active = idx + 1 === itemsCount
         }
 
         return h(BBreadcrumbItem, { props: { ...item, active } })

From ee9d5b8f1bf755f6609ddd6f586f85df6efc6582 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 00:07:06 +0200
Subject: [PATCH 11/49] Update button-close.js

---
 src/components/button/button-close.js | 28 ++++++++++++---------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/button/button-close.js b/src/components/button/button-close.js
index 2c16d7300f7..f3420350692 100644
--- a/src/components/button/button-close.js
+++ b/src/components/button/button-close.js
@@ -1,11 +1,12 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { isEvent } from '../../utils/inspect'
-import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
 
+// --- Constants ---
 const NAME = 'BButtonClose'
 
+// --- Props ---
 const props = {
   content: {
     type: String,
@@ -25,30 +26,29 @@ const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BButtonClose = /*#__PURE__*/ Vue.extend({
   name: NAME,
   functional: true,
   props,
-  render(h, { props, data, slots, scopedSlots }) {
-    const $slots = slots()
-    const $scopedSlots = scopedSlots || {}
-
+  render(h, { props, data, children }) {
+    const { disabled, textVariant, ariaLabel } = props
     const componentData = {
       staticClass: 'close',
       class: {
-        [`text-${props.textVariant}`]: props.textVariant
+        [`text-${textVariant}`]: textVariant
       },
       attrs: {
         type: 'button',
-        disabled: props.disabled,
-        'aria-label': props.ariaLabel ? String(props.ariaLabel) : null
+        disabled,
+        'aria-label': ariaLabel ? String(ariaLabel) : null
       },
       on: {
         click(evt) {
           // Ensure click on button HTML content is also disabled
           /* istanbul ignore if: bug in JSDOM still emits click on inner element */
-          if (props.disabled && isEvent(evt)) {
+          if (disabled && isEvent(evt)) {
             evt.stopPropagation()
             evt.preventDefault()
           }
@@ -56,13 +56,9 @@ export const BButtonClose = /*#__PURE__*/ Vue.extend({
       }
     }
     // Careful not to override the default slot with innerHTML
-    if (!hasNormalizedSlot('default', $scopedSlots, $slots)) {
+    if (!children) {
       componentData.domProps = { innerHTML: props.content }
     }
-    return h(
-      'button',
-      mergeData(data, componentData),
-      normalizeSlot('default', {}, $scopedSlots, $slots)
-    )
+    return h('button', mergeData(data, componentData), [children])
   }
 })

From 3ce5f8ff8c89cca8f840416b4fde87407a6c8c15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 00:10:37 +0200
Subject: [PATCH 12/49] Update number.spec.js

---
 src/utils/number.spec.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/utils/number.spec.js b/src/utils/number.spec.js
index 137030a3e25..7c41aba9b42 100644
--- a/src/utils/number.spec.js
+++ b/src/utils/number.spec.js
@@ -71,6 +71,8 @@ describe('utils/number', () => {
   })
 
   it('isNumeric() works', async () => {
+    expect(isNumeric(0)).toBe(true)
+    expect(isNumeric('0')).toBe(true)
     expect(isNumeric(1)).toBe(true)
     expect(isNumeric('1')).toBe(true)
     expect(isNumeric(1e5)).toBe(true)

From f3f0e5bb685cbda8b81d5ec83afc47d86afb9425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 00:23:05 +0200
Subject: [PATCH 13/49] Add `suffixClass()` util

---
 src/components/alert/alert.js |  5 +++--
 src/utils/string.js           |  3 +++
 src/utils/string.spec.js      | 31 ++++++++++++++++++++++++-------
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index 487e737ae4f..04f45955497 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -4,6 +4,7 @@ import { getComponentConfig } from '../../utils/config'
 import { requestAF } from '../../utils/dom'
 import { isBoolean } from '../../utils/inspect'
 import { isNumeric, toInteger } from '../../utils/number'
+import { suffixClass } from '../../utils/string'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButtonClose } from '../button/button-close'
 
@@ -154,8 +155,8 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
         {
           staticClass: CLASS_NAME,
           class: {
-            [`${CLASS_NAME}-dismissible`]: dismissible,
-            [`${CLASS_NAME}-${variant}`]: !!variant
+            [suffixClass(CLASS_NAME, 'dismissible')]: dismissible,
+            [suffixClass(CLASS_NAME, variant)]: !!variant
           },
           attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true },
           key: this._uid
diff --git a/src/utils/string.js b/src/utils/string.js
index 82a562d2ff0..3561bd01e3a 100644
--- a/src/utils/string.js
+++ b/src/utils/string.js
@@ -62,3 +62,6 @@ export const lowerCase = str => toString(str).toLowerCase()
 
 // Upper case a string
 export const upperCase = str => toString(str).toUpperCase()
+
+// Suffix a class name
+export const suffixClass = (base, suffix) => [base, toString(suffix)].join('-')
diff --git a/src/utils/string.spec.js b/src/utils/string.spec.js
index 418aba65223..3bdbfaebd7b 100644
--- a/src/utils/string.spec.js
+++ b/src/utils/string.spec.js
@@ -1,7 +1,15 @@
-import { escapeRegExp, kebabCase, lowerFirst, pascalCase, toString, upperFirst } from './string'
+import {
+  escapeRegExp,
+  kebabCase,
+  lowerFirst,
+  pascalCase,
+  suffixClass,
+  toString,
+  upperFirst
+} from './string'
 
 describe('utils/string', () => {
-  it('kebabCase works', async () => {
+  it('kebabCase() works', async () => {
     expect(kebabCase('foo')).toBe('foo')
     expect(kebabCase('Foo')).toBe('foo')
     expect(kebabCase('fooBar')).toBe('foo-bar')
@@ -9,7 +17,7 @@ describe('utils/string', () => {
     expect(kebabCase('XFooBar')).toBe('x-foo-bar')
   })
 
-  it('pascalCase works', async () => {
+  it('pascalCase() works', async () => {
     expect(pascalCase('foo')).toBe('Foo')
     expect(pascalCase('Foo')).toBe('Foo')
     expect(pascalCase('fooBar')).toBe('FooBar')
@@ -19,7 +27,7 @@ describe('utils/string', () => {
     expect(pascalCase('xFooBar')).toBe('XFooBar')
   })
 
-  it('lowerFirst works', async () => {
+  it('lowerFirst() works', async () => {
     expect(lowerFirst('Upper')).toBe('upper')
     expect(lowerFirst(' Upper ')).toBe('upper')
     expect(lowerFirst('Upper case')).toBe('upper case')
@@ -30,7 +38,7 @@ describe('utils/string', () => {
     expect(lowerFirst(['Foo', 'bar'])).toBe('foo,bar')
   })
 
-  it('upperFirst works', async () => {
+  it('upperFirst() works', async () => {
     expect(upperFirst('lower')).toBe('Lower')
     expect(upperFirst(' lower ')).toBe('Lower')
     expect(upperFirst('lower case')).toBe('Lower case')
@@ -41,7 +49,7 @@ describe('utils/string', () => {
     expect(upperFirst(['foo', 'bar'])).toBe('Foo,bar')
   })
 
-  it('escapeRegExp works', async () => {
+  it('escapeRegExp() works', async () => {
     expect(escapeRegExp('Hello?')).toBe('Hello\\?')
     expect(escapeRegExp('$100')).toBe('\\$100')
     expect(escapeRegExp('10 * 5')).toBe('10 \\* 5')
@@ -50,7 +58,7 @@ describe('utils/string', () => {
     )
   })
 
-  it('toString works', async () => {
+  it('toString() works', async () => {
     expect(toString(null)).toBe('')
     expect(toString(undefined)).toBe('')
     expect(toString(true)).toBe('true')
@@ -75,4 +83,13 @@ describe('utils/string', () => {
   "bar"
 ]`)
   })
+
+  it('suffixClass() works', async () => {
+    const base = 'foo'
+    expect(suffixClass(base, 'bar')).toBe('foo-bar')
+    expect(suffixClass(base, '')).toBe('foo-')
+    expect(suffixClass(base, null)).toBe('foo-')
+    expect(suffixClass(base, 0)).toBe('foo-0')
+    expect(suffixClass(base, 1)).toBe('foo-1')
+  })
 })

From 9302781c0dd833ba95eb23254935b3f193d14b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 00:31:17 +0200
Subject: [PATCH 14/49] Update test.yml

---
 .github/workflows/test.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index cb835c26aa0..a20f4366265 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -193,6 +193,7 @@ jobs:
         run: yarn run bundlewatch
         env:
           BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
+          CI_BRANCH_BASE: "${{ github.head_ref }}"
 
   docs:
     needs: setup

From a8d4e3411ae2a0eb12391bd59015934c61d33fa2 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 15 Apr 2020 19:32:26 -0300
Subject: [PATCH 15/49] Update bv-tooltip.js

---
 src/components/tooltip/helpers/bv-tooltip.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js
index fce88b94a07..282b1635770 100644
--- a/src/components/tooltip/helpers/bv-tooltip.js
+++ b/src/components/tooltip/helpers/bv-tooltip.js
@@ -469,6 +469,7 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
     onTemplateShown() {
       const prevHoverState = this.$_hoverState
       this.$_hoverState = ''
+      /* istanbul ignore next */
       if (prevHoverState === 'out') {
         this.leave(null)
       }

From b64587caa9ad6ea3d8ec494817c11a804f451c69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 00:36:04 +0200
Subject: [PATCH 16/49] Update test.yml

---
 .github/workflows/test.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index a20f4366265..7f5029bb6a5 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -193,7 +193,7 @@ jobs:
         run: yarn run bundlewatch
         env:
           BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
-          CI_BRANCH_BASE: "${{ github.head_ref }}"
+          CI_BRANCH_BASE: "${{ github.base_ref }}"
 
   docs:
     needs: setup

From 7bf93cb19370197cd005bbbbd2218ae30eb2a2e6 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 15 Apr 2020 19:36:35 -0300
Subject: [PATCH 17/49] Update button.js

---
 src/components/button/button.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/button/button.js b/src/components/button/button.js
index 2fe1fc98dcf..d061ada29d4 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -7,7 +7,7 @@ import { addClass, removeClass } from '../../utils/dom'
 import { isBoolean, isEvent, isFunction } from '../../utils/inspect'
 import { ENTER, SPACE } from '../../utils/key-codes'
 import { keys } from '../../utils/object'
-import { toString } from '../../utils/string'
+import { suffixClass, toString } from '../../utils/string'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
 // --- Constants --
@@ -94,7 +94,7 @@ const isNonStandardTag = props => !isLink(props) && !isButton(props)
 const computeClass = props => [
   `btn-${props.variant || getComponentConfig(NAME, 'variant')}`,
   {
-    [`btn-${props.size}`]: props.size,
+    [suffixClass('btn', props.size)]: !!props.size,
     'btn-block': props.block,
     'rounded-pill': props.pill,
     'rounded-0': props.squared && !props.pill,

From eb9b23d65245091668e16b9ce54910b2135cc4f5 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 15 Apr 2020 19:41:03 -0300
Subject: [PATCH 18/49] Update form-size.js

---
 src/mixins/form-size.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/mixins/form-size.js b/src/mixins/form-size.js
index 0bc07771afb..4ca8d1e87bc 100644
--- a/src/mixins/form-size.js
+++ b/src/mixins/form-size.js
@@ -1,4 +1,5 @@
 import { getComponentConfig } from '../utils/config'
+import { suffixClass } from '../../utils/string'
 
 // @vue/component
 export default {
@@ -10,11 +11,11 @@ export default {
   },
   computed: {
     sizeFormClass() {
-      return [this.size ? `form-control-${this.size}` : null]
+      return [this.size ? suffixClass('form-control', this.size) : null]
     },
     /* istanbul ignore next: don't think this is used */
     sizeBtnClass() {
-      return [this.size ? `btn-${this.size}` : null]
+      return [this.size ? suffixClass('btn', this.size) : null]
     }
   }
 }

From 1d51414d77d429685cb2c702a6e284827e9d3610 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 15 Apr 2020 19:44:30 -0300
Subject: [PATCH 19/49] Update form-size.js

---
 src/mixins/form-size.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/form-size.js b/src/mixins/form-size.js
index 4ca8d1e87bc..60bf31be76b 100644
--- a/src/mixins/form-size.js
+++ b/src/mixins/form-size.js
@@ -1,5 +1,5 @@
 import { getComponentConfig } from '../utils/config'
-import { suffixClass } from '../../utils/string'
+import { suffixClass } from '../utils/string'
 
 // @vue/component
 export default {

From 10673077c474da81333c6cb23c6401a152a6b97d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 00:45:14 +0200
Subject: [PATCH 20/49] Update button.js

---
 src/components/button/button.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/button/button.js b/src/components/button/button.js
index d061ada29d4..36cb17d1e12 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -10,10 +10,11 @@ import { keys } from '../../utils/object'
 import { suffixClass, toString } from '../../utils/string'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
-// --- Constants --
-
+// --- Constants ---
 const NAME = 'BButton'
+const CLASS_NAME = 'btn'
 
+// --- Props ---
 const btnProps = {
   block: {
     type: Boolean,
@@ -92,10 +93,10 @@ const isNonStandardTag = props => !isLink(props) && !isButton(props)
 
 // Compute required classes (non static classes)
 const computeClass = props => [
-  `btn-${props.variant || getComponentConfig(NAME, 'variant')}`,
+  suffixClass(CLASS_NAME, props.variant || getComponentConfig(NAME, 'variant')),
   {
-    [suffixClass('btn', props.size)]: !!props.size,
-    'btn-block': props.block,
+    [suffixClass(CLASS_NAME, props.size)]: !!props.size,
+    [suffixClass(CLASS_NAME, 'block')]: props.block,
     'rounded-pill': props.pill,
     'rounded-0': props.squared && !props.pill,
     disabled: props.disabled,
@@ -108,13 +109,15 @@ const computeLinkProps = props => (isLink(props) ? pluckProps(linkPropKeys, prop
 
 // Compute the attributes for a button
 const computeAttrs = (props, data) => {
+  const { disabled } = props
   const button = isButton(props)
   const link = isLink(props)
   const toggle = isToggle(props)
   const nonStandardTag = isNonStandardTag(props)
   const hashLink = link && props.href === '#'
-  const role = data.attrs && data.attrs.role ? data.attrs.role : null
-  let tabindex = data.attrs ? data.attrs.tabindex : null
+  const attrs = data.attrs || {}
+  const role = attrs.role || null
+  let tabindex = attrs.tabindex || null
   if (nonStandardTag || hashLink) {
     tabindex = '0'
   }
@@ -122,13 +125,13 @@ const computeAttrs = (props, data) => {
     // Type only used for "real" buttons
     type: button && !link ? props.type : null,
     // Disabled only set on "real" buttons
-    disabled: button ? props.disabled : null,
+    disabled: button ? disabled : null,
     // We add a role of button when the tag is not a link or button for ARIA
     // Don't bork any role provided in `data.attrs` when `isLink` or `isButton`
     // Except when link has `href` of `#`
     role: nonStandardTag || hashLink ? 'button' : role,
     // We set the `aria-disabled` state for non-standard tags
-    'aria-disabled': nonStandardTag ? String(props.disabled) : null,
+    'aria-disabled': nonStandardTag ? String(disabled) : null,
     // For toggles, we need to set the pressed state for ARIA
     'aria-pressed': toggle ? String(props.pressed) : null,
     // `autocomplete="off"` is needed in toggle mode to prevent some browsers
@@ -138,10 +141,11 @@ const computeAttrs = (props, data) => {
     // Links are tabbable, but don't allow disabled, while non buttons or links
     // are not tabbable, so we mimic that functionality by disabling tabbing
     // when disabled, and adding a `tabindex="0"` to non buttons or non links
-    tabindex: props.disabled && !button ? '-1' : tabindex
+    tabindex: disabled && !button ? '-1' : tabindex
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BButton = /*#__PURE__*/ Vue.extend({
   name: NAME,

From 116b286892fb97bbd6ba66d8fa27cad50997160e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 00:49:22 +0200
Subject: [PATCH 21/49] Update button.js

---
 src/components/button/button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/button/button.js b/src/components/button/button.js
index 36cb17d1e12..f6d840201eb 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -196,7 +196,7 @@ export const BButton = /*#__PURE__*/ Vue.extend({
     }
 
     const componentData = {
-      staticClass: 'btn',
+      staticClass: CLASS_NAME,
       class: computeClass(props),
       props: computeLinkProps(props),
       attrs: computeAttrs(props, data),

From 24c4f2d5bdaf4560b0a304cb64d701136a4f36d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 01:02:19 +0200
Subject: [PATCH 22/49] Create `constants/` dir for constants

---
 .../button-toolbar/button-toolbar.js          |  2 +-
 src/components/button/button.js               |  2 +-
 src/components/calendar/calendar.js           | 24 +++++++++----------
 src/components/carousel/carousel.js           |  2 +-
 src/components/form-rating/form-rating.js     |  2 +-
 .../form-spinbutton/form-spinbutton.js        |  2 +-
 src/components/form-tags/form-tag.js          |  2 +-
 src/components/form-tags/form-tags.js         |  2 +-
 src/components/modal/modal.js                 |  2 +-
 src/components/sidebar/sidebar.js             |  2 +-
 src/components/table/helpers/mixin-tbody.js   |  2 +-
 src/components/table/helpers/mixin-thead.js   |  2 +-
 src/components/tabs/tabs.js                   |  2 +-
 src/components/time/time.js                   |  2 +-
 src/{utils => constants}/key-codes.js         |  0
 src/directives/modal/modal.js                 |  2 +-
 src/mixins/dropdown.js                        |  2 +-
 src/mixins/pagination.js                      |  2 +-
 18 files changed, 28 insertions(+), 28 deletions(-)
 rename src/{utils => constants}/key-codes.js (100%)

diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js
index f42b0c7ee77..30efd636374 100644
--- a/src/components/button-toolbar/button-toolbar.js
+++ b/src/components/button-toolbar/button-toolbar.js
@@ -1,6 +1,6 @@
+import { DOWN, LEFT, RIGHT, UP } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import { isVisible, selectAll } from '../../utils/dom'
-import { DOWN, LEFT, RIGHT, UP } from '../../utils/key-codes'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 
 const ITEM_SELECTOR = [
diff --git a/src/components/button/button.js b/src/components/button/button.js
index f6d840201eb..50a50120ea8 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -1,11 +1,11 @@
 import { mergeData } from 'vue-functional-data-merge'
+import { ENTER, SPACE } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { addClass, removeClass } from '../../utils/dom'
 import { isBoolean, isEvent, isFunction } from '../../utils/inspect'
-import { ENTER, SPACE } from '../../utils/key-codes'
 import { keys } from '../../utils/object'
 import { suffixClass, toString } from '../../utils/string'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index ef14ba1eca0..269396364b3 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -1,3 +1,15 @@
+import {
+  DOWN,
+  END,
+  ENTER,
+  HOME,
+  LEFT,
+  PAGEDOWN,
+  PAGEUP,
+  RIGHT,
+  SPACE,
+  UP
+} from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -22,18 +34,6 @@ import {
 } from '../../utils/date'
 import { requestAF } from '../../utils/dom'
 import { isArray, isFunction, isPlainObject, isString } from '../../utils/inspect'
-import {
-  DOWN,
-  END,
-  ENTER,
-  HOME,
-  LEFT,
-  PAGEDOWN,
-  PAGEUP,
-  RIGHT,
-  SPACE,
-  UP
-} from '../../utils/key-codes'
 import { isLocaleRTL } from '../../utils/locale'
 import { toInteger } from '../../utils/number'
 import { toString } from '../../utils/string'
diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js
index 8a6f629295e..d05e7b4b521 100644
--- a/src/components/carousel/carousel.js
+++ b/src/components/carousel/carousel.js
@@ -1,3 +1,4 @@
+import { ENTER, LEFT, RIGHT, SPACE } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import noop from '../../utils/noop'
 import observeDom from '../../utils/observe-dom'
@@ -6,7 +7,6 @@ import { selectAll, reflow, addClass, removeClass, setAttr } from '../../utils/d
 import { isBrowser, hasTouchSupport, hasPointerEventSupport } from '../../utils/env'
 import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../../utils/events'
 import { isUndefined } from '../../utils/inspect'
-import { ENTER, LEFT, RIGHT, SPACE } from '../../utils/key-codes'
 import { toInteger } from '../../utils/number'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
diff --git a/src/components/form-rating/form-rating.js b/src/components/form-rating/form-rating.js
index 42cc8396941..431b1c3ce74 100644
--- a/src/components/form-rating/form-rating.js
+++ b/src/components/form-rating/form-rating.js
@@ -1,9 +1,9 @@
+import { LEFT, RIGHT, UP, DOWN } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import { arrayIncludes, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { isNull } from '../../utils/inspect'
-import { LEFT, RIGHT, UP, DOWN } from '../../utils/key-codes'
 import { isLocaleRTL } from '../../utils/locale'
 import { toInteger, toFloat } from '../../utils/number'
 import { toString } from '../../utils/string'
diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js
index fe697b2005b..986cc95ce44 100644
--- a/src/components/form-spinbutton/form-spinbutton.js
+++ b/src/components/form-spinbutton/form-spinbutton.js
@@ -1,10 +1,10 @@
+import { DOWN, END, HOME, PAGEUP, UP, PAGEDOWN } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import { arrayIncludes, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { eventOnOff } from '../../utils/events'
 import { isFunction, isNull } from '../../utils/inspect'
-import { DOWN, END, HOME, PAGEUP, UP, PAGEDOWN } from '../../utils/key-codes'
 import { isLocaleRTL } from '../../utils/locale'
 import { toFloat, toInteger } from '../../utils/number'
 import { toString } from '../../utils/string'
diff --git a/src/components/form-tags/form-tag.js b/src/components/form-tags/form-tag.js
index 12d20f2d544..262560aad9b 100644
--- a/src/components/form-tags/form-tag.js
+++ b/src/components/form-tags/form-tag.js
@@ -1,6 +1,6 @@
+import { DELETE } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
-import { DELETE } from '../../utils/key-codes'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BBadge } from '../badge/badge'
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
index af089fde8a2..de6af6b5834 100644
--- a/src/components/form-tags/form-tags.js
+++ b/src/components/form-tags/form-tags.js
@@ -1,5 +1,6 @@
 // Tagged input form control
 // Based loosely on https://adamwathan.me/renderless-components-in-vuejs/
+import { BACKSPACE, DELETE, ENTER } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -7,7 +8,6 @@ import { arrayIncludes, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { matches, requestAF, select } from '../../utils/dom'
 import { isEvent, isFunction, isString } from '../../utils/inspect'
-import { BACKSPACE, DELETE, ENTER } from '../../utils/key-codes'
 import { escapeRegExp, toString, trim, trimLeft } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 8cba6d53a99..d68ef6ce361 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -1,3 +1,4 @@
+import { ESC } from '../../constants/key-codes'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
@@ -9,7 +10,6 @@ import { isBrowser } from '../../utils/env'
 import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../../utils/events'
 import { stripTags } from '../../utils/html'
 import { isString, isUndefinedOrNull } from '../../utils/inspect'
-import { ESC } from '../../utils/key-codes'
 import { HTMLElement } from '../../utils/safe-types'
 import { BTransporterSingle } from '../../utils/transporter'
 import idMixin from '../../mixins/id'
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index 5c092d12a73..a4190b625f5 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -1,7 +1,7 @@
+import { ESC } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { contains } from '../../utils/dom'
-import { ESC } from '../../utils/key-codes'
 import { toString } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import listenOnRootMixin from '../../mixins/listen-on-root'
diff --git a/src/components/table/helpers/mixin-tbody.js b/src/components/table/helpers/mixin-tbody.js
index 4e7aeb49188..28e84f8bb5d 100644
--- a/src/components/table/helpers/mixin-tbody.js
+++ b/src/components/table/helpers/mixin-tbody.js
@@ -1,6 +1,6 @@
+import { DOWN, END, ENTER, HOME, SPACE, UP } from '../../../constants/key-codes'
 import { arrayIncludes, from as arrayFrom } from '../../../utils/array'
 import { closest, isElement } from '../../../utils/dom'
-import { DOWN, END, ENTER, HOME, SPACE, UP } from '../../../utils/key-codes'
 import { props as tbodyProps, BTbody } from '../tbody'
 import filterEvent from './filter-event'
 import textSelectionActive from './text-selection-active'
diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js
index e51bbb88d14..4627712ab0d 100644
--- a/src/components/table/helpers/mixin-thead.js
+++ b/src/components/table/helpers/mixin-thead.js
@@ -1,9 +1,9 @@
+import { ENTER, SPACE } from '../../../constants/key-codes'
 import identity from '../../../utils/identity'
 import startCase from '../../../utils/startcase'
 import { getComponentConfig } from '../../../utils/config'
 import { htmlOrText } from '../../../utils/html'
 import { isUndefinedOrNull } from '../../../utils/inspect'
-import { ENTER, SPACE } from '../../../utils/key-codes'
 import filterEvent from './filter-event'
 import textSelectionActive from './text-selection-active'
 import { BThead } from '../thead'
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 12d0a385967..cca4aeefda2 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -1,3 +1,4 @@
+import { DOWN, END, HOME, LEFT, RIGHT, SPACE, UP } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -7,7 +8,6 @@ import { arrayIncludes, concat } from '../../utils/array'
 import { BvEvent } from '../../utils/bv-event.class'
 import { requestAF, selectAll } from '../../utils/dom'
 import { isEvent } from '../../utils/inspect'
-import { DOWN, END, HOME, LEFT, RIGHT, SPACE, UP } from '../../utils/key-codes'
 import { toInteger } from '../../utils/number'
 import { omit } from '../../utils/object'
 import idMixin from '../../mixins/id'
diff --git a/src/components/time/time.js b/src/components/time/time.js
index 5f1c73e1bac..ed1d29045d0 100644
--- a/src/components/time/time.js
+++ b/src/components/time/time.js
@@ -1,4 +1,5 @@
 // BTime control (not form input control)
+import { LEFT, RIGHT } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -7,7 +8,6 @@ import { getComponentConfig } from '../../utils/config'
 import { createDate, createDateFormatter } from '../../utils/date'
 import { contains, requestAF } from '../../utils/dom'
 import { isNull, isUndefinedOrNull } from '../../utils/inspect'
-import { LEFT, RIGHT } from '../../utils/key-codes'
 import { isLocaleRTL } from '../../utils/locale'
 import { toInteger } from '../../utils/number'
 import { toString } from '../../utils/string'
diff --git a/src/utils/key-codes.js b/src/constants/key-codes.js
similarity index 100%
rename from src/utils/key-codes.js
rename to src/constants/key-codes.js
diff --git a/src/directives/modal/modal.js b/src/directives/modal/modal.js
index 71595001ffc..027c15bfefb 100644
--- a/src/directives/modal/modal.js
+++ b/src/directives/modal/modal.js
@@ -1,7 +1,7 @@
+import { ENTER, SPACE } from '../../constants/key-codes'
 import { getAttr, hasAttr, isDisabled, matches, select, setAttr } from '../../utils/dom'
 import { EVENT_OPTIONS_PASSIVE, eventOn, eventOff } from '../../utils/events'
 import { isString } from '../../utils/inspect'
-import { ENTER, SPACE } from '../../utils/key-codes'
 import { keys } from '../../utils/object'
 
 // Emitted show event for modal
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
index 1b7ad709c63..a955bd8906c 100644
--- a/src/mixins/dropdown.js
+++ b/src/mixins/dropdown.js
@@ -1,8 +1,8 @@
 import Popper from 'popper.js'
+import { DOWN, ENTER, ESC, SPACE, UP } from '../constants/key-codes'
 import { BvEvent } from '../utils/bv-event.class'
 import { closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
 import { isNull } from '../utils/inspect'
-import { DOWN, ENTER, ESC, SPACE, UP } from '../utils/key-codes'
 import { HTMLElement } from '../utils/safe-types'
 import { warn } from '../utils/warn'
 import clickOutMixin from './click-out'
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
index 26d06fa070f..5a0f399aee4 100644
--- a/src/mixins/pagination.js
+++ b/src/mixins/pagination.js
@@ -1,7 +1,7 @@
+import { DOWN, LEFT, RIGHT, SPACE, UP } from '../constants/key-codes'
 import range from '../utils/range'
 import { isVisible, isDisabled, selectAll, getAttr } from '../utils/dom'
 import { isFunction, isNull } from '../utils/inspect'
-import { DOWN, LEFT, RIGHT, SPACE, UP } from '../utils/key-codes'
 import { toInteger } from '../utils/number'
 import { toString } from '../utils/string'
 import { warn } from '../utils/warn'

From 01b70b40f5467ccc0e7d7640a4b80fadcb7e8a40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 01:07:30 +0200
Subject: [PATCH 23/49] Move event options to constants

---
 src/components/carousel/carousel.js          | 3 ++-
 src/components/collapse/collapse.js          | 3 ++-
 src/components/modal/modal.js                | 3 ++-
 src/components/toast/toast.js                | 5 +++--
 src/components/tooltip/helpers/bv-tooltip.js | 3 ++-
 src/constants/events.js                      | 2 ++
 src/directives/hover/hover.js                | 3 ++-
 src/directives/modal/modal.js                | 3 ++-
 src/directives/scrollspy/scrollspy.class.js  | 3 ++-
 src/mixins/click-out.js                      | 3 ++-
 src/mixins/focus-in.js                       | 3 ++-
 src/mixins/listen-on-document.js             | 3 ++-
 src/mixins/listen-on-window.js               | 3 ++-
 src/utils/events.js                          | 7 -------
 14 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 src/constants/events.js

diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js
index d05e7b4b521..9f849b66f90 100644
--- a/src/components/carousel/carousel.js
+++ b/src/components/carousel/carousel.js
@@ -1,3 +1,4 @@
+import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import { ENTER, LEFT, RIGHT, SPACE } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import noop from '../../utils/noop'
@@ -5,7 +6,7 @@ import observeDom from '../../utils/observe-dom'
 import { getComponentConfig } from '../../utils/config'
 import { selectAll, reflow, addClass, removeClass, setAttr } from '../../utils/dom'
 import { isBrowser, hasTouchSupport, hasPointerEventSupport } from '../../utils/env'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../../utils/events'
+import { eventOn, eventOff } from '../../utils/events'
 import { isUndefined } from '../../utils/inspect'
 import { toInteger } from '../../utils/number'
 import idMixin from '../../mixins/id'
diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
index dfd2e871b30..3c58da80e5b 100644
--- a/src/components/collapse/collapse.js
+++ b/src/components/collapse/collapse.js
@@ -1,8 +1,9 @@
+import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import Vue from '../../utils/vue'
 import { BVCollapse } from '../../utils/bv-collapse'
 import { addClass, hasClass, removeClass, closest, matches, getCS } from '../../utils/dom'
 import { isBrowser } from '../../utils/env'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOnOff } from '../../utils/events'
+import { eventOnOff } from '../../utils/events'
 import idMixin from '../../mixins/id'
 import listenOnRootMixin from '../../mixins/listen-on-root'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index d68ef6ce361..977fecdd755 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -1,3 +1,4 @@
+import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import { ESC } from '../../constants/key-codes'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
@@ -7,7 +8,7 @@ import { arrayIncludes, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { closest, contains, isVisible, requestAF, select, selectAll } from '../../utils/dom'
 import { isBrowser } from '../../utils/env'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../../utils/events'
+import { eventOn, eventOff } from '../../utils/events'
 import { stripTags } from '../../utils/html'
 import { isString, isUndefinedOrNull } from '../../utils/inspect'
 import { HTMLElement } from '../../utils/safe-types'
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
index 771ccee1dfe..2c9aba8557c 100644
--- a/src/components/toast/toast.js
+++ b/src/components/toast/toast.js
@@ -1,10 +1,11 @@
-import Vue from '../../utils/vue'
 import { Portal, Wormhole } from 'portal-vue'
+import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import BVTransition from '../../utils/bv-transition'
+import Vue from '../../utils/vue'
 import { BvEvent } from '../../utils/bv-event.class'
 import { getComponentConfig } from '../../utils/config'
 import { requestAF } from '../../utils/dom'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOnOff } from '../../utils/events'
+import { eventOnOff } from '../../utils/events'
 import { toInteger } from '../../utils/number'
 import idMixin from '../../mixins/id'
 import listenOnRootMixin from '../../mixins/listen-on-root'
diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js
index 282b1635770..b4003723fdb 100644
--- a/src/components/tooltip/helpers/bv-tooltip.js
+++ b/src/components/tooltip/helpers/bv-tooltip.js
@@ -3,6 +3,7 @@
 // Handles trigger events, etc.
 // Instantiates template on demand
 
+import { EVENT_OPTIONS_NO_CAPTURE } from '../../../constants/events'
 import Vue from '../../../utils/vue'
 import getScopId from '../../../utils/get-scope-id'
 import looseEqual from '../../../utils/loose-equal'
@@ -22,7 +23,7 @@ import {
   select,
   setAttr
 } from '../../../utils/dom'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff, eventOnOff } from '../../../utils/events'
+import { eventOn, eventOff, eventOnOff } from '../../../utils/events'
 import {
   isFunction,
   isNumber,
diff --git a/src/constants/events.js b/src/constants/events.js
new file mode 100644
index 00000000000..82c5d245860
--- /dev/null
+++ b/src/constants/events.js
@@ -0,0 +1,2 @@
+export const EVENT_OPTIONS_PASSIVE = { passive: true }
+export const EVENT_OPTIONS_NO_CAPTURE = { passive: true, capture: false }
diff --git a/src/directives/hover/hover.js b/src/directives/hover/hover.js
index 9fb12b9c6f5..afa16336128 100644
--- a/src/directives/hover/hover.js
+++ b/src/directives/hover/hover.js
@@ -1,6 +1,7 @@
 // v-b-hover directive
+import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import { isBrowser } from '../../utils/env'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOnOff } from '../../utils/events'
+import { eventOnOff } from '../../utils/events'
 import { isFunction } from '../../utils/inspect'
 
 // --- Constants ---
diff --git a/src/directives/modal/modal.js b/src/directives/modal/modal.js
index 027c15bfefb..ae220338c3b 100644
--- a/src/directives/modal/modal.js
+++ b/src/directives/modal/modal.js
@@ -1,6 +1,7 @@
+import { EVENT_OPTIONS_PASSIVE } from '../../constants/events'
 import { ENTER, SPACE } from '../../constants/key-codes'
 import { getAttr, hasAttr, isDisabled, matches, select, setAttr } from '../../utils/dom'
-import { EVENT_OPTIONS_PASSIVE, eventOn, eventOff } from '../../utils/events'
+import { eventOn, eventOff } from '../../utils/events'
 import { isString } from '../../utils/inspect'
 import { keys } from '../../utils/object'
 
diff --git a/src/directives/scrollspy/scrollspy.class.js b/src/directives/scrollspy/scrollspy.class.js
index b817ab63b4a..72be08515a5 100644
--- a/src/directives/scrollspy/scrollspy.class.js
+++ b/src/directives/scrollspy/scrollspy.class.js
@@ -2,6 +2,7 @@
  * ScrollSpy class definition
  */
 
+import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import observeDom from '../../utils/observe-dom'
 import {
   addClass,
@@ -18,7 +19,7 @@ import {
   select,
   selectAll
 } from '../../utils/dom'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../../utils/events'
+import { eventOn, eventOff } from '../../utils/events'
 import { isString, isUndefined } from '../../utils/inspect'
 import { toInteger } from '../../utils/number'
 import { toString as objectToString } from '../../utils/object'
diff --git a/src/mixins/click-out.js b/src/mixins/click-out.js
index e9782ac2c1a..37737265f34 100644
--- a/src/mixins/click-out.js
+++ b/src/mixins/click-out.js
@@ -1,5 +1,6 @@
+import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events'
 import { contains } from '../utils/dom'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../utils/events'
+import { eventOn, eventOff } from '../utils/events'
 
 // @vue/component
 export default {
diff --git a/src/mixins/focus-in.js b/src/mixins/focus-in.js
index f8b9a41d6c0..8e4cf82406d 100644
--- a/src/mixins/focus-in.js
+++ b/src/mixins/focus-in.js
@@ -1,4 +1,5 @@
-import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../utils/events'
+import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events'
+import { eventOn, eventOff } from '../utils/events'
 
 // @vue/component
 export default {
diff --git a/src/mixins/listen-on-document.js b/src/mixins/listen-on-document.js
index 264ea300d79..c4e0d0e8b29 100644
--- a/src/mixins/listen-on-document.js
+++ b/src/mixins/listen-on-document.js
@@ -1,6 +1,7 @@
+import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events'
 import { arrayIncludes } from '../utils/array'
 import { isBrowser } from '../utils/env'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../utils/events'
+import { eventOn, eventOff } from '../utils/events'
 import { isString, isFunction } from '../utils/inspect'
 import { keys } from '../utils/object'
 
diff --git a/src/mixins/listen-on-window.js b/src/mixins/listen-on-window.js
index 030ea58ca3e..8ee29cc7078 100644
--- a/src/mixins/listen-on-window.js
+++ b/src/mixins/listen-on-window.js
@@ -1,6 +1,7 @@
+import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events'
 import { arrayIncludes } from '../utils/array'
 import { isBrowser } from '../utils/env'
-import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../utils/events'
+import { eventOn, eventOff } from '../utils/events'
 import { isString, isFunction } from '../utils/inspect'
 import { keys } from '../utils/object'
 
diff --git a/src/utils/events.js b/src/utils/events.js
index aba2207ad8d..29d5ed49a4e 100644
--- a/src/utils/events.js
+++ b/src/utils/events.js
@@ -1,13 +1,6 @@
 import { hasPassiveEventSupport } from './env'
 import { isObject } from './inspect'
 
-// --- Constants ---
-
-export const EVENT_OPTIONS_PASSIVE = { passive: true }
-export const EVENT_OPTIONS_NO_CAPTURE = { passive: true, capture: false }
-
-// --- Utils ---
-
 // Normalize event options based on support of passive option
 // Exported only for testing purposes
 export const parseEventOptions = options => {

From 3e7644873190af968bc767fc571fe7fa9191259a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 01:15:21 +0200
Subject: [PATCH 24/49] Move common regex to shared constants

---
 src/components/avatar/avatar.js                 | 3 +--
 src/components/form-tags/form-tags.js           | 4 +---
 src/components/table/helpers/mixin-filtering.js | 4 ++--
 src/constants/regex.js                          | 4 ++++
 src/utils/date.js                               | 8 +-------
 src/utils/get.js                                | 3 +--
 6 files changed, 10 insertions(+), 16 deletions(-)
 create mode 100644 src/constants/regex.js

diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index afd9b8089df..f87d3ee400f 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -1,3 +1,4 @@
+import { RX_NUMBER } from '../../constants/regex'
 import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { getComponentConfig } from '../../utils/config'
@@ -13,8 +14,6 @@ import { BIconPersonFill } from '../../icons/icons'
 const NAME = 'BAvatar'
 const CLASS_NAME = 'b-avatar'
 
-const RX_NUMBER = /^[0-9]*\.?[0-9]+$/
-
 const FONT_SIZE_SCALE = 0.4
 const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7
 
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
index de6af6b5834..4503b73b904 100644
--- a/src/components/form-tags/form-tags.js
+++ b/src/components/form-tags/form-tags.js
@@ -1,6 +1,7 @@
 // Tagged input form control
 // Based loosely on https://adamwathan.me/renderless-components-in-vuejs/
 import { BACKSPACE, DELETE, ENTER } from '../../constants/key-codes'
+import { RX_SPACES } from '../../constants/regex'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -23,9 +24,6 @@ const NAME = 'BFormTags'
 // Supported input types (for built in input)
 const TYPES = ['text', 'email', 'tel', 'url', 'number']
 
-// Pre-compiled regular expressions for performance reasons
-const RX_SPACES = /[\s\uFEFF\xA0]+/g
-
 // --- Utility methods ---
 
 // Escape special chars in string and replace
diff --git a/src/components/table/helpers/mixin-filtering.js b/src/components/table/helpers/mixin-filtering.js
index 2e1d5b36195..c96a5f95e57 100644
--- a/src/components/table/helpers/mixin-filtering.js
+++ b/src/components/table/helpers/mixin-filtering.js
@@ -1,3 +1,4 @@
+import { RX_SPACES } from '../../../constants/regex'
 import cloneDeep from '../../../utils/clone-deep'
 import identity from '../../../utils/identity'
 import looseEqual from '../../../utils/loose-equal'
@@ -11,8 +12,7 @@ import stringifyRecordValues from './stringify-record-values'
 const DEBOUNCE_DEPRECATED_MSG =
   'Prop "filter-debounce" is deprecated. Use the debounce feature of "<b-form-input>" instead.'
 
-const RX_SPACES = /[\s\uFEFF\xA0]+/g
-
+// @vue/component
 export default {
   props: {
     filter: {
diff --git a/src/constants/regex.js b/src/constants/regex.js
new file mode 100644
index 00000000000..eaa1d1dc93e
--- /dev/null
+++ b/src/constants/regex.js
@@ -0,0 +1,4 @@
+export const RX_ARRAY_NOTATION = /\[(\d+)]/g
+export const RX_DATE = /^\d+-\d+-\d+$/
+export const RX_NUMBER = /^[0-9]*\.?[0-9]+$/
+export const RX_SPACES = /[\s\uFEFF\xA0]+/g
diff --git a/src/utils/date.js b/src/utils/date.js
index 18ebcb73767..caa3475e6cb 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -1,15 +1,9 @@
-// Date utility functions
+import { RX_DATE } from '../constants/regex'
 import identity from './identity'
 import { concat } from './array'
 import { isDate, isString } from './inspect'
 import { toInteger } from './number'
 
-// --- Constants ---
-
-const RX_DATE = /^\d+-\d+-\d+$/
-
-// --- Date utility methods ---
-
 // Create or clone a date (`new Date(...)` shortcut)
 export const createDate = (...args) => new Date(...args)
 
diff --git a/src/utils/get.js b/src/utils/get.js
index e7cfc178d39..ac9f8a1c0d3 100644
--- a/src/utils/get.js
+++ b/src/utils/get.js
@@ -1,8 +1,7 @@
+import { RX_ARRAY_NOTATION } from '../constants/regex'
 import identity from './identity'
 import { isArray, isNull, isObject, isUndefinedOrNull } from './inspect'
 
-const RX_ARRAY_NOTATION = /\[(\d+)]/g
-
 /**
  * Get property defined by dot/array notation in string, returns undefined if not found
  *

From 3513bd9351b2fd95a46eed490cc745bda8cda51e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 02:01:40 +0200
Subject: [PATCH 25/49] Initial components/class-names config implementation

---
 src/components/alert/alert.js                | 18 ++++-----
 src/components/aspect/aspect.js              | 23 +++++++----
 src/components/avatar/avatar.js              | 40 ++++++++++++--------
 src/components/badge/badge.js                | 24 +++++++-----
 src/components/breadcrumb/breadcrumb-item.js |  8 ++--
 src/components/breadcrumb/breadcrumb-link.js |  5 ++-
 src/components/breadcrumb/breadcrumb.js      |  8 +++-
 src/components/button/button-close.js        | 19 +++++-----
 src/components/button/button.js              | 20 +++++-----
 src/constants/class-names.js                 |  9 +++++
 src/constants/components.js                  |  9 +++++
 src/utils/config-defaults.js                 | 17 ++++++---
 12 files changed, 126 insertions(+), 74 deletions(-)
 create mode 100644 src/constants/class-names.js
 create mode 100644 src/constants/components.js

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index 04f45955497..da078463017 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -1,3 +1,5 @@
+import { CLASS_NAME_ALERT } from '../../constants/class-names'
+import { NAME_ALERT } from '../../constants/components'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
@@ -8,10 +10,6 @@ import { suffixClass } from '../../utils/string'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButtonClose } from '../button/button-close'
 
-// --- Constants ---
-const NAME = 'BAlert'
-const CLASS_NAME = 'alert'
-
 // --- Utility methods ---
 
 // Convert `show` value to a number
@@ -38,7 +36,7 @@ const parseShow = show => {
 // --- Main component ---
 // @vue/component
 export const BAlert = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_ALERT,
   mixins: [normalizeSlotMixin],
   model: {
     prop: 'show',
@@ -47,7 +45,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
   props: {
     variant: {
       type: String,
-      default: () => getComponentConfig(NAME, 'variant')
+      default: () => getComponentConfig(NAME_ALERT, 'variant')
     },
     dismissible: {
       type: Boolean,
@@ -55,7 +53,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
     },
     dismissLabel: {
       type: String,
-      default: () => getComponentConfig(NAME, 'dismissLabel')
+      default: () => getComponentConfig(NAME_ALERT, 'dismissLabel')
     },
     show: {
       type: [Boolean, Number, String],
@@ -153,10 +151,10 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
       $alert = h(
         'div',
         {
-          staticClass: CLASS_NAME,
+          staticClass: CLASS_NAME_ALERT,
           class: {
-            [suffixClass(CLASS_NAME, 'dismissible')]: dismissible,
-            [suffixClass(CLASS_NAME, variant)]: !!variant
+            [suffixClass(CLASS_NAME_ALERT, 'dismissible')]: dismissible,
+            [suffixClass(CLASS_NAME_ALERT, variant)]: !!variant
           },
           attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true },
           key: this._uid
diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index 44e90ef384b..4061b5f6309 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -1,18 +1,18 @@
+import { CLASS_NAME_ASPECT } from '../../constants/class-names'
+import { NAME_ASPECT } from '../../constants/components'
 import Vue from '../../utils/vue'
 import { toFloat } from '../../utils/number'
+import { suffixClass } from '../../utils/string'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 
 // --- Constants ---
-const NAME = 'BAspect'
-const CLASS_NAME = 'b-aspect'
-
 const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
 const RX_SEPARATOR = /[/:]/
 
 // --- Main component ---
 // @vue/component
 export const BAspect = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_ASPECT,
   mixins: [normalizeSlotMixin],
   props: {
     aspect: {
@@ -43,17 +43,26 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
   },
   render(h) {
     const $sizer = h('div', {
-      staticClass: `${CLASS_NAME}-sizer flex-grow-1`,
+      staticClass: suffixClass(CLASS_NAME_ASPECT, 'sizer'),
+      class: 'flex-grow-1',
       style: { paddingBottom: this.padding, height: 0 }
     })
     const $content = h(
       'div',
       {
-        staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
+        staticClass: suffixClass(CLASS_NAME_ASPECT, 'content'),
+        class: ['flex-grow-1', 'w-100', 'mw-100'],
         style: { marginLeft: '-100%' }
       },
       [this.normalizeSlot('default')]
     )
-    return h(this.tag, { staticClass: `${CLASS_NAME} d-flex` }, [$sizer, $content])
+    return h(
+      this.tag,
+      {
+        staticClass: CLASS_NAME_ASPECT,
+        class: 'd-flex'
+      },
+      [$sizer, $content]
+    )
   }
 })
diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index f87d3ee400f..5ade3a3564e 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -1,9 +1,16 @@
+import {
+  CLASS_NAME_AVATAR,
+  CLASS_NAME_BADGE,
+  CLASS_NAME_ROUNDED
+} from '../../constants/class-names'
+import { NAME_AVATAR } from '../../constants/components'
 import { RX_NUMBER } from '../../constants/regex'
 import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { getComponentConfig } from '../../utils/config'
 import { isNumber, isString } from '../../utils/inspect'
 import { toFloat } from '../../utils/number'
+import { suffixClass } from '../../utils/string'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButton } from '../button/button'
 import { BLink } from '../link/link'
@@ -11,9 +18,6 @@ import { BIcon } from '../../icons/icon'
 import { BIconPersonFill } from '../../icons/icons'
 
 // --- Constants ---
-const NAME = 'BAvatar'
-const CLASS_NAME = 'b-avatar'
-
 const FONT_SIZE_SCALE = 0.4
 const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7
 
@@ -90,7 +94,7 @@ const props = {
   },
   variant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'variant')
+    default: () => getComponentConfig(NAME_AVATAR, 'variant')
   },
   size: {
     type: [Number, String],
@@ -118,7 +122,7 @@ const props = {
   },
   badgeVariant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'badgeVariant')
+    default: () => getComponentConfig(NAME_AVATAR, 'badgeVariant')
   },
   badgeTop: {
     type: Boolean,
@@ -154,7 +158,7 @@ const computeSize = value => {
 // --- Main component ---
 // @vue/component
 export const BAvatar = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_AVATAR,
   mixins: [normalizeSlotMixin],
   props,
   data() {
@@ -223,7 +227,9 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     let $content = null
     if (this.hasNormalizedSlot('default')) {
       // Default slot overrides props
-      $content = h('span', { staticClass: 'b-avatar-custom' }, [this.normalizeSlot('default')])
+      $content = h('span', { staticClass: suffixClass(CLASS_NAME_AVATAR, 'custom') }, [
+        this.normalizeSlot('default')
+      ])
     } else if (src) {
       $content = h('img', { attrs: { src, alt }, on: { error: this.onImgError } })
     } else if (icon) {
@@ -232,7 +238,11 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
         attrs: { 'aria-hidden': 'true', alt }
       })
     } else if (text) {
-      $content = h('span', { staticClass: 'b-avatar-text', style: { fontSize } }, [h('span', text)])
+      $content = h(
+        'span',
+        { staticClass: suffixClass(CLASS_NAME_AVATAR, 'text'), style: { fontSize } },
+        [h('span', text)]
+      )
     } else {
       // Fallback default avatar content
       $content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true', alt } })
@@ -245,8 +255,8 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
       $badge = h(
         'span',
         {
-          staticClass: 'b-avatar-badge',
-          class: { [`badge-${badgeVariant}`]: !!badgeVariant },
+          staticClass: suffixClass(CLASS_NAME_AVATAR, 'badge'),
+          class: { [suffixClass(CLASS_NAME_BADGE, badgeVariant)]: !!badgeVariant },
           style: badgeStyle
         },
         [hasBadgeSlot ? this.normalizeSlot('badge') : badgeText]
@@ -254,14 +264,14 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     }
 
     const componentData = {
-      staticClass: CLASS_NAME,
+      staticClass: CLASS_NAME_AVATAR,
       class: {
         // We use badge styles for theme variants when not rendering `BButton`
-        [`badge-${variant}`]: !isButton && variant,
+        [suffixClass(CLASS_NAME_BADGE, variant)]: !isButton && variant,
         // Rounding/Square
-        rounded: rounded === true,
-        'rounded-0': square,
-        [`rounded-${rounded}`]: rounded && rounded !== true,
+        [CLASS_NAME_ROUNDED]: rounded === true,
+        [suffixClass(CLASS_NAME_ROUNDED, 0)]: square,
+        [suffixClass(CLASS_NAME_ROUNDED, rounded)]: rounded && rounded !== true,
         // Other classes
         disabled
       },
diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js
index edb81708ac6..0270b8e73f6 100644
--- a/src/components/badge/badge.js
+++ b/src/components/badge/badge.js
@@ -1,11 +1,13 @@
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_BADGE } from '../../constants/class-names'
+import { NAME_BADGE } from '../../constants/components'
 import Vue from '../../utils/vue'
-import { getComponentConfig } from '../../utils/config'
 import pluckProps from '../../utils/pluck-props'
+import { getComponentConfig } from '../../utils/config'
+import { suffixClass } from '../../utils/string'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
-const NAME = 'BBadge'
-
+// --- Props ---
 const linkProps = linkPropsFactory()
 delete linkProps.href.default
 delete linkProps.to.default
@@ -18,7 +20,7 @@ export const props = {
   },
   variant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'variant')
+    default: () => getComponentConfig(NAME_BADGE, 'variant')
   },
   pill: {
     type: Boolean,
@@ -26,23 +28,25 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BBadge = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_BADGE,
   functional: true,
   props,
   render(h, { props, data, children }) {
+    const { variant, active, disabled } = props
     const isBLink = props.href || props.to
     const tag = isBLink ? BLink : props.tag
 
     const componentData = {
-      staticClass: 'badge',
+      staticClass: CLASS_NAME_BADGE,
       class: [
-        props.variant ? `badge-${props.variant}` : 'badge-secondary',
+        suffixClass(CLASS_NAME_BADGE, variant || 'secondary'),
         {
-          'badge-pill': props.pill,
-          active: props.active,
-          disabled: props.disabled
+          [suffixClass(CLASS_NAME_BADGE, 'pill')]: props.pill,
+          active,
+          disabled
         }
       ],
       props: isBLink ? pluckProps(linkProps, props) : {}
diff --git a/src/components/breadcrumb/breadcrumb-item.js b/src/components/breadcrumb/breadcrumb-item.js
index a39456d5940..fd3c29b2a01 100644
--- a/src/components/breadcrumb/breadcrumb-item.js
+++ b/src/components/breadcrumb/breadcrumb-item.js
@@ -1,17 +1,19 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_BREADCRUMB_ITEM } from '../../constants/class-names'
+import { NAME_BREADCRUMB_ITEM } from '../../constants/components'
+import Vue from '../../utils/vue'
 import { BBreadcrumbLink, props } from './breadcrumb-link'
 
 // @vue/component
 export const BBreadcrumbItem = /*#__PURE__*/ Vue.extend({
-  name: 'BBreadcrumbItem',
+  name: NAME_BREADCRUMB_ITEM,
   functional: true,
   props,
   render(h, { props, data, children }) {
     return h(
       'li',
       mergeData(data, {
-        staticClass: 'breadcrumb-item',
+        staticClass: CLASS_NAME_BREADCRUMB_ITEM,
         class: { active: props.active }
       }),
       [h(BBreadcrumbLink, { props }, children)]
diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js
index b4590f16ce6..48d98baa9ee 100644
--- a/src/components/breadcrumb/breadcrumb-link.js
+++ b/src/components/breadcrumb/breadcrumb-link.js
@@ -1,9 +1,11 @@
 import { mergeData } from 'vue-functional-data-merge'
+import { NAME_BREADCRUMB_LINK } from '../../constants/components'
 import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { htmlOrText } from '../../utils/html'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
+// --- Props ---
 export const props = {
   ...linkPropsFactory(),
   text: {
@@ -20,9 +22,10 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BBreadcrumbLink = /*#__PURE__*/ Vue.extend({
-  name: 'BBreadcrumbLink',
+  name: NAME_BREADCRUMB_LINK,
   functional: true,
   props,
   render(h, { props: suppliedProps, data, children }) {
diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
index b61be677d68..07e13e91410 100644
--- a/src/components/breadcrumb/breadcrumb.js
+++ b/src/components/breadcrumb/breadcrumb.js
@@ -1,9 +1,12 @@
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_BREADCRUMB } from '../../constants/class-names'
+import { NAME_BREADCRUMB } from '../../constants/components'
 import Vue from '../../utils/vue'
 import { isArray, isObject } from '../../utils/inspect'
 import { toString } from '../../utils/string'
 import { BBreadcrumbItem } from './breadcrumb-item'
 
+// --- Props ---
 export const props = {
   items: {
     type: Array,
@@ -11,9 +14,10 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BBreadcrumb = /*#__PURE__*/ Vue.extend({
-  name: 'BBreadcrumb',
+  name: NAME_BREADCRUMB,
   functional: true,
   props,
   render(h, { props, data, children }) {
@@ -44,6 +48,6 @@ export const BBreadcrumb = /*#__PURE__*/ Vue.extend({
       })
     }
 
-    return h('ol', mergeData(data, { staticClass: 'breadcrumb' }), childNodes)
+    return h('ol', mergeData(data, { staticClass: CLASS_NAME_BREADCRUMB }), childNodes)
   }
 })
diff --git a/src/components/button/button-close.js b/src/components/button/button-close.js
index f3420350692..8a87f2c4e81 100644
--- a/src/components/button/button-close.js
+++ b/src/components/button/button-close.js
@@ -1,16 +1,15 @@
+import { CLASS_NAME_BUTTON_CLOSE } from '../../constants/class-names'
+import { NAME_BUTTON_CLOSE } from '../../constants/components'
 import { mergeData } from 'vue-functional-data-merge'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
-import { isEvent } from '../../utils/inspect'
-
-// --- Constants ---
-const NAME = 'BButtonClose'
+import { isArray, isEvent } from '../../utils/inspect'
 
 // --- Props ---
 const props = {
   content: {
     type: String,
-    default: () => getComponentConfig(NAME, 'content')
+    default: () => getComponentConfig(NAME_BUTTON_CLOSE, 'content')
   },
   disabled: {
     type: Boolean,
@@ -18,24 +17,24 @@ const props = {
   },
   ariaLabel: {
     type: String,
-    default: () => getComponentConfig(NAME, 'ariaLabel')
+    default: () => getComponentConfig(NAME_BUTTON_CLOSE, 'ariaLabel')
   },
   textVariant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'textVariant')
+    default: () => getComponentConfig(NAME_BUTTON_CLOSE, 'textVariant')
   }
 }
 
 // --- Main component ---
 // @vue/component
 export const BButtonClose = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_BUTTON_CLOSE,
   functional: true,
   props,
   render(h, { props, data, children }) {
     const { disabled, textVariant, ariaLabel } = props
     const componentData = {
-      staticClass: 'close',
+      staticClass: CLASS_NAME_BUTTON_CLOSE,
       class: {
         [`text-${textVariant}`]: textVariant
       },
@@ -56,7 +55,7 @@ export const BButtonClose = /*#__PURE__*/ Vue.extend({
       }
     }
     // Careful not to override the default slot with innerHTML
-    if (!children) {
+    if (!children || (isArray(children) && children.length === 0)) {
       componentData.domProps = { innerHTML: props.content }
     }
     return h('button', mergeData(data, componentData), [children])
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 50a50120ea8..e50e64b8d48 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -1,4 +1,6 @@
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_BUTTON } from '../../constants/class-names'
+import { NAME_BUTTON } from '../../constants/components'
 import { ENTER, SPACE } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
@@ -10,10 +12,6 @@ import { keys } from '../../utils/object'
 import { suffixClass, toString } from '../../utils/string'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
-// --- Constants ---
-const NAME = 'BButton'
-const CLASS_NAME = 'btn'
-
 // --- Props ---
 const btnProps = {
   block: {
@@ -26,11 +24,11 @@ const btnProps = {
   },
   size: {
     type: String,
-    default: () => getComponentConfig(NAME, 'size')
+    default: () => getComponentConfig(NAME_BUTTON, 'size')
   },
   variant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'variant')
+    default: () => getComponentConfig(NAME_BUTTON, 'variant')
   },
   type: {
     type: String,
@@ -93,10 +91,10 @@ const isNonStandardTag = props => !isLink(props) && !isButton(props)
 
 // Compute required classes (non static classes)
 const computeClass = props => [
-  suffixClass(CLASS_NAME, props.variant || getComponentConfig(NAME, 'variant')),
+  suffixClass(CLASS_NAME_BUTTON, props.variant || getComponentConfig(NAME_BUTTON, 'variant')),
   {
-    [suffixClass(CLASS_NAME, props.size)]: !!props.size,
-    [suffixClass(CLASS_NAME, 'block')]: props.block,
+    [suffixClass(CLASS_NAME_BUTTON, props.size)]: !!props.size,
+    [suffixClass(CLASS_NAME_BUTTON, 'block')]: props.block,
     'rounded-pill': props.pill,
     'rounded-0': props.squared && !props.pill,
     disabled: props.disabled,
@@ -148,7 +146,7 @@ const computeAttrs = (props, data) => {
 // --- Main component ---
 // @vue/component
 export const BButton = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_BUTTON,
   functional: true,
   props,
   render(h, { props, data, listeners, children }) {
@@ -196,7 +194,7 @@ export const BButton = /*#__PURE__*/ Vue.extend({
     }
 
     const componentData = {
-      staticClass: CLASS_NAME,
+      staticClass: CLASS_NAME_BUTTON,
       class: computeClass(props),
       props: computeLinkProps(props),
       attrs: computeAttrs(props, data),
diff --git a/src/constants/class-names.js b/src/constants/class-names.js
new file mode 100644
index 00000000000..8792f35ab1b
--- /dev/null
+++ b/src/constants/class-names.js
@@ -0,0 +1,9 @@
+export const CLASS_NAME_ALERT = 'alert'
+export const CLASS_NAME_ASPECT = 'b-aspect'
+export const CLASS_NAME_AVATAR = 'b-avatar'
+export const CLASS_NAME_BADGE = 'badge'
+export const CLASS_NAME_BREADCRUMB = 'breadcrumb'
+export const CLASS_NAME_BREADCRUMB_ITEM = 'breadcrumb-item'
+export const CLASS_NAME_BUTTON = 'btn'
+export const CLASS_NAME_BUTTON_CLOSE = 'close'
+export const CLASS_NAME_ROUNDED = 'rounded'
diff --git a/src/constants/components.js b/src/constants/components.js
new file mode 100644
index 00000000000..820abbea4b6
--- /dev/null
+++ b/src/constants/components.js
@@ -0,0 +1,9 @@
+export const NAME_ALERT = 'BAlert'
+export const NAME_ASPECT = 'BAspect'
+export const NAME_AVATAR = 'BAvatar'
+export const NAME_BADGE = 'BBadge'
+export const NAME_BREADCRUMB = 'BBreadcrumb'
+export const NAME_BREADCRUMB_ITEM = 'BBreadcrumbItem'
+export const NAME_BREADCRUMB_LINK = 'BBreadcrumbLink'
+export const NAME_BUTTON = 'BButton'
+export const NAME_BUTTON_CLOSE = 'BButtonClose'
diff --git a/src/utils/config-defaults.js b/src/utils/config-defaults.js
index da4c9231284..75804d287ab 100644
--- a/src/utils/config-defaults.js
+++ b/src/utils/config-defaults.js
@@ -1,3 +1,10 @@
+import {
+  NAME_ALERT,
+  NAME_AVATAR,
+  NAME_BADGE,
+  NAME_BUTTON,
+  NAME_BUTTON_CLOSE
+} from '../constants/components'
 import { deepFreeze } from './object'
 
 // --- General BootstrapVue configuration ---
@@ -47,22 +54,22 @@ export default deepFreeze({
 
   // Component specific defaults are keyed by the component
   // name (PascalCase) and prop name (camelCase)
-  BAlert: {
+  [NAME_ALERT]: {
     dismissLabel: 'Close',
     variant: 'info'
   },
-  BAvatar: {
+  [NAME_AVATAR]: {
     variant: 'secondary',
     badgeVariant: 'primary'
   },
-  BBadge: {
+  [NAME_BADGE]: {
     variant: 'secondary'
   },
-  BButton: {
+  [NAME_BUTTON]: {
     size: undefined,
     variant: 'secondary'
   },
-  BButtonClose: {
+  [NAME_BUTTON_CLOSE]: {
     content: '&times;',
     // `textVariant` is `null` to inherit the current text color
     textVariant: undefined,

From 4e6d0b725ebde75bb31b77df4d93421f7a4b3623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 02:10:33 +0200
Subject: [PATCH 26/49] Update breadcrumb-link.js

---
 src/components/breadcrumb/breadcrumb-link.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js
index 48d98baa9ee..cb4a07dbcd3 100644
--- a/src/components/breadcrumb/breadcrumb-link.js
+++ b/src/components/breadcrumb/breadcrumb-link.js
@@ -3,6 +3,7 @@ import { NAME_BREADCRUMB_LINK } from '../../constants/components'
 import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { htmlOrText } from '../../utils/html'
+import { isArray } from '../../utils/inspect'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
 // --- Props ---
@@ -36,7 +37,7 @@ export const BBreadcrumbLink = /*#__PURE__*/ Vue.extend({
       componentData.attrs = { 'aria-current': suppliedProps.ariaCurrent }
     }
 
-    if (!children) {
+    if (!children || (isArray(children) && children.length === 0)) {
       componentData.domProps = htmlOrText(suppliedProps.html, suppliedProps.text)
     }
 

From a943fd03655a4b60388fd0eb93659535f58f0f8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 02:30:06 +0200
Subject: [PATCH 27/49] Further use constants/class-names

---
 src/components/button-group/button-group.js   | 20 +++++++++-------
 .../button-toolbar/button-toolbar.js          | 24 +++++++++++++------
 src/constants/class-names.js                  | 14 +++++++++--
 src/constants/components.js                   |  2 ++
 4 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/components/button-group/button-group.js b/src/components/button-group/button-group.js
index cc75a62633c..bbb73cb0659 100644
--- a/src/components/button-group/button-group.js
+++ b/src/components/button-group/button-group.js
@@ -1,9 +1,11 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_BUTTON_GROUP } from '../../constants/class-names'
+import { NAME_BUTTON, NAME_BUTTON_GROUP } from '../../constants/components'
+import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
+import { suffixClass } from '../../utils/string'
 
-const NAME = 'BButtonGroup'
-
+// --- Props ---
 export const props = {
   vertical: {
     type: Boolean,
@@ -11,7 +13,7 @@ export const props = {
   },
   size: {
     type: String,
-    default: () => getComponentConfig('BButton', 'size')
+    default: () => getComponentConfig(NAME_BUTTON, 'size')
   },
   tag: {
     type: String,
@@ -23,19 +25,21 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BButtonGroup = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_BUTTON_GROUP,
   functional: true,
   props,
   render(h, { props, data, children }) {
+    const { vertical, size } = props
     return h(
       props.tag,
       mergeData(data, {
         class: {
-          'btn-group': !props.vertical,
-          'btn-group-vertical': props.vertical,
-          [`btn-group-${props.size}`]: props.size
+          [CLASS_NAME_BUTTON_GROUP]: !vertical,
+          [suffixClass(CLASS_NAME_BUTTON_GROUP, 'vertical')]: vertical,
+          [suffixClass(CLASS_NAME_BUTTON_GROUP, size)]: size
         },
         attrs: { role: props.ariaRole }
       }),
diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js
index 30efd636374..f01703fca5f 100644
--- a/src/components/button-toolbar/button-toolbar.js
+++ b/src/components/button-toolbar/button-toolbar.js
@@ -1,19 +1,29 @@
+import {
+  CLASS_NAME_BUTTON,
+  CLASS_NAME_BUTTON_TOOLBAR,
+  CLASS_NAME_DISABLED,
+  CLASS_NAME_DROPDOWN_ITEM,
+  CLASS_NAME_FORM_CONTROL
+} from '../../constants/class-names'
+import { NAME_BUTTON_TOOLBAR } from '../../constants/components'
 import { DOWN, LEFT, RIGHT, UP } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import { isVisible, selectAll } from '../../utils/dom'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 
+// --- Constants ---
 const ITEM_SELECTOR = [
-  '.btn:not(.disabled):not([disabled]):not(.dropdown-item)',
-  '.form-control:not(.disabled):not([disabled])',
-  'select:not(.disabled):not([disabled])',
-  'input[type="checkbox"]:not(.disabled)',
-  'input[type="radio"]:not(.disabled)'
+  `.${CLASS_NAME_BUTTON}:not(.${CLASS_NAME_DISABLED}):not([disabled]):not(.${CLASS_NAME_DROPDOWN_ITEM})`,
+  `.${CLASS_NAME_FORM_CONTROL}:not(.${CLASS_NAME_DISABLED}):not([disabled])`,
+  `select:not(.${CLASS_NAME_DISABLED}):not([disabled])`,
+  `input[type="checkbox"]:not(.${CLASS_NAME_DISABLED})`,
+  `input[type="radio"]:not(.${CLASS_NAME_DISABLED})`
 ].join(',')
 
+// --- Main component ---
 // @vue/component
 export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
-  name: 'BButtonToolbar',
+  name: NAME_BUTTON_TOOLBAR,
   mixins: [normalizeSlotMixin],
   props: {
     justify: {
@@ -98,7 +108,7 @@ export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
     return h(
       'div',
       {
-        staticClass: 'btn-toolbar',
+        staticClass: CLASS_NAME_BUTTON_TOOLBAR,
         class: { 'justify-content-between': this.justify },
         attrs: {
           role: 'toolbar',
diff --git a/src/constants/class-names.js b/src/constants/class-names.js
index 8792f35ab1b..9dbbc678896 100644
--- a/src/constants/class-names.js
+++ b/src/constants/class-names.js
@@ -1,9 +1,19 @@
+// Bootstrap components
 export const CLASS_NAME_ALERT = 'alert'
-export const CLASS_NAME_ASPECT = 'b-aspect'
-export const CLASS_NAME_AVATAR = 'b-avatar'
 export const CLASS_NAME_BADGE = 'badge'
 export const CLASS_NAME_BREADCRUMB = 'breadcrumb'
 export const CLASS_NAME_BREADCRUMB_ITEM = 'breadcrumb-item'
 export const CLASS_NAME_BUTTON = 'btn'
 export const CLASS_NAME_BUTTON_CLOSE = 'close'
+export const CLASS_NAME_BUTTON_GROUP = 'btn-group'
+export const CLASS_NAME_BUTTON_TOOLBAR = 'btn-toolbar'
+export const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
+export const CLASS_NAME_FORM_CONTROL = 'form-control'
+
+// BootstrapVue components
+export const CLASS_NAME_ASPECT = 'b-aspect'
+export const CLASS_NAME_AVATAR = 'b-avatar'
+
+// Utility classes
+export const CLASS_NAME_DISABLED = 'disabled'
 export const CLASS_NAME_ROUNDED = 'rounded'
diff --git a/src/constants/components.js b/src/constants/components.js
index 820abbea4b6..29368df6d26 100644
--- a/src/constants/components.js
+++ b/src/constants/components.js
@@ -7,3 +7,5 @@ export const NAME_BREADCRUMB_ITEM = 'BBreadcrumbItem'
 export const NAME_BREADCRUMB_LINK = 'BBreadcrumbLink'
 export const NAME_BUTTON = 'BButton'
 export const NAME_BUTTON_CLOSE = 'BButtonClose'
+export const NAME_BUTTON_GROUP = 'BButtonGroup'
+export const NAME_BUTTON_TOOLBAR = 'BButtonToolbar'

From 38c06533e4680050006ac42ec704cd68a15eda3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 03:24:33 +0200
Subject: [PATCH 28/49] Add `hasChildren()` util

---
 src/components/breadcrumb/breadcrumb-link.js |  4 +-
 src/components/button/button-close.js        |  7 +-
 src/utils/dom.js                             |  6 +-
 src/utils/dom.spec.js                        | 91 ++++++++++++++++----
 4 files changed, 86 insertions(+), 22 deletions(-)

diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js
index cb4a07dbcd3..1a0bef093d5 100644
--- a/src/components/breadcrumb/breadcrumb-link.js
+++ b/src/components/breadcrumb/breadcrumb-link.js
@@ -2,8 +2,8 @@ import { mergeData } from 'vue-functional-data-merge'
 import { NAME_BREADCRUMB_LINK } from '../../constants/components'
 import Vue from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
+import { hasChildren } from '../../utils/dom'
 import { htmlOrText } from '../../utils/html'
-import { isArray } from '../../utils/inspect'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
 // --- Props ---
@@ -37,7 +37,7 @@ export const BBreadcrumbLink = /*#__PURE__*/ Vue.extend({
       componentData.attrs = { 'aria-current': suppliedProps.ariaCurrent }
     }
 
-    if (!children || (isArray(children) && children.length === 0)) {
+    if (!hasChildren(children)) {
       componentData.domProps = htmlOrText(suppliedProps.html, suppliedProps.text)
     }
 
diff --git a/src/components/button/button-close.js b/src/components/button/button-close.js
index 8a87f2c4e81..7e7ce40f2fc 100644
--- a/src/components/button/button-close.js
+++ b/src/components/button/button-close.js
@@ -3,7 +3,8 @@ import { NAME_BUTTON_CLOSE } from '../../constants/components'
 import { mergeData } from 'vue-functional-data-merge'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
-import { isArray, isEvent } from '../../utils/inspect'
+import { hasChildren } from '../../utils/dom'
+import { isEvent } from '../../utils/inspect'
 
 // --- Props ---
 const props = {
@@ -54,10 +55,12 @@ export const BButtonClose = /*#__PURE__*/ Vue.extend({
         }
       }
     }
+
     // Careful not to override the default slot with innerHTML
-    if (!children || (isArray(children) && children.length === 0)) {
+    if (!hasChildren(children)) {
       componentData.domProps = { innerHTML: props.content }
     }
+
     return h('button', mergeData(data, componentData), [children])
   }
 })
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 70fc0a991cf..751d4177a7d 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -1,6 +1,6 @@
 import { from as arrayFrom } from './array'
 import { hasWindowSupport, hasDocumentSupport } from './env'
-import { isFunction, isNull } from './inspect'
+import { isArray, isFunction, isNull } from './inspect'
 import { toFloat } from './number'
 
 // --- Constants ---
@@ -234,3 +234,7 @@ export const position = el => /* istanbul ignore next: getBoundingClientRect() d
     left: _offset.left - parentOffset.left - toFloat(elStyles.marginLeft, 0)
   }
 }
+
+// Determine wether a component has children
+export const hasChildren = children =>
+  isArray(children) ? children.some(c => hasChildren(c)) : !!children
diff --git a/src/utils/dom.spec.js b/src/utils/dom.spec.js
index 1dfdda22fc6..9740ea8d1e1 100644
--- a/src/utils/dom.spec.js
+++ b/src/utils/dom.spec.js
@@ -1,16 +1,17 @@
 import Vue from 'vue'
 import { mount } from '@vue/test-utils'
 import {
-  isElement,
-  isDisabled,
-  contains,
   closest,
+  contains,
+  getAttr,
+  hasAttr,
+  hasChildren,
+  hasClass,
+  isDisabled,
+  isElement,
   matches,
   select,
-  selectAll,
-  hasAttr,
-  getAttr,
-  hasClass
+  selectAll
 } from './dom'
 
 const template = `
@@ -29,7 +30,7 @@ const template = `
 const App = Vue.extend({ template })
 
 describe('utils/dom', () => {
-  it('isElement works', async () => {
+  it('isElement() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -42,7 +43,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('isDisabled works', async () => {
+  it('isDisabled() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -58,7 +59,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('hasClass works', async () => {
+  it('hasClass() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -75,7 +76,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('contains works', async () => {
+  it('contains() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -96,7 +97,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('closest works', async () => {
+  it('closest() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -122,7 +123,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('matches works', async () => {
+  it('matches() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -147,7 +148,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('hasAttr works', async () => {
+  it('hasAttr() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -167,7 +168,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('getAttr works', async () => {
+  it('getAttr() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -190,7 +191,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('select works', async () => {
+  it('select() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -216,7 +217,7 @@ describe('utils/dom', () => {
     wrapper.destroy()
   })
 
-  it('selectAll works', async () => {
+  it('selectAll() works', async () => {
     const wrapper = mount(App, {
       attachToDocument: true
     })
@@ -262,4 +263,60 @@ describe('utils/dom', () => {
 
     wrapper.destroy()
   })
+
+  it('hasChildren() works', async () => {
+    let currentChildren = null
+    const Base = Vue.extend({
+      functional: true,
+      render(h, { data, children }) {
+        currentChildren = children
+        return h('div', data, children)
+      }
+    })
+
+    const Component1 = Vue.extend({
+      components: { Base },
+      template: '<Base></Base>'
+    })
+    const wrapper1 = mount(Component1)
+    expect(hasChildren(currentChildren)).toBe(false)
+    wrapper1.destroy()
+
+    const Component2 = Vue.extend({
+      components: { Base },
+      template: '<Base> </Base>'
+    })
+    const wrapper2 = mount(Component2)
+    expect(hasChildren(currentChildren)).toBe(false)
+    wrapper2.destroy()
+
+    const Component3 = Vue.extend({
+      components: { Base },
+      template: '<Base>&times;</Base>'
+    })
+    const wrapper3 = mount(Component3)
+    expect(hasChildren(currentChildren)).toBe(true)
+    wrapper3.destroy()
+
+    const Component4 = Vue.extend({
+      components: { Base },
+      template: '<Base><span></span></Base>'
+    })
+    const wrapper4 = mount(Component4)
+    expect(hasChildren(currentChildren)).toBe(true)
+    wrapper4.destroy()
+
+    const Component5 = Vue.extend({
+      components: { Base },
+      template: `
+        <Base>
+          <span></span>
+          <span></span>
+          <span></span>
+        </Base>`
+    })
+    const wrapper5 = mount(Component5)
+    expect(hasChildren(currentChildren)).toBe(true)
+    wrapper5.destroy()
+  })
 })

From 2289553a1168d584ab1ab74d584bf56a30502cb6 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 15 Apr 2020 22:42:48 -0300
Subject: [PATCH 29/49] Update dom.spec.js

---
 src/utils/dom.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/utils/dom.spec.js b/src/utils/dom.spec.js
index 9740ea8d1e1..4bb2cb3bf27 100644
--- a/src/utils/dom.spec.js
+++ b/src/utils/dom.spec.js
@@ -318,5 +318,18 @@ describe('utils/dom', () => {
     const wrapper5 = mount(Component5)
     expect(hasChildren(currentChildren)).toBe(true)
     wrapper5.destroy()
+
+    const Component6 = Vue.extend({
+      components: { Base },
+      template: `
+        <Base>
+
+
+        </Base>
+      `
+    })
+    const wrapper6 = mount(Component6)
+    expect(hasChildren(currentChildren)).toBe(false)
+    wrapper6.destroy()
   })
 })

From 830e824c7011947ca32b422dae134713c9bc8971 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 09:17:58 +0200
Subject: [PATCH 30/49] Merge remote-tracking branch 'origin/dev' into
 feat-code-size-improvements


From ac496b0ccbc2542e7047cbfeaf6602d77247380c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 16 Apr 2020 09:22:23 +0200
Subject: [PATCH 31/49] Add `isNumeric()` to inspect utils

---
 src/components/alert/alert.js | 4 ++--
 src/utils/inspect.js          | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index da078463017..d5c3b9dca3b 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -4,8 +4,8 @@ import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { requestAF } from '../../utils/dom'
-import { isBoolean } from '../../utils/inspect'
-import { isNumeric, toInteger } from '../../utils/number'
+import { isBoolean, isNumeric } from '../../utils/inspect'
+import { toInteger } from '../../utils/number'
 import { suffixClass } from '../../utils/string'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButtonClose } from '../button/button-close'
diff --git a/src/utils/inspect.js b/src/utils/inspect.js
index 344684caa7c..0cc44e26e27 100644
--- a/src/utils/inspect.js
+++ b/src/utils/inspect.js
@@ -1,4 +1,5 @@
 import { isArray } from './array'
+import { isNumeric } from './number'
 import { isObject, isPlainObject } from './object'
 import { File } from './safe-types'
 
@@ -42,4 +43,4 @@ export const isPromise = val =>
   !isUndefinedOrNull(val) && isFunction(val.then) && isFunction(val.catch)
 
 // Extra convenience named re-exports
-export { isArray, isObject, isPlainObject }
+export { isArray, isNumeric, isObject, isPlainObject }

From 925d4a7cafc5a5070cfad6fe727e46ae04bd9972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Sat, 18 Apr 2020 23:54:59 +0200
Subject: [PATCH 32/49] Adjust ignorefiles

---
 .eslintignore   | 3 ++-
 .gitignore      | 9 ++++-----
 .prettierignore | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 9348be6b01b..d4f1f0b75d8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,7 +1,8 @@
 .nuxt/
+coverage/
 dist/
 docs-dist/
 esm/
-es/
 node_modules/
 nuxt/plugin.*.js
+sw.js
diff --git a/.gitignore b/.gitignore
index 25ce638276c..3910aea3ce2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,3 @@
-*.iml
-*.log
-*.swp
-.DS_Store
 .idea/
 .nuxt/
 .vscode/
@@ -9,7 +5,10 @@ coverage/
 dist/
 docs-dist/
 esm/
-es/
 node_modules/
+*.iml
+*.log
+*.swp
+.DS_Store
 sw.js
 workbox*.js*
diff --git a/.prettierignore b/.prettierignore
index 41ded7ff67a..0febdfb7bd5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,8 +1,8 @@
 .nuxt/
+coverage/
 dist/
 docs-dist/
 esm/
-es/
 node_modules/
 nuxt/plugin.template.js
 nuxt/plugin.prod.js

From 4465bc1c9a98255cb5b7ac148ce47c7768dff6be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Sun, 19 Apr 2020 00:51:30 +0200
Subject: [PATCH 33/49] Further implement constants implementation

---
 src/components/calendar/calendar.js       | 227 +++++++++++++++-------
 src/components/card/card-body.js          |  37 ++--
 src/components/card/card-footer.js        |  22 ++-
 src/components/card/card-group.js         |  15 +-
 src/components/card/card-header.js        |  23 ++-
 src/components/card/card-img-lazy.js      |  36 ++--
 src/components/card/card-img.js           |  30 +--
 src/components/card/card-sub-title.js     |  19 +-
 src/components/card/card-text.js          |  10 +-
 src/components/card/card-title.js         |  13 +-
 src/components/card/card.js               |  33 ++--
 src/components/carousel/carousel-slide.js |  45 +++--
 src/components/carousel/carousel.js       |  85 ++++----
 src/components/carousel/carousel.spec.js  |  40 ++--
 src/components/collapse/collapse.js       |  35 ++--
 src/constants/class-names.js              |  49 +++++
 src/constants/components.js               |  14 ++
 src/utils/bv-collapse.js                  |  24 ++-
 src/utils/config-defaults.js              |  11 +-
 19 files changed, 514 insertions(+), 254 deletions(-)

diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index 269396364b3..7ba4940f10a 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -1,3 +1,34 @@
+import {
+  CLASS_NAME_ACTIVE,
+  CLASS_NAME_BACKGROUND,
+  CLASS_NAME_BORDER_BOTTOM,
+  CLASS_NAME_BORDER_TOP,
+  CLASS_NAME_BUTTON,
+  CLASS_NAME_CALENDAR,
+  CLASS_NAME_COL,
+  CLASS_NAME_DISABLED,
+  CLASS_NAME_DISPLAY_BLOCK,
+  CLASS_NAME_DISPLAY_FLEX,
+  CLASS_NAME_FLEX_FILL,
+  CLASS_NAME_FOCUS,
+  CLASS_NAME_FONT_WEIGHT_BOLD,
+  CLASS_NAME_FORM_CONTROL,
+  CLASS_NAME_HEIGHT_AUTO,
+  CLASS_NAME_NO_BORDER,
+  CLASS_NAME_NO_GUTTERS,
+  CLASS_NAME_NO_PADDING,
+  CLASS_NAME_READONLY,
+  CLASS_NAME_ROUNDED_CIRCLE,
+  CLASS_NAME_ROW,
+  CLASS_NAME_SMALL,
+  CLASS_NAME_SR_ONLY,
+  CLASS_NAME_TEXT,
+  CLASS_NAME_TEXT_CENTER,
+  CLASS_NAME_TEXT_MUTED,
+  CLASS_NAME_TEXT_NOWRAP,
+  CLASS_NAME_TEXT_TRUNCATE
+} from '../../constants/class-names'
+import { NAME_CALENDAR } from '../../constants/components'
 import {
   DOWN,
   END,
@@ -36,7 +67,7 @@ import { requestAF } from '../../utils/dom'
 import { isArray, isFunction, isPlainObject, isString } from '../../utils/inspect'
 import { isLocaleRTL } from '../../utils/locale'
 import { toInteger } from '../../utils/number'
-import { toString } from '../../utils/string'
+import { suffixClass, toString } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import {
@@ -46,15 +77,10 @@ import {
   BIconCircleFill
 } from '../../icons/icons'
 
-// --- Constants ---
-
-const NAME = 'BCalendar'
-
 // --- BCalendar component ---
-
 // @vue/component
 export const BCalendar = Vue.extend({
-  name: NAME,
+  name: NAME_CALENDAR,
   mixins: [idMixin, normalizeSlotMixin],
   model: {
     // Even though this is the default that Vue assumes, we need
@@ -180,55 +206,55 @@ export const BCalendar = Vue.extend({
     // Labels for buttons and keyboard shortcuts
     labelPrevDecade: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelPrevDecade')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelPrevDecade')
     },
     labelPrevYear: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelPrevYear')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelPrevYear')
     },
     labelPrevMonth: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelPrevMonth')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelPrevMonth')
     },
     labelCurrentMonth: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelCurrentMonth')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelCurrentMonth')
     },
     labelNextMonth: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelNextMonth')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelNextMonth')
     },
     labelNextYear: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelNextYear')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelNextYear')
     },
     labelNextDecade: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelNextDecade')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelNextDecade')
     },
     labelToday: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelToday')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelToday')
     },
     labelSelected: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelSelected')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelSelected')
     },
     labelNoDateSelected: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelNoDateSelected')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelNoDateSelected')
     },
     labelCalendar: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelCalendar')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelCalendar')
     },
     labelNav: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelNav')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelNav')
     },
     labelHelp: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelHelp')
+      default: () => getComponentConfig(NAME_CALENDAR, 'labelHelp')
     },
     dateFormatOptions: {
       // `Intl.DateTimeFormat` object
@@ -750,22 +776,30 @@ export const BCalendar = Vue.extend({
     const highlightToday = !this.noHighlightToday
     // Pre-compute some IDs
     // This should be computed props
-    const idValue = safeId()
-    const idWidget = safeId('_calendar-wrapper_')
-    const idNav = safeId('_calendar-nav_')
-    const idGrid = safeId('_calendar-grid_')
-    const idGridCaption = safeId('_calendar-grid-caption_')
-    const idGridHelp = safeId('_calendar-grid-help_')
+    const id = safeId()
+    const baseId = `${id}__calendar`
+    const idWidget = `${baseId}-wrapper_`
+    const idNav = `${baseId}-nav_`
+    const idGrid = `${baseId}-grid_`
+    const idGridCaption = `${baseId}-grid-caption_`
+    const idGridHelp = `${baseId}-grid-help_`
     const idActive = activeYMD ? safeId(`_cell-${activeYMD}_`) : null
 
     // Header showing current selected date
     let $header = h(
       'output',
       {
-        staticClass: 'form-control form-control-sm text-center',
-        class: { 'text-muted': this.disabled, readonly: this.readonly || this.disabled },
+        staticClass: CLASS_NAME_FORM_CONTROL,
+        class: [
+          suffixClass(CLASS_NAME_FORM_CONTROL, 'sm'),
+          CLASS_NAME_TEXT_CENTER,
+          {
+            [CLASS_NAME_TEXT_MUTED]: this.disabled,
+            [CLASS_NAME_READONLY]: this.readonly || this.disabled
+          }
+        ],
         attrs: {
-          id: idValue,
+          id,
           for: idGrid,
           role: 'status',
           tabindex: this.disabled ? null : '-1',
@@ -788,7 +822,7 @@ export const BCalendar = Vue.extend({
         ? [
             // We use `bdi` elements here in case the label doesn't match the locale
             // Although IE 11 does not deal with <BDI> at all (equivalent to a span)
-            h('bdi', { staticClass: 'sr-only' }, ` (${toString(this.labelSelected)}) `),
+            h('bdi', { staticClass: CLASS_NAME_SR_ONLY }, ` (${toString(this.labelSelected)}) `),
             h('bdi', this.formatDateString(this.selectedDate))
           ]
         : this.labelNoDateSelected || '\u00a0' // '&nbsp;'
@@ -796,8 +830,8 @@ export const BCalendar = Vue.extend({
     $header = h(
       'header',
       {
-        staticClass: 'b-calendar-header',
-        class: { 'sr-only': this.hideHeader },
+        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'header'),
+        class: { [CLASS_NAME_SR_ONLY]: this.hideHeader },
         attrs: { title: this.selectedDate ? this.labelSelectedDate || null : null }
       },
       [$header]
@@ -832,8 +866,14 @@ export const BCalendar = Vue.extend({
       return h(
         'button',
         {
-          staticClass: 'btn btn-sm btn-outline-secondary border-0 flex-fill',
-          class: { disabled: btnDisabled },
+          staticClass: CLASS_NAME_BUTTON,
+          class: [
+            suffixClass(CLASS_NAME_BUTTON, 'sm'),
+            suffixClass(CLASS_NAME_BUTTON, 'outline-secondary'),
+            CLASS_NAME_NO_BORDER,
+            CLASS_NAME_FLEX_FILL,
+            { disabled: btnDisabled }
+          ],
           attrs: {
             title: label || null,
             type: 'button',
@@ -851,7 +891,8 @@ export const BCalendar = Vue.extend({
     const $nav = h(
       'div',
       {
-        staticClass: 'b-calendar-nav d-flex',
+        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'nav'),
+        class: CLASS_NAME_DISPLAY_FLEX,
         attrs: {
           id: idNav,
           role: 'group',
@@ -922,8 +963,12 @@ export const BCalendar = Vue.extend({
       'header',
       {
         key: 'grid-caption',
-        staticClass: 'b-calendar-grid-caption text-center font-weight-bold',
-        class: { 'text-muted': this.disabled },
+        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid-caption'),
+        class: [
+          CLASS_NAME_TEXT_CENTER,
+          CLASS_NAME_FONT_WEIGHT_BOLD,
+          { [CLASS_NAME_TEXT_MUTED]: this.disabled }
+        ],
         attrs: {
           id: idGridCaption,
           'aria-live': isLive ? 'polite' : null,
@@ -937,7 +982,8 @@ export const BCalendar = Vue.extend({
     const $gridWeekDays = h(
       'div',
       {
-        staticClass: 'b-calendar-grid-weekdays row no-gutters border-bottom',
+        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid-weekdays'),
+        class: [CLASS_NAME_ROW, CLASS_NAME_NO_GUTTERS, CLASS_NAME_BORDER_BOTTOM],
         attrs: { 'aria-hidden': 'true' }
       },
       this.calendarHeadings.map((d, idx) => {
@@ -945,8 +991,11 @@ export const BCalendar = Vue.extend({
           'small',
           {
             key: idx,
-            staticClass: 'col text-truncate',
-            class: { 'text-muted': this.disabled },
+            class: [
+              CLASS_NAME_COL,
+              CLASS_NAME_TEXT_TRUNCATE,
+              { [CLASS_NAME_TEXT_MUTED]: this.disabled }
+            ],
             attrs: {
               title: d.label === d.text ? null : d.label,
               'aria-label': d.label
@@ -968,28 +1017,35 @@ export const BCalendar = Vue.extend({
         const $btn = h(
           'span',
           {
-            staticClass: 'btn border-0 rounded-circle text-nowrap',
             // Should we add some classes to signify if today/selected/etc?
-            class: {
-              // Give the fake button a focus ring
-              focus: isActive && this.gridHasFocus,
-              // Styling
-              disabled: day.isDisabled || this.disabled,
-              active: isSelected, // makes the button look "pressed"
-              // Selected date style (need to computed from variant)
-              [this.computedVariant]: isSelected,
-              // Today day style (if not selected), same variant color as selected date
-              [this.computedTodayVariant]:
-                isToday && highlightToday && !isSelected && day.isThisMonth,
-              // Non selected/today styling
-              'btn-outline-light': !(isToday && highlightToday) && !isSelected && !isActive,
-              'btn-light': !(isToday && highlightToday) && !isSelected && isActive,
-              // Text styling
-              'text-muted': !day.isThisMonth && !isSelected,
-              'text-dark':
-                !(isToday && highlightToday) && !isSelected && !isActive && day.isThisMonth,
-              'font-weight-bold': (isSelected || day.isThisMonth) && !day.isDisabled
-            },
+            class: [
+              CLASS_NAME_BUTTON,
+              CLASS_NAME_NO_BORDER,
+              CLASS_NAME_ROUNDED_CIRCLE,
+              CLASS_NAME_TEXT_NOWRAP,
+              {
+                // Give the fake button a focus ring
+                [CLASS_NAME_FOCUS]: isActive && this.gridHasFocus,
+                // Styling
+                [CLASS_NAME_DISABLED]: day.isDisabled || this.disabled,
+                [CLASS_NAME_ACTIVE]: isSelected, // makes the button look "pressed"
+                // Selected date style (need to computed from variant)
+                [this.computedVariant]: isSelected,
+                // Today day style (if not selected), same variant color as selected date
+                [this.computedTodayVariant]:
+                  isToday && highlightToday && !isSelected && day.isThisMonth,
+                // Non selected/today styling
+                [suffixClass(CLASS_NAME_BUTTON, 'outline-light')]:
+                  !(isToday && highlightToday) && !isSelected && !isActive,
+                [suffixClass(CLASS_NAME_BUTTON, 'light')]:
+                  !(isToday && highlightToday) && !isSelected && isActive,
+                // Text styling
+                [CLASS_NAME_TEXT_MUTED]: !day.isThisMonth && !isSelected,
+                [suffixClass(CLASS_NAME_TEXT, 'dark')]:
+                  !(isToday && highlightToday) && !isSelected && !isActive && day.isThisMonth,
+                [CLASS_NAME_FONT_WEIGHT_BOLD]: (isSelected || day.isThisMonth) && !day.isDisabled
+              }
+            ],
             on: { click: () => this.onClickDay(day) }
           },
           day.day
@@ -998,8 +1054,11 @@ export const BCalendar = Vue.extend({
           'div', // Cell with button
           {
             key: dIndex,
-            staticClass: 'col p-0',
-            class: day.isDisabled ? 'bg-light' : day.info.class || '',
+            class: [
+              CLASS_NAME_COL,
+              CLASS_NAME_NO_PADDING,
+              day.isDisabled ? suffixClass(CLASS_NAME_BACKGROUND, 'light') : day.info.class || ''
+            ],
             attrs: {
               id: idCell,
               role: 'button',
@@ -1027,14 +1086,21 @@ export const BCalendar = Vue.extend({
       // Return the week "row"
       // We use the first day of the weeks YMD value as a
       // key for efficient DOM patching / element re-use
-      return h('div', { key: week[0].ymd, staticClass: 'row no-gutters' }, $cells)
+      return h(
+        'div',
+        {
+          key: week[0].ymd,
+          staticClass: [CLASS_NAME_ROW, CLASS_NAME_NO_GUTTERS]
+        },
+        $cells
+      )
     })
     $gridBody = h(
       'div',
       {
         // A key is only required on the body if we add in transition support
         // key: this.activeYMD.slice(0, -3),
-        staticClass: 'b-calendar-grid-body',
+        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid-body'),
         style: this.disabled ? { pointerEvents: 'none' } : {}
       },
       $gridBody
@@ -1043,19 +1109,27 @@ export const BCalendar = Vue.extend({
     const $gridHelp = h(
       'footer',
       {
-        staticClass: 'b-calendar-grid-help border-top small text-muted text-center bg-light',
+        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid-help'),
+        class: [
+          CLASS_NAME_BORDER_TOP,
+          CLASS_NAME_SMALL,
+          CLASS_NAME_TEXT_MUTED,
+          CLASS_NAME_TEXT_CENTER,
+          suffixClass(CLASS_NAME_BACKGROUND, 'light')
+        ],
         attrs: {
           id: idGridHelp
         }
       },
-      [h('div', { staticClass: 'small' }, this.labelHelp)]
+      [h('div', { staticClass: CLASS_NAME_SMALL }, this.labelHelp)]
     )
 
     const $grid = h(
       'div',
       {
         ref: 'grid',
-        staticClass: 'b-calendar-grid form-control h-auto text-center',
+        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid'),
+        class: [CLASS_NAME_FORM_CONTROL, CLASS_NAME_HEIGHT_AUTO, CLASS_NAME_TEXT_CENTER],
         attrs: {
           id: idGrid,
           role: 'application',
@@ -1081,12 +1155,14 @@ export const BCalendar = Vue.extend({
 
     // Optional bottom slot
     let $slot = this.normalizeSlot('default')
-    $slot = $slot ? h('footer', { staticClass: 'b-calendar-footer' }, $slot) : h()
+    $slot = $slot
+      ? h('footer', { staticClass: suffixClass(CLASS_NAME_CALENDAR, 'footer') }, $slot)
+      : h()
 
     const $widget = h(
       'div',
       {
-        staticClass: 'b-calendar-inner',
+        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'inner'),
         style: this.block ? {} : { width: this.width },
         attrs: {
           id: idWidget,
@@ -1102,7 +1178,7 @@ export const BCalendar = Vue.extend({
             // Should the attr (if present) go last?
             // Or should this attr be a prop?
             this.$attrs['aria-describedby'],
-            idValue,
+            id,
             idGridHelp
           ]
             .filter(identity)
@@ -1116,6 +1192,13 @@ export const BCalendar = Vue.extend({
     )
 
     // Wrap in an outer div that can be styled
-    return h('div', { staticClass: 'b-calendar', class: { 'd-block': this.block } }, [$widget])
+    return h(
+      'div',
+      {
+        staticClass: CLASS_NAME_CALENDAR,
+        class: { [CLASS_NAME_DISPLAY_BLOCK]: this.block }
+      },
+      [$widget]
+    )
   }
 })
diff --git a/src/components/card/card-body.js b/src/components/card/card-body.js
index fd66c408c8d..6aed0ac9e41 100644
--- a/src/components/card/card-body.js
+++ b/src/components/card/card-body.js
@@ -1,12 +1,23 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
-import prefixPropName from '../../utils/prefix-prop-name'
+import {
+  CLASS_NAME_BACKGROUND,
+  CLASS_NAME_BORDER,
+  CLASS_NAME_CARD_BODY,
+  CLASS_NAME_CARD_IMG,
+  CLASS_NAME_MARGIN_BOTTOM_2,
+  CLASS_NAME_TEXT
+} from '../../constants/class-names'
+import { NAME_CARD_BODY } from '../../constants/components'
+import Vue from '../../utils/vue'
 import copyProps from '../../utils/copy-props'
 import pluckProps from '../../utils/pluck-props'
+import prefixPropName from '../../utils/prefix-prop-name'
+import { suffixClass } from '../../utils/string'
 import cardMixin from '../../mixins/card'
 import { BCardTitle, props as titleProps } from './card-title'
 import { BCardSubTitle, props as subTitleProps } from './card-sub-title'
 
+// --- Props ---
 export const props = {
   // Import common card props and prefix them with `body-`
   ...copyProps(cardMixin.props, prefixPropName.bind(null, 'body')),
@@ -22,15 +33,15 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardBody = /*#__PURE__*/ Vue.extend({
-  name: 'BCardBody',
+  name: NAME_CARD_BODY,
   functional: true,
   props,
   render(h, { props, data, children }) {
     let cardTitle = h()
     let cardSubTitle = h()
-    const cardContent = children || [h()]
 
     if (props.title) {
       cardTitle = h(BCardTitle, { props: pluckProps(titleProps, props) })
@@ -39,25 +50,25 @@ export const BCardBody = /*#__PURE__*/ Vue.extend({
     if (props.subTitle) {
       cardSubTitle = h(BCardSubTitle, {
         props: pluckProps(subTitleProps, props),
-        class: ['mb-2']
+        class: CLASS_NAME_MARGIN_BOTTOM_2
       })
     }
 
     return h(
       props.bodyTag,
       mergeData(data, {
-        staticClass: 'card-body',
+        staticClass: CLASS_NAME_CARD_BODY,
         class: [
+          props.bodyClass,
           {
-            'card-img-overlay': props.overlay,
-            [`bg-${props.bodyBgVariant}`]: props.bodyBgVariant,
-            [`border-${props.bodyBorderVariant}`]: props.bodyBorderVariant,
-            [`text-${props.bodyTextVariant}`]: props.bodyTextVariant
-          },
-          props.bodyClass || {}
+            [suffixClass(CLASS_NAME_CARD_IMG, 'overlay')]: props.overlay,
+            [`${CLASS_NAME_BACKGROUND}-${props.bodyBgVariant}`]: props.bodyBgVariant,
+            [`${CLASS_NAME_BORDER}-${props.bodyBorderVariant}`]: props.bodyBorderVariant,
+            [`${CLASS_NAME_TEXT}-${props.bodyTextVariant}`]: props.bodyTextVariant
+          }
         ]
       }),
-      [cardTitle, cardSubTitle, ...cardContent]
+      [cardTitle, cardSubTitle, children]
     )
   }
 })
diff --git a/src/components/card/card-footer.js b/src/components/card/card-footer.js
index cd1cf4550a7..6d31e117ed9 100644
--- a/src/components/card/card-footer.js
+++ b/src/components/card/card-footer.js
@@ -1,11 +1,18 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
-
+import {
+  CLASS_NAME_BACKGROUND,
+  CLASS_NAME_BORDER,
+  CLASS_NAME_CARD_FOOTER,
+  CLASS_NAME_TEXT
+} from '../../constants/class-names'
+import { NAME_CARD_FOOTER } from '../../constants/components'
+import Vue from '../../utils/vue'
 import prefixPropName from '../../utils/prefix-prop-name'
 import copyProps from '../../utils/copy-props'
 import { htmlOrText } from '../../utils/html'
 import cardMixin from '../../mixins/card'
 
+// --- Props ---
 export const props = {
   ...copyProps(cardMixin.props, prefixPropName.bind(null, 'footer')),
   footer: {
@@ -22,22 +29,23 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardFooter = /*#__PURE__*/ Vue.extend({
-  name: 'BCardFooter',
+  name: NAME_CARD_FOOTER,
   functional: true,
   props,
   render(h, { props, data, children }) {
     return h(
       props.footerTag,
       mergeData(data, {
-        staticClass: 'card-footer',
+        staticClass: CLASS_NAME_CARD_FOOTER,
         class: [
           props.footerClass,
           {
-            [`bg-${props.footerBgVariant}`]: props.footerBgVariant,
-            [`border-${props.footerBorderVariant}`]: props.footerBorderVariant,
-            [`text-${props.footerTextVariant}`]: props.footerTextVariant
+            [`${CLASS_NAME_BACKGROUND}-${props.footerBgVariant}`]: props.footerBgVariant,
+            [`${CLASS_NAME_BORDER}-${props.footerBorderVariant}`]: props.footerBorderVariant,
+            [`${CLASS_NAME_TEXT}-${props.footerTextVariant}`]: props.footerTextVariant
           }
         ]
       }),
diff --git a/src/components/card/card-group.js b/src/components/card/card-group.js
index bcae8d335cb..fe4fd66bbf4 100644
--- a/src/components/card/card-group.js
+++ b/src/components/card/card-group.js
@@ -1,6 +1,10 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_CARD, CLASS_NAME_CARD_GROUP } from '../../constants/class-names'
+import { NAME_CARD_GROUP } from '../../constants/components'
+import Vue from '../../utils/vue'
+import { suffixClass } from '../../utils/string'
 
+// --- Props ---
 export const props = {
   tag: {
     type: String,
@@ -16,16 +20,21 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardGroup = /*#__PURE__*/ Vue.extend({
-  name: 'BCardGroup',
+  name: NAME_CARD_GROUP,
   functional: true,
   props,
   render(h, { props, data, children }) {
     return h(
       props.tag,
       mergeData(data, {
-        class: props.deck ? 'card-deck' : props.columns ? 'card-columns' : 'card-group'
+        staticClass: props.deck
+          ? suffixClass(CLASS_NAME_CARD, 'deck')
+          : props.columns
+            ? suffixClass(CLASS_NAME_CARD, 'columns')
+            : CLASS_NAME_CARD_GROUP
       }),
       children
     )
diff --git a/src/components/card/card-header.js b/src/components/card/card-header.js
index cf43ec65956..0c2e8906ec1 100644
--- a/src/components/card/card-header.js
+++ b/src/components/card/card-header.js
@@ -1,10 +1,18 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
-import prefixPropName from '../../utils/prefix-prop-name'
+import {
+  CLASS_NAME_CARD_HEADER,
+  CLASS_NAME_BACKGROUND,
+  CLASS_NAME_BORDER,
+  CLASS_NAME_TEXT
+} from '../../constants/class-names'
+import { NAME_CARD_HEADER } from '../../constants/components'
+import Vue from '../../utils/vue'
 import copyProps from '../../utils/copy-props'
+import prefixPropName from '../../utils/prefix-prop-name'
 import { htmlOrText } from '../../utils/html'
 import cardMixin from '../../mixins/card'
 
+// --- Props ---
 export const props = {
   ...copyProps(cardMixin.props, prefixPropName.bind(null, 'header')),
   header: {
@@ -21,22 +29,23 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardHeader = /*#__PURE__*/ Vue.extend({
-  name: 'BCardHeader',
+  name: NAME_CARD_HEADER,
   functional: true,
   props,
   render(h, { props, data, children }) {
     return h(
       props.headerTag,
       mergeData(data, {
-        staticClass: 'card-header',
+        staticClass: CLASS_NAME_CARD_HEADER,
         class: [
           props.headerClass,
           {
-            [`bg-${props.headerBgVariant}`]: props.headerBgVariant,
-            [`border-${props.headerBorderVariant}`]: props.headerBorderVariant,
-            [`text-${props.headerTextVariant}`]: props.headerTextVariant
+            [`${CLASS_NAME_BACKGROUND}-${props.headerBgVariant}`]: props.headerBgVariant,
+            [`${CLASS_NAME_BORDER}-${props.headerBorderVariant}`]: props.headerBorderVariant,
+            [`${CLASS_NAME_TEXT}-${props.headerTextVariant}`]: props.headerTextVariant
           }
         ]
       }),
diff --git a/src/components/card/card-img-lazy.js b/src/components/card/card-img-lazy.js
index 91f3d364ff7..d00eeaf0ae4 100644
--- a/src/components/card/card-img-lazy.js
+++ b/src/components/card/card-img-lazy.js
@@ -1,8 +1,13 @@
+import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_CARD_IMG } from '../../constants/class-names'
+import { NAME_CARD_IMG_LAZY } from '../../constants/components'
 import Vue from '../../utils/vue'
 import { omit } from '../../utils/object'
-import { mergeData } from 'vue-functional-data-merge'
+import { suffixClass } from '../../utils/string'
 import { BImgLazy, props as imgLazyProps } from '../image/img-lazy'
 
+// --- Props ---
+
 // Copy of `<b-img-lazy>` props, and remove conflicting/non-applicable props
 // The `omit()` util creates a new object, so we can just pass the original props
 const lazyProps = omit(imgLazyProps, [
@@ -46,30 +51,29 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardImgLazy = /*#__PURE__*/ Vue.extend({
-  name: 'BCardImgLazy',
+  name: NAME_CARD_IMG_LAZY,
   functional: true,
   props,
   render(h, { props, data }) {
-    let baseClass = 'card-img'
-    if (props.top) {
-      baseClass += '-top'
-    } else if (props.right || props.end) {
-      baseClass += '-right'
-    } else if (props.bottom) {
-      baseClass += '-bottom'
-    } else if (props.left || props.start) {
-      baseClass += '-left'
-    }
+    const direction = props.top
+      ? 'top'
+      : props.right || props.end
+        ? 'right'
+        : props.bottom
+          ? 'bottom'
+          : props.left || props.start
+            ? 'left'
+            : ''
 
-    // False out the left/center/right props before passing to b-img-lazy
-    const lazyProps = { ...props, left: false, right: false, center: false }
     return h(
       BImgLazy,
       mergeData(data, {
-        class: [baseClass],
-        props: lazyProps
+        staticClass: direction ? suffixClass(CLASS_NAME_CARD_IMG, direction) : CLASS_NAME_CARD_IMG,
+        // False out the left/center/right props
+        props: { ...props, left: false, right: false, center: false }
       })
     )
   }
diff --git a/src/components/card/card-img.js b/src/components/card/card-img.js
index 53592e441af..0b3f8233c2b 100644
--- a/src/components/card/card-img.js
+++ b/src/components/card/card-img.js
@@ -1,6 +1,10 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_CARD_IMG } from '../../constants/class-names'
+import { NAME_CARD_IMG } from '../../constants/components'
+import Vue from '../../utils/vue'
+import { suffixClass } from '../../utils/string'
 
+// --- Props ---
 export const props = {
   src: {
     type: String,
@@ -46,27 +50,27 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardImg = /*#__PURE__*/ Vue.extend({
-  name: 'BCardImg',
+  name: NAME_CARD_IMG,
   functional: true,
   props,
   render(h, { props, data }) {
-    let baseClass = 'card-img'
-    if (props.top) {
-      baseClass += '-top'
-    } else if (props.right || props.end) {
-      baseClass += '-right'
-    } else if (props.bottom) {
-      baseClass += '-bottom'
-    } else if (props.left || props.start) {
-      baseClass += '-left'
-    }
+    const direction = props.top
+      ? 'top'
+      : props.right || props.end
+        ? 'right'
+        : props.bottom
+          ? 'bottom'
+          : props.left || props.start
+            ? 'left'
+            : ''
 
     return h(
       'img',
       mergeData(data, {
-        class: [baseClass],
+        staticClass: direction ? suffixClass(CLASS_NAME_CARD_IMG, direction) : CLASS_NAME_CARD_IMG,
         attrs: {
           src: props.src || null,
           alt: props.alt || null,
diff --git a/src/components/card/card-sub-title.js b/src/components/card/card-sub-title.js
index c2be7dfa6c1..fa44e359d19 100644
--- a/src/components/card/card-sub-title.js
+++ b/src/components/card/card-sub-title.js
@@ -1,10 +1,12 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_CARD_SUB_TITLE, CLASS_NAME_TEXT } from '../../constants/class-names'
+import { NAME_CARD_SUB_TITLE } from '../../constants/components'
+import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
+import { hasChildren } from '../../utils/dom'
 import { toString } from '../../utils/string'
 
-const NAME = 'BCardSubTitle'
-
+// --- Props ---
 export const props = {
   subTitle: {
     type: String
@@ -16,23 +18,24 @@ export const props = {
   },
   subTitleTextVariant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'subTitleTextVariant')
+    default: () => getComponentConfig(NAME_CARD_SUB_TITLE, 'subTitleTextVariant')
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardSubTitle = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_CARD_SUB_TITLE,
   functional: true,
   props,
   render(h, { props, data, children }) {
     return h(
       props.subTitleTag,
       mergeData(data, {
-        staticClass: 'card-subtitle',
-        class: [props.subTitleTextVariant ? `text-${props.subTitleTextVariant}` : null]
+        staticClass: CLASS_NAME_CARD_SUB_TITLE,
+        class: props.subTitleTextVariant ? `${CLASS_NAME_TEXT}-${props.subTitleTextVariant}` : null
       }),
-      children || toString(props.subTitle)
+      hasChildren(children) ? children : toString(props.subTitle)
     )
   }
 })
diff --git a/src/components/card/card-text.js b/src/components/card/card-text.js
index bf345b31dc4..f321c419d82 100644
--- a/src/components/card/card-text.js
+++ b/src/components/card/card-text.js
@@ -1,6 +1,9 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_CARD_TEXT } from '../../constants/class-names'
+import { NAME_CARD_TEXT } from '../../constants/components'
+import Vue from '../../utils/vue'
 
+// --- Props ---
 export const props = {
   textTag: {
     type: String,
@@ -8,12 +11,13 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardText = /*#__PURE__*/ Vue.extend({
-  name: 'BCardText',
+  name: NAME_CARD_TEXT,
   functional: true,
   props,
   render(h, { props, data, children }) {
-    return h(props.textTag, mergeData(data, { staticClass: 'card-text' }), children)
+    return h(props.textTag, mergeData(data, { staticClass: CLASS_NAME_CARD_TEXT }), children)
   }
 })
diff --git a/src/components/card/card-title.js b/src/components/card/card-title.js
index c93cdfbbe0b..b870279518d 100644
--- a/src/components/card/card-title.js
+++ b/src/components/card/card-title.js
@@ -1,7 +1,11 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_CARD_TITLE } from '../../constants/class-names'
+import { NAME_CARD_TITLE } from '../../constants/components'
+import Vue from '../../utils/vue'
+import { hasChildren } from '../../utils/dom'
 import { toString } from '../../utils/string'
 
+// --- Props ---
 export const props = {
   title: {
     type: String
@@ -13,18 +17,19 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCardTitle = /*#__PURE__*/ Vue.extend({
-  name: 'BCardTitle',
+  name: NAME_CARD_TITLE,
   functional: true,
   props,
   render(h, { props, data, children }) {
     return h(
       props.titleTag,
       mergeData(data, {
-        staticClass: 'card-title'
+        staticClass: CLASS_NAME_CARD_TITLE
       }),
-      children || toString(props.title)
+      hasChildren(children) ? children : toString(props.title)
     )
   }
 })
diff --git a/src/components/card/card.js b/src/components/card/card.js
index 071de824ae4..73da4ee0686 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -1,9 +1,18 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
-import prefixPropName from '../../utils/prefix-prop-name'
-import unPrefixPropName from '../../utils/unprefix-prop-name'
+import {
+  CLASS_NAME_BACKGROUND,
+  CLASS_NAME_BORDER,
+  CLASS_NAME_CARD,
+  CLASS_NAME_FLEX_ROW,
+  CLASS_NAME_FLEX_ROW_REVERSE,
+  CLASS_NAME_TEXT
+} from '../../constants/class-names'
+import { NAME_CARD } from '../../constants/components'
+import Vue from '../../utils/vue'
 import copyProps from '../../utils/copy-props'
 import pluckProps from '../../utils/pluck-props'
+import prefixPropName from '../../utils/prefix-prop-name'
+import unPrefixPropName from '../../utils/unprefix-prop-name'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
 import cardMixin from '../../mixins/card'
 import { BCardBody, props as bodyProps } from './card-body'
@@ -11,6 +20,7 @@ import { BCardHeader, props as headerProps } from './card-header'
 import { BCardFooter, props as footerProps } from './card-footer'
 import { BCardImg, props as imgProps } from './card-img'
 
+// --- Props ---
 const cardImgProps = copyProps(imgProps, prefixPropName.bind(null, 'img'))
 cardImgProps.imgSrc.required = false
 
@@ -30,9 +40,10 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCard = /*#__PURE__*/ Vue.extend({
-  name: 'BCard',
+  name: NAME_CARD,
   functional: true,
   props,
   render(h, { props, data, slots, scopedSlots }) {
@@ -85,15 +96,15 @@ export const BCard = /*#__PURE__*/ Vue.extend({
     return h(
       props.tag,
       mergeData(data, {
-        staticClass: 'card',
+        staticClass: CLASS_NAME_CARD,
         class: {
-          'flex-row': props.imgLeft || props.imgStart,
-          'flex-row-reverse':
+          [CLASS_NAME_FLEX_ROW]: props.imgLeft || props.imgStart,
+          [CLASS_NAME_FLEX_ROW_REVERSE]:
             (props.imgRight || props.imgEnd) && !(props.imgLeft || props.imgStart),
-          [`text-${props.align}`]: props.align,
-          [`bg-${props.bgVariant}`]: props.bgVariant,
-          [`border-${props.borderVariant}`]: props.borderVariant,
-          [`text-${props.textVariant}`]: props.textVariant
+          [`${CLASS_NAME_TEXT}-${props.align}`]: props.align,
+          [`${CLASS_NAME_BACKGROUND}-${props.bgVariant}`]: props.bgVariant,
+          [`${CLASS_NAME_BORDER}-${props.borderVariant}`]: props.borderVariant,
+          [`${CLASS_NAME_TEXT}-${props.textVariant}`]: props.textVariant
         }
       }),
       [imgFirst, header, ...content, footer, imgLast]
diff --git a/src/components/carousel/carousel-slide.js b/src/components/carousel/carousel-slide.js
index 0f2bdb15181..3b5d78bc896 100644
--- a/src/components/carousel/carousel-slide.js
+++ b/src/components/carousel/carousel-slide.js
@@ -1,10 +1,19 @@
+import {
+  CLASS_NAME_CAROUSEL,
+  CLASS_NAME_CAROUSEL_ITEM,
+  CLASS_NAME_DISPLAY_NONE
+} from '../../constants/class-names'
+import { NAME_CAROUSEL_SLIDE } from '../../constants/components'
 import Vue from '../../utils/vue'
+import identity from '../../utils/identity'
 import idMixin from '../../mixins/id'
-import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { hasTouchSupport } from '../../utils/env'
 import { htmlOrText } from '../../utils/html'
+import { suffixClass } from '../../utils/string'
+import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BImg } from '../image/img'
 
+// --- Props ---
 export const props = {
   imgSrc: {
     type: String
@@ -62,9 +71,10 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BCarouselSlide = /*#__PURE__*/ Vue.extend({
-  name: 'BCarouselSlide',
+  name: NAME_CAROUSEL_SLIDE,
   mixins: [idMixin, normalizeSlotMixin],
   inject: {
     bvCarousel: {
@@ -79,10 +89,8 @@ export const BCarouselSlide = /*#__PURE__*/ Vue.extend({
   props,
   computed: {
     contentClasses() {
-      return [
-        this.contentVisibleUp ? 'd-none' : '',
-        this.contentVisibleUp ? `d-${this.contentVisibleUp}-block` : ''
-      ]
+      const { contentVisibleUp } = this
+      return contentVisibleUp ? [CLASS_NAME_DISPLAY_NONE, `d-${this.contentVisibleUp}-block`] : []
     },
     computedWidth() {
       // Use local width, or try parent width
@@ -120,28 +128,25 @@ export const BCarouselSlide = /*#__PURE__*/ Vue.extend({
           : {}
       })
     }
-    if (!img) {
-      img = h()
-    }
+    img = img || h()
 
     let content = h()
-
     const contentChildren = [
       this.caption || this.captionHtml
-        ? h(this.captionTag, {
-            domProps: htmlOrText(this.captionHtml, this.caption)
-          })
-        : false,
+        ? h(this.captionTag, { domProps: htmlOrText(this.captionHtml, this.caption) })
+        : null,
       this.text || this.textHtml
         ? h(this.textTag, { domProps: htmlOrText(this.textHtml, this.text) })
-        : false,
-      this.normalizeSlot('default') || false
+        : null,
+      this.normalizeSlot('default')
     ]
-
-    if (contentChildren.some(Boolean)) {
+    if (contentChildren.some(identity)) {
       content = h(
         this.contentTag,
-        { staticClass: 'carousel-caption', class: this.contentClasses },
+        {
+          staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'caption'),
+          class: this.contentClasses
+        },
         contentChildren.map(i => i || h())
       )
     }
@@ -149,7 +154,7 @@ export const BCarouselSlide = /*#__PURE__*/ Vue.extend({
     return h(
       'div',
       {
-        staticClass: 'carousel-item',
+        staticClass: CLASS_NAME_CAROUSEL_ITEM,
         style: { background: this.background || this.bvCarousel.background || null },
         attrs: { id: this.safeId(), role: 'listitem' }
       },
diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js
index 9f849b66f90..ced93c7ec23 100644
--- a/src/components/carousel/carousel.js
+++ b/src/components/carousel/carousel.js
@@ -1,3 +1,12 @@
+import {
+  CLASS_NAME_ACTIVE,
+  CLASS_NAME_CAROUSEL,
+  CLASS_NAME_CAROUSEL_ITEM,
+  CLASS_NAME_POINTER_EVENT,
+  CLASS_NAME_SLIDE,
+  CLASS_NAME_SR_ONLY
+} from '../../constants/class-names'
+import { NAME_CAROUSEL } from '../../constants/components'
 import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import { ENTER, LEFT, RIGHT, SPACE } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
@@ -9,11 +18,11 @@ import { isBrowser, hasTouchSupport, hasPointerEventSupport } from '../../utils/
 import { eventOn, eventOff } from '../../utils/events'
 import { isUndefined } from '../../utils/inspect'
 import { toInteger } from '../../utils/number'
+import { suffixClass } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 
-const NAME = 'BCarousel'
-
+// --- Constants ---
 // Slide directional classes
 const DIRECTION = {
   next: {
@@ -49,6 +58,7 @@ const TransitionEndEvents = {
   transition: 'transitionend'
 }
 
+// --- Helper methods ---
 // Return the browser specific transitionEnd event name
 const getTransitionEndEvent = el => {
   for (const name in TransitionEndEvents) {
@@ -61,9 +71,10 @@ const getTransitionEndEvent = el => {
   return null
 }
 
+// --- Main component ---
 // @vue/component
 export const BCarousel = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_CAROUSEL,
   mixins: [idMixin, normalizeSlotMixin],
   provide() {
     return { bvCarousel: this }
@@ -75,19 +86,19 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
   props: {
     labelPrev: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelPrev')
+      default: () => getComponentConfig(NAME_CAROUSEL, 'labelPrev')
     },
     labelNext: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelNext')
+      default: () => getComponentConfig(NAME_CAROUSEL, 'labelNext')
     },
     labelGotoSlide: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelGotoSlide')
+      default: () => getComponentConfig(NAME_CAROUSEL, 'labelGotoSlide')
     },
     labelIndicators: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelIndicators')
+      default: () => getComponentConfig(NAME_CAROUSEL, 'labelIndicators')
     },
     interval: {
       type: Number,
@@ -329,8 +340,8 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
       // Update v-model
       this.$emit('input', this.index)
       if (this.noAnimation) {
-        addClass(nextSlide, 'active')
-        removeClass(currentSlide, 'active')
+        addClass(nextSlide, CLASS_NAME_ACTIVE)
+        removeClass(currentSlide, CLASS_NAME_ACTIVE)
         this.isSliding = false
         // Notify ourselves that we're done sliding (slid)
         this.$nextTick(() => this.$emit('sliding-end', to))
@@ -358,8 +369,8 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
           this._animationTimeout = null
           removeClass(nextSlide, dirClass)
           removeClass(nextSlide, overlayClass)
-          addClass(nextSlide, 'active')
-          removeClass(currentSlide, 'active')
+          addClass(nextSlide, CLASS_NAME_ACTIVE)
+          removeClass(currentSlide, CLASS_NAME_ACTIVE)
           removeClass(currentSlide, dirClass)
           removeClass(currentSlide, overlayClass)
           setAttr(currentSlide, 'aria-current', 'false')
@@ -390,17 +401,17 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
     updateSlides() {
       this.pause(true)
       // Get all slides as DOM elements
-      this.slides = selectAll('.carousel-item', this.$refs.inner)
+      this.slides = selectAll(`.${CLASS_NAME_CAROUSEL_ITEM}`, this.$refs.inner)
       const numSlides = this.slides.length
       // Keep slide number in range
       const index = Math.max(0, Math.min(Math.floor(this.index), numSlides - 1))
       this.slides.forEach((slide, idx) => {
         const n = idx + 1
         if (idx === index) {
-          addClass(slide, 'active')
+          addClass(slide, CLASS_NAME_ACTIVE)
           setAttr(slide, 'aria-current', 'true')
         } else {
-          removeClass(slide, 'active')
+          removeClass(slide, CLASS_NAME_ACTIVE)
           setAttr(slide, 'aria-current', 'false')
         }
         setAttr(slide, 'aria-posinset', String(n))
@@ -488,9 +499,9 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
       'div',
       {
         ref: 'inner',
-        class: ['carousel-inner'],
+        staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'inner'),
         attrs: {
-          id: this.safeId('__BV_inner_'),
+          id: this.safeId('_BV_inner_'),
           role: 'list'
         }
       },
@@ -520,11 +531,11 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
         h(
           'a',
           {
-            class: ['carousel-control-prev'],
+            staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'control-prev'),
             attrs: {
               href: '#',
               role: 'button',
-              'aria-controls': this.safeId('__BV_inner_'),
+              'aria-controls': this.safeId('_BV_inner_'),
               'aria-disabled': this.isSliding ? 'true' : null
             },
             on: {
@@ -533,18 +544,21 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
             }
           },
           [
-            h('span', { class: ['carousel-control-prev-icon'], attrs: { 'aria-hidden': 'true' } }),
-            h('span', { class: ['sr-only'] }, [this.labelPrev])
+            h('span', {
+              staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'control-prev-icon'),
+              attrs: { 'aria-hidden': 'true' }
+            }),
+            h('span', { class: CLASS_NAME_SR_ONLY }, [this.labelPrev])
           ]
         ),
         h(
           'a',
           {
-            class: ['carousel-control-next'],
+            class: suffixClass(CLASS_NAME_CAROUSEL, 'control-next'),
             attrs: {
               href: '#',
               role: 'button',
-              'aria-controls': this.safeId('__BV_inner_'),
+              'aria-controls': this.safeId('_BV_inner_'),
               'aria-disabled': this.isSliding ? 'true' : null
             },
             on: {
@@ -553,8 +567,11 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
             }
           },
           [
-            h('span', { class: ['carousel-control-next-icon'], attrs: { 'aria-hidden': 'true' } }),
-            h('span', { class: ['sr-only'] }, [this.labelNext])
+            h('span', {
+              staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'control-next-icon'),
+              attrs: { 'aria-hidden': 'true' }
+            }),
+            h('span', { class: CLASS_NAME_SR_ONLY }, [this.labelNext])
           ]
         )
       ]
@@ -564,29 +581,29 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
     const indicators = h(
       'ol',
       {
-        class: ['carousel-indicators'],
+        staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'indicators'),
         directives: [
           { name: 'show', rawName: 'v-show', value: this.indicators, expression: 'indicators' }
         ],
         attrs: {
-          id: this.safeId('__BV_indicators_'),
+          id: this.safeId('_BV_indicators_'),
           'aria-hidden': this.indicators ? 'false' : 'true',
           'aria-label': this.labelIndicators,
-          'aria-owns': this.safeId('__BV_inner_')
+          'aria-owns': this.safeId('_BV_inner_')
         }
       },
       this.slides.map((slide, n) => {
         return h('li', {
           key: `slide_${n}`,
-          class: { active: n === this.index },
+          class: { [CLASS_NAME_ACTIVE]: n === this.index },
           attrs: {
             role: 'button',
-            id: this.safeId(`__BV_indicator_${n + 1}_`),
+            id: this.safeId(`_BV_indicator_${n + 1}_`),
             tabindex: this.indicators ? '0' : '-1',
             'aria-current': n === this.index ? 'true' : 'false',
             'aria-label': `${this.labelGotoSlide} ${n + 1}`,
             'aria-describedby': this.slides[n].id || null,
-            'aria-controls': this.safeId('__BV_inner_')
+            'aria-controls': this.safeId('_BV_inner_')
           },
           on: {
             click: evt => {
@@ -640,11 +657,11 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
     return h(
       'div',
       {
-        staticClass: 'carousel',
+        staticClass: CLASS_NAME_CAROUSEL,
         class: {
-          slide: !this.noAnimation,
-          'carousel-fade': !this.noAnimation && this.fade,
-          'pointer-event': !this.noTouch && hasTouchSupport && hasPointerEventSupport
+          [CLASS_NAME_SLIDE]: !this.noAnimation,
+          [suffixClass(CLASS_NAME_CAROUSEL, 'fade')]: !this.noAnimation && this.fade,
+          [CLASS_NAME_POINTER_EVENT]: !this.noTouch && hasTouchSupport && hasPointerEventSupport
         },
         style: { background: this.background },
         attrs: {
diff --git a/src/components/carousel/carousel.spec.js b/src/components/carousel/carousel.spec.js
index 9784a01e609..2443b3452f6 100644
--- a/src/components/carousel/carousel.spec.js
+++ b/src/components/carousel/carousel.spec.js
@@ -67,7 +67,7 @@ describe('carousel', () => {
     const id = wrapper.attributes('id')
 
     // Slide wrapper
-    // <div role="list" class="carousel-inner" id="__BVID__52___BV_inner_"></div>
+    // <div role="list" class="carousel-inner" id="__BVID__52__BV_inner_"></div>
     expect(wrapper.findAll('.carousel > .carousel-inner').length).toBe(1)
     const $inner = wrapper.find('.carousel > .carousel-inner')
     expect($inner.classes()).toContain('carousel-inner')
@@ -75,11 +75,11 @@ describe('carousel', () => {
     expect($inner.attributes('role')).toBeDefined()
     expect($inner.attributes('role')).toEqual('list')
     expect($inner.attributes('id')).toBeDefined()
-    expect($inner.attributes('id')).toEqual(`${id}___BV_inner_`)
+    expect($inner.attributes('id')).toEqual(`${id}__BV_inner_`)
 
     // Controls (none by default)
-    // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55___BV_inner_"></a>
-    // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55___BV_inner_"></a>
+    // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55__BV_inner_"></a>
+    // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55__BV_inner_"></a>
     expect(wrapper.findAll('.carousel > .carousel-control-prev').length).toBe(0)
     expect(wrapper.findAll('.carousel > .carousel-control-next').length).toBe(0)
     expect(wrapper.findAll('a').length).toBe(0)
@@ -89,17 +89,17 @@ describe('carousel', () => {
     //   aria-hidden="true"
     //   aria-label="Select a slide to display"
     //   class="carousel-indicators"
-    //   id="__BVID__52___BV_indicators_"
-    //   aria-owns="__BVID__52___BV_inner_"
+    //   id="__BVID__52__BV_indicators_"
+    //   aria-owns="__BVID__52__BV_inner_"
     //   style="display: none;"></ol>
     expect(wrapper.findAll('.carousel > ol').length).toBe(1)
     const $indicators = wrapper.find('.carousel > ol')
     expect($indicators.classes()).toContain('carousel-indicators')
     expect($indicators.classes().length).toBe(1)
     expect($indicators.attributes('id')).toBeDefined()
-    expect($indicators.attributes('id')).toEqual(`${id}___BV_indicators_`)
+    expect($indicators.attributes('id')).toEqual(`${id}__BV_indicators_`)
     expect($indicators.attributes('aria-owns')).toBeDefined()
-    expect($indicators.attributes('aria-owns')).toEqual(`${id}___BV_inner_`)
+    expect($indicators.attributes('aria-owns')).toEqual(`${id}__BV_inner_`)
     expect($indicators.attributes('aria-hidden')).toBeDefined()
     expect($indicators.attributes('aria-hidden')).toEqual('true')
     expect($indicators.attributes('aria-label')).toBeDefined()
@@ -133,12 +133,12 @@ describe('carousel', () => {
     const id = wrapper.attributes('id')
 
     // Slide wrapper
-    // <div role="list" class="carousel-inner" id="__BVID__52___BV_inner_"></div>
+    // <div role="list" class="carousel-inner" id="__BVID__52__BV_inner_"></div>
     expect(wrapper.findAll('.carousel > .carousel-inner').length).toBe(1)
 
     // Controls
-    // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55___BV_inner_"></a>
-    // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55___BV_inner_"></a>
+    // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55__BV_inner_"></a>
+    // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55__BV_inner_"></a>
     expect(wrapper.findAll('.carousel > .carousel-control-prev').length).toBe(1)
     expect(wrapper.findAll('.carousel > .carousel-control-next').length).toBe(1)
     expect(wrapper.findAll('a').length).toBe(2)
@@ -150,8 +150,8 @@ describe('carousel', () => {
     expect($next.attributes('href')).toEqual('#')
     expect($prev.attributes('role')).toEqual('button')
     expect($next.attributes('role')).toEqual('button')
-    expect($prev.attributes('aria-controls')).toEqual(`${id}___BV_inner_`)
-    expect($next.attributes('aria-controls')).toEqual(`${id}___BV_inner_`)
+    expect($prev.attributes('aria-controls')).toEqual(`${id}__BV_inner_`)
+    expect($next.attributes('aria-controls')).toEqual(`${id}__BV_inner_`)
     expect($prev.classes()).toContain('carousel-control-prev')
     expect($next.classes()).toContain('carousel-control-next')
     expect($prev.classes().length).toBe(1)
@@ -162,8 +162,8 @@ describe('carousel', () => {
     //   aria-hidden="true"
     //   aria-label="Select a slide to display"
     //   class="carousel-indicators"
-    //   id="__BVID__52___BV_indicators_"
-    //   aria-owns="__BVID__52___BV_inner_"
+    //   id="__BVID__52__BV_indicators_"
+    //   aria-owns="__BVID__52__BV_inner_"
     //   style="display: none;"></ol>
     expect(wrapper.findAll('.carousel > ol').length).toBe(1)
     const $indicators = wrapper.find('.carousel > ol')
@@ -196,12 +196,12 @@ describe('carousel', () => {
     expect(wrapper.attributes('id')).toBeDefined()
 
     // Slide wrapper
-    // <div role="list" class="carousel-inner" id="__BVID__52___BV_inner_"></div>
+    // <div role="list" class="carousel-inner" id="__BVID__52__BV_inner_"></div>
     expect(wrapper.findAll('.carousel > .carousel-inner').length).toBe(1)
 
     // Controls (none by default)
-    // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55___BV_inner_"></a>
-    // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55___BV_inner_"></a>
+    // <a href="#" role="button" class="carousel-control-prev" aria-controls="__BVID__55__BV_inner_"></a>
+    // <a href="#" role="button" class="carousel-control-next" aria-controls="__BVID__55__BV_inner_"></a>
     expect(wrapper.findAll('.carousel > .carousel-control-prev').length).toBe(0)
     expect(wrapper.findAll('.carousel > .carousel-control-next').length).toBe(0)
 
@@ -210,8 +210,8 @@ describe('carousel', () => {
     //   aria-hidden="true"
     //   aria-label="Select a slide to display"
     //   class="carousel-indicators"
-    //   id="__BVID__52___BV_indicators_"
-    //   aria-owns="__BVID__52___BV_inner_"
+    //   id="__BVID__52__BV_indicators_"
+    //   aria-owns="__BVID__52__BV_inner_"
     //   style="display: none;"></ol>
     expect(wrapper.findAll('.carousel > ol').length).toBe(1)
     const $indicators = wrapper.find('.carousel > ol')
diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
index 3c58da80e5b..17e44054132 100644
--- a/src/components/collapse/collapse.js
+++ b/src/components/collapse/collapse.js
@@ -1,9 +1,18 @@
+import {
+  CLASS_NAME_COLLAPSE,
+  CLASS_NAME_DROPDOWN_ITEM,
+  CLASS_NAME_NAVBAR,
+  CLASS_NAME_NAV_LINK,
+  CLASS_NAME_SHOW
+} from '../../constants/class-names'
+import { NAME_COLLAPSE } from '../../constants/components'
 import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import Vue from '../../utils/vue'
 import { BVCollapse } from '../../utils/bv-collapse'
 import { addClass, hasClass, removeClass, closest, matches, getCS } from '../../utils/dom'
 import { isBrowser } from '../../utils/env'
 import { eventOnOff } from '../../utils/events'
+import { suffixClass } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import listenOnRootMixin from '../../mixins/listen-on-root'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -15,14 +24,15 @@ import {
 } from '../../directives/toggle/toggle'
 
 // --- Constants ---
-
 // Accordion event name we emit on `$root`
 const EVENT_ACCORDION = 'bv::collapse::accordion'
 
+const STYLE_DISPLAY_BLOCK = 'block'
+
 // --- Main component ---
 // @vue/component
 export const BCollapse = /*#__PURE__*/ Vue.extend({
-  name: 'BCollapse',
+  name: NAME_COLLAPSE,
   mixins: [idMixin, listenOnRootMixin, normalizeSlotMixin],
   model: {
     prop: 'visible',
@@ -60,9 +70,9 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
   computed: {
     classObject() {
       return {
-        'navbar-collapse': this.isNav,
-        collapse: !this.transitioning,
-        show: this.show && !this.transitioning
+        [suffixClass(CLASS_NAME_NAVBAR, 'collapse')]: this.isNav,
+        [CLASS_NAME_COLLAPSE]: !this.transitioning,
+        [CLASS_NAME_SHOW]: this.show && !this.transitioning
       }
     }
   },
@@ -173,22 +183,23 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
       // Check to see if the collapse has `display: block !important` set
       // We can't set `display: none` directly on `this.$el`, as it would
       // trigger a new transition to start (or cancel a current one)
-      const restore = hasClass(this.$el, 'show')
-      removeClass(this.$el, 'show')
-      const isBlock = getCS(this.$el).display === 'block'
+      const restore = hasClass(this.$el, CLASS_NAME_SHOW)
+      removeClass(this.$el, CLASS_NAME_SHOW)
+      const isBlock = getCS(this.$el).display === STYLE_DISPLAY_BLOCK
       if (restore) {
-        addClass(this.$el, 'show')
+        addClass(this.$el, CLASS_NAME_SHOW)
       }
       return isBlock
     },
     clickHandler(evt) {
       // If we are in a nav/navbar, close the collapse when non-disabled link clicked
       const el = evt.target
-      if (!this.isNav || !el || getCS(this.$el).display !== 'block') {
+      if (!this.isNav || !el || getCS(this.$el).display !== STYLE_DISPLAY_BLOCK) {
         /* istanbul ignore next: can't test getComputedStyle in JSDOM */
         return
       }
-      if (matches(el, '.nav-link,.dropdown-item') || closest('.nav-link,.dropdown-item', el)) {
+      const selector = `.${CLASS_NAME_DROPDOWN_ITEM}, .${CLASS_NAME_NAV_LINK}`
+      if (matches(el, selector) || closest(selector, el)) {
         if (!this.checkDisplayBlock()) {
           // Only close the collapse if it is not forced to be `display: block !important`
           this.show = false
@@ -219,7 +230,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
     },
     handleResize() {
       // Handler for orientation/resize to set collapsed state in nav/navbar
-      this.show = getCS(this.$el).display === 'block'
+      this.show = getCS(this.$el).display === STYLE_DISPLAY_BLOCK
     }
   },
   render(h) {
diff --git a/src/constants/class-names.js b/src/constants/class-names.js
index 9dbbc678896..de689cfc859 100644
--- a/src/constants/class-names.js
+++ b/src/constants/class-names.js
@@ -7,13 +7,62 @@ export const CLASS_NAME_BUTTON = 'btn'
 export const CLASS_NAME_BUTTON_CLOSE = 'close'
 export const CLASS_NAME_BUTTON_GROUP = 'btn-group'
 export const CLASS_NAME_BUTTON_TOOLBAR = 'btn-toolbar'
+export const CLASS_NAME_CARD = 'card'
+export const CLASS_NAME_CARD_BODY = 'card-body'
+export const CLASS_NAME_CARD_FOOTER = 'card-footer'
+export const CLASS_NAME_CARD_GROUP = 'card-group'
+export const CLASS_NAME_CARD_HEADER = 'card-header'
+export const CLASS_NAME_CARD_IMG = 'card-img'
+export const CLASS_NAME_CARD_SUB_TITLE = 'card-subtitle'
+export const CLASS_NAME_CARD_TEXT = 'card-text'
+export const CLASS_NAME_CARD_TITLE = 'card-title'
+export const CLASS_NAME_CAROUSEL = 'carousel'
+export const CLASS_NAME_CAROUSEL_ITEM = 'carousel-item'
+export const CLASS_NAME_COLLAPSE = 'collapse'
 export const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
 export const CLASS_NAME_FORM_CONTROL = 'form-control'
+export const CLASS_NAME_NAVBAR = 'navbar'
+export const CLASS_NAME_NAV_LINK = 'nav-link'
 
 // BootstrapVue components
 export const CLASS_NAME_ASPECT = 'b-aspect'
 export const CLASS_NAME_AVATAR = 'b-avatar'
+export const CLASS_NAME_CALENDAR = 'b-calendar'
 
 // Utility classes
+export const CLASS_NAME_ACTIVE = 'active'
+export const CLASS_NAME_BACKGROUND = 'bg'
+export const CLASS_NAME_BORDER = 'border'
+export const CLASS_NAME_BORDER_BOTTOM = 'border-bottom'
+export const CLASS_NAME_BORDER_TOP = 'border-top'
+export const CLASS_NAME_COL = 'col'
+export const CLASS_NAME_COLLAPSING = 'collapsing'
 export const CLASS_NAME_DISABLED = 'disabled'
+export const CLASS_NAME_DISPLAY_BLOCK = 'd-block'
+export const CLASS_NAME_DISPLAY_FLEX = 'd-flex'
+export const CLASS_NAME_DISPLAY_NONE = 'd-none'
+export const CLASS_NAME_FADE = 'fade'
+export const CLASS_NAME_FLEX_FILL = 'flex-fill'
+export const CLASS_NAME_FLEX_ROW = 'flex-row'
+export const CLASS_NAME_FLEX_ROW_REVERSE = 'flex-row-reverse'
+export const CLASS_NAME_FOCUS = 'focus'
+export const CLASS_NAME_FONT_WEIGHT_BOLD = 'font-weight-bold'
+export const CLASS_NAME_HEIGHT_AUTO = 'h-auto'
+export const CLASS_NAME_MARGIN_BOTTOM_2 = 'mb-2'
+export const CLASS_NAME_NO_BORDER = 'border-0'
+export const CLASS_NAME_NO_GUTTERS = 'no-gutters'
+export const CLASS_NAME_NO_PADDING = 'p-0'
+export const CLASS_NAME_POINTER_EVENT = 'pointer-event'
+export const CLASS_NAME_READONLY = 'readonly'
 export const CLASS_NAME_ROUNDED = 'rounded'
+export const CLASS_NAME_ROUNDED_CIRCLE = 'rounded-circle'
+export const CLASS_NAME_ROW = 'row'
+export const CLASS_NAME_SHOW = 'show'
+export const CLASS_NAME_SLIDE = 'slide'
+export const CLASS_NAME_SMALL = 'small'
+export const CLASS_NAME_SR_ONLY = 'sr-only'
+export const CLASS_NAME_TEXT = 'text'
+export const CLASS_NAME_TEXT_CENTER = 'text-center'
+export const CLASS_NAME_TEXT_MUTED = 'text-muted'
+export const CLASS_NAME_TEXT_NOWRAP = 'text-nowrap'
+export const CLASS_NAME_TEXT_TRUNCATE = 'text-truncate'
diff --git a/src/constants/components.js b/src/constants/components.js
index 29368df6d26..f206b621b47 100644
--- a/src/constants/components.js
+++ b/src/constants/components.js
@@ -9,3 +9,17 @@ export const NAME_BUTTON = 'BButton'
 export const NAME_BUTTON_CLOSE = 'BButtonClose'
 export const NAME_BUTTON_GROUP = 'BButtonGroup'
 export const NAME_BUTTON_TOOLBAR = 'BButtonToolbar'
+export const NAME_CALENDAR = 'BCalendar'
+export const NAME_CARD = 'BCard'
+export const NAME_CARD_BODY = 'BCardBody'
+export const NAME_CARD_FOOTER = 'BCardFooter'
+export const NAME_CARD_GROUP = 'BCardGroup'
+export const NAME_CARD_HEADER = 'BCardHeader'
+export const NAME_CARD_IMG = 'BCardImg'
+export const NAME_CARD_IMG_LAZY = 'BCardImgLazy'
+export const NAME_CARD_SUB_TITLE = 'BCardSubTitle'
+export const NAME_CARD_TEXT = 'BCardText'
+export const NAME_CARD_TITLE = 'BCardTitle'
+export const NAME_CAROUSEL = 'BCarousel'
+export const NAME_CAROUSEL_SLIDE = 'BCarouselSlide'
+export const NAME_COLLAPSE = 'BCollapse'
diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js
index 41a5c1ea989..32d386e8084 100644
--- a/src/utils/bv-collapse.js
+++ b/src/utils/bv-collapse.js
@@ -5,14 +5,21 @@
 //   during the enter/leave transition phases only
 //   Although it appears that Vue may be leaving the classes
 //   in-place after the transition completes
+import {
+  CLASS_NAME_COLLAPSE,
+  CLASS_NAME_COLLAPSING,
+  CLASS_NAME_SHOW
+} from '../constants/class-names'
 import Vue from './vue'
 import { mergeData } from 'vue-functional-data-merge'
 import { getBCR, reflow, requestAF } from './dom'
 
+// --- Utility methods ---
+
 // Transition event handler helpers
 const onEnter = el => {
   el.style.height = 0
-  // Animaton frame delay neeeded for `appear` to work
+  // Animation frame delay needed for `appear` to work
   requestAF(() => {
     reflow(el)
     el.style.height = `${el.scrollHeight}px`
@@ -35,16 +42,18 @@ const onAfterLeave = el => {
   el.style.height = null
 }
 
+// --- Constants
+
 // Default transition props
 // `appear` will use the enter classes
 const TRANSITION_PROPS = {
   css: true,
   enterClass: '',
-  enterActiveClass: 'collapsing',
-  enterToClass: 'collapse show',
-  leaveClass: 'collapse show',
-  leaveActiveClass: 'collapsing',
-  leaveToClass: 'collapse'
+  enterActiveClass: CLASS_NAME_COLLAPSING,
+  enterToClass: [CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW].join(' '),
+  leaveClass: [CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW].join(' '),
+  leaveActiveClass: CLASS_NAME_COLLAPSING,
+  leaveToClass: CLASS_NAME_COLLAPSE
 }
 
 // Default transition handlers
@@ -56,6 +65,7 @@ const TRANSITION_HANDLERS = {
   afterLeave: onAfterLeave
 }
 
+// --- Main component ---
 // @vue/component
 export const BVCollapse = /*#__PURE__*/ Vue.extend({
   name: 'BVCollapse',
@@ -72,7 +82,7 @@ export const BVCollapse = /*#__PURE__*/ Vue.extend({
       'transition',
       // We merge in the `appear` prop last
       mergeData(data, { props: TRANSITION_PROPS, on: TRANSITION_HANDLERS }, { props }),
-      // Note: `<tranition>` supports a single root element only
+      // Note: `<transition>` supports a single root element only
       children
     )
   }
diff --git a/src/utils/config-defaults.js b/src/utils/config-defaults.js
index 75804d287ab..e35f81e5a1b 100644
--- a/src/utils/config-defaults.js
+++ b/src/utils/config-defaults.js
@@ -3,7 +3,10 @@ import {
   NAME_AVATAR,
   NAME_BADGE,
   NAME_BUTTON,
-  NAME_BUTTON_CLOSE
+  NAME_BUTTON_CLOSE,
+  NAME_CALENDAR,
+  NAME_CARD_SUB_TITLE,
+  NAME_CAROUSEL
 } from '../constants/components'
 import { deepFreeze } from './object'
 
@@ -75,7 +78,7 @@ export default deepFreeze({
     textVariant: undefined,
     ariaLabel: 'Close'
   },
-  BCalendar: {
+  [NAME_CALENDAR]: {
     // BFormDate will choose these first if not provided in BFormDate section
     labelPrevDecade: 'Previous decade',
     labelPrevYear: 'Previous year',
@@ -91,11 +94,11 @@ export default deepFreeze({
     labelNav: 'Calendar navigation',
     labelHelp: 'Use cursor keys to navigate calendar dates'
   },
-  BCardSubTitle: {
+  [NAME_CARD_SUB_TITLE]: {
     // `<b-card>` and `<b-card-body>` also inherit this prop
     subTitleTextVariant: 'muted'
   },
-  BCarousel: {
+  [NAME_CAROUSEL]: {
     labelPrev: 'Previous Slide',
     labelNext: 'Next Slide',
     labelGotoSlide: 'Goto Slide',

From 6d099e101d2d0e04e9504d3c78ae7819f949e45c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Sun, 19 Apr 2020 00:54:53 +0200
Subject: [PATCH 34/49] Merge remote-tracking branch 'origin/dev' into
 feat-code-size-improvements


From ae3c86ea4f827ab89cd62eb47391dd630d02968d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 20 Apr 2020 09:54:25 +0200
Subject: [PATCH 35/49] Update calendar.js

---
 src/components/calendar/calendar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index 6a351f0c2cf..d9be9f92097 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -1131,7 +1131,7 @@ export const BCalendar = Vue.extend({
         'div',
         {
           key: week[0].ymd,
-          staticClass: [CLASS_NAME_ROW, CLASS_NAME_NO_GUTTERS]
+          class: [CLASS_NAME_ROW, CLASS_NAME_NO_GUTTERS]
         },
         $cells
       )

From 0cd00b09fef30a643df99ad11ed5c4ded03ef0eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 20 Apr 2020 09:55:15 +0200
Subject: [PATCH 36/49] Update carousel.js

---
 src/components/carousel/carousel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js
index ced93c7ec23..edca57756fc 100644
--- a/src/components/carousel/carousel.js
+++ b/src/components/carousel/carousel.js
@@ -595,7 +595,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
       this.slides.map((slide, n) => {
         return h('li', {
           key: `slide_${n}`,
-          class: { [CLASS_NAME_ACTIVE]: n === this.index },
+          class: [n === this.index ? CLASS_NAME_ACTIVE : null],
           attrs: {
             role: 'button',
             id: this.safeId(`_BV_indicator_${n + 1}_`),

From 00668507fe5e0379553c96a4af23a073962f3740 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 20 Apr 2020 09:58:05 +0200
Subject: [PATCH 37/49] Merge remote-tracking branch 'origin/dev' into
 feat-code-size-improvements


From ceedcaa90b60037d83c9e22b967ecdd19d914171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 8 May 2020 10:35:36 +0200
Subject: [PATCH 38/49] Merge remote-tracking branch 'origin/dev' into
 feat-code-size-improvements


From b36a4796c5c6fafa7dbbdd006f5d309685abe124 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 8 May 2020 10:50:19 +0200
Subject: [PATCH 39/49] Update test.yml

---
 .github/workflows/test.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 48d75068860..f16a470e4a7 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -207,4 +207,3 @@ jobs:
         run: yarn run bundlewatch
         env:
           BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
-          CI_BRANCH_BASE: "${{ github.base_ref }}"

From c0a406ca0e77c4e87e2c3f9d3de09ed179aca875 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Sun, 10 May 2020 21:22:20 +0200
Subject: [PATCH 40/49] Prefix BootstrapVue class names

---
 src/components/aspect/aspect.js     |  8 ++++----
 src/components/avatar/avatar.js     | 10 +++++-----
 src/components/calendar/calendar.js | 22 +++++++++++-----------
 src/constants/class-names.js        |  6 +++---
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index 6f3282ff137..789ca58e165 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -1,4 +1,4 @@
-import { CLASS_NAME_ASPECT } from '../../constants/class-names'
+import { CLASS_NAME_BV_ASPECT } from '../../constants/class-names'
 import { NAME_ASPECT } from '../../constants/components'
 import Vue from '../../utils/vue'
 import { mathAbs } from '../../utils/math'
@@ -44,14 +44,14 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
   },
   render(h) {
     const $sizer = h('div', {
-      staticClass: suffixClass(CLASS_NAME_ASPECT, 'sizer'),
+      staticClass: suffixClass(CLASS_NAME_BV_ASPECT, 'sizer'),
       class: 'flex-grow-1',
       style: { paddingBottom: this.padding, height: 0 }
     })
     const $content = h(
       'div',
       {
-        staticClass: suffixClass(CLASS_NAME_ASPECT, 'content'),
+        staticClass: suffixClass(CLASS_NAME_BV_ASPECT, 'content'),
         class: ['flex-grow-1', 'w-100', 'mw-100'],
         style: { marginLeft: '-100%' }
       },
@@ -60,7 +60,7 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
     return h(
       this.tag,
       {
-        staticClass: CLASS_NAME_ASPECT,
+        staticClass: CLASS_NAME_BV_ASPECT,
         class: 'd-flex'
       },
       [$sizer, $content]
diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index 0335ce75b19..f5703720c91 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -1,6 +1,6 @@
 import {
-  CLASS_NAME_AVATAR,
   CLASS_NAME_BADGE,
+  CLASS_NAME_BV_AVATAR,
   CLASS_NAME_ROUNDED
 } from '../../constants/class-names'
 import { NAME_AVATAR } from '../../constants/components'
@@ -254,7 +254,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     let $content = null
     if (this.hasNormalizedSlot('default')) {
       // Default slot overrides props
-      $content = h('span', { staticClass: suffixClass(CLASS_NAME_AVATAR, 'custom') }, [
+      $content = h('span', { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'custom') }, [
         this.normalizeSlot('default')
       ])
     } else if (src) {
@@ -272,7 +272,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     } else if (text) {
       $content = h(
         'span',
-        { staticClass: suffixClass(CLASS_NAME_AVATAR, 'text'), style: fontStyle },
+        { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'text'), style: fontStyle },
         [h('span', text)]
       )
     } else {
@@ -287,7 +287,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
       $badge = h(
         'span',
         {
-          staticClass: suffixClass(CLASS_NAME_AVATAR, 'badge'),
+          staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'badge'),
           class: { [suffixClass(CLASS_NAME_BADGE, badgeVariant)]: !!badgeVariant },
           style: badgeStyle
         },
@@ -296,7 +296,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     }
 
     const componentData = {
-      staticClass: CLASS_NAME_AVATAR,
+      staticClass: CLASS_NAME_BV_AVATAR,
       class: {
         // We use badge styles for theme variants when not rendering `BButton`
         [suffixClass(CLASS_NAME_BADGE, variant)]: !isButton && variant,
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index bd660d8cf9a..4559cc83b26 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -4,7 +4,7 @@ import {
   CLASS_NAME_BORDER_BOTTOM,
   CLASS_NAME_BORDER_TOP,
   CLASS_NAME_BUTTON,
-  CLASS_NAME_CALENDAR,
+  CLASS_NAME_BV_CALENDAR,
   CLASS_NAME_COL,
   CLASS_NAME_DISABLED,
   CLASS_NAME_DISPLAY_BLOCK,
@@ -872,7 +872,7 @@ export const BCalendar = Vue.extend({
     $header = h(
       'header',
       {
-        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'header'),
+        staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'header'),
         class: { [CLASS_NAME_SR_ONLY]: this.hideHeader },
         attrs: { title: this.selectedDate ? this.labelSelectedDate || null : null }
       },
@@ -933,7 +933,7 @@ export const BCalendar = Vue.extend({
     const $nav = h(
       'div',
       {
-        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'nav'),
+        staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'nav'),
         class: CLASS_NAME_DISPLAY_FLEX,
         attrs: {
           id: idNav,
@@ -1005,7 +1005,7 @@ export const BCalendar = Vue.extend({
       'header',
       {
         key: 'grid-caption',
-        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid-caption'),
+        staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'grid-caption'),
         class: [
           CLASS_NAME_TEXT_CENTER,
           CLASS_NAME_FONT_WEIGHT_BOLD,
@@ -1024,7 +1024,7 @@ export const BCalendar = Vue.extend({
     const $gridWeekDays = h(
       'div',
       {
-        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid-weekdays'),
+        staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'grid-weekdays'),
         class: [CLASS_NAME_ROW, CLASS_NAME_NO_GUTTERS, CLASS_NAME_BORDER_BOTTOM],
         attrs: { 'aria-hidden': 'true' }
       },
@@ -1142,7 +1142,7 @@ export const BCalendar = Vue.extend({
       {
         // A key is only required on the body if we add in transition support
         // key: this.activeYMD.slice(0, -3),
-        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid-body'),
+        staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'grid-body'),
         style: this.disabled ? { pointerEvents: 'none' } : {}
       },
       $gridBody
@@ -1151,7 +1151,7 @@ export const BCalendar = Vue.extend({
     const $gridHelp = h(
       'footer',
       {
-        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid-help'),
+        staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'grid-help'),
         class: [
           CLASS_NAME_BORDER_TOP,
           CLASS_NAME_SMALL,
@@ -1170,7 +1170,7 @@ export const BCalendar = Vue.extend({
       'div',
       {
         ref: 'grid',
-        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'grid'),
+        staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'grid'),
         class: [CLASS_NAME_FORM_CONTROL, CLASS_NAME_HEIGHT_AUTO, CLASS_NAME_TEXT_CENTER],
         attrs: {
           id: idGrid,
@@ -1198,13 +1198,13 @@ export const BCalendar = Vue.extend({
     // Optional bottom slot
     let $slot = this.normalizeSlot('default')
     $slot = $slot
-      ? h('footer', { staticClass: suffixClass(CLASS_NAME_CALENDAR, 'footer') }, $slot)
+      ? h('footer', { staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'footer') }, $slot)
       : h()
 
     const $widget = h(
       'div',
       {
-        staticClass: suffixClass(CLASS_NAME_CALENDAR, 'inner'),
+        staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'inner'),
         style: this.block ? {} : { width: this.width },
         attrs: {
           id: idWidget,
@@ -1237,7 +1237,7 @@ export const BCalendar = Vue.extend({
     return h(
       'div',
       {
-        staticClass: CLASS_NAME_CALENDAR,
+        staticClass: CLASS_NAME_BV_CALENDAR,
         class: { [CLASS_NAME_DISPLAY_BLOCK]: this.block }
       },
       [$widget]
diff --git a/src/constants/class-names.js b/src/constants/class-names.js
index de689cfc859..44d9a62e0b4 100644
--- a/src/constants/class-names.js
+++ b/src/constants/class-names.js
@@ -25,9 +25,9 @@ export const CLASS_NAME_NAVBAR = 'navbar'
 export const CLASS_NAME_NAV_LINK = 'nav-link'
 
 // BootstrapVue components
-export const CLASS_NAME_ASPECT = 'b-aspect'
-export const CLASS_NAME_AVATAR = 'b-avatar'
-export const CLASS_NAME_CALENDAR = 'b-calendar'
+export const CLASS_NAME_BV_ASPECT = 'b-aspect'
+export const CLASS_NAME_BV_AVATAR = 'b-avatar'
+export const CLASS_NAME_BV_CALENDAR = 'b-calendar'
 
 // Utility classes
 export const CLASS_NAME_ACTIVE = 'active'

From 2176cbb76c6328aeefb18cb3094996706f08c4bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 11 May 2020 01:41:52 +0200
Subject: [PATCH 41/49] Further improve code size

---
 src/components/alert/alert.js                 |   8 +-
 src/components/avatar/avatar-group.js         |  32 +++--
 src/components/avatar/avatar.js               |  18 ++-
 src/components/badge/badge.js                 |   3 +-
 src/components/breadcrumb/breadcrumb-item.js  |   3 +-
 src/components/breadcrumb/breadcrumb-link.js  |   3 +-
 src/components/breadcrumb/breadcrumb.js       |   3 +-
 src/components/button-group/button-group.js   |   6 +-
 .../button-toolbar/button-toolbar.js          |   8 +-
 src/components/button/button-close.js         |   3 +-
 src/components/button/button.js               |  22 +--
 src/components/calendar/calendar.js           |  96 ++++++-------
 src/components/card/card-body.js              |   3 +-
 src/components/card/card-footer.js            |   3 +-
 src/components/card/card-group.js             |   3 +-
 src/components/card/card-header.js            |   3 +-
 src/components/card/card-img-lazy.js          |   3 +-
 src/components/card/card-img.js               |   3 +-
 src/components/card/card-sub-title.js         |   9 +-
 src/components/card/card-text.js              |   3 +-
 src/components/card/card-title.js             |   3 +-
 src/components/card/card.js                   |   3 +-
 src/components/carousel/carousel-slide.js     |   3 +-
 src/components/carousel/carousel.js           |  42 +++---
 src/components/dropdown/dropdown-divider.js   |  17 ++-
 src/components/dropdown/dropdown-form.js      |  14 +-
 src/components/dropdown/dropdown-group.js     |  54 ++++---
 src/components/dropdown/dropdown-header.js    |  26 ++--
 .../dropdown/dropdown-item-button.js          |  21 +--
 src/components/dropdown/dropdown-item.js      |  47 +++---
 src/components/dropdown/dropdown-text.js      |  22 +--
 src/components/dropdown/dropdown.js           | 134 ++++++++++--------
 src/components/embed/embed.js                 |  40 ++++--
 .../form-checkbox/form-checkbox-group.js      |  11 +-
 src/components/form-checkbox/form-checkbox.js |  10 +-
 .../form-datepicker/form-datepicker.js        |  85 +++++++----
 .../form-select/form-select-option.js         |   3 +-
 src/components/form/form-datalist.js          |  16 ++-
 src/components/form/form-invalid-feedback.js  |  28 ++--
 src/components/form/form-text.js              |  22 +--
 src/components/form/form-valid-feedback.js    |  26 ++--
 src/components/form/form.js                   |  14 +-
 src/components/image/img.js                   |   3 +-
 .../input-group/input-group-addon.js          |   3 +-
 .../input-group/input-group-append.js         |   3 +-
 .../input-group/input-group-prepend.js        |   3 +-
 .../input-group/input-group-text.js           |   3 +-
 src/components/input-group/input-group.js     |   3 +-
 src/components/jumbotron/jumbotron.js         |   3 +-
 src/components/layout/col.js                  |   4 +-
 src/components/layout/container.js            |   3 +-
 src/components/layout/form-row.js             |   3 +-
 src/components/layout/row.js                  |   2 +-
 src/components/list-group/list-group-item.js  |   3 +-
 src/components/list-group/list-group.js       |   3 +-
 src/components/media/media-body.js            |   3 +-
 src/components/media/media.js                 |   3 +-
 src/components/nav/nav-form.js                |   3 +-
 src/components/nav/nav-item.js                |   3 +-
 src/components/nav/nav-text.js                |   3 +-
 src/components/nav/nav.js                     |   3 +-
 src/components/navbar/navbar-brand.js         |   3 +-
 src/components/navbar/navbar-nav.js           |   3 +-
 src/components/spinner/spinner.js             |   3 +-
 src/components/tabs/tabs.js                   |   2 +-
 src/components/time/time.js                   |   2 +-
 src/constants/aria.js                         |  10 ++
 src/constants/class-names.js                  |  30 ++++
 src/constants/components.js                   |  20 +++
 src/constants/date.js                         |   7 +
 src/constants/popper.js                       |   8 ++
 src/constants/roles.js                        |  16 +++
 src/icons/helpers/icon-base.js                |   3 +-
 src/icons/helpers/make-icon.js                |   3 +-
 src/icons/icon.js                             |   3 +-
 src/icons/iconstack.js                        |   3 +-
 src/mixins/dropdown.js                        |  99 ++++++-------
 src/utils/bv-collapse.js                      |   3 +-
 src/utils/bv-transition.js                    |   3 +-
 src/utils/config-defaults.js                  |   8 +-
 src/utils/vue.js                              |   3 +
 81 files changed, 692 insertions(+), 473 deletions(-)
 create mode 100644 src/constants/aria.js
 create mode 100644 src/constants/date.js
 create mode 100644 src/constants/popper.js
 create mode 100644 src/constants/roles.js

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index d5c3b9dca3b..3cf425e51bd 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -1,5 +1,7 @@
+import { ARIA_LIVE_POLITE } from '../../constants/aria'
 import { CLASS_NAME_ALERT } from '../../constants/class-names'
 import { NAME_ALERT } from '../../constants/components'
+import { ROLE_ALERT } from '../../constants/roles'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
@@ -156,7 +158,11 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
             [suffixClass(CLASS_NAME_ALERT, 'dismissible')]: dismissible,
             [suffixClass(CLASS_NAME_ALERT, variant)]: !!variant
           },
-          attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true },
+          attrs: {
+            role: ROLE_ALERT,
+            'aria-live': ARIA_LIVE_POLITE,
+            'aria-atomic': true
+          },
           key: this._uid
         },
         [$dismissBtn, this.normalizeSlot('default')]
diff --git a/src/components/avatar/avatar-group.js b/src/components/avatar/avatar-group.js
index 8eab1b77086..eb71472df0c 100644
--- a/src/components/avatar/avatar-group.js
+++ b/src/components/avatar/avatar-group.js
@@ -1,16 +1,16 @@
+import { CLASS_NAME_BV_AVATAR_GROUP } from '../../constants/class-names'
+import { NAME_AVATAR_GROUP } from '../../constants/components'
+import { ROLE_GROUP } from '../../constants/roles'
 import Vue from '../../utils/vue'
-import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { mathMax, mathMin } from '../../utils/math'
 import { toFloat } from '../../utils/number'
+import { suffixClass } from '../../utils/string'
+import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { computeSize } from './avatar'
 
-// --- Constants ---
-const NAME = 'BAvatarGroup'
-
-// --- Main component ---
 // @vue/component
 export const BAvatarGroup = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_AVATAR_GROUP,
   mixins: [normalizeSlotMixin],
   provide() {
     return { bvAvatarGroup: this }
@@ -59,10 +59,22 @@ export const BAvatarGroup = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    const $inner = h('div', { staticClass: 'b-avatar-group-inner', style: this.paddingStyle }, [
-      this.normalizeSlot('default')
-    ])
+    const $inner = h(
+      'div',
+      {
+        staticClass: suffixClass(CLASS_NAME_BV_AVATAR_GROUP, 'inner'),
+        style: this.paddingStyle
+      },
+      [this.normalizeSlot('default')]
+    )
 
-    return h(this.tag, { staticClass: 'b-avatar-group', attrs: { role: 'group' } }, [$inner])
+    return h(
+      this.tag,
+      {
+        staticClass: CLASS_NAME_BV_AVATAR_GROUP,
+        attrs: { role: ROLE_GROUP }
+      },
+      [$inner]
+    )
   }
 })
diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index f5703720c91..64ef2e3eb55 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -1,3 +1,4 @@
+import { ARIA_VALUE_TRUE } from '../../constants/aria'
 import {
   CLASS_NAME_BADGE,
   CLASS_NAME_BV_AVATAR,
@@ -18,6 +19,9 @@ import { BIcon } from '../../icons/icon'
 import { BIconPersonFill } from '../../icons/icons'
 
 // --- Constants ---
+const SLOT_BADGE = 'badge'
+const SLOT_DEFAULT = 'default'
+
 const FONT_SIZE_SCALE = 0.4
 const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7
 
@@ -252,10 +256,10 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     const ariaLabel = this.ariaLabel || null
 
     let $content = null
-    if (this.hasNormalizedSlot('default')) {
+    if (this.hasNormalizedSlot(SLOT_DEFAULT)) {
       // Default slot overrides props
       $content = h('span', { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'custom') }, [
-        this.normalizeSlot('default')
+        this.normalizeSlot(SLOT_DEFAULT)
       ])
     } else if (src) {
       $content = h('img', {
@@ -263,11 +267,11 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
         attrs: { src, alt },
         on: { error: this.onImgError }
       })
-      $content = h('span', { staticClass: 'b-avatar-img' }, [$content])
+      $content = h('span', { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'img') }, [$content])
     } else if (icon) {
       $content = h(BIcon, {
         props: { icon },
-        attrs: { 'aria-hidden': 'true', alt }
+        attrs: { 'aria-hidden': ARIA_VALUE_TRUE, alt }
       })
     } else if (text) {
       $content = h(
@@ -277,11 +281,11 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
       )
     } else {
       // Fallback default avatar content
-      $content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true', alt } })
+      $content = h(BIconPersonFill, { attrs: { 'aria-hidden': ARIA_VALUE_TRUE, alt } })
     }
 
     let $badge = h()
-    const hasBadgeSlot = this.hasNormalizedSlot('badge')
+    const hasBadgeSlot = this.hasNormalizedSlot(SLOT_BADGE)
     if (badge || badge === '' || hasBadgeSlot) {
       const badgeText = badge === true ? '' : badge
       $badge = h(
@@ -291,7 +295,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
           class: { [suffixClass(CLASS_NAME_BADGE, badgeVariant)]: !!badgeVariant },
           style: badgeStyle
         },
-        [hasBadgeSlot ? this.normalizeSlot('badge') : badgeText]
+        [hasBadgeSlot ? this.normalizeSlot(SLOT_BADGE) : badgeText]
       )
     }
 
diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js
index 0270b8e73f6..67cff2ddaea 100644
--- a/src/components/badge/badge.js
+++ b/src/components/badge/badge.js
@@ -1,7 +1,6 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_BADGE } from '../../constants/class-names'
 import { NAME_BADGE } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { getComponentConfig } from '../../utils/config'
 import { suffixClass } from '../../utils/string'
diff --git a/src/components/breadcrumb/breadcrumb-item.js b/src/components/breadcrumb/breadcrumb-item.js
index fd3c29b2a01..4237e37803a 100644
--- a/src/components/breadcrumb/breadcrumb-item.js
+++ b/src/components/breadcrumb/breadcrumb-item.js
@@ -1,7 +1,6 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_BREADCRUMB_ITEM } from '../../constants/class-names'
 import { NAME_BREADCRUMB_ITEM } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import { BBreadcrumbLink, props } from './breadcrumb-link'
 
 // @vue/component
diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js
index 1a0bef093d5..85374036e36 100644
--- a/src/components/breadcrumb/breadcrumb-link.js
+++ b/src/components/breadcrumb/breadcrumb-link.js
@@ -1,6 +1,5 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { NAME_BREADCRUMB_LINK } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { hasChildren } from '../../utils/dom'
 import { htmlOrText } from '../../utils/html'
diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
index 07e13e91410..195f9911dc6 100644
--- a/src/components/breadcrumb/breadcrumb.js
+++ b/src/components/breadcrumb/breadcrumb.js
@@ -1,7 +1,6 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_BREADCRUMB } from '../../constants/class-names'
 import { NAME_BREADCRUMB } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import { isArray, isObject } from '../../utils/inspect'
 import { toString } from '../../utils/string'
 import { BBreadcrumbItem } from './breadcrumb-item'
diff --git a/src/components/button-group/button-group.js b/src/components/button-group/button-group.js
index bbb73cb0659..d2bbf3f7453 100644
--- a/src/components/button-group/button-group.js
+++ b/src/components/button-group/button-group.js
@@ -1,7 +1,7 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_BUTTON_GROUP } from '../../constants/class-names'
 import { NAME_BUTTON, NAME_BUTTON_GROUP } from '../../constants/components'
-import Vue from '../../utils/vue'
+import { ROLE_GROUP } from '../../constants/roles'
+import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { suffixClass } from '../../utils/string'
 
@@ -21,7 +21,7 @@ export const props = {
   },
   ariaRole: {
     type: String,
-    default: 'group'
+    default: ROLE_GROUP
   }
 }
 
diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js
index f01703fca5f..98466373b3e 100644
--- a/src/components/button-toolbar/button-toolbar.js
+++ b/src/components/button-toolbar/button-toolbar.js
@@ -3,10 +3,12 @@ import {
   CLASS_NAME_BUTTON_TOOLBAR,
   CLASS_NAME_DISABLED,
   CLASS_NAME_DROPDOWN_ITEM,
-  CLASS_NAME_FORM_CONTROL
+  CLASS_NAME_FORM_CONTROL,
+  CLASS_NAME_JUSTIFY_CONTENT_BETWEEN
 } from '../../constants/class-names'
 import { NAME_BUTTON_TOOLBAR } from '../../constants/components'
 import { DOWN, LEFT, RIGHT, UP } from '../../constants/key-codes'
+import { ROLE_TOOLBAR } from '../../constants/roles'
 import Vue from '../../utils/vue'
 import { isVisible, selectAll } from '../../utils/dom'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -109,9 +111,9 @@ export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
       'div',
       {
         staticClass: CLASS_NAME_BUTTON_TOOLBAR,
-        class: { 'justify-content-between': this.justify },
+        class: { [CLASS_NAME_JUSTIFY_CONTENT_BETWEEN]: this.justify },
         attrs: {
-          role: 'toolbar',
+          role: ROLE_TOOLBAR,
           tabindex: this.keyNav ? '0' : null
         },
         on: this.keyNav
diff --git a/src/components/button/button-close.js b/src/components/button/button-close.js
index 7e7ce40f2fc..907fefad469 100644
--- a/src/components/button/button-close.js
+++ b/src/components/button/button-close.js
@@ -1,7 +1,6 @@
 import { CLASS_NAME_BUTTON_CLOSE } from '../../constants/class-names'
 import { NAME_BUTTON_CLOSE } from '../../constants/components'
-import { mergeData } from 'vue-functional-data-merge'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { hasChildren } from '../../utils/dom'
 import { isEvent } from '../../utils/inspect'
diff --git a/src/components/button/button.js b/src/components/button/button.js
index e50e64b8d48..853409514ba 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -1,8 +1,14 @@
-import { mergeData } from 'vue-functional-data-merge'
-import { CLASS_NAME_BUTTON } from '../../constants/class-names'
+import {
+  CLASS_NAME_ACTIVE,
+  CLASS_NAME_BUTTON,
+  CLASS_NAME_DISABLED,
+  CLASS_NAME_NOT_ROUNDED,
+  CLASS_NAME_ROUNDED_PILL
+} from '../../constants/class-names'
 import { NAME_BUTTON } from '../../constants/components'
 import { ENTER, SPACE } from '../../constants/key-codes'
-import Vue from '../../utils/vue'
+import { ROLE_BUTTON } from '../../constants/roles'
+import Vue, { mergeData } from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
@@ -95,10 +101,10 @@ const computeClass = props => [
   {
     [suffixClass(CLASS_NAME_BUTTON, props.size)]: !!props.size,
     [suffixClass(CLASS_NAME_BUTTON, 'block')]: props.block,
-    'rounded-pill': props.pill,
-    'rounded-0': props.squared && !props.pill,
-    disabled: props.disabled,
-    active: props.pressed
+    [CLASS_NAME_ROUNDED_PILL]: props.pill,
+    [CLASS_NAME_NOT_ROUNDED]: props.squared && !props.pill,
+    [CLASS_NAME_DISABLED]: props.disabled,
+    [CLASS_NAME_ACTIVE]: props.pressed
   }
 ]
 
@@ -127,7 +133,7 @@ const computeAttrs = (props, data) => {
     // We add a role of button when the tag is not a link or button for ARIA
     // Don't bork any role provided in `data.attrs` when `isLink` or `isButton`
     // Except when link has `href` of `#`
-    role: nonStandardTag || hashLink ? 'button' : role,
+    role: nonStandardTag || hashLink ? ROLE_BUTTON : role,
     // We set the `aria-disabled` state for non-standard tags
     'aria-disabled': nonStandardTag ? String(disabled) : null,
     // For toggles, we need to set the pressed state for ARIA
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index 4559cc83b26..c23c9bc5ff7 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -1,3 +1,4 @@
+import { ARIA_LIVE_POLITE, ARIA_VALUE_OFF, ARIA_VALUE_TRUE } from '../../constants/aria'
 import {
   CLASS_NAME_ACTIVE,
   CLASS_NAME_BACKGROUND,
@@ -29,6 +30,14 @@ import {
   CLASS_NAME_TEXT_TRUNCATE
 } from '../../constants/class-names'
 import { NAME_CALENDAR } from '../../constants/components'
+import {
+  CALENDAR_GREGORY,
+  CALENDAR_LONG,
+  CALENDAR_NARROW,
+  CALENDAR_SHORT,
+  DATE_FORMAT_2_DIGIT,
+  DATE_FORMAT_NUMERIC
+} from '../../constants/date'
 import {
   DOWN,
   END,
@@ -41,6 +50,7 @@ import {
   SPACE,
   UP
 } from '../../constants/key-codes'
+import { ROLE_APPLICATION, ROLE_BUTTON, ROLE_GROUP, ROLE_STATUS } from '../../constants/roles'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -78,16 +88,6 @@ import {
   BIconCircleFill
 } from '../../icons/icons'
 
-// --- Constants ---
-
-// Common calendar option value strings
-export const STR_GREGORY = 'gregory'
-export const STR_NUMERIC = 'numeric'
-export const STR_2_DIGIT = '2-digit'
-export const STR_LONG = 'long'
-export const STR_SHORT = 'short'
-export const STR_NARROW = 'narrow'
-
 // --- BCalendar component ---
 // @vue/component
 export const BCalendar = Vue.extend({
@@ -272,10 +272,10 @@ export const BCalendar = Vue.extend({
       // Note: This value is *not* to be placed in the global config
       type: Object,
       default: () => ({
-        year: STR_NUMERIC,
-        month: STR_LONG,
-        day: STR_NUMERIC,
-        weekday: STR_LONG
+        year: DATE_FORMAT_NUMERIC,
+        month: CALENDAR_LONG,
+        day: DATE_FORMAT_NUMERIC,
+        weekday: CALENDAR_LONG
       })
     },
     weekdayHeaderFormat: {
@@ -286,8 +286,8 @@ export const BCalendar = Vue.extend({
       // `narrow` is typically a single letter
       // `long` is the full week day name
       // Although some locales may override this (i.e `ar`, etc)
-      default: STR_SHORT,
-      validator: value => arrayIncludes([STR_LONG, STR_SHORT, STR_NARROW], value)
+      default: CALENDAR_SHORT,
+      validator: value => arrayIncludes([CALENDAR_LONG, CALENDAR_SHORT, CALENDAR_NARROW], value)
     }
   },
   data() {
@@ -328,18 +328,18 @@ export const BCalendar = Vue.extend({
     },
     computedLocale() {
       // Returns the resolved locale used by the calendar
-      return resolveLocale(concat(this.locale).filter(identity), STR_GREGORY)
+      return resolveLocale(concat(this.locale).filter(identity), CALENDAR_GREGORY)
     },
     calendarLocale() {
       // This locale enforces the gregorian calendar (for use in formatter functions)
       // Needed because IE 11 resolves `ar-IR` as islamic-civil calendar
       // and IE 11 (and some other browsers) do not support the `calendar` option
       // And we currently only support the gregorian calendar
-      const fmt = new Intl.DateTimeFormat(this.computedLocale, { calendar: STR_GREGORY })
+      const fmt = new Intl.DateTimeFormat(this.computedLocale, { calendar: CALENDAR_GREGORY })
       const calendar = fmt.resolvedOptions().calendar
       let locale = fmt.resolvedOptions().locale
       /* istanbul ignore if: mainly for IE 11 and a few other browsers, hard to test in JSDOM */
-      if (calendar !== STR_GREGORY) {
+      if (calendar !== CALENDAR_GREGORY) {
         // Ensure the locale requests the gregorian calendar
         // Mainly for IE 11, and currently we can't handle non-gregorian calendars
         // TODO: Should we always return this value?
@@ -441,9 +441,9 @@ export const BCalendar = Vue.extend({
         // Ensure we have year, month, day shown for screen readers/ARIA
         // If users really want to leave one of these out, they can
         // pass `undefined` for the property value
-        year: STR_NUMERIC,
-        month: STR_2_DIGIT,
-        day: STR_2_DIGIT,
+        year: DATE_FORMAT_NUMERIC,
+        month: DATE_FORMAT_2_DIGIT,
+        day: DATE_FORMAT_2_DIGIT,
         // Merge in user supplied options
         ...this.dateFormatOptions,
         // Ensure hours/minutes/seconds are not shown
@@ -452,30 +452,30 @@ export const BCalendar = Vue.extend({
         minute: undefined,
         second: undefined,
         // Ensure calendar is gregorian
-        calendar: STR_GREGORY
+        calendar: CALENDAR_GREGORY
       })
     },
     formatYearMonth() {
       // Returns a date formatter function
       return createDateFormatter(this.calendarLocale, {
-        year: STR_NUMERIC,
-        month: STR_LONG,
-        calendar: STR_GREGORY
+        year: DATE_FORMAT_NUMERIC,
+        month: CALENDAR_LONG,
+        calendar: CALENDAR_GREGORY
       })
     },
     formatWeekdayName() {
       // Long weekday name for weekday header aria-label
       return createDateFormatter(this.calendarLocale, {
-        weekday: STR_LONG,
-        calendar: STR_GREGORY
+        weekday: CALENDAR_LONG,
+        calendar: CALENDAR_GREGORY
       })
     },
     formatWeekdayNameShort() {
       // Weekday header cell format
       // defaults to 'short' 3 letter days, where possible
       return createDateFormatter(this.calendarLocale, {
-        weekday: this.weekdayHeaderFormat || STR_SHORT,
-        calendar: STR_GREGORY
+        weekday: this.weekdayHeaderFormat || CALENDAR_SHORT,
+        calendar: CALENDAR_GREGORY
       })
     },
     formatDay() {
@@ -843,15 +843,15 @@ export const BCalendar = Vue.extend({
         attrs: {
           id,
           for: idGrid,
-          role: 'status',
+          role: ROLE_STATUS,
           tabindex: this.disabled ? null : '-1',
           // Mainly for testing purposes, as we do not know
           // the exact format `Intl` will format the date string
           'data-selected': toString(selectedYMD),
           // We wait until after mount to enable `aria-live`
           // to prevent initial announcement on page render
-          'aria-live': isLive ? 'polite' : 'off',
-          'aria-atomic': isLive ? 'true' : null
+          'aria-live': isLive ? ARIA_LIVE_POLITE : ARIA_VALUE_OFF,
+          'aria-atomic': isLive ? ARIA_VALUE_TRUE : null
         },
         on: {
           // Transfer focus/click to focus grid
@@ -920,12 +920,12 @@ export const BCalendar = Vue.extend({
             title: label || null,
             type: 'button',
             'aria-label': label || null,
-            'aria-disabled': btnDisabled ? 'true' : null,
+            'aria-disabled': btnDisabled ? ARIA_VALUE_TRUE : null,
             'aria-keyshortcuts': shortcut || null
           },
           on: btnDisabled ? {} : { click: handler }
         },
-        [h('div', { attrs: { 'aria-hidden': 'true' } }, [content])]
+        [h('div', { attrs: { 'aria-hidden': ARIA_VALUE_TRUE } }, [content])]
       )
     }
 
@@ -937,8 +937,8 @@ export const BCalendar = Vue.extend({
         class: CLASS_NAME_DISPLAY_FLEX,
         attrs: {
           id: idNav,
-          role: 'group',
-          'aria-hidden': this.disabled ? 'true' : null,
+          role: ROLE_GROUP,
+          'aria-hidden': this.disabled ? ARIA_VALUE_TRUE : null,
           'aria-label': this.labelNav || null,
           'aria-controls': idGrid
         }
@@ -1013,8 +1013,8 @@ export const BCalendar = Vue.extend({
         ],
         attrs: {
           id: idGridCaption,
-          'aria-live': isLive ? 'polite' : null,
-          'aria-atomic': isLive ? 'true' : null
+          'aria-live': isLive ? ARIA_LIVE_POLITE : null,
+          'aria-atomic': isLive ? ARIA_VALUE_TRUE : null
         }
       },
       this.formatYearMonth(this.calendarFirstDay)
@@ -1026,7 +1026,7 @@ export const BCalendar = Vue.extend({
       {
         staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'grid-weekdays'),
         class: [CLASS_NAME_ROW, CLASS_NAME_NO_GUTTERS, CLASS_NAME_BORDER_BOTTOM],
-        attrs: { 'aria-hidden': 'true' }
+        attrs: { 'aria-hidden': ARIA_VALUE_TRUE }
       },
       this.calendarHeadings.map((d, idx) => {
         return h(
@@ -1103,11 +1103,11 @@ export const BCalendar = Vue.extend({
             ],
             attrs: {
               id: idCell,
-              role: 'button',
+              role: ROLE_BUTTON,
               'data-date': day.ymd, // Primarily for testing purposes
               // Only days in the month are presented as buttons to screen readers
-              'aria-hidden': day.isThisMonth ? null : 'true',
-              'aria-disabled': day.isDisabled || this.disabled ? 'true' : null,
+              'aria-hidden': day.isThisMonth ? null : ARIA_VALUE_TRUE,
+              'aria-disabled': day.isDisabled || this.disabled ? ARIA_VALUE_TRUE : null,
               'aria-label': [
                 day.label,
                 isSelected ? `(${this.labelSelected})` : null,
@@ -1118,7 +1118,7 @@ export const BCalendar = Vue.extend({
               // NVDA doesn't convey `aria-selected`, but does `aria-current`,
               // ChromeVox doesn't convey `aria-current`, but does `aria-selected`,
               // so we set both attributes for robustness
-              'aria-selected': isSelected ? 'true' : null,
+              'aria-selected': isSelected ? ARIA_VALUE_TRUE : null,
               'aria-current': isSelected ? 'date' : null
             }
           },
@@ -1174,7 +1174,7 @@ export const BCalendar = Vue.extend({
         class: [CLASS_NAME_FORM_CONTROL, CLASS_NAME_HEIGHT_AUTO, CLASS_NAME_TEXT_CENTER],
         attrs: {
           id: idGrid,
-          role: 'application',
+          role: ROLE_APPLICATION,
           tabindex: this.disabled ? null : '0',
           'data-month': activeYMD.slice(0, -3), // `YYYY-MM`, mainly for testing
           'aria-roledescription': this.labelCalendar || null,
@@ -1182,8 +1182,8 @@ export const BCalendar = Vue.extend({
           'aria-describedby': idGridHelp,
           // `aria-readonly` is not considered valid on `role="application"`
           // https://www.w3.org/TR/wai-aria-1.1/#aria-readonly
-          // 'aria-readonly': this.readonly && !this.disabled ? 'true' : null,
-          'aria-disabled': this.disabled ? 'true' : null,
+          // 'aria-readonly': this.readonly && !this.disabled ? ARIA_VALUE_TRUE : null,
+          'aria-disabled': this.disabled ? ARIA_VALUE_TRUE : null,
           'aria-activedescendant': idActive
         },
         on: {
@@ -1211,7 +1211,7 @@ export const BCalendar = Vue.extend({
           dir: isRTL ? 'rtl' : 'ltr',
           lang: this.computedLocale || null,
           role: 'group',
-          'aria-disabled': this.disabled ? 'true' : null,
+          'aria-disabled': this.disabled ? ARIA_VALUE_TRUE : null,
           // If datepicker controls an input, this will specify the ID of the input
           'aria-controls': this.ariaControls || null,
           // This should be a prop (so it can be changed to Date picker, etc, localized
diff --git a/src/components/card/card-body.js b/src/components/card/card-body.js
index 6aed0ac9e41..72c081b9166 100644
--- a/src/components/card/card-body.js
+++ b/src/components/card/card-body.js
@@ -1,4 +1,3 @@
-import { mergeData } from 'vue-functional-data-merge'
 import {
   CLASS_NAME_BACKGROUND,
   CLASS_NAME_BORDER,
@@ -8,7 +7,7 @@ import {
   CLASS_NAME_TEXT
 } from '../../constants/class-names'
 import { NAME_CARD_BODY } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import copyProps from '../../utils/copy-props'
 import pluckProps from '../../utils/pluck-props'
 import prefixPropName from '../../utils/prefix-prop-name'
diff --git a/src/components/card/card-footer.js b/src/components/card/card-footer.js
index 6d31e117ed9..3fd732072b6 100644
--- a/src/components/card/card-footer.js
+++ b/src/components/card/card-footer.js
@@ -1,4 +1,3 @@
-import { mergeData } from 'vue-functional-data-merge'
 import {
   CLASS_NAME_BACKGROUND,
   CLASS_NAME_BORDER,
@@ -6,7 +5,7 @@ import {
   CLASS_NAME_TEXT
 } from '../../constants/class-names'
 import { NAME_CARD_FOOTER } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import prefixPropName from '../../utils/prefix-prop-name'
 import copyProps from '../../utils/copy-props'
 import { htmlOrText } from '../../utils/html'
diff --git a/src/components/card/card-group.js b/src/components/card/card-group.js
index fe4fd66bbf4..8cc19c35e05 100644
--- a/src/components/card/card-group.js
+++ b/src/components/card/card-group.js
@@ -1,7 +1,6 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_CARD, CLASS_NAME_CARD_GROUP } from '../../constants/class-names'
 import { NAME_CARD_GROUP } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import { suffixClass } from '../../utils/string'
 
 // --- Props ---
diff --git a/src/components/card/card-header.js b/src/components/card/card-header.js
index 0c2e8906ec1..4bf145fa179 100644
--- a/src/components/card/card-header.js
+++ b/src/components/card/card-header.js
@@ -1,4 +1,3 @@
-import { mergeData } from 'vue-functional-data-merge'
 import {
   CLASS_NAME_CARD_HEADER,
   CLASS_NAME_BACKGROUND,
@@ -6,7 +5,7 @@ import {
   CLASS_NAME_TEXT
 } from '../../constants/class-names'
 import { NAME_CARD_HEADER } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import copyProps from '../../utils/copy-props'
 import prefixPropName from '../../utils/prefix-prop-name'
 import { htmlOrText } from '../../utils/html'
diff --git a/src/components/card/card-img-lazy.js b/src/components/card/card-img-lazy.js
index d00eeaf0ae4..031a2f42a39 100644
--- a/src/components/card/card-img-lazy.js
+++ b/src/components/card/card-img-lazy.js
@@ -1,7 +1,6 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_CARD_IMG } from '../../constants/class-names'
 import { NAME_CARD_IMG_LAZY } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import { omit } from '../../utils/object'
 import { suffixClass } from '../../utils/string'
 import { BImgLazy, props as imgLazyProps } from '../image/img-lazy'
diff --git a/src/components/card/card-img.js b/src/components/card/card-img.js
index 0b3f8233c2b..3c0a7cf9ba3 100644
--- a/src/components/card/card-img.js
+++ b/src/components/card/card-img.js
@@ -1,7 +1,6 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_CARD_IMG } from '../../constants/class-names'
 import { NAME_CARD_IMG } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import { suffixClass } from '../../utils/string'
 
 // --- Props ---
diff --git a/src/components/card/card-sub-title.js b/src/components/card/card-sub-title.js
index fa44e359d19..b0cf7e53979 100644
--- a/src/components/card/card-sub-title.js
+++ b/src/components/card/card-sub-title.js
@@ -1,10 +1,9 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_CARD_SUB_TITLE, CLASS_NAME_TEXT } from '../../constants/class-names'
 import { NAME_CARD_SUB_TITLE } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { hasChildren } from '../../utils/dom'
-import { toString } from '../../utils/string'
+import { suffixClass, toString } from '../../utils/string'
 
 // --- Props ---
 export const props = {
@@ -33,7 +32,9 @@ export const BCardSubTitle = /*#__PURE__*/ Vue.extend({
       props.subTitleTag,
       mergeData(data, {
         staticClass: CLASS_NAME_CARD_SUB_TITLE,
-        class: props.subTitleTextVariant ? `${CLASS_NAME_TEXT}-${props.subTitleTextVariant}` : null
+        class: props.subTitleTextVariant
+          ? suffixClass(CLASS_NAME_TEXT, props.subTitleTextVariant)
+          : null
       }),
       hasChildren(children) ? children : toString(props.subTitle)
     )
diff --git a/src/components/card/card-text.js b/src/components/card/card-text.js
index f321c419d82..ae2fedf19f8 100644
--- a/src/components/card/card-text.js
+++ b/src/components/card/card-text.js
@@ -1,7 +1,6 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_CARD_TEXT } from '../../constants/class-names'
 import { NAME_CARD_TEXT } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 
 // --- Props ---
 export const props = {
diff --git a/src/components/card/card-title.js b/src/components/card/card-title.js
index b870279518d..9bdbb5cd428 100644
--- a/src/components/card/card-title.js
+++ b/src/components/card/card-title.js
@@ -1,7 +1,6 @@
-import { mergeData } from 'vue-functional-data-merge'
 import { CLASS_NAME_CARD_TITLE } from '../../constants/class-names'
 import { NAME_CARD_TITLE } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import { hasChildren } from '../../utils/dom'
 import { toString } from '../../utils/string'
 
diff --git a/src/components/card/card.js b/src/components/card/card.js
index 73da4ee0686..1e912d79e34 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -1,4 +1,3 @@
-import { mergeData } from 'vue-functional-data-merge'
 import {
   CLASS_NAME_BACKGROUND,
   CLASS_NAME_BORDER,
@@ -8,7 +7,7 @@ import {
   CLASS_NAME_TEXT
 } from '../../constants/class-names'
 import { NAME_CARD } from '../../constants/components'
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import copyProps from '../../utils/copy-props'
 import pluckProps from '../../utils/pluck-props'
 import prefixPropName from '../../utils/prefix-prop-name'
diff --git a/src/components/carousel/carousel-slide.js b/src/components/carousel/carousel-slide.js
index 3b5d78bc896..f2fd2b32673 100644
--- a/src/components/carousel/carousel-slide.js
+++ b/src/components/carousel/carousel-slide.js
@@ -4,6 +4,7 @@ import {
   CLASS_NAME_DISPLAY_NONE
 } from '../../constants/class-names'
 import { NAME_CAROUSEL_SLIDE } from '../../constants/components'
+import { ROLE_LISTITEM } from '../../constants/roles'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import idMixin from '../../mixins/id'
@@ -156,7 +157,7 @@ export const BCarouselSlide = /*#__PURE__*/ Vue.extend({
       {
         staticClass: CLASS_NAME_CAROUSEL_ITEM,
         style: { background: this.background || this.bvCarousel.background || null },
-        attrs: { id: this.safeId(), role: 'listitem' }
+        attrs: { id: this.safeId(), role: ROLE_LISTITEM }
       },
       [img, content]
     )
diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js
index e490ab94e14..39a2adaaaab 100644
--- a/src/components/carousel/carousel.js
+++ b/src/components/carousel/carousel.js
@@ -1,3 +1,4 @@
+import { ARIA_VALUE_FALSE, ARIA_VALUE_TRUE } from '../../constants/aria'
 import {
   CLASS_NAME_ACTIVE,
   CLASS_NAME_CAROUSEL,
@@ -9,6 +10,7 @@ import {
 import { NAME_CAROUSEL } from '../../constants/components'
 import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import { ENTER, LEFT, RIGHT, SPACE } from '../../constants/key-codes'
+import { ROLE_BUTTON, ROLE_LIST, ROLE_REGION } from '../../constants/roles'
 import Vue from '../../utils/vue'
 import noop from '../../utils/noop'
 import observeDom from '../../utils/observe-dom'
@@ -24,6 +26,7 @@ import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 
 // --- Constants ---
+
 // Slide directional classes
 const DIRECTION = {
   next: {
@@ -59,7 +62,8 @@ const TransitionEndEvents = {
   transition: 'transitionend'
 }
 
-// --- Helper methods ---
+// --- Utility methods ---
+
 // Return the browser specific transitionEnd event name
 const getTransitionEndEvent = el => {
   for (const name in TransitionEndEvents) {
@@ -374,10 +378,10 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
           removeClass(currentSlide, CLASS_NAME_ACTIVE)
           removeClass(currentSlide, dirClass)
           removeClass(currentSlide, overlayClass)
-          setAttr(currentSlide, 'aria-current', 'false')
-          setAttr(nextSlide, 'aria-current', 'true')
-          setAttr(currentSlide, 'aria-hidden', 'true')
-          setAttr(nextSlide, 'aria-hidden', 'false')
+          setAttr(currentSlide, 'aria-current', ARIA_VALUE_FALSE)
+          setAttr(nextSlide, 'aria-current', ARIA_VALUE_TRUE)
+          setAttr(currentSlide, 'aria-hidden', ARIA_VALUE_TRUE)
+          setAttr(nextSlide, 'aria-hidden', ARIA_VALUE_FALSE)
           this.isSliding = false
           this.direction = null
           // Notify ourselves that we're done sliding (slid)
@@ -410,10 +414,10 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
         const n = idx + 1
         if (idx === index) {
           addClass(slide, CLASS_NAME_ACTIVE)
-          setAttr(slide, 'aria-current', 'true')
+          setAttr(slide, 'aria-current', ARIA_VALUE_TRUE)
         } else {
           removeClass(slide, CLASS_NAME_ACTIVE)
-          setAttr(slide, 'aria-current', 'false')
+          setAttr(slide, 'aria-current', ARIA_VALUE_FALSE)
         }
         setAttr(slide, 'aria-posinset', String(n))
         setAttr(slide, 'aria-setsize', String(numSlides))
@@ -503,7 +507,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
         staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'inner'),
         attrs: {
           id: this.safeId('_BV_inner_'),
-          role: 'list'
+          role: ROLE_LIST
         }
       },
       [this.normalizeSlot('default')]
@@ -535,9 +539,9 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
             staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'control-prev'),
             attrs: {
               href: '#',
-              role: 'button',
+              role: ROLE_BUTTON,
               'aria-controls': this.safeId('_BV_inner_'),
-              'aria-disabled': this.isSliding ? 'true' : null
+              'aria-disabled': this.isSliding ? ARIA_VALUE_TRUE : null
             },
             on: {
               click: prevHandler,
@@ -547,7 +551,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
           [
             h('span', {
               staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'control-prev-icon'),
-              attrs: { 'aria-hidden': 'true' }
+              attrs: { 'aria-hidden': ARIA_VALUE_TRUE }
             }),
             h('span', { class: CLASS_NAME_SR_ONLY }, [this.labelPrev])
           ]
@@ -558,9 +562,9 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
             class: suffixClass(CLASS_NAME_CAROUSEL, 'control-next'),
             attrs: {
               href: '#',
-              role: 'button',
+              role: ROLE_BUTTON,
               'aria-controls': this.safeId('_BV_inner_'),
-              'aria-disabled': this.isSliding ? 'true' : null
+              'aria-disabled': this.isSliding ? ARIA_VALUE_TRUE : null
             },
             on: {
               click: nextHandler,
@@ -570,7 +574,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
           [
             h('span', {
               staticClass: suffixClass(CLASS_NAME_CAROUSEL, 'control-next-icon'),
-              attrs: { 'aria-hidden': 'true' }
+              attrs: { 'aria-hidden': ARIA_VALUE_TRUE }
             }),
             h('span', { class: CLASS_NAME_SR_ONLY }, [this.labelNext])
           ]
@@ -588,7 +592,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
         ],
         attrs: {
           id: this.safeId('_BV_indicators_'),
-          'aria-hidden': this.indicators ? 'false' : 'true',
+          'aria-hidden': this.indicators ? ARIA_VALUE_FALSE : ARIA_VALUE_TRUE,
           'aria-label': this.labelIndicators,
           'aria-owns': this.safeId('_BV_inner_')
         }
@@ -598,10 +602,10 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
           key: `slide_${n}`,
           class: [n === this.index ? CLASS_NAME_ACTIVE : null],
           attrs: {
-            role: 'button',
+            role: ROLE_BUTTON,
             id: this.safeId(`_BV_indicator_${n + 1}_`),
             tabindex: this.indicators ? '0' : '-1',
-            'aria-current': n === this.index ? 'true' : 'false',
+            'aria-current': n === this.index ? ARIA_VALUE_TRUE : ARIA_VALUE_FALSE,
             'aria-label': `${this.labelGotoSlide} ${n + 1}`,
             'aria-describedby': this.slides[n].id || null,
             'aria-controls': this.safeId('_BV_inner_')
@@ -666,9 +670,9 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
         },
         style: { background: this.background },
         attrs: {
-          role: 'region',
+          role: ROLE_REGION,
           id: this.safeId(),
-          'aria-busy': this.isSliding ? 'true' : 'false'
+          'aria-busy': this.isSliding ? ARIA_VALUE_TRUE : ARIA_VALUE_FALSE
         },
         on
       },
diff --git a/src/components/dropdown/dropdown-divider.js b/src/components/dropdown/dropdown-divider.js
index 7c48271e4ac..b3f94ec534c 100644
--- a/src/components/dropdown/dropdown-divider.js
+++ b/src/components/dropdown/dropdown-divider.js
@@ -1,5 +1,8 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { ARIA_ORIENTATION_HORIZONTAL } from '../../constants/aria'
+import { CLASS_NAME_DROPDOWN_DIVIDER } from '../../constants/class-names'
+import { NAME_DROPDOWN_DIVIDER } from '../../constants/components'
+import { ROLE_PRESENTATION, ROLE_SEPARATOR } from '../../constants/roles'
+import Vue, { mergeData } from '../../utils/vue'
 
 export const props = {
   tag: {
@@ -10,19 +13,19 @@ export const props = {
 
 // @vue/component
 export const BDropdownDivider = /*#__PURE__*/ Vue.extend({
-  name: 'BDropdownDivider',
+  name: NAME_DROPDOWN_DIVIDER,
   functional: true,
   props,
   render(h, { props, data }) {
     const $attrs = data.attrs || {}
     data.attrs = {}
-    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
+    return h('li', mergeData(data, { attrs: { role: ROLE_PRESENTATION } }), [
       h(props.tag, {
-        staticClass: 'dropdown-divider',
+        staticClass: CLASS_NAME_DROPDOWN_DIVIDER,
         attrs: {
           ...$attrs,
-          role: 'separator',
-          'aria-orientation': 'horizontal'
+          role: ROLE_SEPARATOR,
+          'aria-orientation': ARIA_ORIENTATION_HORIZONTAL
         },
         ref: 'divider'
       })
diff --git a/src/components/dropdown/dropdown-form.js b/src/components/dropdown/dropdown-form.js
index 2cf4c675bda..3a7ef6f6b99 100644
--- a/src/components/dropdown/dropdown-form.js
+++ b/src/components/dropdown/dropdown-form.js
@@ -1,10 +1,12 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_DISABLED, CLASS_NAME_BV_DROPDOWN_FORM } from '../../constants/class-names'
+import { NAME_DROPDOWN_FORM } from '../../constants/components'
+import { ROLE_PRESENTATION } from '../../constants/roles'
+import Vue, { mergeData } from '../../utils/vue'
 import { BForm, props as formProps } from '../form/form'
 
 // @vue/component
 export const BDropdownForm = /*#__PURE__*/ Vue.extend({
-  name: 'BDropdownForm',
+  name: NAME_DROPDOWN_FORM,
   functional: true,
   props: {
     ...formProps,
@@ -22,13 +24,13 @@ export const BDropdownForm = /*#__PURE__*/ Vue.extend({
     const $listeners = data.on || {}
     data.attrs = {}
     data.on = {}
-    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
+    return h('li', mergeData(data, { attrs: { role: ROLE_PRESENTATION } }), [
       h(
         BForm,
         {
           ref: 'form',
-          staticClass: 'b-dropdown-form',
-          class: [props.formClass, { disabled: props.disabled }],
+          staticClass: CLASS_NAME_BV_DROPDOWN_FORM,
+          class: [props.formClass, { [CLASS_NAME_DISABLED]: props.disabled }],
           props,
           attrs: {
             ...$attrs,
diff --git a/src/components/dropdown/dropdown-group.js b/src/components/dropdown/dropdown-group.js
index 31beb2f8edf..7cffe3ff49d 100644
--- a/src/components/dropdown/dropdown-group.js
+++ b/src/components/dropdown/dropdown-group.js
@@ -1,8 +1,17 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
-import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
+import {
+  CLASS_NAME_DROPDOWN_HEADER,
+  CLASS_NAME_LIST_UNSTYLED,
+  CLASS_NAME_TEXT
+} from '../../constants/class-names'
+import { NAME_DROPDOWN_GROUP } from '../../constants/components'
+import { ROLE_GROUP, ROLE_HEADING, ROLE_PRESENTATION } from '../../constants/roles'
+import Vue, { mergeData } from '../../utils/vue'
 import identity from '../../utils/identity'
+import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
+import { omit } from '../../utils/object'
+import { suffixClass } from '../../utils/string'
 
+// --- Props ---
 export const props = {
   id: {
     type: String
@@ -30,54 +39,57 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
-  name: 'BDropdownGroup',
+  name: NAME_DROPDOWN_GROUP,
   functional: true,
   props,
   render(h, { props, data, slots, scopedSlots }) {
     const $slots = slots()
     const $scopedSlots = scopedSlots || {}
-    const $attrs = data.attrs || {}
-    data.attrs = {}
-    let header
-    let headerId = null
+    const slotScope = {}
 
+    let headerId = null
+    let $header = h()
     if (hasNormalizedSlot('header', $scopedSlots, $slots) || props.header) {
       headerId = props.id ? `_bv_${props.id}_group_dd_header` : null
-      header = h(
+      $header = h(
         props.headerTag,
         {
-          staticClass: 'dropdown-header',
-          class: [props.headerClasses, { [`text-${props.variant}`]: props.variant }],
+          staticClass: CLASS_NAME_DROPDOWN_HEADER,
+          class: [
+            props.headerClasses,
+            { [suffixClass(CLASS_NAME_TEXT, props.variant)]: props.variant }
+          ],
           attrs: {
             id: headerId,
-            role: 'heading'
+            role: ROLE_HEADING
           }
         },
-        normalizeSlot('header', {}, $scopedSlots, $slots) || props.header
+        normalizeSlot('header', slotScope, $scopedSlots, $slots) || props.header
       )
     }
 
-    const adb = [headerId, props.ariaDescribedBy]
+    const ariaDescribedBy = [headerId, props.ariaDescribedBy]
       .filter(identity)
       .join(' ')
       .trim()
 
-    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
-      header || h(),
+    return h('li', mergeData(omit(data, ['attrs']), { attrs: { role: ROLE_PRESENTATION } }), [
+      $header,
       h(
         'ul',
         {
-          staticClass: 'list-unstyled',
+          staticClass: CLASS_NAME_LIST_UNSTYLED,
           attrs: {
-            ...$attrs,
+            ...data.attrs,
             id: props.id || null,
-            role: 'group',
-            'aria-describedby': adb || null
+            role: ROLE_GROUP,
+            'aria-describedby': ariaDescribedBy || null
           }
         },
-        normalizeSlot('default', {}, $scopedSlots, $slots)
+        normalizeSlot('default', slotScope, $scopedSlots, $slots)
       )
     ])
   }
diff --git a/src/components/dropdown/dropdown-header.js b/src/components/dropdown/dropdown-header.js
index 853e2cdc73d..ac4b602b6fb 100644
--- a/src/components/dropdown/dropdown-header.js
+++ b/src/components/dropdown/dropdown-header.js
@@ -1,6 +1,11 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_DROPDOWN_HEADER, CLASS_NAME_TEXT } from '../../constants/class-names'
+import { NAME_DROPDOWN_HEADER } from '../../constants/components'
+import { ROLE_HEADING, ROLE_PRESENTATION } from '../../constants/roles'
+import Vue, { mergeData } from '../../utils/vue'
+import { omit } from '../../utils/object'
+import { suffixClass } from '../../utils/string'
 
+// --- Props ---
 export const props = {
   id: {
     type: String
@@ -16,26 +21,23 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BDropdownHeader = /*#__PURE__*/ Vue.extend({
-  name: 'BDropdownHeader',
+  name: NAME_DROPDOWN_HEADER,
   functional: true,
   props,
   render(h, { props, data, children }) {
-    const $attrs = data.attrs || {}
-    data.attrs = {}
-    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
+    return h('li', mergeData(omit(data, ['attrs']), { attrs: { role: ROLE_PRESENTATION } }), [
       h(
         props.tag,
         {
-          staticClass: 'dropdown-header',
-          class: {
-            [`text-${props.variant}`]: props.variant
-          },
+          staticClass: CLASS_NAME_DROPDOWN_HEADER,
+          class: { [suffixClass(CLASS_NAME_TEXT, props.variant)]: props.variant },
           attrs: {
-            ...$attrs,
+            ...data.attrs,
             id: props.id || null,
-            role: 'heading'
+            role: ROLE_HEADING
           },
           ref: 'header'
         },
diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js
index 232e5c1a8e5..3a22220b5fa 100644
--- a/src/components/dropdown/dropdown-item-button.js
+++ b/src/components/dropdown/dropdown-item-button.js
@@ -1,6 +1,11 @@
+import { CLASS_NAME_DROPDOWN_ITEM, CLASS_NAME_TEXT } from '../../constants/class-names'
+import { NAME_DROPDOWN_ITEM_BUTTON } from '../../constants/components'
+import { ROLE_MENUITEM, ROLE_PRESENTATION } from '../../constants/roles'
 import Vue from '../../utils/vue'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
+import { suffixClass } from '../../utils/string'
 
+// --- Props ---
 export const props = {
   active: {
     type: Boolean,
@@ -24,15 +29,14 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BDropdownItemButton = /*#__PURE__*/ Vue.extend({
-  name: 'BDropdownItemButton',
+  name: NAME_DROPDOWN_ITEM_BUTTON,
   mixins: [normalizeSlotMixin],
   inheritAttrs: false,
   inject: {
-    bvDropdown: {
-      default: null
-    }
+    bvDropdown: { default: null }
   },
   props,
   methods: {
@@ -47,21 +51,22 @@ export const BDropdownItemButton = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    return h('li', { attrs: { role: 'presentation' } }, [
+    return h('li', { attrs: { role: ROLE_PRESENTATION } }, [
       h(
         'button',
         {
-          staticClass: 'dropdown-item',
+          staticClass: CLASS_NAME_DROPDOWN_ITEM,
           class: [
             this.buttonClass,
             {
               [this.activeClass]: this.active,
-              [`text-${this.variant}`]: this.variant && !(this.active || this.disabled)
+              [suffixClass(CLASS_NAME_TEXT, props.variant)]:
+                this.variant && !(this.active || this.disabled)
             }
           ],
           attrs: {
             ...this.$attrs,
-            role: 'menuitem',
+            role: ROLE_MENUITEM,
             type: 'button',
             disabled: this.disabled
           },
diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js
index 156a459691d..fe900702eb1 100644
--- a/src/components/dropdown/dropdown-item.js
+++ b/src/components/dropdown/dropdown-item.js
@@ -1,31 +1,35 @@
+import { CLASS_NAME_DROPDOWN_ITEM, CLASS_NAME_TEXT } from '../../constants/class-names'
+import { NAME_DROPDOWN_ITEM } from '../../constants/components'
+import { ROLE_MENUITEM, ROLE_PRESENTATION } from '../../constants/roles'
+import normalizeSlotMixin from '../../mixins/normalize-slot'
 import Vue from '../../utils/vue'
 import { requestAF } from '../../utils/dom'
-import normalizeSlotMixin from '../../mixins/normalize-slot'
+import { suffixClass } from '../../utils/string'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
-export const props = linkPropsFactory()
+// --- Props ---
+export const props = {
+  ...linkPropsFactory(),
+  linkClass: {
+    type: [String, Array, Object],
+    default: null
+  },
+  variant: {
+    type: String,
+    default: null
+  }
+}
 
+// --- Main component ---
 // @vue/component
 export const BDropdownItem = /*#__PURE__*/ Vue.extend({
-  name: 'BDropdownItem',
+  name: NAME_DROPDOWN_ITEM,
   mixins: [normalizeSlotMixin],
   inheritAttrs: false,
   inject: {
-    bvDropdown: {
-      default: null
-    }
-  },
-  props: {
-    ...props,
-    linkClass: {
-      type: [String, Array, Object],
-      default: null
-    },
-    variant: {
-      type: String,
-      default: null
-    }
+    bvDropdown: { default: null }
   },
+  props,
   methods: {
     closeDropdown() {
       // Close on next animation frame to allow <b-link> time to process
@@ -41,19 +45,20 @@ export const BDropdownItem = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    return h('li', { attrs: { role: 'presentation' } }, [
+    return h('li', { attrs: { role: ROLE_PRESENTATION } }, [
       h(
         BLink,
         {
           props: this.$props,
-          staticClass: 'dropdown-item',
+          staticClass: CLASS_NAME_DROPDOWN_ITEM,
           class: [
             this.linkClass,
             {
-              [`text-${this.variant}`]: this.variant && !(this.active || this.disabled)
+              [suffixClass(CLASS_NAME_TEXT, props.variant)]:
+                this.variant && !(this.active || this.disabled)
             }
           ],
-          attrs: { ...this.$attrs, role: 'menuitem' },
+          attrs: { ...this.$attrs, role: ROLE_MENUITEM },
           on: { click: this.onClick },
           ref: 'item'
         },
diff --git a/src/components/dropdown/dropdown-text.js b/src/components/dropdown/dropdown-text.js
index 7acac4d5f40..6103bdf0e10 100644
--- a/src/components/dropdown/dropdown-text.js
+++ b/src/components/dropdown/dropdown-text.js
@@ -1,9 +1,13 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_BV_DROPDOWN_TEXT, CLASS_NAME_TEXT } from '../../constants/class-names'
+import { NAME_DROPDOWN_TEXT } from '../../constants/components'
+import { ROLE_PRESENTATION } from '../../constants/roles'
+import Vue, { mergeData } from '../../utils/vue'
+import { omit } from '../../utils/object'
+import { suffixClass } from '../../utils/string'
 
 // @vue/component
 export const BDropdownText = /*#__PURE__*/ Vue.extend({
-  name: 'BDropdownText',
+  name: NAME_DROPDOWN_TEXT,
   functional: true,
   props: {
     tag: {
@@ -16,18 +20,14 @@ export const BDropdownText = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h, { props, data, children }) {
-    const $attrs = data.attrs || {}
-    data.attrs = {}
-    return h('li', mergeData(data, { attrs: { role: 'presentation' } }), [
+    return h('li', mergeData(omit(data, ['attrs']), { attrs: { role: ROLE_PRESENTATION } }), [
       h(
         props.tag,
         {
-          staticClass: 'b-dropdown-text',
-          class: {
-            [`text-${props.variant}`]: props.variant
-          },
+          staticClass: CLASS_NAME_BV_DROPDOWN_TEXT,
+          class: { [suffixClass(CLASS_NAME_TEXT, props.variant)]: props.variant },
           props,
-          attrs: $attrs,
+          attrs: data.attrs,
           ref: 'text'
         },
         children
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
index 9490b05e490..af9bd0ff519 100644
--- a/src/components/dropdown/dropdown.js
+++ b/src/components/dropdown/dropdown.js
@@ -1,14 +1,28 @@
+import { ARIA_VALUE_FALSE, ARIA_VALUE_TRUE } from '../../constants/aria'
+import {
+  CLASS_NAME_BUTTON_GROUP,
+  CLASS_NAME_BV_DROPDOWN,
+  CLASS_NAME_DISPLAY_FLEX,
+  CLASS_NAME_DROPDOWN,
+  CLASS_NAME_DROPDOWN_MENU,
+  CLASS_NAME_DROPDOWN_TOGGLE,
+  CLASS_NAME_POSITION_STATIC,
+  CLASS_NAME_SHOW,
+  CLASS_NAME_SR_ONLY
+} from '../../constants/class-names'
+import { NAME_DROPDOWN } from '../../constants/components'
+import { ROLE_MENU } from '../../constants/roles'
 import Vue from '../../utils/vue'
 import { arrayIncludes } from '../../utils/array'
-import { stripTags } from '../../utils/html'
 import { getComponentConfig } from '../../utils/config'
-import idMixin from '../../mixins/id'
+import { stripTags } from '../../utils/html'
+import { suffixClass } from '../../utils/string'
 import dropdownMixin from '../../mixins/dropdown'
+import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButton } from '../button/button'
 
-const NAME = 'BDropdown'
-
+// --- Props ---
 export const props = {
   text: {
     // Button label
@@ -22,11 +36,11 @@ export const props = {
   },
   size: {
     type: String,
-    default: () => getComponentConfig(NAME, 'size')
+    default: () => getComponentConfig(NAME_DROPDOWN, 'size')
   },
   variant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'variant')
+    default: () => getComponentConfig(NAME_DROPDOWN, 'variant')
   },
   block: {
     type: Boolean,
@@ -41,9 +55,9 @@ export const props = {
     default: 'button'
   },
   toggleText: {
-    // This really should be toggleLabel
+    // This really should be `toggleLabel`
     type: String,
-    default: () => getComponentConfig(NAME, 'toggleText')
+    default: () => getComponentConfig(NAME_DROPDOWN, 'toggleText')
   },
   toggleClass: {
     type: [String, Array, Object]
@@ -67,7 +81,7 @@ export const props = {
   },
   splitVariant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'splitVariant')
+    default: () => getComponentConfig(NAME_DROPDOWN, 'splitVariant')
   },
   splitClass: {
     type: [String, Array, Object]
@@ -85,32 +99,33 @@ export const props = {
   },
   role: {
     type: String,
-    default: 'menu'
+    default: ROLE_MENU
   }
 }
 
 // @vue/component
 export const BDropdown = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_DROPDOWN,
   mixins: [idMixin, dropdownMixin, normalizeSlotMixin],
   props,
   computed: {
     dropdownClasses() {
       return [
+        CLASS_NAME_BV_DROPDOWN,
         this.directionClass,
         {
-          show: this.visible,
+          [CLASS_NAME_SHOW]: this.visible,
           // The 'btn-group' class is required in `split` mode for button alignment
           // It needs also to be applied when `block` is disabled to allow multiple
           // dropdowns to be aligned one line
-          'btn-group': this.split || !this.block,
+          [CLASS_NAME_BUTTON_GROUP]: this.split || !this.block,
           // When `block` is enabled and we are in `split` mode the 'd-flex' class
           // needs to be applied to allow the buttons to stretch to full width
-          'd-flex': this.block && this.split,
+          [CLASS_NAME_DISPLAY_FLEX]: this.block && this.split,
           // Position `static` is needed to allow menu to "breakout" of the `scrollParent`
           // boundaries when boundary is anything other than `scrollParent`
           // See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
-          'position-static': this.boundary !== 'scrollParent' || !this.boundary
+          [CLASS_NAME_POSITION_STATIC]: this.boundary !== 'scrollParent' || !this.boundary
         }
       ]
     },
@@ -118,8 +133,8 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
       return [
         this.menuClass,
         {
-          'dropdown-menu-right': this.right,
-          show: this.visible
+          [suffixClass(CLASS_NAME_DROPDOWN_MENU, 'right')]: this.right,
+          [CLASS_NAME_SHOW]: this.visible
         }
       ]
     },
@@ -127,63 +142,66 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
       return [
         this.toggleClass,
         {
-          'dropdown-toggle-split': this.split,
-          'dropdown-toggle-no-caret': this.noCaret && !this.split
+          [suffixClass(CLASS_NAME_DROPDOWN_TOGGLE, 'split')]: this.split,
+          [suffixClass(CLASS_NAME_DROPDOWN_TOGGLE, 'no-caret')]: this.noCaret && !this.split
         }
       ]
     }
   },
   render(h) {
-    let split = h()
-    const buttonContent = this.normalizeSlot('button-content') || this.html || stripTags(this.text)
-    if (this.split) {
+    const { visible, split, variant, size, block, disabled, role, lazy } = this
+
+    const $buttonContent = this.normalizeSlot('button-content') || this.html || stripTags(this.text)
+
+    let $split = h()
+    if (split) {
+      const { splitVariant, splitTo, splitHref, splitButtonType } = this
       const btnProps = {
-        variant: this.splitVariant || this.variant,
-        size: this.size,
-        block: this.block,
-        disabled: this.disabled
+        variant: splitVariant || variant,
+        size,
+        block,
+        disabled
       }
-      // We add these as needed due to router-link issues with defined property with undefined/null values
-      if (this.splitTo) {
-        btnProps.to = this.splitTo
-      } else if (this.splitHref) {
-        btnProps.href = this.splitHref
-      } else if (this.splitButtonType) {
-        btnProps.type = this.splitButtonType
+      // We add these props as needed due to `<router-link>` issues
+      // with defined property with `undefined`/`null` values
+      if (splitTo) {
+        btnProps.to = splitTo
+      } else if (splitHref) {
+        btnProps.href = splitHref
+      } else if (splitButtonType) {
+        btnProps.type = splitButtonType
       }
-      split = h(
+
+      $split = h(
         BButton,
         {
           ref: 'button',
           props: btnProps,
           class: this.splitClass,
-          attrs: {
-            id: this.safeId('_BV_button_')
-          },
-          on: {
-            click: this.onSplitClick
-          }
+          attrs: { id: this.safeId('_BV_button_') },
+          on: { click: this.onSplitClick }
         },
-        [buttonContent]
+        [$buttonContent]
       )
     }
-    const toggle = h(
+
+    const $toggle = h(
       BButton,
       {
         ref: 'toggle',
-        staticClass: 'dropdown-toggle',
+        staticClass: CLASS_NAME_DROPDOWN_TOGGLE,
         class: this.toggleClasses,
         props: {
           tag: this.toggleTag,
-          variant: this.variant,
-          size: this.size,
-          block: this.block && !this.split,
-          disabled: this.disabled
+          variant,
+          size,
+          block: block && !split,
+          disabled
         },
         attrs: {
           id: this.safeId('_BV_toggle_'),
-          'aria-haspopup': 'true',
-          'aria-expanded': this.visible ? 'true' : 'false'
+          'aria-haspopup': ARIA_VALUE_TRUE,
+          'aria-expanded': visible ? ARIA_VALUE_TRUE : ARIA_VALUE_FALSE
         },
         on: {
           mousedown: this.onMousedown,
@@ -191,33 +209,35 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
           keydown: this.toggle // Handle ENTER, SPACE and DOWN
         }
       },
-      [this.split ? h('span', { class: ['sr-only'] }, [this.toggleText]) : buttonContent]
+      [split ? h('span', { class: CLASS_NAME_SR_ONLY }, [this.toggleText]) : $buttonContent]
     )
-    const menu = h(
+
+    const $menu = h(
       'ul',
       {
         ref: 'menu',
-        staticClass: 'dropdown-menu',
+        staticClass: CLASS_NAME_DROPDOWN_MENU,
         class: this.menuClasses,
         attrs: {
-          role: this.role,
+          role,
           tabindex: '-1',
-          'aria-labelledby': this.safeId(this.split ? '_BV_button_' : '_BV_toggle_')
+          'aria-labelledby': this.safeId(split ? '_BV_button_' : '_BV_toggle_')
         },
         on: {
           keydown: this.onKeydown // Handle UP, DOWN and ESC
         }
       },
-      !this.lazy || this.visible ? this.normalizeSlot('default', { hide: this.hide }) : [h()]
+      !lazy || visible ? this.normalizeSlot('default', { hide: this.hide }) : [h()]
     )
+
     return h(
       'div',
       {
-        staticClass: 'dropdown b-dropdown',
+        staticClass: CLASS_NAME_DROPDOWN,
         class: this.dropdownClasses,
         attrs: { id: this.safeId() }
       },
-      [split, toggle, menu]
+      [$split, $toggle, $menu]
     )
   }
 })
diff --git a/src/components/embed/embed.js b/src/components/embed/embed.js
index 3baa9862d0b..95c18154ebe 100644
--- a/src/components/embed/embed.js
+++ b/src/components/embed/embed.js
@@ -1,13 +1,26 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_EMBED } from '../../constants/class-names'
+import { NAME_EMBED, NAME_IMG, NAME_IMG_LAZY } from '../../constants/components'
+import Vue, { mergeData } from '../../utils/vue'
 import { arrayIncludes } from '../../utils/array'
+import { kebabCase, suffixClass } from '../../utils/string'
 
+// --- Constants ---
+const ALLOWED_COMPONENTS = [NAME_IMG, NAME_IMG_LAZY]
+const ALLOWED_TYPES = [
+  'embed',
+  'iframe',
+  'img',
+  'object',
+  'video',
+  ...ALLOWED_COMPONENTS.map(name => kebabCase(name))
+]
+
+// --- Props ---
 export const props = {
   type: {
     type: String,
     default: 'iframe',
-    validator: str =>
-      arrayIncludes(['iframe', 'embed', 'video', 'object', 'img', 'b-img', 'b-img-lazy'], str)
+    validator: value => arrayIncludes(ALLOWED_TYPES, value)
   },
   tag: {
     type: String,
@@ -19,22 +32,27 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BEmbed = /*#__PURE__*/ Vue.extend({
-  name: 'BEmbed',
+  name: NAME_EMBED,
   functional: true,
   props,
   render(h, { props, data, children }) {
     return h(
       props.tag,
       {
-        ref: data.ref,
-        staticClass: 'embed-responsive',
-        class: {
-          [`embed-responsive-${props.aspect}`]: props.aspect
-        }
+        staticClass: CLASS_NAME_EMBED,
+        class: { [suffixClass(CLASS_NAME_EMBED, props.aspect)]: props.aspect },
+        ref: data.ref
       },
-      [h(props.type, mergeData(data, { ref: '', staticClass: 'embed-responsive-item' }), children)]
+      [
+        h(
+          props.type,
+          mergeData(data, { staticClass: suffixClass(CLASS_NAME_EMBED, 'item') }),
+          children
+        )
+      ]
     )
   }
 })
diff --git a/src/components/form-checkbox/form-checkbox-group.js b/src/components/form-checkbox/form-checkbox-group.js
index aee57f2c2a2..9508d4e5a86 100644
--- a/src/components/form-checkbox/form-checkbox-group.js
+++ b/src/components/form-checkbox/form-checkbox-group.js
@@ -1,11 +1,13 @@
+import { NAME_FORM_CHECKBOX_GROUP } from '../../constants/components'
 import Vue from '../../utils/vue'
-import idMixin from '../../mixins/id'
 import formMixin from '../../mixins/form'
 import formOptionsMixin from '../../mixins/form-options'
 import formRadioCheckGroupMixin from '../../mixins/form-radio-check-group'
 import formSizeMixin from '../../mixins/form-size'
 import formStateMixin from '../../mixins/form-state'
+import idMixin from '../../mixins/id'
 
+// --- Props ---
 export const props = {
   switches: {
     // Custom switch styling
@@ -18,9 +20,10 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BFormCheckboxGroup = /*#__PURE__*/ Vue.extend({
-  name: 'BFormCheckboxGroup',
+  name: NAME_FORM_CHECKBOX_GROUP,
   mixins: [
     idMixin,
     formMixin,
@@ -30,9 +33,7 @@ export const BFormCheckboxGroup = /*#__PURE__*/ Vue.extend({
     formStateMixin
   ],
   provide() {
-    return {
-      bvCheckGroup: this
-    }
+    return { bvCheckGroup: this }
   },
   props,
   data() {
diff --git a/src/components/form-checkbox/form-checkbox.js b/src/components/form-checkbox/form-checkbox.js
index 9b66df74f2e..e3d90db1335 100644
--- a/src/components/form-checkbox/form-checkbox.js
+++ b/src/components/form-checkbox/form-checkbox.js
@@ -1,3 +1,4 @@
+import { NAME_FORM_CHECKBOX } from '../../constants/components'
 import Vue from '../../utils/vue'
 import looseEqual from '../../utils/loose-equal'
 import looseIndexOf from '../../utils/loose-index-of'
@@ -10,7 +11,7 @@ import idMixin from '../../mixins/id'
 
 // @vue/component
 export const BFormCheckbox = /*#__PURE__*/ Vue.extend({
-  name: 'BFormCheckbox',
+  name: NAME_FORM_CHECKBOX,
   mixins: [
     formRadioCheckMixin, // Includes shared render function
     idMixin,
@@ -52,8 +53,7 @@ export const BFormCheckbox = /*#__PURE__*/ Vue.extend({
   },
   computed: {
     isChecked() {
-      const checked = this.computedLocalChecked
-      const value = this.value
+      const { computedLocalChecked: checked, value } = this
       if (isArray(checked)) {
         return looseIndexOf(checked, value) > -1
       } else {
@@ -88,7 +88,7 @@ export const BFormCheckbox = /*#__PURE__*/ Vue.extend({
       const value = this.value
       const isArr = isArray(localChecked)
       const uncheckedValue = isArr ? null : this.uncheckedValue
-      // Update computedLocalChecked
+      // Update `computedLocalChecked`
       if (isArr) {
         const idx = looseIndexOf(localChecked, value)
         if (checked && idx < 0) {
@@ -104,7 +104,7 @@ export const BFormCheckbox = /*#__PURE__*/ Vue.extend({
       this.computedLocalChecked = localChecked
       // Change is only emitted on user interaction
       this.$emit('change', checked ? value : uncheckedValue)
-      // If this is a child of form-checkbox-group, we emit a change event on it as well
+      // If this is a child of <form-checkbox-group>, we emit a change event on it as well
       if (this.isGroup) {
         this.bvGroup.$emit('change', localChecked)
       }
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
index 8d1b02307b5..6a76814c675 100644
--- a/src/components/form-datepicker/form-datepicker.js
+++ b/src/components/form-datepicker/form-datepicker.js
@@ -1,3 +1,22 @@
+import { ARIA_VALUE_TRUE } from '../../constants/aria'
+import {
+  CLASS_NAME_BACKGROUND,
+  CLASS_NAME_BV_FORM_DATE,
+  CLASS_NAME_BV_FORM_DATEPICKER,
+  CLASS_NAME_DISPLAY_FLEX,
+  CLASS_NAME_FLEX_WRAP,
+  CLASS_NAME_JUSTIFY_CONTENT_BETWEEN,
+  CLASS_NAME_JUSTIFY_CONTENT_END,
+  CLASS_NAME_TEXT,
+  CLASS_NAME_WIDTH_FULL
+} from '../../constants/class-names'
+import { NAME_CALENDAR, NAME_FORM_DATEPICKER } from '../../constants/components'
+import {
+  CALENDAR_LONG,
+  CALENDAR_NARROW,
+  CALENDAR_SHORT,
+  DATE_FORMAT_NUMERIC
+} from '../../constants/date'
 import Vue from '../../utils/vue'
 import { arrayIncludes } from '../../utils/array'
 import { BVFormBtnLabelControl, dropdownProps } from '../../utils/bv-form-btn-label-control'
@@ -5,18 +24,20 @@ import { getComponentConfig } from '../../utils/config'
 import { createDate, constrainDate, formatYMD, parseYMD } from '../../utils/date'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { pick } from '../../utils/object'
+import { suffixClass } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import { BButton } from '../button/button'
-import { BCalendar, STR_LONG, STR_NARROW, STR_NUMERIC, STR_SHORT } from '../calendar/calendar'
+import { BCalendar } from '../calendar/calendar'
 import { BIconCalendar, BIconCalendarFill } from '../../icons/icons'
 
-const NAME = 'BFormDatepicker'
+// --- Utility methods ---
 
-// Fallback to BCalendar prop if no value found
+// Fallback to `BCalendar` prop if no value found
 const getConfigFallback = prop => {
-  return getComponentConfig(NAME, prop) || getComponentConfig('BCalendar', prop)
+  return getComponentConfig(NAME_FORM_DATEPICKER, prop) || getComponentConfig(NAME_CALENDAR, prop)
 }
 
+// --- Props ---
 // We create our props as a mixin so that we can control
 // where they appear in the props listing reference section
 const propsMixin = {
@@ -150,7 +171,7 @@ const propsMixin = {
     },
     labelTodayButton: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelTodayButton')
+      default: () => getComponentConfig(NAME_FORM_DATEPICKER, 'labelTodayButton')
     },
     todayButtonVariant: {
       type: String,
@@ -162,7 +183,7 @@ const propsMixin = {
     },
     labelResetButton: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelResetButton')
+      default: () => getComponentConfig(NAME_FORM_DATEPICKER, 'labelResetButton')
     },
     resetButtonVariant: {
       type: String,
@@ -174,7 +195,7 @@ const propsMixin = {
     },
     labelCloseButton: {
       type: String,
-      default: () => getComponentConfig(NAME, 'labelCloseButton')
+      default: () => getComponentConfig(NAME_FORM_DATEPICKER, 'labelCloseButton')
     },
     closeButtonVariant: {
       type: String,
@@ -186,7 +207,7 @@ const propsMixin = {
       // default: undefined
     },
     // Labels for buttons and keyboard shortcuts
-    // These pick BCalendar global config if no BFormDate global config
+    // These pick `BCalendar` global config if no BFormDate global config
     labelPrevDecade: {
       type: String,
       default: () => getConfigFallback('labelPrevDecade')
@@ -244,10 +265,10 @@ const propsMixin = {
       // Note: This value is *not* to be placed in the global config
       type: Object,
       default: () => ({
-        year: STR_NUMERIC,
-        month: STR_LONG,
-        day: STR_NUMERIC,
-        weekday: STR_LONG
+        year: DATE_FORMAT_NUMERIC,
+        month: CALENDAR_LONG,
+        day: DATE_FORMAT_NUMERIC,
+        weekday: CALENDAR_LONG
       })
     },
     weekdayHeaderFormat: {
@@ -258,8 +279,8 @@ const propsMixin = {
       // `narrow` is typically a single letter
       // `long` is the full week day name
       // Although some locales may override this (i.e `ar`, etc)
-      default: STR_SHORT,
-      validator: value => arrayIncludes([STR_LONG, STR_SHORT, STR_NARROW], value)
+      default: CALENDAR_SHORT,
+      validator: value => arrayIncludes([CALENDAR_LONG, CALENDAR_SHORT, CALENDAR_NARROW], value)
     },
     // Dark mode
     dark: {
@@ -275,11 +296,10 @@ const propsMixin = {
   }
 }
 
-// --- BFormDate component ---
-
+// --- Main component ---
 // @vue/component
 export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_FORM_DATEPICKER,
   // The mixins order determines the order of appearance in the props reference section
   mixins: [idMixin, propsMixin],
   model: {
@@ -292,7 +312,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
       localYMD: formatYMD(this.value) || '',
       // If the popup is open
       isVisible: false,
-      // Context data from BCalendar
+      // Context data from `BCalendar`
       localLocale: null,
       isRTL: false,
       formattedValue: '',
@@ -448,7 +468,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
     // Render helpers
     defaultButtonFn({ isHovered, hasFocus }) {
       return this.$createElement(isHovered || hasFocus ? BIconCalendarFill : BIconCalendar, {
-        attrs: { 'aria-hidden': 'true' }
+        attrs: { 'aria-hidden': ARIA_VALUE_TRUE }
       })
     }
   },
@@ -514,11 +534,15 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
         h(
           'div',
           {
-            staticClass: 'b-form-date-controls d-flex flex-wrap',
-            class: {
-              'justify-content-between': $footer.length > 1,
-              'justify-content-end': $footer.length < 2
-            }
+            staticClass: suffixClass(CLASS_NAME_BV_FORM_DATE, 'controls'),
+            class: [
+              CLASS_NAME_DISPLAY_FLEX,
+              CLASS_NAME_FLEX_WRAP,
+              {
+                [CLASS_NAME_JUSTIFY_CONTENT_BETWEEN]: $footer.length > 1,
+                [CLASS_NAME_JUSTIFY_CONTENT_END]: $footer.length < 2
+              }
+            ]
           },
           $footer
         )
@@ -530,7 +554,8 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
       {
         key: 'calendar',
         ref: 'calendar',
-        staticClass: 'b-form-date-calendar w-100',
+        staticClass: suffixClass(CLASS_NAME_BV_FORM_DATE, 'calendar'),
+        class: CLASS_NAME_WIDTH_FULL,
         props: this.calendarProps,
         on: {
           selected: this.onSelected,
@@ -554,7 +579,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
       BVFormBtnLabelControl,
       {
         ref: 'control',
-        staticClass: 'b-form-datepicker',
+        staticClass: CLASS_NAME_BV_FORM_DATEPICKER,
         props: {
           // This adds unneeded props, but reduces code size:
           ...this.$props,
@@ -565,7 +590,13 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
           value: localYMD || '',
           formattedValue: localYMD ? this.formattedValue : '',
           placeholder: placeholder || '',
-          menuClass: [{ 'bg-dark': !!this.dark, 'text-light': !!this.dark }, this.menuClass]
+          menuClass: [
+            {
+              [suffixClass(CLASS_NAME_BACKGROUND, 'dark')]: !!this.dark,
+              [suffixClass(CLASS_NAME_TEXT, 'light')]: !!this.dark
+            },
+            this.menuClass
+          ]
         },
         on: {
           show: this.onShow,
diff --git a/src/components/form-select/form-select-option.js b/src/components/form-select/form-select-option.js
index 8d8fbb12992..1c9aaeafa47 100644
--- a/src/components/form-select/form-select-option.js
+++ b/src/components/form-select/form-select-option.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 
 const NAME = 'BFormSelectOption'
 
diff --git a/src/components/form/form-datalist.js b/src/components/form/form-datalist.js
index c9c17f18432..64955a268ad 100644
--- a/src/components/form/form-datalist.js
+++ b/src/components/form/form-datalist.js
@@ -1,11 +1,12 @@
+import { NAME_FORM_DATALIST } from '../../constants/components'
 import Vue from '../../utils/vue'
+import { htmlOrText } from '../../utils/html'
 import formOptionsMixin from '../../mixins/form-options'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
-import { htmlOrText } from '../../utils/html'
 
 // @vue/component
 export const BFormDatalist = /*#__PURE__*/ Vue.extend({
-  name: 'BFormDatalist',
+  name: NAME_FORM_DATALIST,
   mixins: [formOptionsMixin, normalizeSlotMixin],
   props: {
     id: {
@@ -14,13 +15,16 @@ export const BFormDatalist = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    const options = this.formOptions.map((option, index) => {
+    const $options = this.formOptions.map((option, index) => {
+      const { value, html, text, disabled } = option
+
       return h('option', {
         key: `option_${index}_opt`,
-        attrs: { disabled: option.disabled },
-        domProps: { ...htmlOrText(option.html, option.text), value: option.value }
+        attrs: { disabled },
+        domProps: { ...htmlOrText(html, text), value }
       })
     })
-    return h('datalist', { attrs: { id: this.id } }, [options, this.normalizeSlot('default')])
+
+    return h('datalist', { attrs: { id: this.id } }, [$options, this.normalizeSlot('default')])
   }
 })
diff --git a/src/components/form/form-invalid-feedback.js b/src/components/form/form-invalid-feedback.js
index b2da847c069..cc986475a41 100644
--- a/src/components/form/form-invalid-feedback.js
+++ b/src/components/form/form-invalid-feedback.js
@@ -1,6 +1,13 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { ARIA_VALUE_TRUE } from '../../constants/aria'
+import {
+  CLASS_NAME_DISPLAY_BLOCK,
+  CLASS_NAME_FORM_INVALID_FEEDBACK,
+  CLASS_NAME_FORM_INVALID_TOOLTIP
+} from '../../constants/class-names'
+import { NAME_FORM_INVALID_FEEDBACK } from '../../constants/components'
+import Vue, { mergeData } from '../../utils/vue'
 
+// --- Props ---
 export const props = {
   id: {
     type: String
@@ -19,7 +26,7 @@ export const props = {
     default: false
   },
   state: {
-    // Tri-stste prop: `true`, `false`, or `null`
+    // Tri-state prop: `true`, `false`, or `null`
     type: Boolean,
     default: null
   },
@@ -33,26 +40,29 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BFormInvalidFeedback = /*#__PURE__*/ Vue.extend({
-  name: 'BFormInvalidFeedback',
+  name: NAME_FORM_INVALID_FEEDBACK,
   functional: true,
   props,
   render(h, { props, data, children }) {
+    const { tooltip, ariaLive } = props
     const show = props.forceShow === true || props.state === false
+
     return h(
       props.tag,
       mergeData(data, {
         class: {
-          'invalid-feedback': !props.tooltip,
-          'invalid-tooltip': props.tooltip,
-          'd-block': show
+          [CLASS_NAME_FORM_INVALID_FEEDBACK]: !tooltip,
+          [CLASS_NAME_FORM_INVALID_TOOLTIP]: tooltip,
+          [CLASS_NAME_DISPLAY_BLOCK]: show
         },
         attrs: {
           id: props.id || null,
           role: props.role || null,
-          'aria-live': props.ariaLive || null,
-          'aria-atomic': props.ariaLive ? 'true' : null
+          'aria-live': ariaLive || null,
+          'aria-atomic': ariaLive ? ARIA_VALUE_TRUE : null
         }
       }),
       children
diff --git a/src/components/form/form-text.js b/src/components/form/form-text.js
index fb2a8d7f8f1..6b8e2cdf8e7 100644
--- a/src/components/form/form-text.js
+++ b/src/components/form/form-text.js
@@ -1,9 +1,10 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_FORM_TEXT, CLASS_NAME_TEXT } from '../../constants/class-names'
+import { NAME_FORM_TEXT } from '../../constants/components'
+import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
+import { suffixClass } from '../../utils/string'
 
-const NAME = 'BFormText'
-
+// --- Props ---
 export const props = {
   id: {
     type: String
@@ -15,7 +16,7 @@ export const props = {
   },
   textVariant: {
     type: String,
-    default: () => getComponentConfig(NAME, 'textVariant')
+    default: () => getComponentConfig(NAME_FORM_TEXT, 'textVariant')
   },
   inline: {
     type: Boolean,
@@ -23,9 +24,10 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BFormText = /*#__PURE__*/ Vue.extend({
-  name: NAME,
+  name: NAME_FORM_TEXT,
   functional: true,
   props,
   render(h, { props, data, children }) {
@@ -33,12 +35,10 @@ export const BFormText = /*#__PURE__*/ Vue.extend({
       props.tag,
       mergeData(data, {
         class: {
-          'form-text': !props.inline,
-          [`text-${props.textVariant}`]: props.textVariant
+          [CLASS_NAME_FORM_TEXT]: !props.inline,
+          [suffixClass(CLASS_NAME_TEXT, props.textVariant)]: props.textVariant
         },
-        attrs: {
-          id: props.id
-        }
+        attrs: { id: props.id }
       }),
       children
     )
diff --git a/src/components/form/form-valid-feedback.js b/src/components/form/form-valid-feedback.js
index 17b23914899..a6e0bfc304b 100644
--- a/src/components/form/form-valid-feedback.js
+++ b/src/components/form/form-valid-feedback.js
@@ -1,6 +1,13 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { ARIA_VALUE_TRUE } from '../../constants/aria'
+import {
+  CLASS_NAME_DISPLAY_BLOCK,
+  CLASS_NAME_FORM_VALID_FEEDBACK,
+  CLASS_NAME_FORM_VALID_TOOLTIP
+} from '../../constants/class-names'
+import { NAME_FORM_VALID_FEEDBACK } from '../../constants/components'
+import Vue, { mergeData } from '../../utils/vue'
 
+// --- Props ---
 export const props = {
   id: {
     type: String
@@ -33,26 +40,29 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BFormValidFeedback = /*#__PURE__*/ Vue.extend({
-  name: 'BFormValidFeedback',
+  name: NAME_FORM_VALID_FEEDBACK,
   functional: true,
   props,
   render(h, { props, data, children }) {
+    const { tooltip, ariaLive } = props
     const show = props.forceShow === true || props.state === true
+
     return h(
       props.tag,
       mergeData(data, {
         class: {
-          'valid-feedback': !props.tooltip,
-          'valid-tooltip': props.tooltip,
-          'd-block': show
+          [CLASS_NAME_FORM_VALID_FEEDBACK]: !tooltip,
+          [CLASS_NAME_FORM_VALID_TOOLTIP]: tooltip,
+          [CLASS_NAME_DISPLAY_BLOCK]: show
         },
         attrs: {
           id: props.id || null,
           role: props.role || null,
-          'aria-live': props.ariaLive || null,
-          'aria-atomic': props.ariaLive ? 'true' : null
+          'aria-live': ariaLive || null,
+          'aria-atomic': ariaLive ? ARIA_VALUE_TRUE : null
         }
       }),
       children
diff --git a/src/components/form/form.js b/src/components/form/form.js
index 6efe80d3055..686a5d3d7c6 100644
--- a/src/components/form/form.js
+++ b/src/components/form/form.js
@@ -1,6 +1,9 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { CLASS_NAME_FORM, CLASS_NAME_WAS_VALIDATED } from '../../constants/class-names'
+import { NAME_FORM } from '../../constants/components'
+import Vue, { mergeData } from '../../utils/vue'
+import { suffixClass } from '../../utils/string'
 
+// --- Props ---
 export const props = {
   id: {
     type: String
@@ -20,9 +23,10 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BForm = /*#__PURE__*/ Vue.extend({
-  name: 'BForm',
+  name: NAME_FORM,
   functional: true,
   props,
   render(h, { props, data, children }) {
@@ -30,8 +34,8 @@ export const BForm = /*#__PURE__*/ Vue.extend({
       'form',
       mergeData(data, {
         class: {
-          'form-inline': props.inline,
-          'was-validated': props.validated
+          [suffixClass(CLASS_NAME_FORM, 'inline')]: props.inline,
+          [CLASS_NAME_WAS_VALIDATED]: props.validated
         },
         attrs: {
           id: props.id,
diff --git a/src/components/image/img.js b/src/components/image/img.js
index 254237231cd..c58fd61c12e 100644
--- a/src/components/image/img.js
+++ b/src/components/image/img.js
@@ -1,11 +1,10 @@
-import Vue from '../../utils/vue'
+import Vue, { mergeData } from '../../utils/vue'
 import identity from '../../utils/identity'
 import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
 import { isString } from '../../utils/inspect'
 import { toInteger } from '../../utils/number'
 import { toString } from '../../utils/string'
-import { mergeData } from 'vue-functional-data-merge'
 
 // --- Constants --
 
diff --git a/src/components/input-group/input-group-addon.js b/src/components/input-group/input-group-addon.js
index 24489d25d18..c1d5a15ac6f 100644
--- a/src/components/input-group/input-group-addon.js
+++ b/src/components/input-group/input-group-addon.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { BInputGroupText } from './input-group-text'
 
 export const commonProps = {
diff --git a/src/components/input-group/input-group-append.js b/src/components/input-group/input-group-append.js
index a148a5352de..1088aa13227 100644
--- a/src/components/input-group/input-group-append.js
+++ b/src/components/input-group/input-group-append.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { BInputGroupAddon, commonProps } from './input-group-addon'
 
 // @vue/component
diff --git a/src/components/input-group/input-group-prepend.js b/src/components/input-group/input-group-prepend.js
index 70d3e29a58b..d2012b5e19d 100644
--- a/src/components/input-group/input-group-prepend.js
+++ b/src/components/input-group/input-group-prepend.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { BInputGroupAddon, commonProps } from './input-group-addon'
 
 // @vue/component
diff --git a/src/components/input-group/input-group-text.js b/src/components/input-group/input-group-text.js
index 7669f5883b4..94873e92c8e 100644
--- a/src/components/input-group/input-group-text.js
+++ b/src/components/input-group/input-group-text.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 
 export const props = {
   tag: {
diff --git a/src/components/input-group/input-group.js b/src/components/input-group/input-group.js
index 8f566bb7874..80f01f7a645 100644
--- a/src/components/input-group/input-group.js
+++ b/src/components/input-group/input-group.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { htmlOrText } from '../../utils/html'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
diff --git a/src/components/jumbotron/jumbotron.js b/src/components/jumbotron/jumbotron.js
index bcfc81bffb5..3e39620ed41 100644
--- a/src/components/jumbotron/jumbotron.js
+++ b/src/components/jumbotron/jumbotron.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { stripTags } from '../../utils/html'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
diff --git a/src/components/layout/col.js b/src/components/layout/col.js
index c10b1de2beb..f1bbdb2713d 100644
--- a/src/components/layout/col.js
+++ b/src/components/layout/col.js
@@ -1,4 +1,3 @@
-import { mergeData } from 'vue-functional-data-merge'
 import identity from '../../utils/identity'
 import memoize from '../../utils/memoize'
 import suffixPropName from '../../utils/suffix-prop-name'
@@ -7,6 +6,7 @@ import { getBreakpointsUpCached } from '../../utils/config'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { assign, create, keys } from '../../utils/object'
 import { lowerCase } from '../../utils/string'
+import { mergeData } from '../../utils/vue'
 
 const RX_COL_CLASS = /^col-/
 
@@ -113,7 +113,7 @@ const generateProps = () => {
   }
 }
 
-// We do not use Vue.extend here as that would evaluate the props
+// We do not use `Vue.extend()` here as that would evaluate the props
 // immediately, which we do not want to happen
 // @vue/component
 export const BCol = {
diff --git a/src/components/layout/container.js b/src/components/layout/container.js
index db57f34cfd6..74f1f7a20b4 100644
--- a/src/components/layout/container.js
+++ b/src/components/layout/container.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 
 export const props = {
   tag: {
diff --git a/src/components/layout/form-row.js b/src/components/layout/form-row.js
index 8ff2fb6dd4a..59ef4e3c472 100644
--- a/src/components/layout/form-row.js
+++ b/src/components/layout/form-row.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 
 export const props = {
   tag: {
diff --git a/src/components/layout/row.js b/src/components/layout/row.js
index f1e027627b7..1f8cd419948 100644
--- a/src/components/layout/row.js
+++ b/src/components/layout/row.js
@@ -1,4 +1,3 @@
-import { mergeData } from 'vue-functional-data-merge'
 import identity from '../../utils/identity'
 import memoize from '../../utils/memoize'
 import suffixPropName from '../../utils/suffix-prop-name'
@@ -6,6 +5,7 @@ import { arrayIncludes, concat } from '../../utils/array'
 import { getBreakpointsUpCached } from '../../utils/config'
 import { create, keys } from '../../utils/object'
 import { lowerCase, toString, trim } from '../../utils/string'
+import { mergeData } from '../../utils/vue'
 
 const COMMON_ALIGNMENT = ['start', 'end', 'center']
 
diff --git a/src/components/list-group/list-group-item.js b/src/components/list-group/list-group-item.js
index 3571fbea452..292b54dfabe 100644
--- a/src/components/list-group/list-group-item.js
+++ b/src/components/list-group/list-group-item.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { arrayIncludes } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js
index 113a4dfc43f..a71e34d4c44 100644
--- a/src/components/list-group/list-group.js
+++ b/src/components/list-group/list-group.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { isString } from '../../utils/inspect'
 
 export const props = {
diff --git a/src/components/media/media-body.js b/src/components/media/media-body.js
index 96cf9a77e06..ef4d893a0a7 100644
--- a/src/components/media/media-body.js
+++ b/src/components/media/media-body.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 
 export const props = {
   tag: {
diff --git a/src/components/media/media.js b/src/components/media/media.js
index b5770a8d106..571c172ff53 100644
--- a/src/components/media/media.js
+++ b/src/components/media/media.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { normalizeSlot } from '../../utils/normalize-slot'
 import { BMediaBody } from './media-body'
 import { BMediaAside } from './media-aside'
diff --git a/src/components/nav/nav-form.js b/src/components/nav/nav-form.js
index 107f080f900..26106bee203 100644
--- a/src/components/nav/nav-form.js
+++ b/src/components/nav/nav-form.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { omit } from '../../utils/object'
 import { BForm, props as BFormProps } from '../form/form'
 
diff --git a/src/components/nav/nav-item.js b/src/components/nav/nav-item.js
index 64b9bce9311..fe9b7516e66 100644
--- a/src/components/nav/nav-item.js
+++ b/src/components/nav/nav-item.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { BLink, propsFactory as linkPropsFactory } from '../link/link'
 
 export const props = linkPropsFactory()
diff --git a/src/components/nav/nav-text.js b/src/components/nav/nav-text.js
index 696243559f9..3482326da1c 100644
--- a/src/components/nav/nav-text.js
+++ b/src/components/nav/nav-text.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 
 export const props = {}
 
diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js
index 52e31a3f242..bdd25082c3c 100644
--- a/src/components/nav/nav.js
+++ b/src/components/nav/nav.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 
 // -- Constants --
 
diff --git a/src/components/navbar/navbar-brand.js b/src/components/navbar/navbar-brand.js
index d1b71461b80..82161ec314e 100644
--- a/src/components/navbar/navbar-brand.js
+++ b/src/components/navbar/navbar-brand.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { BLink, propsFactory } from '../link/link'
 
diff --git a/src/components/navbar/navbar-nav.js b/src/components/navbar/navbar-nav.js
index ad325d74b52..aad2313dfa4 100644
--- a/src/components/navbar/navbar-nav.js
+++ b/src/components/navbar/navbar-nav.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import pluckProps from '../../utils/pluck-props'
 import { props as BNavProps } from '../nav/nav'
 
diff --git a/src/components/spinner/spinner.js b/src/components/spinner/spinner.js
index c5df728abd4..5f7f0560a43 100644
--- a/src/components/spinner/spinner.js
+++ b/src/components/spinner/spinner.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { normalizeSlot } from '../../utils/normalize-slot'
 
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 0d0ce5c8e1c..c7da566418a 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -25,7 +25,7 @@ const navProps = omit(BNavProps, ['tabs', 'isNavBar', 'cardHeader'])
 // Filter function to filter out disabled tabs
 const notDisabled = tab => !tab.disabled
 
-// --- Helper components ---
+// --- Utility methods ---
 
 // @vue/component
 const BTabButtonHelper = /*#__PURE__*/ Vue.extend({
diff --git a/src/components/time/time.js b/src/components/time/time.js
index ed1d29045d0..75b53af3ba6 100644
--- a/src/components/time/time.js
+++ b/src/components/time/time.js
@@ -25,7 +25,7 @@ const NUMERIC = 'numeric'
 // Time string RegExpr (optional seconds)
 const RE_TIME = /^([0-1]?[0-9]|2[0-3]):[0-5]?[0-9](:[0-5]?[0-9])?$/
 
-// --- Helpers ---
+// --- Utility methods ---
 
 // Fallback to BFormSpinbutton prop if no value found
 const getConfigFallback = prop => {
diff --git a/src/constants/aria.js b/src/constants/aria.js
new file mode 100644
index 00000000000..af5bb6cfec7
--- /dev/null
+++ b/src/constants/aria.js
@@ -0,0 +1,10 @@
+// ARIA values
+export const ARIA_VALUE_TRUE = 'true'
+export const ARIA_VALUE_FALSE = 'false'
+export const ARIA_VALUE_OFF = 'off'
+
+// `aria-live`
+export const ARIA_LIVE_POLITE = 'polite'
+
+// `aria-orientation`
+export const ARIA_ORIENTATION_HORIZONTAL = 'horizontal'
diff --git a/src/constants/class-names.js b/src/constants/class-names.js
index 44d9a62e0b4..98e375589ad 100644
--- a/src/constants/class-names.js
+++ b/src/constants/class-names.js
@@ -19,15 +19,36 @@ export const CLASS_NAME_CARD_TITLE = 'card-title'
 export const CLASS_NAME_CAROUSEL = 'carousel'
 export const CLASS_NAME_CAROUSEL_ITEM = 'carousel-item'
 export const CLASS_NAME_COLLAPSE = 'collapse'
+export const CLASS_NAME_DROPDOWN = 'dropdown'
+export const CLASS_NAME_DROPDOWN_DIVIDER = 'dropdown-divider'
+export const CLASS_NAME_DROPDOWN_HEADER = 'dropdown-header'
 export const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
+export const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu'
+export const CLASS_NAME_DROPDOWN_TOGGLE = 'dropdown-toggle'
+export const CLASS_NAME_DROPLEFT = 'dropleft'
+export const CLASS_NAME_DROPRIGHT = 'dropright'
+export const CLASS_NAME_DROPUP = 'dropup'
+export const CLASS_NAME_EMBED = 'embed-responsive'
+export const CLASS_NAME_FORM = 'form'
 export const CLASS_NAME_FORM_CONTROL = 'form-control'
+export const CLASS_NAME_FORM_INVALID_FEEDBACK = 'invalid-feedback'
+export const CLASS_NAME_FORM_INVALID_TOOLTIP = 'invalid-tooltip'
+export const CLASS_NAME_FORM_TEXT = 'form-text'
+export const CLASS_NAME_FORM_VALID_FEEDBACK = 'valid-feedback'
+export const CLASS_NAME_FORM_VALID_TOOLTIP = 'valid-tooltip'
 export const CLASS_NAME_NAVBAR = 'navbar'
 export const CLASS_NAME_NAV_LINK = 'nav-link'
 
 // BootstrapVue components
 export const CLASS_NAME_BV_ASPECT = 'b-aspect'
 export const CLASS_NAME_BV_AVATAR = 'b-avatar'
+export const CLASS_NAME_BV_AVATAR_GROUP = 'b-avatar-group'
 export const CLASS_NAME_BV_CALENDAR = 'b-calendar'
+export const CLASS_NAME_BV_DROPDOWN = 'b-dropdown'
+export const CLASS_NAME_BV_DROPDOWN_FORM = 'b-dropdown-form'
+export const CLASS_NAME_BV_DROPDOWN_TEXT = 'b-dropdown-text'
+export const CLASS_NAME_BV_FORM_DATE = 'b-form-date'
+export const CLASS_NAME_BV_FORM_DATEPICKER = 'b-form-datepicker'
 
 // Utility classes
 export const CLASS_NAME_ACTIVE = 'active'
@@ -45,17 +66,24 @@ export const CLASS_NAME_FADE = 'fade'
 export const CLASS_NAME_FLEX_FILL = 'flex-fill'
 export const CLASS_NAME_FLEX_ROW = 'flex-row'
 export const CLASS_NAME_FLEX_ROW_REVERSE = 'flex-row-reverse'
+export const CLASS_NAME_FLEX_WRAP = 'flex-wrap'
 export const CLASS_NAME_FOCUS = 'focus'
 export const CLASS_NAME_FONT_WEIGHT_BOLD = 'font-weight-bold'
 export const CLASS_NAME_HEIGHT_AUTO = 'h-auto'
+export const CLASS_NAME_JUSTIFY_CONTENT_BETWEEN = 'justify-content-between'
+export const CLASS_NAME_JUSTIFY_CONTENT_END = 'justify-content-end'
+export const CLASS_NAME_LIST_UNSTYLED = 'list-unstyled'
 export const CLASS_NAME_MARGIN_BOTTOM_2 = 'mb-2'
+export const CLASS_NAME_NOT_ROUNDED = 'rounded-0'
 export const CLASS_NAME_NO_BORDER = 'border-0'
 export const CLASS_NAME_NO_GUTTERS = 'no-gutters'
 export const CLASS_NAME_NO_PADDING = 'p-0'
 export const CLASS_NAME_POINTER_EVENT = 'pointer-event'
+export const CLASS_NAME_POSITION_STATIC = 'position-static'
 export const CLASS_NAME_READONLY = 'readonly'
 export const CLASS_NAME_ROUNDED = 'rounded'
 export const CLASS_NAME_ROUNDED_CIRCLE = 'rounded-circle'
+export const CLASS_NAME_ROUNDED_PILL = 'rounded-pill'
 export const CLASS_NAME_ROW = 'row'
 export const CLASS_NAME_SHOW = 'show'
 export const CLASS_NAME_SLIDE = 'slide'
@@ -66,3 +94,5 @@ export const CLASS_NAME_TEXT_CENTER = 'text-center'
 export const CLASS_NAME_TEXT_MUTED = 'text-muted'
 export const CLASS_NAME_TEXT_NOWRAP = 'text-nowrap'
 export const CLASS_NAME_TEXT_TRUNCATE = 'text-truncate'
+export const CLASS_NAME_WAS_VALIDATED = 'was-validated'
+export const CLASS_NAME_WIDTH_FULL = 'w-100'
diff --git a/src/constants/components.js b/src/constants/components.js
index f206b621b47..76b91dfa670 100644
--- a/src/constants/components.js
+++ b/src/constants/components.js
@@ -1,6 +1,7 @@
 export const NAME_ALERT = 'BAlert'
 export const NAME_ASPECT = 'BAspect'
 export const NAME_AVATAR = 'BAvatar'
+export const NAME_AVATAR_GROUP = 'BAvatarGroup'
 export const NAME_BADGE = 'BBadge'
 export const NAME_BREADCRUMB = 'BBreadcrumb'
 export const NAME_BREADCRUMB_ITEM = 'BBreadcrumbItem'
@@ -23,3 +24,22 @@ export const NAME_CARD_TITLE = 'BCardTitle'
 export const NAME_CAROUSEL = 'BCarousel'
 export const NAME_CAROUSEL_SLIDE = 'BCarouselSlide'
 export const NAME_COLLAPSE = 'BCollapse'
+export const NAME_DROPDOWN = 'BDropdown'
+export const NAME_DROPDOWN_DIVIDER = 'BDropdownDivider'
+export const NAME_DROPDOWN_FORM = 'BDropdownForm'
+export const NAME_DROPDOWN_GROUP = 'BDropdownGroup'
+export const NAME_DROPDOWN_HEADER = 'BDropdownHeader'
+export const NAME_DROPDOWN_ITEM = 'BDropdownItem'
+export const NAME_DROPDOWN_ITEM_BUTTON = 'BDropdownItemButton'
+export const NAME_DROPDOWN_TEXT = 'BDropdownText'
+export const NAME_EMBED = 'BEmbed'
+export const NAME_FORM = 'BForm'
+export const NAME_FORM_CHECKBOX_GROUP = 'BFormCheckboxGroup'
+export const NAME_FORM_DATALIST = 'BFormDatalist'
+export const NAME_FORM_GROUP = 'BFormCheckbox'
+export const NAME_FORM_INVALID_FEEDBACK = 'BFormInvalidFeedback'
+export const NAME_FORM_TEXT = 'BFormText'
+export const NAME_FORM_VALID_FEEDBACK = 'BFormValidFeedback'
+export const NAME_FORM_DATEPICKER = 'BFormDatepicker'
+export const NAME_IMG = 'BImg'
+export const NAME_IMG_LAZY = 'BImgLazy'
diff --git a/src/constants/date.js b/src/constants/date.js
new file mode 100644
index 00000000000..ba556a08d96
--- /dev/null
+++ b/src/constants/date.js
@@ -0,0 +1,7 @@
+export const CALENDAR_GREGORY = 'gregory'
+export const CALENDAR_LONG = 'long'
+export const CALENDAR_NARROW = 'narrow'
+export const CALENDAR_SHORT = 'short'
+
+export const DATE_FORMAT_2_DIGIT = '2-digit'
+export const DATE_FORMAT_NUMERIC = 'numeric'
diff --git a/src/constants/popper.js b/src/constants/popper.js
new file mode 100644
index 00000000000..070e264733b
--- /dev/null
+++ b/src/constants/popper.js
@@ -0,0 +1,8 @@
+export const PLACEMENT_TOP_START = 'top-start'
+export const PLACEMENT_TOP_END = 'top-end'
+export const PLACEMENT_BOTTOM_START = 'bottom-start'
+export const PLACEMENT_BOTTOM_END = 'bottom-end'
+export const PLACEMENT_RIGHT_START = 'right-start'
+export const PLACEMENT_RIGHT_END = 'right-end'
+export const PLACEMENT_LEFT_START = 'left-start'
+export const PLACEMENT_LEFT_END = 'left-end'
diff --git a/src/constants/roles.js b/src/constants/roles.js
new file mode 100644
index 00000000000..dd913d08d2b
--- /dev/null
+++ b/src/constants/roles.js
@@ -0,0 +1,16 @@
+export const ROLE_ALERT = 'alert'
+export const ROLE_APPLICATION = 'application'
+export const ROLE_BUTTON = 'button'
+export const ROLE_DIALOG = 'dialog'
+export const ROLE_GROUP = 'group'
+export const ROLE_HEADING = 'heading'
+export const ROLE_LIST = 'list'
+export const ROLE_LISTITEM = 'listitem'
+export const ROLE_MENU = 'menu'
+export const ROLE_MENUITEM = 'menuitem'
+export const ROLE_PRESENTATION = 'presentation'
+export const ROLE_REGION = 'region'
+export const ROLE_SEPARATOR = 'separator'
+export const ROLE_SLIDER = 'slider'
+export const ROLE_STATUS = 'status'
+export const ROLE_TOOLBAR = 'toolbar'
diff --git a/src/icons/helpers/icon-base.js b/src/icons/helpers/icon-base.js
index 1a87fe13643..6a2ee027f66 100644
--- a/src/icons/helpers/icon-base.js
+++ b/src/icons/helpers/icon-base.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import identity from '../../utils/identity'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { mathMax } from '../../utils/math'
diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js
index dd5c25985f2..5654c360502 100644
--- a/src/icons/helpers/make-icon.js
+++ b/src/icons/helpers/make-icon.js
@@ -1,5 +1,4 @@
-import Vue from '../../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../../utils/vue'
 import { kebabCase, pascalCase, trim } from '../../utils/string'
 import { commonIconProps, BVIconBase } from './icon-base'
 
diff --git a/src/icons/icon.js b/src/icons/icon.js
index 5f5c34947a3..be49a93ac6a 100644
--- a/src/icons/icon.js
+++ b/src/icons/icon.js
@@ -1,5 +1,4 @@
-import Vue from '../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../utils/vue'
 import { pascalCase, trim } from '../utils/string'
 import { BIconBlank } from './icons'
 import { commonIconProps } from './helpers/icon-base'
diff --git a/src/icons/iconstack.js b/src/icons/iconstack.js
index b2b79acaa29..5dca23d87f4 100644
--- a/src/icons/iconstack.js
+++ b/src/icons/iconstack.js
@@ -1,5 +1,4 @@
-import Vue from '../utils/vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from '../utils/vue'
 import { commonIconProps, BVIconBase } from './helpers/icon-base'
 
 // @vue/component
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
index 20ba089fb34..628e24c8393 100644
--- a/src/mixins/dropdown.js
+++ b/src/mixins/dropdown.js
@@ -1,5 +1,23 @@
 import Popper from 'popper.js'
+import {
+  CLASS_NAME_DISABLED,
+  CLASS_NAME_DROPDOWN,
+  CLASS_NAME_BV_DROPDOWN_FORM,
+  CLASS_NAME_DROPDOWN_ITEM,
+  CLASS_NAME_DROPLEFT,
+  CLASS_NAME_DROPRIGHT,
+  CLASS_NAME_DROPUP
+} from '../constants/class-names'
+import { NAME_DROPDOWN } from '../constants/components'
 import { DOWN, ENTER, ESC, SPACE, UP } from '../constants/key-codes'
+import {
+  PLACEMENT_TOP_START,
+  PLACEMENT_TOP_END,
+  PLACEMENT_BOTTOM_START,
+  PLACEMENT_BOTTOM_END,
+  PLACEMENT_RIGHT_START,
+  PLACEMENT_LEFT_START
+} from '../constants/popper'
 import { BvEvent } from '../utils/bv-event.class'
 import { closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
 import { isNull } from '../utils/inspect'
@@ -9,42 +27,25 @@ import clickOutMixin from './click-out'
 import focusInMixin from './focus-in'
 import idMixin from './id'
 
-// Return an array of visible items
-const filterVisibles = els => (els || []).filter(isVisible)
+// --- Constants ---
 
-// Root dropdown event names
-const ROOT_DROPDOWN_PREFIX = 'bv::dropdown::'
-const ROOT_DROPDOWN_SHOWN = `${ROOT_DROPDOWN_PREFIX}shown`
-const ROOT_DROPDOWN_HIDDEN = `${ROOT_DROPDOWN_PREFIX}hidden`
+// Root event names
+const ROOT_EVENT_PREFIX = 'bv::dropdown::'
+const ROOT_EVENT_SHOWN = `${ROOT_EVENT_PREFIX}shown`
+const ROOT_EVENT_HIDDEN = `${ROOT_EVENT_PREFIX}hidden`
 
-// Dropdown item CSS selectors
-const Selector = {
-  FORM_CHILD: '.dropdown form',
-  ITEM_SELECTOR: ['.dropdown-item', '.b-dropdown-form']
-    .map(selector => `${selector}:not(.disabled):not([disabled])`)
-    .join(', ')
-}
+// CSS selectors
+const SELECTOR_FORM_CHILD = `.${CLASS_NAME_DROPDOWN} form`
+const SELECTOR_ITEM = [`.${CLASS_NAME_DROPDOWN_ITEM}`, `.${CLASS_NAME_BV_DROPDOWN_FORM}`]
+  .map(selector => `${selector}:not(.${CLASS_NAME_DISABLED}):not([disabled])`)
+  .join(', ')
 
-// Popper attachment positions
-const AttachmentMap = {
-  // Dropup left align
-  TOP: 'top-start',
-  // Dropup right align
-  TOPEND: 'top-end',
-  // Dropdown left align
-  BOTTOM: 'bottom-start',
-  // Dropdown right align
-  BOTTOMEND: 'bottom-end',
-  // Dropright left align
-  RIGHT: 'right-start',
-  // Dropright right align
-  RIGHTEND: 'right-end',
-  // Dropleft left align
-  LEFT: 'left-start',
-  // Dropleft right align
-  LEFTEND: 'left-end'
-}
+// --- Utility methods ---
 
+// Return an array of visible items
+const filterVisibles = els => (els || []).filter(isVisible)
+
+// --- Props ---
 export const commonProps = {
   dropup: {
     // place on top if possible
@@ -98,11 +99,11 @@ export default {
     bvNavbar: { default: null }
   },
   props: {
+    ...commonProps,
     disabled: {
       type: Boolean,
       default: false
-    },
-    ...commonProps
+    }
   },
   data() {
     return {
@@ -120,11 +121,11 @@ export default {
     },
     directionClass() {
       if (this.dropup) {
-        return 'dropup'
+        return CLASS_NAME_DROPUP
       } else if (this.dropright) {
-        return 'dropright'
+        return CLASS_NAME_DROPRIGHT
       } else if (this.dropleft) {
-        return 'dropleft'
+        return CLASS_NAME_DROPLEFT
       }
       return ''
     }
@@ -189,7 +190,7 @@ export default {
     emitEvent(bvEvt) {
       const { type } = bvEvt
       this.$emit(type, bvEvt)
-      this.$root.$emit(`${ROOT_DROPDOWN_PREFIX}${type}`, bvEvt)
+      this.$root.$emit(`${ROOT_EVENT_PREFIX}${type}`, bvEvt)
     },
     showMenu() {
       if (this.disabled) {
@@ -201,7 +202,7 @@ export default {
       if (!this.inNavbar) {
         if (typeof Popper === 'undefined') {
           /* istanbul ignore next */
-          warn('Popper.js not found. Falling back to CSS positioning', 'BDropdown')
+          warn('Popper.js not found. Falling back to CSS positioning', NAME_DROPDOWN)
         } else {
           // For dropup with alignment we use the parent element as popper container
           let el = (this.dropup && this.right) || this.split ? this.$el : this.$refs.toggle
@@ -213,7 +214,7 @@ export default {
       }
 
       // Ensure other menus are closed
-      this.$root.$emit(ROOT_DROPDOWN_SHOWN, this)
+      this.$root.$emit(ROOT_EVENT_SHOWN, this)
 
       // Enable listeners
       this.whileOpenListen(true)
@@ -228,7 +229,7 @@ export default {
     },
     hideMenu() {
       this.whileOpenListen(false)
-      this.$root.$emit(ROOT_DROPDOWN_HIDDEN, this)
+      this.$root.$emit(ROOT_EVENT_HIDDEN, this)
       this.$emit('hidden')
       this.destroyPopper()
     },
@@ -251,15 +252,15 @@ export default {
       } catch {}
     },
     getPopperConfig() {
-      let placement = AttachmentMap.BOTTOM
+      let placement = PLACEMENT_BOTTOM_START
       if (this.dropup) {
-        placement = this.right ? AttachmentMap.TOPEND : AttachmentMap.TOP
+        placement = this.right ? PLACEMENT_TOP_END : PLACEMENT_TOP_START
       } else if (this.dropright) {
-        placement = AttachmentMap.RIGHT
+        placement = PLACEMENT_RIGHT_START
       } else if (this.dropleft) {
-        placement = AttachmentMap.LEFT
+        placement = PLACEMENT_LEFT_START
       } else if (this.right) {
-        placement = AttachmentMap.BOTTOMEND
+        placement = PLACEMENT_BOTTOM_END
       }
       const popperConfig = {
         placement,
@@ -281,7 +282,7 @@ export default {
       this.listenForFocusIn = isOpen
       // Hide the dropdown when another dropdown is opened
       const method = isOpen ? '$on' : '$off'
-      this.$root[method](ROOT_DROPDOWN_SHOWN, this.rootCloseListener)
+      this.$root[method](ROOT_EVENT_SHOWN, this.rootCloseListener)
     },
     rootCloseListener(vm) {
       if (vm !== this) {
@@ -403,7 +404,7 @@ export default {
     focusNext(evt, up) {
       // Ignore key up/down on form elements
       const { target } = evt
-      if (!this.visible || (evt && closest(Selector.FORM_CHILD, target))) {
+      if (!this.visible || (evt && closest(SELECTOR_FORM_CHILD, target))) {
         /* istanbul ignore next: should never happen */
         return
       }
@@ -436,7 +437,7 @@ export default {
     },
     getItems() {
       // Get all items
-      return filterVisibles(selectAll(Selector.ITEM_SELECTOR, this.$refs.menu))
+      return filterVisibles(selectAll(SELECTOR_ITEM, this.$refs.menu))
     },
     focusMenu() {
       try {
diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js
index 32d386e8084..746592523b9 100644
--- a/src/utils/bv-collapse.js
+++ b/src/utils/bv-collapse.js
@@ -10,8 +10,7 @@ import {
   CLASS_NAME_COLLAPSING,
   CLASS_NAME_SHOW
 } from '../constants/class-names'
-import Vue from './vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from './vue'
 import { getBCR, reflow, requestAF } from './dom'
 
 // --- Utility methods ---
diff --git a/src/utils/bv-transition.js b/src/utils/bv-transition.js
index e748e0c9ab9..8a42c158487 100644
--- a/src/utils/bv-transition.js
+++ b/src/utils/bv-transition.js
@@ -4,8 +4,7 @@
 // the transition has finished the enter transition
 // (show and fade classes are only applied during transition)
 
-import Vue from './vue'
-import { mergeData } from 'vue-functional-data-merge'
+import Vue, { mergeData } from './vue'
 import { isPlainObject } from './inspect'
 
 const NO_FADE_PROPS = {
diff --git a/src/utils/config-defaults.js b/src/utils/config-defaults.js
index 28c313a7ea4..aa8c9adb317 100644
--- a/src/utils/config-defaults.js
+++ b/src/utils/config-defaults.js
@@ -6,7 +6,9 @@ import {
   NAME_BUTTON_CLOSE,
   NAME_CALENDAR,
   NAME_CARD_SUB_TITLE,
-  NAME_CAROUSEL
+  NAME_CAROUSEL,
+  NAME_DROPDOWN,
+  NAME_FORM_DATEPICKER
 } from '../constants/components'
 import { deepFreeze } from './object'
 
@@ -104,13 +106,13 @@ export default deepFreeze({
     labelGotoSlide: 'Goto Slide',
     labelIndicators: 'Select a slide to display'
   },
-  BDropdown: {
+  [NAME_DROPDOWN]: {
     toggleText: 'Toggle Dropdown',
     size: undefined,
     variant: 'secondary',
     splitVariant: undefined
   },
-  BFormDatepicker: {
+  [NAME_FORM_DATEPICKER]: {
     // BFormDatepicker will choose from BCalendar first if not provided here
     labelPrevDecade: undefined,
     labelPrevYear: undefined,
diff --git a/src/utils/vue.js b/src/utils/vue.js
index 12fef998da0..0a787226145 100644
--- a/src/utils/vue.js
+++ b/src/utils/vue.js
@@ -5,5 +5,8 @@
 //   Conditionally import Vue if no global Vue
 //
 import Vue from 'vue'
+import { mergeData } from 'vue-functional-data-merge'
 
 export default Vue
+
+export { mergeData }

From 8418f3c623807f3d1c7878f4250ffe98ec540040 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 11 May 2020 01:49:20 +0200
Subject: [PATCH 42/49] Revert "Update test.yml"

This reverts commit b36a4796c5c6fafa7dbbdd006f5d309685abe124.
---
 .github/workflows/test.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index f16a470e4a7..48d75068860 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -207,3 +207,4 @@ jobs:
         run: yarn run bundlewatch
         env:
           BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
+          CI_BRANCH_BASE: "${{ github.base_ref }}"

From fecb22582596d40c4f05033551269002e356c601 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 11 May 2020 01:52:29 +0200
Subject: [PATCH 43/49] Update components.js

---
 src/constants/components.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/constants/components.js b/src/constants/components.js
index 76b91dfa670..9e4ab979455 100644
--- a/src/constants/components.js
+++ b/src/constants/components.js
@@ -34,12 +34,12 @@ export const NAME_DROPDOWN_ITEM_BUTTON = 'BDropdownItemButton'
 export const NAME_DROPDOWN_TEXT = 'BDropdownText'
 export const NAME_EMBED = 'BEmbed'
 export const NAME_FORM = 'BForm'
+export const NAME_FORM_CHECKBOX = 'BFormCheckbox'
 export const NAME_FORM_CHECKBOX_GROUP = 'BFormCheckboxGroup'
 export const NAME_FORM_DATALIST = 'BFormDatalist'
-export const NAME_FORM_GROUP = 'BFormCheckbox'
+export const NAME_FORM_DATEPICKER = 'BFormDatepicker'
 export const NAME_FORM_INVALID_FEEDBACK = 'BFormInvalidFeedback'
 export const NAME_FORM_TEXT = 'BFormText'
 export const NAME_FORM_VALID_FEEDBACK = 'BFormValidFeedback'
-export const NAME_FORM_DATEPICKER = 'BFormDatepicker'
 export const NAME_IMG = 'BImg'
 export const NAME_IMG_LAZY = 'BImgLazy'

From d6bcdae53ed789793cbce5e9c06ae9a546a7aa7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 15 May 2020 10:20:00 +0200
Subject: [PATCH 44/49] Merge remote-tracking branch 'origin/dev' into
 feat-code-size-improvements


From 0f090a09440ca7326aefdf9c9f4aa38d8209ff70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 15 May 2020 11:13:52 +0200
Subject: [PATCH 45/49] Add `slot-name` constants

---
 src/components/alert/alert.js                 |  3 +-
 src/components/aspect/aspect.js               | 12 ++++----
 src/components/avatar/avatar-group.js         |  3 +-
 src/components/avatar/avatar.js               |  6 ++--
 .../button-toolbar/button-toolbar.js          |  3 +-
 src/components/calendar/calendar.js           |  3 +-
 src/components/card/card.js                   | 11 +++----
 src/components/carousel/carousel-slide.js     | 10 ++++---
 src/components/carousel/carousel.js           |  3 +-
 src/components/collapse/collapse.js           |  9 ++++--
 src/components/dropdown/dropdown-group.js     |  7 +++--
 .../dropdown/dropdown-item-button.js          |  3 +-
 src/components/dropdown/dropdown-item.js      |  3 +-
 src/components/dropdown/dropdown.js           |  7 +++--
 .../form-datepicker/form-datepicker.js        |  3 +-
 src/components/form-group/form-group.js       |  9 ++++--
 .../form-select/form-select-option-group.js   |  5 ++--
 src/components/form-select/form-select.js     |  3 +-
 src/components/form-tags/form-tag.js          |  3 +-
 src/components/form-tags/form-tags.js         |  3 +-
 .../form-timepicker/form-timepicker.js        |  4 ++-
 src/components/form/form-datalist.js          |  6 +++-
 src/components/input-group/input-group.js     |  3 +-
 src/components/jumbotron/jumbotron.js         | 11 +++++--
 src/components/link/link.js                   |  3 +-
 src/components/media/media.js                 | 20 ++++++++-----
 src/components/modal/helpers/bv-modal.js      |  5 ++--
 src/components/modal/modal.js                 |  3 +-
 src/components/nav/nav-item-dropdown.js       |  6 ++--
 src/components/navbar/navbar-toggle.js        |  3 +-
 src/components/navbar/navbar.js               |  3 +-
 src/components/overlay/overlay.js             |  3 +-
 src/components/progress/progress-bar.js       |  5 ++--
 src/components/progress/progress.js           | 10 ++++---
 src/components/sidebar/sidebar.js             | 10 ++++---
 src/components/spinner/spinner.js             |  3 +-
 .../table/helpers/mixin-table-renderer.js     |  3 +-
 src/components/table/tbody.js                 |  3 +-
 src/components/table/td.js                    |  6 ++--
 src/components/table/tfoot.js                 |  3 +-
 src/components/table/thead.js                 |  3 +-
 src/components/table/tr.js                    |  3 +-
 src/components/tabs/tab.js                    |  5 ++--
 src/components/tabs/tabs.js                   | 23 ++++++++-------
 src/components/time/time.js                   |  3 +-
 src/components/toast/helpers/bv-toast.js      |  3 +-
 src/components/toast/toast.js                 |  3 +-
 src/constants/regex.js                        |  4 +++
 src/constants/slot-names.js                   |  7 +++++
 src/mixins/form-radio-check-group.js          |  3 +-
 src/mixins/form-radio-check.js                |  3 +-
 src/utils/bv-form-btn-label-control.js        | 14 +++++----
 src/utils/transporter.js                      | 29 ++++++++++---------
 53 files changed, 204 insertions(+), 121 deletions(-)
 create mode 100644 src/constants/slot-names.js

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index 3cf425e51bd..646e33fb6eb 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -2,6 +2,7 @@ import { ARIA_LIVE_POLITE } from '../../constants/aria'
 import { CLASS_NAME_ALERT } from '../../constants/class-names'
 import { NAME_ALERT } from '../../constants/components'
 import { ROLE_ALERT } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
@@ -165,7 +166,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
           },
           key: this._uid
         },
-        [$dismissBtn, this.normalizeSlot('default')]
+        [$dismissBtn, this.normalizeSlot(SLOT_NAME_DEFAULT)]
       )
     }
     return h(BVTransition, { props: { noFade: !this.fade } }, [$alert])
diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index 789ca58e165..19b2e0bcf08 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -1,15 +1,13 @@
 import { CLASS_NAME_BV_ASPECT } from '../../constants/class-names'
 import { NAME_ASPECT } from '../../constants/components'
+import { RX_ASPECT, RX_ASPECT_SEPARATOR } from '../../constants/regex'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { mathAbs } from '../../utils/math'
 import { toFloat } from '../../utils/number'
 import { suffixClass } from '../../utils/string'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 
-// --- Constants ---
-const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
-const RX_SEPARATOR = /[/:]/
-
 // --- Main component ---
 // @vue/component
 export const BAspect = /*#__PURE__*/ Vue.extend({
@@ -32,9 +30,9 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
       const aspect = this.aspect
       let ratio = 1
       if (RX_ASPECT.test(aspect)) {
-        // Width and/or Height can be a decimal value below `1`, so
+        // Width and/or height can be a decimal value below `1`, so
         // we only fallback to `1` if the value is `0` or `NaN`
-        const [width, height] = aspect.split(RX_SEPARATOR).map(v => toFloat(v) || 1)
+        const [width, height] = aspect.split(RX_ASPECT_SEPARATOR).map(v => toFloat(v) || 1)
         ratio = width / height
       } else {
         ratio = toFloat(aspect) || 1
@@ -55,7 +53,7 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
         class: ['flex-grow-1', 'w-100', 'mw-100'],
         style: { marginLeft: '-100%' }
       },
-      [this.normalizeSlot('default')]
+      [this.normalizeSlot(SLOT_NAME_DEFAULT)]
     )
     return h(
       this.tag,
diff --git a/src/components/avatar/avatar-group.js b/src/components/avatar/avatar-group.js
index eb71472df0c..7d9a6e63dd1 100644
--- a/src/components/avatar/avatar-group.js
+++ b/src/components/avatar/avatar-group.js
@@ -1,6 +1,7 @@
 import { CLASS_NAME_BV_AVATAR_GROUP } from '../../constants/class-names'
 import { NAME_AVATAR_GROUP } from '../../constants/components'
 import { ROLE_GROUP } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { mathMax, mathMin } from '../../utils/math'
 import { toFloat } from '../../utils/number'
@@ -65,7 +66,7 @@ export const BAvatarGroup = /*#__PURE__*/ Vue.extend({
         staticClass: suffixClass(CLASS_NAME_BV_AVATAR_GROUP, 'inner'),
         style: this.paddingStyle
       },
-      [this.normalizeSlot('default')]
+      [this.normalizeSlot(SLOT_NAME_DEFAULT)]
     )
 
     return h(
diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index 81bdaf36e46..3bbce18d541 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -6,6 +6,7 @@ import {
 } from '../../constants/class-names'
 import { NAME_AVATAR } from '../../constants/components'
 import { RX_NUMBER } from '../../constants/regex'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { isNumber, isString, isUndefinedOrNull } from '../../utils/inspect'
@@ -23,7 +24,6 @@ import { BIconPersonFill } from '../../icons/icons'
 // --- Constants ---
 
 const SLOT_BADGE = 'badge'
-const SLOT_DEFAULT = 'default'
 
 const FONT_SIZE_SCALE = 0.4
 const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7
@@ -216,10 +216,10 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
     const ariaLabel = this.ariaLabel || null
 
     let $content = null
-    if (this.hasNormalizedSlot(SLOT_DEFAULT)) {
+    if (this.hasNormalizedSlot(SLOT_NAME_DEFAULT)) {
       // Default slot overrides props
       $content = h('span', { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'custom') }, [
-        this.normalizeSlot(SLOT_DEFAULT)
+        this.normalizeSlot(SLOT_NAME_DEFAULT)
       ])
     } else if (src) {
       $content = h('img', {
diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js
index debf17b8eb1..37f9f91cf91 100644
--- a/src/components/button-toolbar/button-toolbar.js
+++ b/src/components/button-toolbar/button-toolbar.js
@@ -9,6 +9,7 @@ import {
 import { NAME_BUTTON_TOOLBAR } from '../../constants/components'
 import { DOWN, LEFT, RIGHT, UP } from '../../constants/key-codes'
 import { ROLE_TOOLBAR } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { attemptFocus, isVisible, selectAll } from '../../utils/dom'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -120,7 +121,7 @@ export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
             }
           : {}
       },
-      [this.normalizeSlot('default')]
+      [this.normalizeSlot(SLOT_NAME_DEFAULT)]
     )
   }
 })
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index ab6a99ee179..5e0a4be85b9 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -51,6 +51,7 @@ import {
   UP
 } from '../../constants/key-codes'
 import { ROLE_APPLICATION, ROLE_BUTTON, ROLE_GROUP, ROLE_STATUS } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -1220,7 +1221,7 @@ export const BCalendar = Vue.extend({
     )
 
     // Optional bottom slot
-    let $slot = this.normalizeSlot('default')
+    let $slot = this.normalizeSlot(SLOT_NAME_DEFAULT)
     $slot = $slot
       ? h('footer', { staticClass: suffixClass(CLASS_NAME_BV_CALENDAR, 'footer') }, $slot)
       : h()
diff --git a/src/components/card/card.js b/src/components/card/card.js
index f6f91f906cd..190b99f13b9 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -7,6 +7,7 @@ import {
   CLASS_NAME_TEXT
 } from '../../constants/class-names'
 import { NAME_CARD } from '../../constants/components'
+import { SLOT_NAME_DEFAULT, SLOT_NAME_FOOTER, SLOT_NAME_HEADER } from '../../constants/slot-names'
 import Vue, { mergeData } from '../../utils/vue'
 import { htmlOrText } from '../../utils/html'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
@@ -77,7 +78,7 @@ export const BCard = /*#__PURE__*/ Vue.extend({
     }
 
     let $header = h()
-    const hasHeaderSlot = hasNormalizedSlot('header', $scopedSlots, $slots)
+    const hasHeaderSlot = hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots)
     if (hasHeaderSlot || header || headerHtml) {
       $header = h(
         BCardHeader,
@@ -85,11 +86,11 @@ export const BCard = /*#__PURE__*/ Vue.extend({
           props: pluckProps(headerProps, props),
           domProps: hasHeaderSlot ? {} : htmlOrText(headerHtml, header)
         },
-        normalizeSlot('header', slotScope, $scopedSlots, $slots)
+        normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots)
       )
     }
 
-    let $content = normalizeSlot('default', slotScope, $scopedSlots, $slots)
+    let $content = normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
 
     // Wrap content in <card-body> when `noBody` prop set
     if (!props.noBody) {
@@ -97,7 +98,7 @@ export const BCard = /*#__PURE__*/ Vue.extend({
     }
 
     let $footer = h()
-    const hasFooterSlot = hasNormalizedSlot('footer', $scopedSlots, $slots)
+    const hasFooterSlot = hasNormalizedSlot(SLOT_NAME_FOOTER, $scopedSlots, $slots)
     if (hasFooterSlot || footer || footerHtml) {
       $footer = h(
         BCardFooter,
@@ -105,7 +106,7 @@ export const BCard = /*#__PURE__*/ Vue.extend({
           props: pluckProps(footerProps, props),
           domProps: hasHeaderSlot ? {} : htmlOrText(footerHtml, footer)
         },
-        normalizeSlot('footer', slotScope, $scopedSlots, $slots)
+        normalizeSlot(SLOT_NAME_FOOTER, slotScope, $scopedSlots, $slots)
       )
     }
 
diff --git a/src/components/carousel/carousel-slide.js b/src/components/carousel/carousel-slide.js
index 5a7e58ba284..c30829d7951 100644
--- a/src/components/carousel/carousel-slide.js
+++ b/src/components/carousel/carousel-slide.js
@@ -5,7 +5,9 @@ import {
 } from '../../constants/class-names'
 import { NAME_CAROUSEL_SLIDE } from '../../constants/components'
 import { ROLE_LISTITEM } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
+import identity from '../../utils/identity'
 import { hasTouchSupport } from '../../utils/env'
 import { htmlOrText } from '../../utils/html'
 import { pluckProps, unprefixPropName } from '../../utils/props'
@@ -135,17 +137,17 @@ export const BCarouselSlide = /*#__PURE__*/ Vue.extend({
       // Caption
       this.caption || this.captionHtml
         ? h(this.captionTag, { domProps: htmlOrText(this.captionHtml, this.caption) })
-        : false,
+        : null,
       // Text
       this.text || this.textHtml
         ? h(this.textTag, { domProps: htmlOrText(this.textHtml, this.text) })
-        : false,
+        : null,
       // Children
-      this.normalizeSlot('default') || false
+      this.normalizeSlot(SLOT_NAME_DEFAULT)
     ]
 
     let $content = h()
-    if ($contentChildren.some(Boolean)) {
+    if ($contentChildren.some(identity)) {
       $content = h(
         this.contentTag,
         {
diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js
index 0d45a1d8fb4..82ff18f0cbc 100644
--- a/src/components/carousel/carousel.js
+++ b/src/components/carousel/carousel.js
@@ -11,6 +11,7 @@ import { NAME_CAROUSEL } from '../../constants/components'
 import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import { ENTER, LEFT, RIGHT, SPACE } from '../../constants/key-codes'
 import { ROLE_BUTTON, ROLE_LIST, ROLE_REGION } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import noop from '../../utils/noop'
 import observeDom from '../../utils/observe-dom'
@@ -527,7 +528,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
           role: ROLE_LIST
         }
       },
-      [this.normalizeSlot('default')]
+      [this.normalizeSlot(SLOT_NAME_DEFAULT)]
     )
 
     // Prev and next controls
diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
index 17e44054132..c2b2251dfdc 100644
--- a/src/components/collapse/collapse.js
+++ b/src/components/collapse/collapse.js
@@ -7,6 +7,7 @@ import {
 } from '../../constants/class-names'
 import { NAME_COLLAPSE } from '../../constants/components'
 import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { BVCollapse } from '../../utils/bv-collapse'
 import { addClass, hasClass, removeClass, closest, matches, getCS } from '../../utils/dom'
@@ -238,7 +239,8 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
       visible: this.show,
       close: () => (this.show = false)
     }
-    const content = h(
+
+    const $content = h(
       this.tag,
       {
         class: this.classObject,
@@ -246,8 +248,9 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
         attrs: { id: this.safeId() },
         on: { click: this.clickHandler }
       },
-      [this.normalizeSlot('default', scope)]
+      [this.normalizeSlot(SLOT_NAME_DEFAULT, scope)]
     )
+
     return h(
       BVCollapse,
       {
@@ -259,7 +262,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
           afterLeave: this.onAfterLeave
         }
       },
-      [content]
+      [$content]
     )
   }
 })
diff --git a/src/components/dropdown/dropdown-group.js b/src/components/dropdown/dropdown-group.js
index 7cffe3ff49d..863af8c4c01 100644
--- a/src/components/dropdown/dropdown-group.js
+++ b/src/components/dropdown/dropdown-group.js
@@ -5,6 +5,7 @@ import {
 } from '../../constants/class-names'
 import { NAME_DROPDOWN_GROUP } from '../../constants/components'
 import { ROLE_GROUP, ROLE_HEADING, ROLE_PRESENTATION } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT, SLOT_NAME_HEADER } from '../../constants/slot-names'
 import Vue, { mergeData } from '../../utils/vue'
 import identity from '../../utils/identity'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
@@ -52,7 +53,7 @@ export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
 
     let headerId = null
     let $header = h()
-    if (hasNormalizedSlot('header', $scopedSlots, $slots) || props.header) {
+    if (hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots) || props.header) {
       headerId = props.id ? `_bv_${props.id}_group_dd_header` : null
       $header = h(
         props.headerTag,
@@ -67,7 +68,7 @@ export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
             role: ROLE_HEADING
           }
         },
-        normalizeSlot('header', slotScope, $scopedSlots, $slots) || props.header
+        normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots) || props.header
       )
     }
 
@@ -89,7 +90,7 @@ export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
             'aria-describedby': ariaDescribedBy || null
           }
         },
-        normalizeSlot('default', slotScope, $scopedSlots, $slots)
+        normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
       )
     ])
   }
diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js
index da78b4d5ef1..013954b93ab 100644
--- a/src/components/dropdown/dropdown-item-button.js
+++ b/src/components/dropdown/dropdown-item-button.js
@@ -1,6 +1,7 @@
 import { CLASS_NAME_DROPDOWN_ITEM, CLASS_NAME_TEXT } from '../../constants/class-names'
 import { NAME_DROPDOWN_ITEM_BUTTON } from '../../constants/components'
 import { ROLE_MENUITEM, ROLE_PRESENTATION } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import attrsMixin from '../../mixins/attrs'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -79,7 +80,7 @@ export const BDropdownItemButton = /*#__PURE__*/ Vue.extend({
           on: { click: this.onClick },
           ref: 'button'
         },
-        this.normalizeSlot('default')
+        this.normalizeSlot(SLOT_NAME_DEFAULT)
       )
     ])
   }
diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js
index 68f43f7f3f6..a1bdd10f38c 100644
--- a/src/components/dropdown/dropdown-item.js
+++ b/src/components/dropdown/dropdown-item.js
@@ -1,6 +1,7 @@
 import { CLASS_NAME_DROPDOWN_ITEM, CLASS_NAME_TEXT } from '../../constants/class-names'
 import { NAME_DROPDOWN_ITEM } from '../../constants/components'
 import { ROLE_MENUITEM, ROLE_PRESENTATION } from '../../constants/roles'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { requestAF } from '../../utils/dom'
 import { omit } from '../../utils/object'
@@ -73,7 +74,7 @@ export const BDropdownItem = /*#__PURE__*/ Vue.extend({
           on: { click: this.onClick },
           ref: 'item'
         },
-        this.normalizeSlot('default')
+        this.normalizeSlot(SLOT_NAME_DEFAULT)
       )
     ])
   }
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
index 78e04ec0e4c..00cfebe2815 100644
--- a/src/components/dropdown/dropdown.js
+++ b/src/components/dropdown/dropdown.js
@@ -12,6 +12,7 @@ import {
 } from '../../constants/class-names'
 import { NAME_DROPDOWN } from '../../constants/components'
 import { ROLE_MENU } from '../../constants/roles'
+import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { arrayIncludes } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
@@ -156,8 +157,8 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
     const { visible, variant, size, block, disabled, split, role } = this
     const commonProps = { variant, size, block, disabled }
 
-    const $buttonContent = this.normalizeSlot('button-content')
-    const buttonContentProps = this.hasNormalizedSlot('button-content')
+    const $buttonContent = this.normalizeSlot(SLOT_NAME_BUTTON_CONTENT)
+    const buttonContentProps = this.hasNormalizedSlot(SLOT_NAME_BUTTON_CONTENT)
       ? {}
       : htmlOrText(this.html, this.text)
 
@@ -232,7 +233,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
         },
         ref: 'menu'
       },
-      !this.lazy || visible ? this.normalizeSlot('default', { hide: this.hide }) : [h()]
+      !this.lazy || visible ? this.normalizeSlot(SLOT_NAME_DEFAULT, { hide: this.hide }) : [h()]
     )
 
     return h(
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
index 907ccafcfc1..f455fea426e 100644
--- a/src/components/form-datepicker/form-datepicker.js
+++ b/src/components/form-datepicker/form-datepicker.js
@@ -17,6 +17,7 @@ import {
   CALENDAR_SHORT,
   DATE_FORMAT_NUMERIC
 } from '../../constants/date'
+import { SLOT_NAME_BUTTON_CONTENT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { arrayIncludes } from '../../utils/array'
 import { BVFormBtnLabelControl, dropdownProps } from '../../utils/bv-form-btn-label-control'
@@ -599,7 +600,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
           hidden: this.onHidden
         },
         scopedSlots: {
-          'button-content': $scopedSlots['button-content'] || this.defaultButtonFn
+          [SLOT_NAME_BUTTON_CONTENT]: $scopedSlots[SLOT_NAME_BUTTON_CONTENT] || this.defaultButtonFn
         }
       },
       [$calendar]
diff --git a/src/components/form-group/form-group.js b/src/components/form-group/form-group.js
index 0f20c8d1d4d..c53cefef66e 100644
--- a/src/components/form-group/form-group.js
+++ b/src/components/form-group/form-group.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT, SLOT_NAME_LABEL } from '../../constants/slot-names'
 import memoize from '../../utils/memoize'
 import { arrayIncludes } from '../../utils/array'
 import { getBreakpointsUpCached } from '../../utils/config'
@@ -99,7 +100,7 @@ const renderHelpText = (h, ctx) => {
 
 const renderLabel = (h, ctx) => {
   // Render label/legend inside b-col if necessary
-  const content = ctx.normalizeSlot('label') || ctx.label
+  const content = ctx.normalizeSlot(SLOT_NAME_LABEL) || ctx.label
   const labelFor = ctx.labelFor
   const isLegend = !labelFor
   const isHorizontal = ctx.isHorizontal
@@ -302,7 +303,9 @@ export const BFormGroup = {
       return keys(this.labelColProps).length > 0
     },
     labelId() {
-      return this.hasNormalizedSlot('label') || this.label ? this.safeId('_BV_label_') : null
+      return this.hasNormalizedSlot(SLOT_NAME_LABEL) || this.label
+        ? this.safeId('_BV_label_')
+        : null
     },
     descriptionId() {
       return this.hasNormalizedSlot('description') || this.description
@@ -422,7 +425,7 @@ export const BFormGroup = {
         }
       },
       [
-        this.normalizeSlot('default') || h(),
+        this.normalizeSlot(SLOT_NAME_DEFAULT) || h(),
         renderInvalidFeedback(h, this),
         renderValidFeedback(h, this),
         renderHelpText(h, this)
diff --git a/src/components/form-select/form-select-option-group.js b/src/components/form-select/form-select-option-group.js
index 6c3e0622fcc..b611b779791 100644
--- a/src/components/form-select/form-select-option-group.js
+++ b/src/components/form-select/form-select-option-group.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT, SLOT_NAME_FIRST } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { htmlOrText } from '../../utils/html'
 import formOptionsMixin from '../../mixins/form-options'
@@ -26,9 +27,9 @@ const BFormSelectOptionGroup = /*#__PURE__*/ Vue.extend({
     })
 
     return h('optgroup', { attrs: { label: this.label } }, [
-      this.normalizeSlot('first'),
+      this.normalizeSlot(SLOT_NAME_FIRST),
       $options,
-      this.normalizeSlot('default')
+      this.normalizeSlot(SLOT_NAME_DEFAULT)
     ])
   }
 })
diff --git a/src/components/form-select/form-select.js b/src/components/form-select/form-select.js
index e56f84ef4a2..519aa4fae65 100644
--- a/src/components/form-select/form-select.js
+++ b/src/components/form-select/form-select.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT, SLOT_NAME_FIRST } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { from as arrayFrom, isArray } from '../../utils/array'
 import { attemptBlur, attemptFocus } from '../../utils/dom'
@@ -135,7 +136,7 @@ export const BFormSelect = /*#__PURE__*/ Vue.extend({
         directives: [{ name: 'model', value }],
         ref: 'input'
       },
-      [this.normalizeSlot('first'), $options, this.normalizeSlot('default')]
+      [this.normalizeSlot(SLOT_NAME_FIRST), $options, this.normalizeSlot(SLOT_NAME_DEFAULT)]
     )
   }
 })
diff --git a/src/components/form-tags/form-tag.js b/src/components/form-tags/form-tag.js
index 262560aad9b..aa4949daae7 100644
--- a/src/components/form-tags/form-tag.js
+++ b/src/components/form-tags/form-tag.js
@@ -1,4 +1,5 @@
 import { DELETE } from '../../constants/key-codes'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import idMixin from '../../mixins/id'
@@ -70,7 +71,7 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
         staticClass: 'b-form-tag-content flex-grow-1 text-truncate',
         attrs: { id: tagLabelId }
       },
-      this.normalizeSlot('default') || this.title || [h()]
+      this.normalizeSlot(SLOT_NAME_DEFAULT) || this.title || [h()]
     )
     return h(
       BBadge,
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
index 351dc48c917..08a9782bb54 100644
--- a/src/components/form-tags/form-tags.js
+++ b/src/components/form-tags/form-tags.js
@@ -2,6 +2,7 @@
 // Based loosely on https://adamwathan.me/renderless-components-in-vuejs/
 import { BACKSPACE, DELETE, ENTER } from '../../constants/key-codes'
 import { RX_SPACES } from '../../constants/regex'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -716,7 +717,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     }
 
     // Generate the user interface
-    const $content = this.normalizeSlot('default', scope) || this.defaultRender(scope)
+    const $content = this.normalizeSlot(SLOT_NAME_DEFAULT, scope) || this.defaultRender(scope)
 
     // Generate the `aria-live` region for the current value(s)
     const $output = h(
diff --git a/src/components/form-timepicker/form-timepicker.js b/src/components/form-timepicker/form-timepicker.js
index 797886142e1..36be45a932f 100644
--- a/src/components/form-timepicker/form-timepicker.js
+++ b/src/components/form-timepicker/form-timepicker.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_BUTTON_CONTENT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { BVFormBtnLabelControl, dropdownProps } from '../../utils/bv-form-btn-label-control'
 import { getComponentConfig } from '../../utils/config'
@@ -442,7 +443,8 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
           hidden: this.onHidden
         },
         scopedSlots: {
-          'button-content': this.$scopedSlots['button-content'] || this.defaultButtonFn
+          [SLOT_NAME_BUTTON_CONTENT]:
+            this.$scopedSlots[SLOT_NAME_BUTTON_CONTENT] || this.defaultButtonFn
         }
       },
       [$time]
diff --git a/src/components/form/form-datalist.js b/src/components/form/form-datalist.js
index c350a5f6595..8be38d89c65 100644
--- a/src/components/form/form-datalist.js
+++ b/src/components/form/form-datalist.js
@@ -1,4 +1,5 @@
 import { NAME_FORM_DATALIST } from '../../constants/components'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { htmlOrText } from '../../utils/html'
 import formOptionsMixin from '../../mixins/form-options'
@@ -25,6 +26,9 @@ export const BFormDatalist = /*#__PURE__*/ Vue.extend({
       })
     })
 
-    return h('datalist', { attrs: { id: this.id } }, [$options, this.normalizeSlot('default')])
+    return h('datalist', { attrs: { id: this.id } }, [
+      $options,
+      this.normalizeSlot(SLOT_NAME_DEFAULT)
+    ])
   }
 })
diff --git a/src/components/input-group/input-group.js b/src/components/input-group/input-group.js
index dd8daa73044..960354d6060 100644
--- a/src/components/input-group/input-group.js
+++ b/src/components/input-group/input-group.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { htmlOrText } from '../../utils/html'
@@ -80,7 +81,7 @@ export const BInputGroup = /*#__PURE__*/ Vue.extend({
           role: 'group'
         }
       }),
-      [$prepend, normalizeSlot('default', slotScope, $scopedSlots, $slots), $append]
+      [$prepend, normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots), $append]
     )
   }
 })
diff --git a/src/components/jumbotron/jumbotron.js b/src/components/jumbotron/jumbotron.js
index 929dc9abc58..4d5dd0bb0a8 100644
--- a/src/components/jumbotron/jumbotron.js
+++ b/src/components/jumbotron/jumbotron.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT, SLOT_NAME_HEADER } from '../../constants/slot-names'
 import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { htmlOrText } from '../../utils/html'
@@ -78,7 +79,7 @@ export const BJumbotron = /*#__PURE__*/ Vue.extend({
     const slotScope = {}
 
     let $header = h()
-    const hasHeaderSlot = hasNormalizedSlot('header', $scopedSlots, $slots)
+    const hasHeaderSlot = hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots)
     if (hasHeaderSlot || header || headerHtml) {
       const { headerLevel } = props
 
@@ -88,7 +89,7 @@ export const BJumbotron = /*#__PURE__*/ Vue.extend({
           class: { [`display-${headerLevel}`]: headerLevel },
           domProps: hasHeaderSlot ? {} : htmlOrText(headerHtml, header)
         },
-        normalizeSlot('header', slotScope, $scopedSlots, $slots)
+        normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots)
       )
     }
 
@@ -105,7 +106,11 @@ export const BJumbotron = /*#__PURE__*/ Vue.extend({
       )
     }
 
-    let $children = [$header, $lead, normalizeSlot('default', slotScope, $scopedSlots, $slots)]
+    let $children = [
+      $header,
+      $lead,
+      normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
+    ]
 
     // If fluid, wrap content in a container
     if (props.fluid) {
diff --git a/src/components/link/link.js b/src/components/link/link.js
index c695258bad1..ee37a674811 100644
--- a/src/components/link/link.js
+++ b/src/components/link/link.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
@@ -225,7 +226,7 @@ export const BLink = /*#__PURE__*/ Vue.extend({
         // We must use `nativeOn` for `<router-link>`/`<nuxt-link>` instead of `on`
         [this.isRouterLink ? 'nativeOn' : 'on']: this.computedListeners
       },
-      this.normalizeSlot('default')
+      this.normalizeSlot(SLOT_NAME_DEFAULT)
     )
   }
 })
diff --git a/src/components/media/media.js b/src/components/media/media.js
index 571c172ff53..b9008cfb993 100644
--- a/src/components/media/media.js
+++ b/src/components/media/media.js
@@ -1,8 +1,11 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue, { mergeData } from '../../utils/vue'
 import { normalizeSlot } from '../../utils/normalize-slot'
 import { BMediaBody } from './media-body'
 import { BMediaAside } from './media-aside'
 
+// --- Props ---
+
 export const props = {
   tag: {
     type: String,
@@ -22,22 +25,25 @@ export const props = {
   }
 }
 
+// --- Main component ---
 // @vue/component
 export const BMedia = /*#__PURE__*/ Vue.extend({
   name: 'BMedia',
   functional: true,
   props,
   render(h, { props, data, slots, scopedSlots, children }) {
-    const childNodes = props.noBody ? children : []
+    const $childNodes = props.noBody ? children : []
 
     if (!props.noBody) {
       const $slots = slots()
       const $scopedSlots = scopedSlots || {}
-      const $aside = normalizeSlot('aside', {}, $scopedSlots, $slots)
-      const $default = normalizeSlot('default', {}, $scopedSlots, $slots)
+      const slotScope = {}
+
+      const $aside = normalizeSlot('aside', slotScope, $scopedSlots, $slots)
+      const $default = normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
 
       if ($aside && !props.rightAlign) {
-        childNodes.push(
+        $childNodes.push(
           h(
             BMediaAside,
             { staticClass: 'mr-3', props: { verticalAlign: props.verticalAlign } },
@@ -46,10 +52,10 @@ export const BMedia = /*#__PURE__*/ Vue.extend({
         )
       }
 
-      childNodes.push(h(BMediaBody, $default))
+      $childNodes.push(h(BMediaBody, $default))
 
       if ($aside && props.rightAlign) {
-        childNodes.push(
+        $childNodes.push(
           h(
             BMediaAside,
             { staticClass: 'ml-3', props: { verticalAlign: props.verticalAlign } },
@@ -59,6 +65,6 @@ export const BMedia = /*#__PURE__*/ Vue.extend({
       }
     }
 
-    return h(props.tag, mergeData(data, { staticClass: 'media' }), childNodes)
+    return h(props.tag, mergeData(data, { staticClass: 'media' }), $childNodes)
   }
 })
diff --git a/src/components/modal/helpers/bv-modal.js b/src/components/modal/helpers/bv-modal.js
index 2c0770ee54c..670e3e87130 100644
--- a/src/components/modal/helpers/bv-modal.js
+++ b/src/components/modal/helpers/bv-modal.js
@@ -1,5 +1,5 @@
 // Plugin for adding `$bvModal` property to all Vue instances
-import { BModal, props as modalProps } from '../modal'
+import { SLOT_NAME_DEFAULT } from '../../../constants/slot-names'
 import { concat } from '../../../utils/array'
 import { getComponentConfig } from '../../../utils/config'
 import { isUndefined, isFunction } from '../../../utils/inspect'
@@ -14,6 +14,7 @@ import {
 } from '../../../utils/object'
 import { pluginFactory } from '../../../utils/plugins'
 import { warn, warnNotClient, warnNoPromiseSupport } from '../../../utils/warn'
+import { BModal, props as modalProps } from '../modal'
 
 // --- Constants ---
 
@@ -34,7 +35,7 @@ const defaultResolver = () => {}
 
 // Map prop names to modal slot names
 const propsToSlots = {
-  msgBoxContent: 'default',
+  msgBoxContent: SLOT_NAME_DEFAULT,
   title: 'modal-title',
   okTitle: 'modal-ok',
   cancelTitle: 'modal-cancel'
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 407223c2cee..289cece20bc 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -1,5 +1,6 @@
 import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
 import { ESC } from '../../constants/key-codes'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
@@ -928,7 +929,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
           attrs: { id: this.modalBodyId },
           ref: 'body'
         },
-        this.normalizeSlot('default', this.slotScope)
+        this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope)
       )
 
       // Modal footer
diff --git a/src/components/nav/nav-item-dropdown.js b/src/components/nav/nav-item-dropdown.js
index 3facb61e9d2..189205c32e2 100644
--- a/src/components/nav/nav-item-dropdown.js
+++ b/src/components/nav/nav-item-dropdown.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { htmlOrText } from '../../utils/html'
 import { pluckProps } from '../../utils/props'
@@ -8,6 +9,7 @@ import { props as BDropdownProps } from '../dropdown/dropdown'
 import { BLink } from '../link/link'
 
 // --- Props ---
+
 export const props = pluckProps(
   ['text', 'html', 'menuClass', 'toggleClass', 'noCaret', 'role', 'lazy'],
   BDropdownProps
@@ -70,7 +72,7 @@ export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({
       },
       [
         // TODO: The `text` slot is deprecated in favor of the `button-content` slot
-        this.normalizeSlot(['button-content', 'text']) ||
+        this.normalizeSlot([SLOT_NAME_BUTTON_CONTENT, 'text']) ||
           h('span', { domProps: htmlOrText(this.html, this.text) })
       ]
     )
@@ -89,7 +91,7 @@ export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({
         },
         ref: 'menu'
       },
-      !this.lazy || visible ? this.normalizeSlot('default', { hide: this.hide }) : [h()]
+      !this.lazy || visible ? this.normalizeSlot(SLOT_NAME_DEFAULT, { hide: this.hide }) : [h()]
     )
 
     return h(
diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js
index a34623f3609..66ced775fac 100644
--- a/src/components/navbar/navbar-toggle.js
+++ b/src/components/navbar/navbar-toggle.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import listenOnRootMixin from '../../mixins/listen-on-root'
@@ -58,7 +59,7 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
         on: { click: this.onClick }
       },
       [
-        this.normalizeSlot('default', { expanded }) ||
+        this.normalizeSlot(SLOT_NAME_DEFAULT, { expanded }) ||
           h('span', { staticClass: `${CLASS_NAME}-icon` })
       ]
     )
diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js
index 5700e79c064..56620d6471f 100644
--- a/src/components/navbar/navbar.js
+++ b/src/components/navbar/navbar.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { getComponentConfig, getBreakpoints } from '../../utils/config'
 import { isTag } from '../../utils/dom'
@@ -82,7 +83,7 @@ export const BNavbar = /*#__PURE__*/ Vue.extend({
           role: isTag(this.tag, 'nav') ? null : 'navigation'
         }
       },
-      [this.normalizeSlot('default')]
+      [this.normalizeSlot(SLOT_NAME_DEFAULT)]
     )
   }
 })
diff --git a/src/components/overlay/overlay.js b/src/components/overlay/overlay.js
index 1a16a52053c..0af7e96140c 100644
--- a/src/components/overlay/overlay.js
+++ b/src/components/overlay/overlay.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { BVTransition } from '../../utils/bv-transition'
 import { toFloat } from '../../utils/number'
@@ -178,7 +179,7 @@ export const BOverlay = /*#__PURE__*/ Vue.extend({
         staticClass: 'b-overlay-wrap position-relative',
         attrs: { 'aria-busy': this.show ? 'true' : null }
       },
-      this.noWrap ? [$overlay] : [this.normalizeSlot('default'), $overlay]
+      this.noWrap ? [$overlay] : [this.normalizeSlot(SLOT_NAME_DEFAULT), $overlay]
     )
   }
 })
diff --git a/src/components/progress/progress-bar.js b/src/components/progress/progress-bar.js
index c49cad1ce10..2bba3f21cef 100644
--- a/src/components/progress/progress-bar.js
+++ b/src/components/progress/progress-bar.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { htmlOrText } from '../../utils/html'
@@ -126,8 +127,8 @@ export const BProgressBar = /*#__PURE__*/ Vue.extend({
 
     let $content = h()
     let domProps = {}
-    if (this.hasNormalizedSlot('default')) {
-      $content = this.normalizeSlot('default')
+    if (this.hasNormalizedSlot(SLOT_NAME_DEFAULT)) {
+      $content = this.normalizeSlot(SLOT_NAME_DEFAULT)
     } else if (label || labelHtml) {
       domProps = htmlOrText(labelHtml, label)
     } else if (this.computedShowProgress) {
diff --git a/src/components/progress/progress.js b/src/components/progress/progress.js
index 26ceab97441..278a28f27c3 100644
--- a/src/components/progress/progress.js
+++ b/src/components/progress/progress.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -58,9 +59,9 @@ export const BProgress = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    let childNodes = this.normalizeSlot('default')
-    if (!childNodes) {
-      childNodes = h(BProgressBar, {
+    let $childNodes = this.normalizeSlot(SLOT_NAME_DEFAULT)
+    if (!$childNodes) {
+      $childNodes = h(BProgressBar, {
         props: {
           value: this.value,
           max: this.max,
@@ -73,6 +74,7 @@ export const BProgress = /*#__PURE__*/ Vue.extend({
         }
       })
     }
-    return h('div', { class: ['progress'], style: this.progressHeight }, [childNodes])
+
+    return h('div', { class: ['progress'], style: this.progressHeight }, [$childNodes])
   }
 })
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index cce22351544..b8dca6614ce 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -1,4 +1,5 @@
 import { ESC } from '../../constants/key-codes'
+import { SLOT_NAME_DEFAULT, SLOT_NAME_FOOTER, SLOT_NAME_TITLE } from '../../constants/slot-names'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
@@ -24,8 +25,9 @@ const NAME = 'BSidebar'
 const CLASS_NAME = 'b-sidebar'
 
 // --- Render methods ---
+
 const renderHeaderTitle = (h, ctx) => {
-  const title = ctx.normalizeSlot('title', ctx.slotScope) || toString(ctx.title) || null
+  const title = ctx.normalizeSlot(SLOT_NAME_TITLE, ctx.slotScope) || toString(ctx.title) || null
 
   // Render a empty `<span>` when to title was provided
   if (!title) {
@@ -80,12 +82,12 @@ const renderBody = (h, ctx) => {
       staticClass: `${CLASS_NAME}-body`,
       class: ctx.bodyClass
     },
-    [ctx.normalizeSlot('default', ctx.slotScope)]
+    [ctx.normalizeSlot(SLOT_NAME_DEFAULT, ctx.slotScope)]
   )
 }
 
 const renderFooter = (h, ctx) => {
-  const $footer = ctx.normalizeSlot('footer', ctx.slotScope)
+  const $footer = ctx.normalizeSlot(SLOT_NAME_FOOTER, ctx.slotScope)
   if (!$footer) {
     return h()
   }
@@ -264,7 +266,7 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
       }
     },
     computedTile() {
-      return this.normalizeSlot('title', this.slotScope) || toString(this.title) || null
+      return this.normalizeSlot(SLOT_NAME_TITLE, this.slotScope) || toString(this.title) || null
     },
     titleId() {
       return this.computedTile ? this.safeId('__title__') : null
diff --git a/src/components/spinner/spinner.js b/src/components/spinner/spinner.js
index 5f7f0560a43..4b79ffa1fb4 100644
--- a/src/components/spinner/spinner.js
+++ b/src/components/spinner/spinner.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_LABEL } from '../../constants/slot-names'
 import Vue, { mergeData } from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { normalizeSlot } from '../../utils/normalize-slot'
@@ -37,7 +38,7 @@ export const BSpinner = /*#__PURE__*/ Vue.extend({
   render(h, { props, data, slots, scopedSlots }) {
     const $slots = slots()
     const $scopedSlots = scopedSlots || {}
-    let label = normalizeSlot('label', {}, $scopedSlots, $slots) || props.label
+    let label = normalizeSlot(SLOT_NAME_LABEL, {}, $scopedSlots, $slots) || props.label
     if (label) {
       label = h('span', { staticClass: 'sr-only' }, label)
     }
diff --git a/src/components/table/helpers/mixin-table-renderer.js b/src/components/table/helpers/mixin-table-renderer.js
index dec85ef717e..259d32e993b 100644
--- a/src/components/table/helpers/mixin-table-renderer.js
+++ b/src/components/table/helpers/mixin-table-renderer.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../../constants/slot-names'
 import identity from '../../../utils/identity'
 import { isBoolean } from '../../../utils/inspect'
 import { toString } from '../../../utils/string'
@@ -169,7 +170,7 @@ export default {
     const $content = []
 
     if (this.isTableSimple) {
-      $content.push(this.normalizeSlot('default'))
+      $content.push(this.normalizeSlot(SLOT_NAME_DEFAULT))
     } else {
       // Build the `<caption>` (from caption mixin)
       $content.push(this.renderCaption ? this.renderCaption() : null)
diff --git a/src/components/table/tbody.js b/src/components/table/tbody.js
index a96918f44c9..757cf0a87c6 100644
--- a/src/components/table/tbody.js
+++ b/src/components/table/tbody.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import attrsMixin from '../../mixins/attrs'
 import listenersMixin from '../../mixins/listeners'
@@ -96,7 +97,7 @@ export const BTbody = /*#__PURE__*/ Vue.extend({
     return h(
       this.isTransitionGroup ? 'transition-group' : 'tbody',
       data,
-      this.normalizeSlot('default')
+      this.normalizeSlot(SLOT_NAME_DEFAULT)
     )
   }
 })
diff --git a/src/components/table/td.js b/src/components/table/td.js
index 0fb91c764dd..2076f8a4341 100644
--- a/src/components/table/td.js
+++ b/src/components/table/td.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { isTag } from '../../utils/dom'
 import { isUndefinedOrNull } from '../../utils/inspect'
@@ -187,7 +188,8 @@ export const BTd = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    const content = [this.normalizeSlot('default')]
+    const $content = this.normalizeSlot(SLOT_NAME_DEFAULT)
+
     return h(
       this.tag,
       {
@@ -196,7 +198,7 @@ export const BTd = /*#__PURE__*/ Vue.extend({
         // Transfer any native listeners
         on: this.bvListeners
       },
-      [this.isStackedCell ? h('div', [content]) : content]
+      [this.isStackedCell ? h('div', [$content]) : $content]
     )
   }
 })
diff --git a/src/components/table/tfoot.js b/src/components/table/tfoot.js
index 9d19f624d3f..697adccabd7 100644
--- a/src/components/table/tfoot.js
+++ b/src/components/table/tfoot.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import attrsMixin from '../../mixins/attrs'
 import listenersMixin from '../../mixins/listeners'
@@ -82,7 +83,7 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
         // Pass down any native listeners
         on: this.bvListeners
       },
-      this.normalizeSlot('default')
+      this.normalizeSlot(SLOT_NAME_DEFAULT)
     )
   }
 })
diff --git a/src/components/table/thead.js b/src/components/table/thead.js
index 812bfac00cd..25632982b70 100644
--- a/src/components/table/thead.js
+++ b/src/components/table/thead.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import attrsMixin from '../../mixins/attrs'
 import listenersMixin from '../../mixins/listeners'
@@ -85,7 +86,7 @@ export const BThead = /*#__PURE__*/ Vue.extend({
         // Pass down any native listeners
         on: this.bvListeners
       },
-      this.normalizeSlot('default')
+      this.normalizeSlot(SLOT_NAME_DEFAULT)
     )
   }
 })
diff --git a/src/components/table/tr.js b/src/components/table/tr.js
index d9f9e98bc71..42e3bc93f08 100644
--- a/src/components/table/tr.js
+++ b/src/components/table/tr.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import attrsMixin from '../../mixins/attrs'
 import listenersMixin from '../../mixins/listeners'
@@ -107,7 +108,7 @@ export const BTr = /*#__PURE__*/ Vue.extend({
         // Pass native listeners to child
         on: this.bvListeners
       },
-      this.normalizeSlot('default')
+      this.normalizeSlot(SLOT_NAME_DEFAULT)
     )
   }
 })
diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js
index 1a68f6aae33..e429b69fc93 100644
--- a/src/components/tabs/tab.js
+++ b/src/components/tabs/tab.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT, SLOT_NAME_TITLE } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -126,7 +127,7 @@ export const BTab = /*#__PURE__*/ Vue.extend({
   updated() {
     // Force the tab button content to update (since slots are not reactive)
     // Only done if we have a title slot, as the title prop is reactive
-    if (this.hasNormalizedSlot('title') && this.bvTabs.updateButton) {
+    if (this.hasNormalizedSlot(SLOT_NAME_TITLE) && this.bvTabs.updateButton) {
       this.bvTabs.updateButton(this)
     }
   },
@@ -185,7 +186,7 @@ export const BTab = /*#__PURE__*/ Vue.extend({
         }
       },
       // Render content lazily if requested
-      [this.localActive || !this.computedLazy ? this.normalizeSlot('default') : h()]
+      [this.localActive || !this.computedLazy ? this.normalizeSlot(SLOT_NAME_DEFAULT) : h()]
     )
     return h(BVTransition, { props: { mode: 'out-in', noFade: this.computedNoFade } }, [content])
   }
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 21bb4433376..8dd1300dd83 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -1,4 +1,5 @@
 import { DOWN, END, HOME, LEFT, RIGHT, SPACE, UP } from '../../constants/key-codes'
+import { SLOT_NAME_DEFAULT, SLOT_NAME_TITLE } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -132,7 +133,7 @@ const BTabButtonHelper = /*#__PURE__*/ Vue.extend({
           keydown: this.handleEvt
         }
       },
-      [this.tab.normalizeSlot('title') || this.tab.title]
+      [this.tab.normalizeSlot(SLOT_NAME_TITLE) || this.tab.title]
     )
     return h(
       'li',
@@ -581,7 +582,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
     const fallbackTab = tabs.find(tab => !tab.disabled)
 
     // For each <b-tab> found create the tab buttons
-    const buttons = tabs.map((tab, index) => {
+    const $buttons = tabs.map((tab, index) => {
       let tabIndex = null
       // Ensure at least one tab button is focusable when keynav enabled (if possible)
       if (!this.noKeyNav) {
@@ -620,7 +621,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
     })
 
     // Nav
-    let nav = h(
+    let $nav = h(
       BNav,
       {
         ref: 'nav',
@@ -640,9 +641,9 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
           cardHeader: this.card && !this.vertical
         }
       },
-      [this.normalizeSlot('tabs-start') || h(), buttons, this.normalizeSlot('tabs-end') || h()]
+      [this.normalizeSlot('tabs-start') || h(), $buttons, this.normalizeSlot('tabs-end') || h()]
     )
-    nav = h(
+    $nav = h(
       'div',
       {
         key: 'bv-tabs-nav',
@@ -655,12 +656,12 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
           this.navWrapperClass
         ]
       },
-      [nav]
+      [$nav]
     )
 
-    let empty = h()
+    let $empty = h()
     if (!tabs || tabs.length === 0) {
-      empty = h(
+      $empty = h(
         'div',
         { key: 'bv-empty-tab', class: ['tab-pane', 'active', { 'card-body': this.card }] },
         this.normalizeSlot('empty')
@@ -668,7 +669,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
     }
 
     // Main content section
-    const content = h(
+    const $content = h(
       'div',
       {
         ref: 'tabsContainer',
@@ -677,7 +678,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
         class: [{ col: this.vertical }, this.contentClass],
         attrs: { id: this.safeId('_BV_tab_container_') }
       },
-      concat(this.normalizeSlot('default'), empty)
+      concat(this.normalizeSlot(SLOT_NAME_DEFAULT), $empty)
     )
 
     // Render final output
@@ -691,7 +692,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
         },
         attrs: { id: this.safeId() }
       },
-      [this.end ? content : h(), [nav], this.end ? h() : content]
+      [this.end ? $content : h(), [$nav], this.end ? h() : $content]
     )
   }
 })
diff --git a/src/components/time/time.js b/src/components/time/time.js
index c23826b9457..1814bd47863 100644
--- a/src/components/time/time.js
+++ b/src/components/time/time.js
@@ -1,5 +1,6 @@
 // BTime control (not form input control)
 import { LEFT, RIGHT } from '../../constants/key-codes'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import looseEqual from '../../utils/loose-equal'
@@ -616,7 +617,7 @@ export const BTime = /*#__PURE__*/ Vue.extend({
     )
 
     // Optional bottom slot
-    let $slot = this.normalizeSlot('default')
+    let $slot = this.normalizeSlot(SLOT_NAME_DEFAULT)
     $slot = $slot ? h('footer', { staticClass: 'b-time-footer' }, $slot) : h()
 
     return h(
diff --git a/src/components/toast/helpers/bv-toast.js b/src/components/toast/helpers/bv-toast.js
index 8c159ab9b6f..f5bb08c7199 100644
--- a/src/components/toast/helpers/bv-toast.js
+++ b/src/components/toast/helpers/bv-toast.js
@@ -2,6 +2,7 @@
  * Plugin for adding `$bvToast` property to all Vue instances
  */
 
+import { SLOT_NAME_DEFAULT } from '../../../constants/slot-names'
 import { concat } from '../../../utils/array'
 import { getComponentConfig } from '../../../utils/config'
 import { requestAF } from '../../../utils/dom'
@@ -32,7 +33,7 @@ const BASE_PROPS = ['id', ...keys(omit(toastProps, ['static', 'visible']))]
 
 // Map prop names to toast slot names
 const propsToSlots = {
-  toastContent: 'default',
+  toastContent: SLOT_NAME_DEFAULT,
   title: 'toast-title'
 }
 
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
index 2e8ead55c1d..612ca081fe2 100644
--- a/src/components/toast/toast.js
+++ b/src/components/toast/toast.js
@@ -1,5 +1,6 @@
 import { Portal, Wormhole } from 'portal-vue'
 import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
+import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { BvEvent } from '../../utils/bv-event.class'
@@ -393,7 +394,7 @@ export const BToast = /*#__PURE__*/ Vue.extend({
           props: link ? pluckProps(linkProps, this) : {},
           on: link ? { click: this.onLinkClick } : {}
         },
-        [this.normalizeSlot('default', this.slotScope) || h()]
+        [this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope) || h()]
       )
       // Build the toast
       const $toast = h(
diff --git a/src/constants/regex.js b/src/constants/regex.js
index bc2ef2388fb..d034dfae149 100644
--- a/src/constants/regex.js
+++ b/src/constants/regex.js
@@ -1,5 +1,9 @@
 export const RX_ARRAY_NOTATION = /\[(\d+)]/g
 
+// Aspect
+export const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
+export const RX_ASPECT_SEPARATOR = /[/:]/
+
 // Loose YYYY-MM-DD matching, ignores any appended time inforation
 // Matches '1999-12-20', '1999-1-1', '1999-01-20T22:51:49.118Z', '1999-01-02 13:00:00'
 export const RX_DATE = /^\d+-\d\d?-\d\d?(?:\s|T|$)/
diff --git a/src/constants/slot-names.js b/src/constants/slot-names.js
new file mode 100644
index 00000000000..d20f04a5c5a
--- /dev/null
+++ b/src/constants/slot-names.js
@@ -0,0 +1,7 @@
+export const SLOT_NAME_BUTTON_CONTENT = 'button-content'
+export const SLOT_NAME_DEFAULT = 'default'
+export const SLOT_NAME_FIRST = 'first'
+export const SLOT_NAME_FOOTER = 'footer'
+export const SLOT_NAME_HEADER = 'header'
+export const SLOT_NAME_LABEL = 'label'
+export const SLOT_NAME_TITLE = 'title'
diff --git a/src/mixins/form-radio-check-group.js b/src/mixins/form-radio-check-group.js
index 3c7991bebee..2ffab40ef1c 100644
--- a/src/mixins/form-radio-check-group.js
+++ b/src/mixins/form-radio-check-group.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT, SLOT_NAME_FIRST } from '../constants/slot-names'
 import { htmlOrText } from '../utils/html'
 import normalizeSlotMixin from './normalize-slot'
 import { BFormCheckbox } from '../components/form-checkbox/form-checkbox'
@@ -110,7 +111,7 @@ export default {
           'aria-invalid': this.computedAriaInvalid
         }
       },
-      [this.normalizeSlot('first'), $inputs, this.normalizeSlot('default')]
+      [this.normalizeSlot(SLOT_NAME_FIRST), $inputs, this.normalizeSlot(SLOT_NAME_DEFAULT)]
     )
   }
 }
diff --git a/src/mixins/form-radio-check.js b/src/mixins/form-radio-check.js
index 8e570dbfb9b..d3c17063ada 100644
--- a/src/mixins/form-radio-check.js
+++ b/src/mixins/form-radio-check.js
@@ -1,3 +1,4 @@
+import { SLOT_NAME_DEFAULT } from '../constants/slot-names'
 import { attemptBlur, attemptFocus } from '../utils/dom'
 import attrsMixin from './attrs'
 import normalizeSlotMixin from './normalize-slot'
@@ -189,7 +190,7 @@ export default {
     }
   },
   render(h) {
-    const defaultSlot = this.normalizeSlot('default')
+    const defaultSlot = this.normalizeSlot(SLOT_NAME_DEFAULT)
 
     // Generate the input element
     const on = { change: this.handleChange }
diff --git a/src/utils/bv-form-btn-label-control.js b/src/utils/bv-form-btn-label-control.js
index 654554b28e7..14ae09fcd81 100644
--- a/src/utils/bv-form-btn-label-control.js
+++ b/src/utils/bv-form-btn-label-control.js
@@ -1,6 +1,8 @@
-//
-// Private component used by `b-form-datepicker` and `b-form-timepicker`
-//
+/**
+ * Private component used by `b-form-datepicker` and `b-form-timepicker`
+ */
+
+import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT } from '../constants/slot-names'
 import Vue from './vue'
 import { attemptBlur, attemptFocus } from './dom'
 import { toString } from './string'
@@ -197,8 +199,8 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
         }
       },
       [
-        this.hasNormalizedSlot('button-content')
-          ? this.normalizeSlot('button-content', btnScope)
+        this.hasNormalizedSlot(SLOT_NAME_BUTTON_CONTENT)
+          ? this.normalizeSlot(SLOT_NAME_BUTTON_CONTENT, btnScope)
           : /* istanbul ignore next */ h(BIconChevronDown, { props: { scale: 1.25 } })
       ]
     )
@@ -240,7 +242,7 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
           keydown: this.onKeydown // Handle ESC
         }
       },
-      [this.normalizeSlot('default', { opened: visible })]
+      [this.normalizeSlot(SLOT_NAME_DEFAULT, { opened: visible })]
     )
 
     // Value label
diff --git a/src/utils/transporter.js b/src/utils/transporter.js
index c0ea07d15b9..aab96b1ba16 100644
--- a/src/utils/transporter.js
+++ b/src/utils/transporter.js
@@ -1,3 +1,17 @@
+/**
+ * BTransporterSingle/BTransporterTargetSingle:
+ *
+ * Single root node portaling of content, which retains parent/child hierarchy
+ * Unlike Portal-Vue where portaled content is no longer a descendent of its
+ * intended parent components
+ *
+ * Private components for use by Tooltips, Popovers and Modals
+ *
+ * Based on vue-simple-portal
+ * https://github.com/LinusBorg/vue-simple-portal
+ */
+
+import { SLOT_NAME_DEFAULT } from '../constants/slot-names'
 import Vue from './vue'
 import identity from './identity'
 import { concat } from './array'
@@ -7,17 +21,6 @@ import { isFunction, isString } from './inspect'
 import { HTMLElement } from './safe-types'
 import normalizeSlotMixin from '../mixins/normalize-slot'
 
-// BTransporterSingle/BTransporterTargetSingle:
-//
-// Single root node portaling of content, which retains parent/child hierarchy
-// Unlike Portal-Vue where portaled content is no longer a descendent of its
-// intended parent components
-//
-// Private components for use by Tooltips, Popovers and Modals
-//
-// Based on vue-simple-portal
-// https://github.com/LinusBorg/vue-simple-portal
-
 // Transporter target used by BTransporterSingle
 // Supports only a single root element
 // @vue/component
@@ -131,7 +134,7 @@ export const BTransporterSingle = /*#__PURE__*/ Vue.extend({
             parent: this,
             propsData: {
               // Initial nodes to be rendered
-              nodes: concat(this.normalizeSlot('default'))
+              nodes: concat(this.normalizeSlot(SLOT_NAME_DEFAULT))
             }
           })
         }
@@ -165,7 +168,7 @@ export const BTransporterSingle = /*#__PURE__*/ Vue.extend({
   },
   render(h) {
     if (this.disabled) {
-      const nodes = concat(this.normalizeSlot('default')).filter(identity)
+      const nodes = concat(this.normalizeSlot(SLOT_NAME_DEFAULT)).filter(identity)
       if (nodes.length > 0 && !nodes[0].text) {
         return nodes[0]
       }

From 38acf6b964298ff2ba837e2567c7499445bcae12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 15 May 2020 11:16:39 +0200
Subject: [PATCH 46/49] Update form.js

---
 src/components/form/form.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/form/form.js b/src/components/form/form.js
index 686a5d3d7c6..59c958fcfb1 100644
--- a/src/components/form/form.js
+++ b/src/components/form/form.js
@@ -4,6 +4,7 @@ import Vue, { mergeData } from '../../utils/vue'
 import { suffixClass } from '../../utils/string'
 
 // --- Props ---
+
 export const props = {
   id: {
     type: String
@@ -30,6 +31,8 @@ export const BForm = /*#__PURE__*/ Vue.extend({
   functional: true,
   props,
   render(h, { props, data, children }) {
+    const { id, novalidate } = props
+
     return h(
       'form',
       mergeData(data, {
@@ -37,10 +40,7 @@ export const BForm = /*#__PURE__*/ Vue.extend({
           [suffixClass(CLASS_NAME_FORM, 'inline')]: props.inline,
           [CLASS_NAME_WAS_VALIDATED]: props.validated
         },
-        attrs: {
-          id: props.id,
-          novalidate: props.novalidate
-        }
+        attrs: { id, novalidate }
       }),
       children
     )

From 487da45a9f01f6568010300dbadbf4ee6b207956 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 15 May 2020 11:16:59 +0200
Subject: [PATCH 47/49] Update form-checkbox-group.js

---
 src/components/form-checkbox/form-checkbox-group.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/form-checkbox/form-checkbox-group.js b/src/components/form-checkbox/form-checkbox-group.js
index 9508d4e5a86..9899a85de30 100644
--- a/src/components/form-checkbox/form-checkbox-group.js
+++ b/src/components/form-checkbox/form-checkbox-group.js
@@ -8,6 +8,7 @@ import formStateMixin from '../../mixins/form-state'
 import idMixin from '../../mixins/id'
 
 // --- Props ---
+
 export const props = {
   switches: {
     // Custom switch styling

From ec47a35b71926087c4a36b9a0e5c3f08cf0aecde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 15 May 2020 12:38:30 +0200
Subject: [PATCH 48/49] Add event name constants

---
 src/components/alert/alert.js                 |  9 ++--
 src/components/avatar/avatar.js               |  5 +-
 .../button-toolbar/button-toolbar.js          |  5 +-
 src/components/calendar/calendar.js           | 29 +++++++-----
 src/components/carousel/carousel.js           | 39 +++++++++------
 src/components/collapse/collapse.js           | 12 +++--
 .../dropdown/dropdown-item-button.js          |  5 +-
 src/components/dropdown/dropdown-item.js      |  5 +-
 src/components/dropdown/dropdown.js           | 11 +++--
 src/components/form-checkbox/form-checkbox.js |  7 +--
 .../form-datepicker/form-datepicker.js        | 17 +++----
 src/components/form-file/form-file.js         | 20 +++++---
 src/components/form-group/form-group.js       |  3 +-
 src/components/form-input/form-input.js       | 23 +++++----
 src/components/form-radio/form-radio.js       |  7 +--
 src/components/form-rating/form-rating.js     | 21 ++++++---
 src/components/form-select/form-select.js     |  9 ++--
 .../form-spinbutton/form-spinbutton.js        | 26 ++++++----
 src/components/form-tags/form-tag.js          |  5 +-
 src/components/form-tags/form-tags.js         | 26 ++++++----
 src/components/form-textarea/form-textarea.js |  7 +--
 .../form-timepicker/form-timepicker.js        | 17 +++----
 src/components/link/link.js                   |  7 +--
 src/components/modal/modal.js                 | 28 +++++++----
 src/components/nav/nav-item-dropdown.js       |  9 ++--
 src/components/navbar/navbar-toggle.js        |  5 +-
 src/components/overlay/overlay.js             |  3 +-
 .../pagination-nav/pagination-nav.js          |  5 +-
 src/components/pagination/pagination.js       |  3 +-
 src/components/sidebar/sidebar.js             | 20 +++++---
 src/components/table/helpers/mixin-items.js   |  5 +-
 .../table/helpers/mixin-tbody-row.js          |  5 +-
 src/components/tabs/tabs.js                   | 21 +++++----
 src/components/time/time.js                   | 26 ++++++----
 src/components/toast/toast.js                 | 20 +++++---
 .../tooltip/helpers/bv-tooltip-template.js    | 30 +++++++-----
 src/components/tooltip/helpers/bv-tooltip.js  | 47 ++++++++++++-------
 src/constants/events.js                       | 16 +++++++
 src/directives/hover/hover.js                 | 14 +++---
 src/directives/modal/modal.js                 | 14 +++---
 src/directives/toggle/toggle.js               |  9 ++--
 src/mixins/click-out.js                       |  4 +-
 src/mixins/dropdown.js                        |  3 +-
 src/mixins/focus-in.js                        | 30 ++++++++++--
 src/mixins/form-radio-check-group.js          |  5 +-
 src/mixins/form-radio-check.js                |  5 +-
 src/mixins/form-text.js                       |  7 +--
 src/mixins/pagination.js                      | 15 +++---
 src/utils/bv-form-btn-label-control.js        | 19 +++++---
 49 files changed, 432 insertions(+), 251 deletions(-)

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index 646e33fb6eb..215938ba785 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -1,6 +1,7 @@
 import { ARIA_LIVE_POLITE } from '../../constants/aria'
 import { CLASS_NAME_ALERT } from '../../constants/class-names'
 import { NAME_ALERT } from '../../constants/components'
+import { EVENT_NAME_CLICK, EVENT_NAME_INPUT } from '../../constants/events'
 import { ROLE_ALERT } from '../../constants/roles'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import BVTransition from '../../utils/bv-transition'
@@ -43,7 +44,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
   mixins: [normalizeSlotMixin],
   model: {
     prop: 'show',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     variant: {
@@ -87,7 +88,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
         this.$emit('dismiss-count-down', newVal)
         if (this.show !== newVal) {
           // Update the v-model if needed
-          this.$emit('input', newVal)
+          this.$emit(EVENT_NAME_INPUT, newVal)
         }
         if (newVal > 0) {
           this.localShow = true
@@ -111,7 +112,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
       }
       if (!isNumeric(this.show) && this.show !== newVal) {
         // Only emit booleans if we weren't passed a number via `this.show`
-        this.$emit('input', newVal)
+        this.$emit(EVENT_NAME_INPUT, newVal)
       }
     }
   },
@@ -147,7 +148,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
       if (dismissible) {
         $dismissBtn = h(
           BButtonClose,
-          { attrs: { 'aria-label': this.dismissLabel }, on: { click: this.dismiss } },
+          { attrs: { 'aria-label': this.dismissLabel }, on: { [EVENT_NAME_CLICK]: this.dismiss } },
           [this.normalizeSlot('dismiss')]
         )
       }
diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index 3bbce18d541..599b4b8c813 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -5,6 +5,7 @@ import {
   CLASS_NAME_ROUNDED
 } from '../../constants/class-names'
 import { NAME_AVATAR } from '../../constants/components'
+import { EVENT_NAME_CLICK } from '../../constants/events'
 import { RX_NUMBER } from '../../constants/regex'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
@@ -190,7 +191,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
       this.$emit('img-error', evt)
     },
     onClick(evt) {
-      this.$emit('click', evt)
+      this.$emit(EVENT_NAME_CLICK, evt)
     }
   },
   render(h) {
@@ -273,7 +274,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
       style: { width: size, height: size, ...marginStyle },
       attrs: { 'aria-label': ariaLabel || null },
       props: button ? { variant, disabled, type } : link ? pluckProps(linkProps, this) : {},
-      on: button || link ? { click: this.onClick } : {}
+      on: button || link ? { [EVENT_NAME_CLICK]: this.onClick } : {}
     }
 
     return h(tag, componentData, [$content, $badge])
diff --git a/src/components/button-toolbar/button-toolbar.js b/src/components/button-toolbar/button-toolbar.js
index 37f9f91cf91..dec5717c4ec 100644
--- a/src/components/button-toolbar/button-toolbar.js
+++ b/src/components/button-toolbar/button-toolbar.js
@@ -7,6 +7,7 @@ import {
   CLASS_NAME_JUSTIFY_CONTENT_BETWEEN
 } from '../../constants/class-names'
 import { NAME_BUTTON_TOOLBAR } from '../../constants/components'
+import { EVENT_NAME_FOCUSIN, EVENT_NAME_KEYDOWN } from '../../constants/events'
 import { DOWN, LEFT, RIGHT, UP } from '../../constants/key-codes'
 import { ROLE_TOOLBAR } from '../../constants/roles'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
@@ -116,8 +117,8 @@ export const BButtonToolbar = /*#__PURE__*/ Vue.extend({
         },
         on: this.keyNav
           ? {
-              focusin: this.onFocusin,
-              keydown: this.onKeydown
+              [EVENT_NAME_FOCUSIN]: this.onFocusin,
+              [EVENT_NAME_KEYDOWN]: this.onKeydown
             }
           : {}
       },
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index 5e0a4be85b9..0b817680d06 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -38,6 +38,13 @@ import {
   DATE_FORMAT_2_DIGIT,
   DATE_FORMAT_NUMERIC
 } from '../../constants/date'
+import {
+  EVENT_NAME_BLUR,
+  EVENT_NAME_CLICK,
+  EVENT_NAME_CONTEXT,
+  EVENT_NAME_FOCUS,
+  EVENT_NAME_KEYDOWN
+} from '../../constants/events'
 import {
   DOWN,
   END,
@@ -620,7 +627,7 @@ export const BCalendar = Vue.extend({
     },
     context(newVal, oldVal) {
       if (!looseEqual(newVal, oldVal)) {
-        this.$emit('context', newVal)
+        this.$emit(EVENT_NAME_CONTEXT, newVal)
       }
     },
     hidden(newVal) {
@@ -634,7 +641,7 @@ export const BCalendar = Vue.extend({
   },
   created() {
     this.$nextTick(() => {
-      this.$emit('context', this.context)
+      this.$emit(EVENT_NAME_CONTEXT, this.context)
     })
   },
   mounted() {
@@ -881,8 +888,8 @@ export const BCalendar = Vue.extend({
         on: {
           // Transfer focus/click to focus grid
           // and focus active date (or today if no selection)
-          click: this.onHeaderClick,
-          focus: this.onHeaderClick
+          [EVENT_NAME_CLICK]: this.onHeaderClick,
+          [EVENT_NAME_FOCUS]: this.onHeaderClick
         }
       },
       this.selectedDate
@@ -948,7 +955,7 @@ export const BCalendar = Vue.extend({
             'aria-disabled': btnDisabled ? ARIA_VALUE_TRUE : null,
             'aria-keyshortcuts': shortcut || null
           },
-          on: btnDisabled ? {} : { click: handler }
+          on: btnDisabled ? {} : { [EVENT_NAME_CLICK]: handler }
         },
         [h('div', { attrs: { 'aria-hidden': ARIA_VALUE_TRUE } }, [content])]
       )
@@ -1113,7 +1120,7 @@ export const BCalendar = Vue.extend({
                 [CLASS_NAME_FONT_WEIGHT_BOLD]: (isSelected || day.isThisMonth) && !day.isDisabled
               }
             ],
-            on: { click: () => this.onClickDay(day) }
+            on: { [EVENT_NAME_CLICK]: () => this.onClickDay(day) }
           },
           day.day
         )
@@ -1212,9 +1219,9 @@ export const BCalendar = Vue.extend({
           'aria-activedescendant': activeId
         },
         on: {
-          keydown: this.onKeydownGrid,
-          focus: this.setGridFocusFlag,
-          blur: this.setGridFocusFlag
+          [EVENT_NAME_KEYDOWN]: this.onKeydownGrid,
+          [EVENT_NAME_FOCUS]: this.setGridFocusFlag,
+          [EVENT_NAME_BLUR]: this.setGridFocusFlag
         }
       },
       [$gridCaption, $gridWeekDays, $gridBody, $gridHelp]
@@ -1251,9 +1258,7 @@ export const BCalendar = Vue.extend({
             .filter(identity)
             .join(' ')
         },
-        on: {
-          keydown: this.onKeydownWrapper
-        }
+        on: { [EVENT_NAME_KEYDOWN]: this.onKeydownWrapper }
       },
       [$header, $nav, $grid, $slot]
     )
diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js
index 82ff18f0cbc..f717b5b1b5d 100644
--- a/src/components/carousel/carousel.js
+++ b/src/components/carousel/carousel.js
@@ -8,7 +8,16 @@ import {
   CLASS_NAME_SR_ONLY
 } from '../../constants/class-names'
 import { NAME_CAROUSEL } from '../../constants/components'
-import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
+import {
+  EVENT_NAME_CLICK,
+  EVENT_NAME_FOCUSIN,
+  EVENT_NAME_FOCUSOUT,
+  EVENT_NAME_INPUT,
+  EVENT_NAME_KEYDOWN,
+  EVENT_NAME_MOUSEENTER,
+  EVENT_NAME_MOUSELEAVE,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../constants/events'
 import { ENTER, LEFT, RIGHT, SPACE } from '../../constants/key-codes'
 import { ROLE_BUTTON, ROLE_LIST, ROLE_REGION } from '../../constants/roles'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
@@ -94,7 +103,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
   },
   model: {
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     labelPrev: {
@@ -305,7 +314,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
       // Ensure the v-model is synched up if no-wrap is enabled
       // and user tried to slide pass either ends
       if (noWrap && this.index !== slide && this.index !== this.value) {
-        this.$emit('input', this.index)
+        this.$emit(EVENT_NAME_INPUT, this.index)
       }
     },
     // Previous slide
@@ -363,7 +372,7 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
       }
       this.$emit('sliding-start', to)
       // Update v-model
-      this.$emit('input', this.index)
+      this.$emit(EVENT_NAME_INPUT, this.index)
       if (this.noAnimation) {
         addClass(nextSlide, CLASS_NAME_ACTIVE)
         removeClass(currentSlide, CLASS_NAME_ACTIVE)
@@ -562,8 +571,8 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
               'aria-disabled': this.isSliding ? ARIA_VALUE_TRUE : null
             },
             on: {
-              click: prevHandler,
-              keydown: prevHandler
+              [EVENT_NAME_CLICK]: prevHandler,
+              [EVENT_NAME_KEYDOWN]: prevHandler
             }
           },
           [
@@ -585,8 +594,8 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
               'aria-disabled': this.isSliding ? ARIA_VALUE_TRUE : null
             },
             on: {
-              click: nextHandler,
-              keydown: nextHandler
+              [EVENT_NAME_CLICK]: nextHandler,
+              [EVENT_NAME_KEYDOWN]: nextHandler
             }
           },
           [
@@ -629,12 +638,12 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
             'aria-controls': this.safeId('_BV_inner_')
           },
           on: {
-            click: evt => {
+            [EVENT_NAME_CLICK]: evt => {
               this.handleClick(evt, () => {
                 this.setSlide(n)
               })
             },
-            keydown: evt => {
+            [EVENT_NAME_KEYDOWN]: evt => {
               this.handleClick(evt, () => {
                 this.setSlide(n)
               })
@@ -645,11 +654,11 @@ export const BCarousel = /*#__PURE__*/ Vue.extend({
     )
 
     const on = {
-      mouseenter: this.noHoverPause ? noop : this.pause,
-      mouseleave: this.noHoverPause ? noop : this.restart,
-      focusin: this.pause,
-      focusout: this.restart,
-      keydown: evt => {
+      [EVENT_NAME_MOUSEENTER]: this.noHoverPause ? noop : this.pause,
+      [EVENT_NAME_MOUSELEAVE]: this.noHoverPause ? noop : this.restart,
+      [EVENT_NAME_FOCUSIN]: this.pause,
+      [EVENT_NAME_FOCUSOUT]: this.restart,
+      [EVENT_NAME_KEYDOWN]: evt => {
         if (/input|textarea/i.test(evt.target.tagName)) {
           /* istanbul ignore next */
           return
diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
index c2b2251dfdc..dee2026b6e8 100644
--- a/src/components/collapse/collapse.js
+++ b/src/components/collapse/collapse.js
@@ -6,7 +6,11 @@ import {
   CLASS_NAME_SHOW
 } from '../../constants/class-names'
 import { NAME_COLLAPSE } from '../../constants/components'
-import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
+import {
+  EVENT_NAME_CLICK,
+  EVENT_NAME_INPUT,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../constants/events'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { BVCollapse } from '../../utils/bv-collapse'
@@ -37,7 +41,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
   mixins: [idMixin, listenOnRootMixin, normalizeSlotMixin],
   model: {
     prop: 'visible',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     isNav: {
@@ -166,7 +170,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
       this.$emit('hidden')
     },
     emitState() {
-      this.$emit('input', this.show)
+      this.$emit(EVENT_NAME_INPUT, this.show)
       // Let `v-b-toggle` know the state of this collapse
       this.emitOnRoot(EVENT_STATE, this.safeId(), this.show)
       if (this.accordion && this.show) {
@@ -246,7 +250,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
         class: this.classObject,
         directives: [{ name: 'show', value: this.show }],
         attrs: { id: this.safeId() },
-        on: { click: this.clickHandler }
+        on: { [EVENT_NAME_CLICK]: this.clickHandler }
       },
       [this.normalizeSlot(SLOT_NAME_DEFAULT, scope)]
     )
diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js
index 013954b93ab..9be27b5d968 100644
--- a/src/components/dropdown/dropdown-item-button.js
+++ b/src/components/dropdown/dropdown-item-button.js
@@ -1,5 +1,6 @@
 import { CLASS_NAME_DROPDOWN_ITEM, CLASS_NAME_TEXT } from '../../constants/class-names'
 import { NAME_DROPDOWN_ITEM_BUTTON } from '../../constants/components'
+import { EVENT_NAME_CLICK } from '../../constants/events'
 import { ROLE_MENUITEM, ROLE_PRESENTATION } from '../../constants/roles'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
@@ -58,7 +59,7 @@ export const BDropdownItemButton = /*#__PURE__*/ Vue.extend({
       }
     },
     onClick(evt) {
-      this.$emit('click', evt)
+      this.$emit(EVENT_NAME_CLICK, evt)
       this.closeDropdown()
     }
   },
@@ -77,7 +78,7 @@ export const BDropdownItemButton = /*#__PURE__*/ Vue.extend({
             }
           ],
           attrs: this.computedAttrs,
-          on: { click: this.onClick },
+          on: { [EVENT_NAME_CLICK]: this.onClick },
           ref: 'button'
         },
         this.normalizeSlot(SLOT_NAME_DEFAULT)
diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js
index a1bdd10f38c..ca1b3b4b3bd 100644
--- a/src/components/dropdown/dropdown-item.js
+++ b/src/components/dropdown/dropdown-item.js
@@ -1,5 +1,6 @@
 import { CLASS_NAME_DROPDOWN_ITEM, CLASS_NAME_TEXT } from '../../constants/class-names'
 import { NAME_DROPDOWN_ITEM } from '../../constants/components'
+import { EVENT_NAME_CLICK } from '../../constants/events'
 import { ROLE_MENUITEM, ROLE_PRESENTATION } from '../../constants/roles'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
@@ -52,7 +53,7 @@ export const BDropdownItem = /*#__PURE__*/ Vue.extend({
       })
     },
     onClick(evt) {
-      this.$emit('click', evt)
+      this.$emit(EVENT_NAME_CLICK, evt)
       this.closeDropdown()
     }
   },
@@ -71,7 +72,7 @@ export const BDropdownItem = /*#__PURE__*/ Vue.extend({
             }
           ],
           attrs: this.computedAttrs,
-          on: { click: this.onClick },
+          on: { [EVENT_NAME_CLICK]: this.onClick },
           ref: 'item'
         },
         this.normalizeSlot(SLOT_NAME_DEFAULT)
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
index 00cfebe2815..0d03d333515 100644
--- a/src/components/dropdown/dropdown.js
+++ b/src/components/dropdown/dropdown.js
@@ -11,6 +11,7 @@ import {
   CLASS_NAME_SR_ONLY
 } from '../../constants/class-names'
 import { NAME_DROPDOWN } from '../../constants/components'
+import { EVENT_NAME_CLICK, EVENT_NAME_KEYDOWN, EVENT_NAME_MOUSEDOWN } from '../../constants/events'
 import { ROLE_MENU } from '../../constants/roles'
 import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
@@ -185,7 +186,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
           attrs: { id: this.safeId('_BV_button_') },
           props: btnProps,
           domProps: buttonContentProps,
-          on: { click: this.onSplitClick },
+          on: { [EVENT_NAME_CLICK]: this.onSplitClick },
           ref: 'button'
         },
         [$buttonContent]
@@ -209,9 +210,9 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
         },
         domProps: split ? {} : buttonContentProps,
         on: {
-          mousedown: this.onMousedown,
-          click: this.toggle,
-          keydown: this.toggle // Handle ENTER, SPACE and DOWN
+          [EVENT_NAME_MOUSEDOWN]: this.onMousedown,
+          [EVENT_NAME_CLICK]: this.toggle,
+          [EVENT_NAME_KEYDOWN]: this.toggle // Handle ENTER, SPACE and DOWN
         },
         ref: 'toggle'
       },
@@ -229,7 +230,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
           'aria-labelledby': this.safeId(split ? '_BV_button_' : '_BV_toggle_')
         },
         on: {
-          keydown: this.onKeydown // Handle UP, DOWN and ESC
+          [EVENT_NAME_KEYDOWN]: this.onKeydown // Handle UP, DOWN and ESC
         },
         ref: 'menu'
       },
diff --git a/src/components/form-checkbox/form-checkbox.js b/src/components/form-checkbox/form-checkbox.js
index e3d90db1335..cc00c75341b 100644
--- a/src/components/form-checkbox/form-checkbox.js
+++ b/src/components/form-checkbox/form-checkbox.js
@@ -1,4 +1,5 @@
 import { NAME_FORM_CHECKBOX } from '../../constants/components'
+import { EVENT_NAME_CHANGE, EVENT_NAME_INPUT } from '../../constants/events'
 import Vue from '../../utils/vue'
 import looseEqual from '../../utils/loose-equal'
 import looseIndexOf from '../../utils/loose-index-of'
@@ -69,7 +70,7 @@ export const BFormCheckbox = /*#__PURE__*/ Vue.extend({
   },
   watch: {
     computedLocalChecked(newVal) {
-      this.$emit('input', newVal)
+      this.$emit(EVENT_NAME_INPUT, newVal)
       if (this.$refs && this.$refs.input) {
         this.$emit('update:indeterminate', this.$refs.input.indeterminate)
       }
@@ -103,10 +104,10 @@ export const BFormCheckbox = /*#__PURE__*/ Vue.extend({
       }
       this.computedLocalChecked = localChecked
       // Change is only emitted on user interaction
-      this.$emit('change', checked ? value : uncheckedValue)
+      this.$emit(EVENT_NAME_CHANGE, checked ? value : uncheckedValue)
       // If this is a child of <form-checkbox-group>, we emit a change event on it as well
       if (this.isGroup) {
-        this.bvGroup.$emit('change', localChecked)
+        this.bvGroup.$emit(EVENT_NAME_CHANGE, localChecked)
       }
       this.$emit('update:indeterminate', indeterminate)
     },
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
index f455fea426e..35d148e443e 100644
--- a/src/components/form-datepicker/form-datepicker.js
+++ b/src/components/form-datepicker/form-datepicker.js
@@ -11,6 +11,7 @@ import {
   CLASS_NAME_WIDTH_FULL
 } from '../../constants/class-names'
 import { NAME_CALENDAR, NAME_FORM_DATEPICKER } from '../../constants/components'
+import { EVENT_NAME_CLICK, EVENT_NAME_CONTEXT, EVENT_NAME_INPUT } from '../../constants/events'
 import {
   CALENDAR_LONG,
   CALENDAR_NARROW,
@@ -306,7 +307,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
   mixins: [idMixin, propsMixin],
   model: {
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   data() {
     return {
@@ -381,7 +382,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
     localYMD(newVal) {
       // We only update the v-model when the datepicker is open
       if (this.isVisible) {
-        this.$emit('input', this.valueAsDate ? parseYMD(newVal) || null : newVal || '')
+        this.$emit(EVENT_NAME_INPUT, this.valueAsDate ? parseYMD(newVal) || null : newVal || '')
       }
     },
     calendarYM(newVal, oldVal) /* istanbul ignore next */ {
@@ -435,7 +436,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
       this.localYMD = selectedYMD
       this.activeYMD = activeYMD
       // Re-emit the context event
-      this.$emit('context', ctx)
+      this.$emit(EVENT_NAME_CONTEXT, ctx)
     },
     onTodayButton() {
       // Set to today (or min/max if today is out of range)
@@ -488,7 +489,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
           {
             props: { size: 'sm', disabled: disabled || readonly, variant: this.todayButtonVariant },
             attrs: { 'aria-label': label || null },
-            on: { click: this.onTodayButton }
+            on: { [EVENT_NAME_CLICK]: this.onTodayButton }
           },
           label
         )
@@ -503,7 +504,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
           {
             props: { size: 'sm', disabled: disabled || readonly, variant: this.resetButtonVariant },
             attrs: { 'aria-label': label || null },
-            on: { click: this.onResetButton }
+            on: { [EVENT_NAME_CLICK]: this.onResetButton }
           },
           label
         )
@@ -518,7 +519,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
           {
             props: { size: 'sm', disabled, variant: this.closeButtonVariant },
             attrs: { 'aria-label': label || null },
-            on: { click: this.onCloseButton }
+            on: { [EVENT_NAME_CLICK]: this.onCloseButton }
           },
           label
         )
@@ -555,8 +556,8 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
         props: this.calendarProps,
         on: {
           selected: this.onSelected,
-          input: this.onInput,
-          context: this.onContext
+          [EVENT_NAME_INPUT]: this.onInput,
+          [EVENT_NAME_CONTEXT]: this.onContext
         },
         scopedSlots: pick($scopedSlots, [
           'nav-prev-decade',
diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js
index a02bf74f157..cc65e3418f2 100644
--- a/src/components/form-file/form-file.js
+++ b/src/components/form-file/form-file.js
@@ -1,3 +1,9 @@
+import {
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_FOCUSIN,
+  EVENT_NAME_FOCUSOUT,
+  EVENT_NAME_INPUT
+} from '../../constants/events'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
 import { from as arrayFrom, isArray, concat } from '../../utils/array'
@@ -31,7 +37,7 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
   inheritAttrs: false,
   model: {
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     size: {
@@ -162,9 +168,9 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
         return
       }
       if (!newVal && this.multiple) {
-        this.$emit('input', [])
+        this.$emit(EVENT_NAME_INPUT, [])
       } else {
-        this.$emit('input', newVal)
+        this.$emit(EVENT_NAME_INPUT, newVal)
       }
     },
     value(newVal) {
@@ -200,7 +206,7 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
     },
     onFileChange(evt) {
       // Always emit original event
-      this.$emit('change', evt)
+      this.$emit(EVENT_NAME_CHANGE, evt)
       // Check if special `items` prop is available on event (drop mode)
       // Can be disabled by setting no-traverse
       const items = evt.dataTransfer && evt.dataTransfer.items
@@ -309,9 +315,9 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
       ],
       attrs: this.computedAttrs,
       on: {
-        change: this.onFileChange,
-        focusin: this.focusHandler,
-        focusout: this.focusHandler,
+        [EVENT_NAME_CHANGE]: this.onFileChange,
+        [EVENT_NAME_FOCUSIN]: this.focusHandler,
+        [EVENT_NAME_FOCUSOUT]: this.focusHandler,
         reset: this.onReset
       }
     })
diff --git a/src/components/form-group/form-group.js b/src/components/form-group/form-group.js
index c53cefef66e..3bf2f44ca5a 100644
--- a/src/components/form-group/form-group.js
+++ b/src/components/form-group/form-group.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK } from '../../constants/events'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_LABEL } from '../../constants/slot-names'
 import memoize from '../../utils/memoize'
 import { arrayIncludes } from '../../utils/array'
@@ -124,7 +125,7 @@ const renderLabel = (h, ctx) => {
     return h(
       isHorizontal ? BCol : labelTag,
       {
-        on: isLegend ? { click: ctx.legendClick } : {},
+        on: isLegend ? { [EVENT_NAME_CLICK]: ctx.legendClick } : {},
         props: isHorizontal ? { tag: labelTag, ...ctx.labelColProps } : {},
         attrs: {
           id: ctx.labelId,
diff --git a/src/components/form-input/form-input.js b/src/components/form-input/form-input.js
index 4e27482decf..d770ff017be 100644
--- a/src/components/form-input/form-input.js
+++ b/src/components/form-input/form-input.js
@@ -1,3 +1,10 @@
+import {
+  EVENT_NAME_BLUR,
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_FOCUS,
+  EVENT_NAME_INPUT,
+  EVENT_NAME_WHEEL
+} from '../../constants/events'
 import Vue from '../../utils/vue'
 import { arrayIncludes } from '../../utils/array'
 import { attemptBlur } from '../../utils/dom'
@@ -103,9 +110,9 @@ export const BFormInput = /*#__PURE__*/ Vue.extend({
     computedListeners() {
       return {
         ...this.bvListeners,
-        input: this.onInput,
-        change: this.onChange,
-        blur: this.onBlur
+        [EVENT_NAME_INPUT]: this.onInput,
+        [EVENT_NAME_CHANGE]: this.onChange,
+        [EVENT_NAME_BLUR]: this.onBlur
       }
     }
   },
@@ -137,17 +144,17 @@ export const BFormInput = /*#__PURE__*/ Vue.extend({
     setWheelStopper(on) {
       const input = this.$el
       // We use native events, so that we don't interfere with propagation
-      eventOnOff(on, input, 'focus', this.onWheelFocus)
-      eventOnOff(on, input, 'blur', this.onWheelBlur)
+      eventOnOff(on, input, EVENT_NAME_FOCUS, this.onWheelFocus)
+      eventOnOff(on, input, EVENT_NAME_BLUR, this.onWheelBlur)
       if (!on) {
-        eventOff(document, 'wheel', this.stopWheel)
+        eventOff(document, EVENT_NAME_WHEEL, this.stopWheel)
       }
     },
     onWheelFocus() {
-      eventOn(document, 'wheel', this.stopWheel)
+      eventOn(document, EVENT_NAME_WHEEL, this.stopWheel)
     },
     onWheelBlur() {
-      eventOff(document, 'wheel', this.stopWheel)
+      eventOff(document, EVENT_NAME_WHEEL, this.stopWheel)
     },
     stopWheel(evt) {
       evt.preventDefault()
diff --git a/src/components/form-radio/form-radio.js b/src/components/form-radio/form-radio.js
index 2b0ccac5f06..6cb16ca1f60 100644
--- a/src/components/form-radio/form-radio.js
+++ b/src/components/form-radio/form-radio.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CHANGE, EVENT_NAME_INPUT } from '../../constants/events'
 import Vue from '../../utils/vue'
 import idMixin from '../../mixins/id'
 import formMixin from '../../mixins/form'
@@ -45,7 +46,7 @@ export const BFormRadio = /*#__PURE__*/ Vue.extend({
   watch: {
     // Radio Groups can only have a single value, so our watchers are simple
     computedLocalChecked() {
-      this.$emit('input', this.computedLocalChecked)
+      this.$emit(EVENT_NAME_INPUT, this.computedLocalChecked)
     }
   },
   methods: {
@@ -53,10 +54,10 @@ export const BFormRadio = /*#__PURE__*/ Vue.extend({
       const value = this.value
       this.computedLocalChecked = value
       // Change is only emitted on user interaction
-      this.$emit('change', checked ? value : null)
+      this.$emit(EVENT_NAME_CHANGE, checked ? value : null)
       // If this is a child of form-radio-group, we emit a change event on it as well
       if (this.isGroup) {
-        this.bvGroup.$emit('change', checked ? value : null)
+        this.bvGroup.$emit(EVENT_NAME_CHANGE, checked ? value : null)
       }
     }
   }
diff --git a/src/components/form-rating/form-rating.js b/src/components/form-rating/form-rating.js
index 1f89c0a6e83..417b0189a06 100644
--- a/src/components/form-rating/form-rating.js
+++ b/src/components/form-rating/form-rating.js
@@ -1,3 +1,10 @@
+import {
+  EVENT_NAME_BLUR,
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_CLICK,
+  EVENT_NAME_FOCUS,
+  EVENT_NAME_KEYDOWN
+} from '../../constants/events'
 import { LEFT, RIGHT, UP, DOWN } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
@@ -82,7 +89,7 @@ const BVFormRatingStar = Vue.extend({
           'b-rating-star-full': type === 'full'
         },
         attrs: { tabindex: !disabled && !readonly ? '-1' : null },
-        on: { click: this.onClick }
+        on: { [EVENT_NAME_CLICK]: this.onClick }
       },
       [h('span', { staticClass: 'b-rating-icon' }, [this.normalizeSlot(type, slotScope)])]
     )
@@ -102,7 +109,7 @@ export const BFormRating = /*#__PURE__*/ Vue.extend({
   mixins: [idMixin],
   model: {
     prop: 'value',
-    event: 'change'
+    event: EVENT_NAME_CHANGE
   },
   props: {
     value: {
@@ -247,7 +254,7 @@ export const BFormRating = /*#__PURE__*/ Vue.extend({
     },
     localValue(newVal, oldVal) {
       if (newVal !== oldVal && newVal !== (this.value || 0)) {
-        this.$emit('change', newVal || null)
+        this.$emit(EVENT_NAME_CHANGE, newVal || null)
       }
     },
     disabled(newVal) {
@@ -353,7 +360,7 @@ export const BFormRating = /*#__PURE__*/ Vue.extend({
             staticClass: 'b-rating-star b-rating-star-clear flex-grow-1',
             class: { focused: hasFocus && computedRating === 0 },
             attrs: { tabindex: isInteractive ? '-1' : null },
-            on: { click: () => this.onSelected(null) },
+            on: { [EVENT_NAME_CLICK]: () => this.onSelected(null) },
             key: 'clear'
           },
           [$icon]
@@ -441,9 +448,9 @@ export const BFormRating = /*#__PURE__*/ Vue.extend({
           'aria-valuenow': computedRating ? toString(computedRating) : null
         },
         on: {
-          keydown: this.onKeydown,
-          focus: this.onFocus,
-          blur: this.onFocus
+          [EVENT_NAME_KEYDOWN]: this.onKeydown,
+          [EVENT_NAME_FOCUS]: this.onFocus,
+          [EVENT_NAME_BLUR]: this.onFocus
         }
       },
       $content
diff --git a/src/components/form-select/form-select.js b/src/components/form-select/form-select.js
index 519aa4fae65..fb55bdf36d5 100644
--- a/src/components/form-select/form-select.js
+++ b/src/components/form-select/form-select.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CHANGE, EVENT_NAME_INPUT } from '../../constants/events'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_FIRST } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { from as arrayFrom, isArray } from '../../utils/array'
@@ -27,7 +28,7 @@ export const BFormSelect = /*#__PURE__*/ Vue.extend({
   ],
   model: {
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     value: {
@@ -80,7 +81,7 @@ export const BFormSelect = /*#__PURE__*/ Vue.extend({
       this.localValue = newVal
     },
     localValue() {
-      this.$emit('input', this.localValue)
+      this.$emit(EVENT_NAME_INPUT, this.localValue)
     }
   },
   methods: {
@@ -97,7 +98,7 @@ export const BFormSelect = /*#__PURE__*/ Vue.extend({
         .map(o => ('_value' in o ? o._value : o.value))
       this.localValue = target.multiple ? selectedVal : selectedVal[0]
       this.$nextTick(() => {
-        this.$emit('change', this.localValue)
+        this.$emit(EVENT_NAME_CHANGE, this.localValue)
       })
     }
   },
@@ -132,7 +133,7 @@ export const BFormSelect = /*#__PURE__*/ Vue.extend({
           'aria-required': required ? 'true' : null,
           'aria-invalid': this.computedAriaInvalid
         },
-        on: { change: this.onChange },
+        on: { [EVENT_NAME_CHANGE]: this.onChange },
         directives: [{ name: 'model', value }],
         ref: 'input'
       },
diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js
index b3e03749ae0..a185d4ac4a8 100644
--- a/src/components/form-spinbutton/form-spinbutton.js
+++ b/src/components/form-spinbutton/form-spinbutton.js
@@ -1,3 +1,13 @@
+import {
+  EVENT_NAME_BLUR,
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_FOCUS,
+  EVENT_NAME_INPUT,
+  EVENT_NAME_KEYDOWN,
+  EVENT_NAME_KEYUP,
+  EVENT_NAME_MOUSEDOWN,
+  EVENT_NAME_TOUCHSTART
+} from '../../constants/events'
 import { DOWN, END, HOME, PAGEUP, UP, PAGEDOWN } from '../../constants/key-codes'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
@@ -275,7 +285,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
       this.localValue = toFloat(value, null)
     },
     localValue(value) {
-      this.$emit('input', value)
+      this.$emit(EVENT_NAME_INPUT, value)
     },
     disabled(disabled) {
       if (disabled) {
@@ -315,7 +325,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
     },
     // --- Private methods ---
     emitChange() {
-      this.$emit('change', this.localValue)
+      this.$emit(EVENT_NAME_CHANGE, this.localValue)
     },
     stepValue(direction) {
       // Sets a new incremented or decremented value, supporting optional wrapping
@@ -519,8 +529,8 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
             'aria-keyshortcuts': shortcut || null
           },
           on: {
-            mousedown: handler,
-            touchstart: handler
+            [EVENT_NAME_MOUSEDOWN]: handler,
+            [EVENT_NAME_TOUCHSTART]: handler
           }
         },
         [h('div', [this.normalizeSlot(slotName, scope) || $icon])]
@@ -599,11 +609,11 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
         },
         attrs: this.computedAttrs,
         on: {
-          keydown: this.onKeydown,
-          keyup: this.onKeyup,
+          [EVENT_NAME_KEYDOWN]: this.onKeydown,
+          [EVENT_NAME_KEYUP]: this.onKeyup,
           // We use capture phase (`!` prefix) since focus and blur do not bubble
-          '!focus': this.onFocusBlur,
-          '!blur': this.onFocusBlur
+          [`!${EVENT_NAME_FOCUS}`]: this.onFocusBlur,
+          [`!${EVENT_NAME_BLUR}`]: this.onFocusBlur
         }
       },
       vertical ? [$increment, $hidden, $spin, $decrement] : [$decrement, $hidden, $spin, $increment]
diff --git a/src/components/form-tags/form-tag.js b/src/components/form-tags/form-tag.js
index aa4949daae7..c2e901e527b 100644
--- a/src/components/form-tags/form-tag.js
+++ b/src/components/form-tags/form-tag.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK, EVENT_NAME_KEYDOWN } from '../../constants/events'
 import { DELETE } from '../../constants/key-codes'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
@@ -60,8 +61,8 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({
           'aria-keyshortcuts': 'Delete'
         },
         on: {
-          click: this.onDelete,
-          keydown: this.onDelete
+          [EVENT_NAME_CLICK]: this.onDelete,
+          [EVENT_NAME_KEYDOWN]: this.onDelete
         }
       })
     }
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
index 08a9782bb54..c95728906e3 100644
--- a/src/components/form-tags/form-tags.js
+++ b/src/components/form-tags/form-tags.js
@@ -1,5 +1,13 @@
 // Tagged input form control
 // Based loosely on https://adamwathan.me/renderless-components-in-vuejs/
+import {
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_CLICK,
+  EVENT_NAME_FOCUSIN,
+  EVENT_NAME_FOCUSOUT,
+  EVENT_NAME_INPUT,
+  EVENT_NAME_KEYDOWN
+} from '../../constants/events'
 import { BACKSPACE, DELETE, ENTER } from '../../constants/key-codes'
 import { RX_SPACES } from '../../constants/regex'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
@@ -57,7 +65,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     // Even though this is the default that Vue assumes, we need
     // to add it for the docs to reflect that this is the model
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     inputId: {
@@ -212,9 +220,9 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     },
     computedInputHandlers() {
       return {
-        input: this.onInputInput,
-        change: this.onInputChange,
-        keydown: this.onInputKeydown
+        [EVENT_NAME_INPUT]: this.onInputInput,
+        [EVENT_NAME_CHANGE]: this.onInputChange,
+        [EVENT_NAME_KEYDOWN]: this.onInputKeydown
       }
     },
     computedSeparator() {
@@ -271,7 +279,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     tags(newVal, oldVal) {
       // Update the `v-model` (if it differs from the value prop)
       if (!looseEqual(newVal, this.value)) {
-        this.$emit('input', newVal)
+        this.$emit(EVENT_NAME_INPUT, newVal)
       }
       if (!looseEqual(newVal, oldVal)) {
         newVal = concat(newVal).filter(identity)
@@ -592,7 +600,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           },
           style: { fontSize: '90%' },
           props: { variant: addButtonVariant, disabled: disableAddButton },
-          on: { click: () => addTag() }
+          on: { [EVENT_NAME_CLICK]: () => addTag() }
         },
         [this.normalizeSlot('add-button-text') || addButtonText]
       )
@@ -788,9 +796,9 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           'aria-describedby': this.safeId('_selected_')
         },
         on: {
-          focusin: this.onFocusin,
-          focusout: this.onFocusout,
-          click: this.onClick
+          [EVENT_NAME_FOCUSIN]: this.onFocusin,
+          [EVENT_NAME_FOCUSOUT]: this.onFocusout,
+          [EVENT_NAME_CLICK]: this.onClick
         }
       },
       concat($output, $removed, $content, $hidden)
diff --git a/src/components/form-textarea/form-textarea.js b/src/components/form-textarea/form-textarea.js
index 15ae4b2e166..5c85015e764 100644
--- a/src/components/form-textarea/form-textarea.js
+++ b/src/components/form-textarea/form-textarea.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_BLUR, EVENT_NAME_CHANGE, EVENT_NAME_INPUT } from '../../constants/events'
 import Vue from '../../utils/vue'
 import { getCS, isVisible, requestAF } from '../../utils/dom'
 import { isNull } from '../../utils/inspect'
@@ -114,9 +115,9 @@ export const BFormTextarea = /*#__PURE__*/ Vue.extend({
     computedListeners() {
       return {
         ...this.bvListeners,
-        input: this.onInput,
-        change: this.onChange,
-        blur: this.onBlur
+        [EVENT_NAME_INPUT]: this.onInput,
+        [EVENT_NAME_CHANGE]: this.onChange,
+        [EVENT_NAME_BLUR]: this.onBlur
       }
     }
   },
diff --git a/src/components/form-timepicker/form-timepicker.js b/src/components/form-timepicker/form-timepicker.js
index 36be45a932f..50173529f3a 100644
--- a/src/components/form-timepicker/form-timepicker.js
+++ b/src/components/form-timepicker/form-timepicker.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK, EVENT_NAME_CONTEXT, EVENT_NAME_INPUT } from '../../constants/events'
 import { SLOT_NAME_BUTTON_CONTENT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { BVFormBtnLabelControl, dropdownProps } from '../../utils/bv-form-btn-label-control'
@@ -198,7 +199,7 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
   mixins: [idMixin, propsMixin],
   model: {
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   data() {
     return {
@@ -255,7 +256,7 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
       // is open, to prevent cursor jumps when bound to a
       // text input in button only mode
       if (this.isVisible) {
-        this.$emit('input', newVal || '')
+        this.$emit(EVENT_NAME_INPUT, newVal || '')
       }
     }
   },
@@ -290,7 +291,7 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
       this.formattedValue = formatted
       this.localHMS = value || ''
       // Re-emit the context event
-      this.$emit('context', ctx)
+      this.$emit(EVENT_NAME_CONTEXT, ctx)
     },
     onNowButton() {
       const now = new Date()
@@ -344,7 +345,7 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
             key: 'now-btn',
             props: { size: 'sm', disabled: disabled || readonly, variant: this.nowButtonVariant },
             attrs: { 'aria-label': label || null },
-            on: { click: this.onNowButton }
+            on: { [EVENT_NAME_CLICK]: this.onNowButton }
           },
           label
         )
@@ -364,7 +365,7 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
             key: 'reset-btn',
             props: { size: 'sm', disabled: disabled || readonly, variant: this.resetButtonVariant },
             attrs: { 'aria-label': label || null },
-            on: { click: this.onResetButton }
+            on: { [EVENT_NAME_CLICK]: this.onResetButton }
           },
           label
         )
@@ -384,7 +385,7 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
             key: 'close-btn',
             props: { size: 'sm', disabled, variant: this.closeButtonVariant },
             attrs: { 'aria-label': label || null },
-            on: { click: this.onCloseButton }
+            on: { [EVENT_NAME_CLICK]: this.onCloseButton }
           },
           label
         )
@@ -414,8 +415,8 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
         staticClass: 'b-form-time-control',
         props: this.timeProps,
         on: {
-          input: this.onInput,
-          context: this.onContext
+          [EVENT_NAME_INPUT]: this.onInput,
+          [EVENT_NAME_CONTEXT]: this.onContext
         }
       },
       $footer
diff --git a/src/components/link/link.js b/src/components/link/link.js
index ee37a674811..3d60fcf8dbb 100644
--- a/src/components/link/link.js
+++ b/src/components/link/link.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK } from '../../constants/events'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { concat } from '../../utils/array'
@@ -32,7 +33,7 @@ export const routerLinkProps = {
   },
   event: {
     type: [String, Array],
-    default: 'click'
+    default: EVENT_NAME_CLICK
   },
   activeClass: {
     type: String
@@ -170,7 +171,7 @@ export const BLink = /*#__PURE__*/ Vue.extend({
         ...this.bvListeners,
         // We want to overwrite any click handler since our callback
         // will invoke the user supplied handler(s) if `!this.disabled`
-        click: this.onClick
+        [EVENT_NAME_CLICK]: this.onClick
       }
     }
   },
@@ -190,7 +191,7 @@ export const BLink = /*#__PURE__*/ Vue.extend({
         if (isRouterLink && evt.currentTarget.__vue__) {
           // Router links do not emit instance `click` events, so we
           // add in an `$emit('click', evt)` on its Vue instance
-          evt.currentTarget.__vue__.$emit('click', evt)
+          evt.currentTarget.__vue__.$emit(EVENT_NAME_CLICK, evt)
         }
         // Call the suppliedHandler(s), if any provided
         concat(suppliedHandler)
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 289cece20bc..ce994b4e86c 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -1,4 +1,11 @@
-import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
+import {
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_CLICK,
+  EVENT_NAME_FOCUSIN,
+  EVENT_NAME_KEYDOWN,
+  EVENT_NAME_MOUSEDOWN,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../constants/events'
 import { ESC } from '../../constants/key-codes'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import BVTransition from '../../utils/bv-transition'
@@ -281,7 +288,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
   inheritAttrs: false,
   model: {
     prop: 'visible',
-    event: 'change'
+    event: EVENT_NAME_CHANGE
   },
   props,
   data() {
@@ -494,7 +501,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
     // Private method to update the v-model
     updateModel(val) {
       if (val !== this.visible) {
-        this.$emit('change', val)
+        this.$emit(EVENT_NAME_CHANGE, val)
       }
     },
     // Private method to create a BvModalEvent object
@@ -776,7 +783,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
     },
     // Turn on/off focusin listener
     setEnforceFocus(on) {
-      this.listenDocument(on, 'focusin', this.focusHandler)
+      this.listenDocument(on, EVENT_NAME_FOCUSIN, this.focusHandler)
     },
     // Resize listener
     setResizeEvent(on) {
@@ -881,7 +888,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
                   ariaLabel: this.headerCloseLabel,
                   textVariant: this.headerCloseVariant || this.headerTextVariant
                 },
-                on: { click: this.onClose },
+                on: { [EVENT_NAME_CLICK]: this.onClose },
                 ref: 'close-button'
               },
               // TODO: Rename slot to `header-close` and deprecate `modal-header-close`
@@ -952,7 +959,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
                 domProps: this.hasNormalizedSlot('modal-cancel')
                   ? {}
                   : htmlOrText(this.cancelTitleHtml, this.cancelTitle),
-                on: { click: this.onCancel },
+                on: { [EVENT_NAME_CLICK]: this.onCancel },
                 ref: 'cancel-button'
               },
               // TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`
@@ -972,7 +979,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
               domProps: this.hasNormalizedSlot('modal-ok')
                 ? {}
                 : htmlOrText(this.okTitleHtml, this.okTitle),
-              on: { click: this.onOk },
+              on: { [EVENT_NAME_CLICK]: this.onOk },
               ref: 'ok-button'
             },
             // TODO: Rename slot to `ok-button` and deprecate `modal-ok`
@@ -1024,7 +1031,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
         {
           staticClass: 'modal-dialog',
           class: this.dialogClasses,
-          on: { mousedown: this.onDialogMousedown },
+          on: { [EVENT_NAME_MOUSEDOWN]: this.onDialogMousedown },
           ref: 'dialog'
         },
         [$tabTrapTop, $modalContent, $tabTrapBottom]
@@ -1038,7 +1045,10 @@ export const BModal = /*#__PURE__*/ Vue.extend({
           class: this.modalClasses,
           style: this.modalStyles,
           attrs: this.computedModalAttrs,
-          on: { keydown: this.onEsc, click: this.onClickOut },
+          on: {
+            [EVENT_NAME_KEYDOWN]: this.onEsc,
+            [EVENT_NAME_CLICK]: this.onClickOut
+          },
           directives: [{ name: 'show', value: this.isVisible }],
           ref: 'modal'
         },
diff --git a/src/components/nav/nav-item-dropdown.js b/src/components/nav/nav-item-dropdown.js
index 189205c32e2..1bf07612615 100644
--- a/src/components/nav/nav-item-dropdown.js
+++ b/src/components/nav/nav-item-dropdown.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK, EVENT_NAME_KEYDOWN, EVENT_NAME_MOUSEDOWN } from '../../constants/events'
 import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { htmlOrText } from '../../utils/html'
@@ -64,9 +65,9 @@ export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({
           'aria-expanded': visible ? 'true' : 'false'
         },
         on: {
-          mousedown: this.onMousedown,
-          click: this.toggle,
-          keydown: this.toggle // Handle ENTER, SPACE and DOWN
+          [EVENT_NAME_MOUSEDOWN]: this.onMousedown,
+          [EVENT_NAME_CLICK]: this.toggle,
+          [EVENT_NAME_KEYDOWN]: this.toggle // Handle ENTER, SPACE and DOWN
         },
         ref: 'toggle'
       },
@@ -87,7 +88,7 @@ export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({
           'aria-labelledby': toggleId
         },
         on: {
-          keydown: this.onKeydown // Handle UP, DOWN and ESC
+          [EVENT_NAME_KEYDOWN]: this.onKeydown // Handle UP, DOWN and ESC
         },
         ref: 'menu'
       },
diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js
index 66ced775fac..1f326eaed6d 100644
--- a/src/components/navbar/navbar-toggle.js
+++ b/src/components/navbar/navbar-toggle.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK } from '../../constants/events'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
@@ -38,7 +39,7 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
   methods: {
     onClick(evt) {
       // Emit courtesy `click` event
-      this.$emit('click', evt)
+      this.$emit(EVENT_NAME_CLICK, evt)
     },
     handleStateEvt(id, state) {
       // We listen for state events so that we can pass the
@@ -56,7 +57,7 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
         staticClass: CLASS_NAME,
         directives: [{ name: 'BToggle', value: this.target }],
         attrs: { type: 'button', 'aria-label': this.label },
-        on: { click: this.onClick }
+        on: { [EVENT_NAME_CLICK]: this.onClick }
       },
       [
         this.normalizeSlot(SLOT_NAME_DEFAULT, { expanded }) ||
diff --git a/src/components/overlay/overlay.js b/src/components/overlay/overlay.js
index 0af7e96140c..c75fb025222 100644
--- a/src/components/overlay/overlay.js
+++ b/src/components/overlay/overlay.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK } from '../../constants/events'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
 import { BVTransition } from '../../utils/bv-transition'
@@ -148,7 +149,7 @@ export const BOverlay = /*#__PURE__*/ Vue.extend({
             'position-fixed': this.noWrap && this.fixed
           },
           style: { ...positionCover, zIndex: this.zIndex || 10 },
-          on: { click: evt => this.$emit('click', evt) }
+          on: { [EVENT_NAME_CLICK]: evt => this.$emit(EVENT_NAME_CLICK, evt) }
         },
         [$background, $content]
       )
diff --git a/src/components/pagination-nav/pagination-nav.js b/src/components/pagination-nav/pagination-nav.js
index 880831426c9..2ac7312c8a6 100644
--- a/src/components/pagination-nav/pagination-nav.js
+++ b/src/components/pagination-nav/pagination-nav.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CHANGE } from '../../constants/events'
 import Vue from '../../utils/vue'
 import looseEqual from '../../utils/loose-equal'
 import { getComponentConfig } from '../../utils/config'
@@ -139,7 +140,7 @@ export const BPaginationNav = /*#__PURE__*/ Vue.extend({
         // Done in in requestAF() to allow browser to complete the
         // native browser click handling of a link
         this.currentPage = pageNum
-        this.$emit('change', pageNum)
+        this.$emit(EVENT_NAME_CHANGE, pageNum)
       })
       this.$nextTick(() => {
         // Emulate native link click page reloading behaviour by blurring the
@@ -264,7 +265,7 @@ export const BPaginationNav = /*#__PURE__*/ Vue.extend({
           }
         }
       }
-      // We set currentPage to 0 to trigger an $emit('input', null)
+      // We set `currentPage` to `0` to trigger an `$emit('input', null)`
       // As the default for this.currentPage is -1 when no value is specified
       // And valid page numbers are greater than 0
       this.currentPage = guess > 0 ? guess : 0
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index 3c6fa05ca9c..974847c9cea 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CHANGE } from '../../constants/events'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { attemptFocus, isVisible } from '../../utils/dom'
@@ -112,7 +113,7 @@ export const BPagination = /*#__PURE__*/ Vue.extend({
       // Update the v-model
       this.currentPage = num
       // Emit event triggered by user interaction
-      this.$emit('change', this.currentPage)
+      this.$emit(EVENT_NAME_CHANGE, this.currentPage)
       this.$nextTick(() => {
         // Keep the current button focused if possible
         const target = evt.target
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index b8dca6614ce..578edf66107 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -1,3 +1,9 @@
+import {
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_CLICK,
+  EVENT_NAME_FOCUS,
+  EVENT_NAME_KEYDOWN
+} from '../../constants/events'
 import { ESC } from '../../constants/key-codes'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_FOOTER, SLOT_NAME_TITLE } from '../../constants/slot-names'
 import BVTransition from '../../utils/bv-transition'
@@ -49,7 +55,7 @@ const renderHeaderClose = (h, ctx) => {
     {
       ref: 'close-button',
       props: { ariaLabel: closeLabel, textVariant },
-      on: { click: hide }
+      on: { [EVENT_NAME_CLICK]: hide }
     },
     [ctx.normalizeSlot('header-close') || h(BIconX)]
   )
@@ -120,7 +126,7 @@ const renderBackdrop = (h, ctx) => {
   return h('div', {
     directives: [{ name: 'show', value: ctx.localShow }],
     staticClass: 'b-sidebar-backdrop',
-    on: { click: ctx.onBackdropClick }
+    on: { [EVENT_NAME_CLICK]: ctx.onBackdropClick }
   })
 }
 
@@ -133,7 +139,7 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
   inheritAttrs: false,
   model: {
     prop: 'visible',
-    event: 'change'
+    event: EVENT_NAME_CHANGE
   },
   props: {
     title: {
@@ -293,7 +299,7 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
     localShow(newVal, oldVal) {
       if (newVal !== oldVal) {
         this.emitState(newVal)
-        this.$emit('change', newVal)
+        this.$emit(EVENT_NAME_CHANGE, newVal)
       }
     },
     /* istanbul ignore next */
@@ -438,11 +444,11 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
     if (this.backdrop && this.localShow) {
       $tabTrapTop = h('div', {
         attrs: { tabindex: '0' },
-        on: { focus: this.onTopTrapFocus }
+        on: { [EVENT_NAME_FOCUS]: this.onTopTrapFocus }
       })
       $tabTrapBottom = h('div', {
         attrs: { tabindex: '0' },
-        on: { focus: this.onBottomTrapFocus }
+        on: { [EVENT_NAME_FOCUS]: this.onBottomTrapFocus }
       })
     }
 
@@ -452,7 +458,7 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
         staticClass: 'b-sidebar-outer',
         style: { zIndex: this.zIndex },
         attrs: { tabindex: '-1' },
-        on: { keydown: this.onKeydown }
+        on: { [EVENT_NAME_KEYDOWN]: this.onKeydown }
       },
       [$tabTrapTop, $sidebar, $tabTrapBottom, $backdrop]
     )
diff --git a/src/components/table/helpers/mixin-items.js b/src/components/table/helpers/mixin-items.js
index a226a17a780..108e87541cc 100644
--- a/src/components/table/helpers/mixin-items.js
+++ b/src/components/table/helpers/mixin-items.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_INPUT } from '../../../constants/events'
 import looseEqual from '../../../utils/loose-equal'
 import { isArray, isFunction, isString, isUndefinedOrNull } from '../../../utils/inspect'
 import { mathMax } from '../../../utils/math'
@@ -106,7 +107,7 @@ export default {
     },
     // Watch for changes on `computedItems` and update the `v-model`
     computedItems(newVal) {
-      this.$emit('input', newVal)
+      this.$emit(EVENT_NAME_INPUT, newVal)
     },
     // Watch for context changes
     context(newVal, oldVal) {
@@ -118,7 +119,7 @@ export default {
   },
   mounted() {
     // Initially update the `v-model` of displayed items
-    this.$emit('input', this.computedItems)
+    this.$emit(EVENT_NAME_INPUT, this.computedItems)
   },
   methods: {
     // Method to get the formatter method for a given field key
diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js
index a4b0d5fb134..c9df563ebbc 100644
--- a/src/components/table/helpers/mixin-tbody-row.js
+++ b/src/components/table/helpers/mixin-tbody-row.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_MOUSEENTER, EVENT_NAME_MOUSELEAVE } from '../../../constants/events'
 import get from '../../../utils/get'
 import { isFunction, isString, isUndefinedOrNull } from '../../../utils/inspect'
 import { toString } from '../../../utils/string'
@@ -251,8 +252,8 @@ export default {
             },
             on: {
               // Note: These events are not A11Y friendly!
-              mouseenter: this.rowHovered,
-              mouseleave: this.rowUnhovered
+              [EVENT_NAME_MOUSEENTER]: this.rowHovered,
+              [EVENT_NAME_MOUSELEAVE]: this.rowUnhovered
             }
           },
           $tds
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 8dd1300dd83..f0ea857ab5d 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK, EVENT_NAME_INPUT, EVENT_NAME_KEYDOWN } from '../../constants/events'
 import { DOWN, END, HOME, LEFT, RIGHT, SPACE, UP } from '../../constants/key-codes'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_TITLE } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
@@ -72,15 +73,15 @@ const BTabButtonHelper = /*#__PURE__*/ Vue.extend({
       const type = evt.type
       const key = evt.keyCode
       const shift = evt.shiftKey
-      if (type === 'click') {
+      if (type === EVENT_NAME_CLICK) {
         stop()
-        this.$emit('click', evt)
+        this.$emit(EVENT_NAME_CLICK, evt)
       } else if (type === 'keydown' && key === SPACE) {
         // For ARIA tabs the SPACE key will also trigger a click/select
         // Even with keyboard navigation disabled, SPACE should "click" the button
         // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/4323
         stop()
-        this.$emit('click', evt)
+        this.$emit(EVENT_NAME_CLICK, evt)
       } else if (type === 'keydown' && !this.noKeyNav) {
         // For keyboard navigation
         if (key === UP || key === LEFT || key === HOME) {
@@ -129,8 +130,8 @@ const BTabButtonHelper = /*#__PURE__*/ Vue.extend({
           'aria-controls': this.controls
         },
         on: {
-          click: this.handleEvt,
-          keydown: this.handleEvt
+          [EVENT_NAME_CLICK]: this.handleEvt,
+          [EVENT_NAME_KEYDOWN]: this.handleEvt
         }
       },
       [this.tab.normalizeSlot(SLOT_NAME_TITLE) || this.tab.title]
@@ -158,7 +159,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
   },
   model: {
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     ...navProps,
@@ -259,7 +260,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
         }
       })
       // Update the v-model
-      this.$emit('input', index)
+      this.$emit(EVENT_NAME_INPUT, index)
     },
     value(newVal, oldVal) {
       if (newVal !== oldVal) {
@@ -498,7 +499,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
       // Couldn't set tab, so ensure v-model is set to `this.currentTab`
       /* istanbul ignore next: should rarely happen */
       if (!result && this.currentTab !== this.value) {
-        this.$emit('input', this.currentTab)
+        this.$emit(EVENT_NAME_INPUT, this.currentTab)
       }
       return result
     },
@@ -523,7 +524,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
     // Emit a click event on a specified <b-tab> component instance
     emitTabClick(tab, evt) {
       if (isEvent(evt) && tab && tab.$emit && !tab.disabled) {
-        tab.$emit('click', evt)
+        tab.$emit(EVENT_NAME_CLICK, evt)
       }
     },
     // Click handler
@@ -609,7 +610,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
           noKeyNav: this.noKeyNav
         },
         on: {
-          click: evt => {
+          [EVENT_NAME_CLICK]: evt => {
             this.clickTab(tab, evt)
           },
           first: this.firstTab,
diff --git a/src/components/time/time.js b/src/components/time/time.js
index 1814bd47863..95f2da4a75f 100644
--- a/src/components/time/time.js
+++ b/src/components/time/time.js
@@ -1,4 +1,12 @@
 // BTime control (not form input control)
+import {
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_CLICK,
+  EVENT_NAME_CONTEXT,
+  EVENT_NAME_FOCUS,
+  EVENT_NAME_INPUT,
+  EVENT_NAME_KEYDOWN
+} from '../../constants/events'
 import { LEFT, RIGHT } from '../../constants/key-codes'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
@@ -65,7 +73,7 @@ export const BTime = /*#__PURE__*/ Vue.extend({
   mixins: [idMixin, normalizeSlotMixin],
   model: {
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     value: {
@@ -310,12 +318,12 @@ export const BTime = /*#__PURE__*/ Vue.extend({
     },
     computedHMS(newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.$emit('input', newVal)
+        this.$emit(EVENT_NAME_INPUT, newVal)
       }
     },
     context(newVal, oldVal) {
       if (!looseEqual(newVal, oldVal)) {
-        this.$emit('context', newVal)
+        this.$emit(EVENT_NAME_CONTEXT, newVal)
       }
     },
     modelAmpm(newVal, oldVal) {
@@ -340,7 +348,7 @@ export const BTime = /*#__PURE__*/ Vue.extend({
   },
   created() {
     this.$nextTick(() => {
-      this.$emit('context', this.context)
+      this.$emit(EVENT_NAME_CONTEXT, this.context)
     })
   },
   mounted() {
@@ -478,7 +486,7 @@ export const BTime = /*#__PURE__*/ Vue.extend({
           // As the spinbutton will announce each value change
           // and we don't want the formatted time to be announced
           // on each value input if repeat is happening
-          change: handler
+          [EVENT_NAME_CHANGE]: handler
         }
       })
     }
@@ -572,8 +580,8 @@ export const BTime = /*#__PURE__*/ Vue.extend({
           'aria-labelledby': computedAriaLabelledby
         },
         on: {
-          keydown: this.onSpinLeftRight,
-          click /* istanbul ignore next */: evt => /* istanbul ignore next */ {
+          [EVENT_NAME_KEYDOWN]: this.onSpinLeftRight,
+          [EVENT_NAME_CLICK]: evt => /* istanbul ignore next */ {
             if (evt.target === evt.currentTarget) {
               this.focus()
             }
@@ -601,8 +609,8 @@ export const BTime = /*#__PURE__*/ Vue.extend({
         },
         on: {
           // Transfer focus/click to focus hours spinner
-          click: this.focus,
-          focus: this.focus
+          [EVENT_NAME_CLICK]: this.focus,
+          [EVENT_NAME_FOCUS]: this.focus
         }
       },
       [
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
index 612ca081fe2..5b8fee969b3 100644
--- a/src/components/toast/toast.js
+++ b/src/components/toast/toast.js
@@ -1,5 +1,11 @@
 import { Portal, Wormhole } from 'portal-vue'
-import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
+import {
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_CLICK,
+  EVENT_NAME_MOUSEENTER,
+  EVENT_NAME_MOUSELEAVE,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../constants/events'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
@@ -114,7 +120,7 @@ export const BToast = /*#__PURE__*/ Vue.extend({
   inheritAttrs: false,
   model: {
     prop: 'visible',
-    event: 'change'
+    event: EVENT_NAME_CHANGE
   },
   props,
   data() {
@@ -173,7 +179,7 @@ export const BToast = /*#__PURE__*/ Vue.extend({
     },
     localShow(newVal) {
       if (newVal !== this.visible) {
-        this.$emit('change', newVal)
+        this.$emit(EVENT_NAME_CHANGE, newVal)
       }
     },
     /* istanbul ignore next */
@@ -301,8 +307,8 @@ export const BToast = /*#__PURE__*/ Vue.extend({
     },
     setHoverHandler(on) {
       const el = this.$refs['b-toast']
-      eventOnOff(on, el, 'mouseenter', this.onPause, EVENT_OPTIONS_NO_CAPTURE)
-      eventOnOff(on, el, 'mouseleave', this.onUnPause, EVENT_OPTIONS_NO_CAPTURE)
+      eventOnOff(on, el, EVENT_NAME_MOUSEENTER, this.onPause, EVENT_OPTIONS_NO_CAPTURE)
+      eventOnOff(on, el, EVENT_NAME_MOUSELEAVE, this.onUnPause, EVENT_OPTIONS_NO_CAPTURE)
     },
     onPause() {
       // Determine time remaining, and then pause timer
@@ -368,7 +374,7 @@ export const BToast = /*#__PURE__*/ Vue.extend({
           h(BButtonClose, {
             staticClass: 'ml-auto mb-1',
             on: {
-              click: () => {
+              [EVENT_NAME_CLICK]: () => {
                 this.hide()
               }
             }
@@ -392,7 +398,7 @@ export const BToast = /*#__PURE__*/ Vue.extend({
           staticClass: 'toast-body',
           class: this.bodyClass,
           props: link ? pluckProps(linkProps, this) : {},
-          on: link ? { click: this.onLinkClick } : {}
+          on: link ? { [EVENT_NAME_CLICK]: this.onLinkClick } : {}
         },
         [this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope) || h()]
       )
diff --git a/src/components/tooltip/helpers/bv-tooltip-template.js b/src/components/tooltip/helpers/bv-tooltip-template.js
index 7031d357735..b65887e1257 100644
--- a/src/components/tooltip/helpers/bv-tooltip-template.js
+++ b/src/components/tooltip/helpers/bv-tooltip-template.js
@@ -1,3 +1,9 @@
+import {
+  EVENT_NAME_FOCUSIN,
+  EVENT_NAME_FOCUSOUT,
+  EVENT_NAME_MOUSEENTER,
+  EVENT_NAME_MOUSELEAVE
+} from '../../../constants/events'
 import Vue from '../../../utils/vue'
 import scopedStyleAttrsMixin from '../../../mixins/scoped-style-attrs'
 import { isFunction, isUndefinedOrNull } from '../../../utils/inspect'
@@ -62,21 +68,21 @@ export const BVTooltipTemplate = /*#__PURE__*/ Vue.extend({
     templateListeners() {
       // Used for hover/focus trigger listeners
       return {
-        mouseenter /* istanbul ignore next */: evt => {
-          /* istanbul ignore next: difficult to test in JSDOM */
-          this.$emit('mouseenter', evt)
+        /* istanbul ignore next: difficult to test in JSDOM */
+        [EVENT_NAME_MOUSEENTER]: evt => {
+          this.$emit(EVENT_NAME_MOUSEENTER, evt)
         },
-        mouseleave /* istanbul ignore next */: evt => {
-          /* istanbul ignore next: difficult to test in JSDOM */
-          this.$emit('mouseleave', evt)
+        /* istanbul ignore next: difficult to test in JSDOM */
+        [EVENT_NAME_MOUSELEAVE]: evt => {
+          this.$emit(EVENT_NAME_MOUSELEAVE, evt)
         },
-        focusin /* istanbul ignore next */: evt => {
-          /* istanbul ignore next: difficult to test in JSDOM */
-          this.$emit('focusin', evt)
+        /* istanbul ignore next: difficult to test in JSDOM */
+        [EVENT_NAME_FOCUSIN]: evt => {
+          this.$emit(EVENT_NAME_FOCUSIN, evt)
         },
-        focusout /* istanbul ignore next */: evt => {
-          /* istanbul ignore next: difficult to test in JSDOM */
-          this.$emit('focusout', evt)
+        /* istanbul ignore next: difficult to test in JSDOM */
+        [EVENT_NAME_FOCUSOUT]: evt => {
+          this.$emit(EVENT_NAME_FOCUSOUT, evt)
         }
       }
     }
diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js
index 05f86c3b301..4d66ee2ac2f 100644
--- a/src/components/tooltip/helpers/bv-tooltip.js
+++ b/src/components/tooltip/helpers/bv-tooltip.js
@@ -1,9 +1,18 @@
-// Tooltip "Class" (Built as a renderless Vue instance)
-//
-// Handles trigger events, etc.
-// Instantiates template on demand
+/**
+ * Tooltip "Class" (Built as a renderless Vue instance)
+ *
+ * Handles trigger events, etc.
+ * Instantiates template on demand
+ */
 
-import { EVENT_OPTIONS_NO_CAPTURE } from '../../../constants/events'
+import {
+  EVENT_NAME_CLICK,
+  EVENT_NAME_FOCUSIN,
+  EVENT_NAME_FOCUSOUT,
+  EVENT_NAME_MOUSEENTER,
+  EVENT_NAME_MOUSELEAVE,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../../constants/events'
 import Vue from '../../../utils/vue'
 import getScopId from '../../../utils/get-scope-id'
 import looseEqual from '../../../utils/loose-equal'
@@ -317,10 +326,10 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
       // Convenience events from template
       // To save us from manually adding/removing DOM
       // listeners to tip element when it is open
-      $tip.$on('focusin', this.handleEvent)
-      $tip.$on('focusout', this.handleEvent)
-      $tip.$on('mouseenter', this.handleEvent)
-      $tip.$on('mouseleave', this.handleEvent)
+      $tip.$on(EVENT_NAME_FOCUSIN, this.handleEvent)
+      $tip.$on(EVENT_NAME_FOCUSOUT, this.handleEvent)
+      $tip.$on(EVENT_NAME_MOUSEENTER, this.handleEvent)
+      $tip.$on(EVENT_NAME_MOUSELEAVE, this.handleEvent)
       // Mount (which triggers the `show`)
       $tip.$mount(container.appendChild(document.createElement('div')))
       // Template will automatically remove its markup from DOM when hidden
@@ -649,23 +658,29 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
       // Set up our listeners on the target trigger element
       this.computedTriggers.forEach(trigger => {
         if (trigger === 'click') {
-          eventOn(el, 'click', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
+          eventOn(el, EVENT_NAME_CLICK, this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
         } else if (trigger === 'focus') {
-          eventOn(el, 'focusin', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
-          eventOn(el, 'focusout', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
+          eventOn(el, EVENT_NAME_FOCUSIN, this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
+          eventOn(el, EVENT_NAME_FOCUSOUT, this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
         } else if (trigger === 'blur') {
           // Used to close $tip when element looses focus
           /* istanbul ignore next */
-          eventOn(el, 'focusout', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
+          eventOn(el, EVENT_NAME_FOCUSOUT, this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
         } else if (trigger === 'hover') {
-          eventOn(el, 'mouseenter', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
-          eventOn(el, 'mouseleave', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
+          eventOn(el, EVENT_NAME_MOUSEENTER, this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
+          eventOn(el, EVENT_NAME_MOUSELEAVE, this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
         }
       }, this)
     },
     unListen() /* istanbul ignore next */ {
       // Remove trigger event handlers
-      const events = ['click', 'focusin', 'focusout', 'mouseenter', 'mouseleave']
+      const events = [
+        EVENT_NAME_CLICK,
+        EVENT_NAME_FOCUSIN,
+        EVENT_NAME_FOCUSOUT,
+        EVENT_NAME_MOUSEENTER,
+        EVENT_NAME_MOUSELEAVE
+      ]
       const target = this.getTarget()
 
       // Stop listening for global show/hide/enable/disable events
diff --git a/src/constants/events.js b/src/constants/events.js
index 82c5d245860..9de36855fd6 100644
--- a/src/constants/events.js
+++ b/src/constants/events.js
@@ -1,2 +1,18 @@
+export const EVENT_NAME_BLUR = 'blur'
+export const EVENT_NAME_CHANGE = 'change'
+export const EVENT_NAME_CLICK = 'click'
+export const EVENT_NAME_CONTEXT = 'context'
+export const EVENT_NAME_FOCUS = 'focus'
+export const EVENT_NAME_FOCUSIN = 'focusin'
+export const EVENT_NAME_FOCUSOUT = 'focusout'
+export const EVENT_NAME_INPUT = 'input'
+export const EVENT_NAME_KEYDOWN = 'keydown'
+export const EVENT_NAME_KEYUP = 'keyup'
+export const EVENT_NAME_MOUSEDOWN = 'mousedown'
+export const EVENT_NAME_MOUSEENTER = 'mouseenter'
+export const EVENT_NAME_MOUSELEAVE = 'mouseleave'
+export const EVENT_NAME_TOUCHSTART = 'touchstart'
+export const EVENT_NAME_WHEEL = 'wheel'
+
 export const EVENT_OPTIONS_PASSIVE = { passive: true }
 export const EVENT_OPTIONS_NO_CAPTURE = { passive: true, capture: false }
diff --git a/src/directives/hover/hover.js b/src/directives/hover/hover.js
index afa16336128..a7a3b57880a 100644
--- a/src/directives/hover/hover.js
+++ b/src/directives/hover/hover.js
@@ -1,5 +1,9 @@
 // v-b-hover directive
-import { EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events'
+import {
+  EVENT_NAME_MOUSEENTER,
+  EVENT_NAME_MOUSELEAVE,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../constants/events'
 import { isBrowser } from '../../utils/env'
 import { eventOnOff } from '../../utils/events'
 import { isFunction } from '../../utils/inspect'
@@ -7,22 +11,20 @@ import { isFunction } from '../../utils/inspect'
 // --- Constants ---
 
 const PROP = '__BV_hover_handler__'
-const MOUSEENTER = 'mouseenter'
-const MOUSELEAVE = 'mouseleave'
 
 // --- Utility methods ---
 
 const createListener = handler => {
   const listener = evt => {
-    handler(evt.type === MOUSEENTER, evt)
+    handler(evt.type === EVENT_NAME_MOUSEENTER, evt)
   }
   listener.fn = handler
   return listener
 }
 
 const updateListeners = (on, el, listener) => {
-  eventOnOff(on, el, MOUSEENTER, listener, EVENT_OPTIONS_NO_CAPTURE)
-  eventOnOff(on, el, MOUSELEAVE, listener, EVENT_OPTIONS_NO_CAPTURE)
+  eventOnOff(on, el, EVENT_NAME_MOUSEENTER, listener, EVENT_OPTIONS_NO_CAPTURE)
+  eventOnOff(on, el, EVENT_NAME_MOUSELEAVE, listener, EVENT_OPTIONS_NO_CAPTURE)
 }
 
 // --- Directive bind/unbind/update handler ---
diff --git a/src/directives/modal/modal.js b/src/directives/modal/modal.js
index ae220338c3b..c64daacabc5 100644
--- a/src/directives/modal/modal.js
+++ b/src/directives/modal/modal.js
@@ -1,4 +1,4 @@
-import { EVENT_OPTIONS_PASSIVE } from '../../constants/events'
+import { EVENT_NAME_CLICK, EVENT_NAME_KEYDOWN, EVENT_OPTIONS_PASSIVE } from '../../constants/events'
 import { ENTER, SPACE } from '../../constants/key-codes'
 import { getAttr, hasAttr, isDisabled, matches, select, setAttr } from '../../utils/dom'
 import { eventOn, eventOff } from '../../utils/events'
@@ -56,11 +56,11 @@ const bind = (el, binding, vnode) => {
     // If element is not a button, we add `role="button"` for accessibility
     setRole(trigger)
     // Listen for click events
-    eventOn(trigger, 'click', handler, EVENT_OPTIONS_PASSIVE)
+    eventOn(trigger, EVENT_NAME_CLICK, handler, EVENT_OPTIONS_PASSIVE)
     if (trigger.tagName !== 'BUTTON' && getAttr(trigger, 'role') === 'button') {
       // If trigger isn't a button but has role button,
       // we also listen for `keydown.space` && `keydown.enter`
-      eventOn(trigger, 'keydown', handler, EVENT_OPTIONS_PASSIVE)
+      eventOn(trigger, EVENT_NAME_KEYDOWN, handler, EVENT_OPTIONS_PASSIVE)
     }
   }
 }
@@ -70,10 +70,10 @@ const unbind = el => {
   const trigger = oldProp.trigger
   const handler = oldProp.handler
   if (trigger && handler) {
-    eventOff(trigger, 'click', handler, EVENT_OPTIONS_PASSIVE)
-    eventOff(trigger, 'keydown', handler, EVENT_OPTIONS_PASSIVE)
-    eventOff(el, 'click', handler, EVENT_OPTIONS_PASSIVE)
-    eventOff(el, 'keydown', handler, EVENT_OPTIONS_PASSIVE)
+    eventOff(trigger, EVENT_NAME_CLICK, handler, EVENT_OPTIONS_PASSIVE)
+    eventOff(trigger, EVENT_NAME_KEYDOWN, handler, EVENT_OPTIONS_PASSIVE)
+    eventOff(el, EVENT_NAME_CLICK, handler, EVENT_OPTIONS_PASSIVE)
+    eventOff(el, EVENT_NAME_KEYDOWN, handler, EVENT_OPTIONS_PASSIVE)
   }
   delete el[PROPERTY]
 }
diff --git a/src/directives/toggle/toggle.js b/src/directives/toggle/toggle.js
index 8b685a38f7e..fd107ebdf86 100644
--- a/src/directives/toggle/toggle.js
+++ b/src/directives/toggle/toggle.js
@@ -1,4 +1,5 @@
 import { ARIA_VALUE_FALSE, ARIA_VALUE_TRUE } from '../../constants/aria'
+import { EVENT_NAME_CLICK, EVENT_NAME_KEYDOWN } from '../../constants/events'
 import { ENTER, SPACE } from '../../constants/key-codes'
 import looseEqual from '../../utils/loose-equal'
 import { arrayIncludes, concat } from '../../utils/array'
@@ -71,8 +72,8 @@ const getTargets = ({ modifiers, arg, value }) => {
 const removeClickListener = el => {
   const handler = el[BV_TOGGLE_CLICK_HANDLER]
   if (handler) {
-    eventOff(el, 'click', handler)
-    eventOff(el, 'keydown', handler)
+    eventOff(el, EVENT_NAME_CLICK, handler)
+    eventOff(el, EVENT_NAME_KEYDOWN, handler)
   }
   el[BV_TOGGLE_CLICK_HANDLER] = null
 }
@@ -90,9 +91,9 @@ const addClickListener = (el, vnode) => {
       }
     }
     el[BV_TOGGLE_CLICK_HANDLER] = handler
-    eventOn(el, 'click', handler)
+    eventOn(el, EVENT_NAME_CLICK, handler)
     if (isNonStandardTag(el)) {
-      eventOn(el, 'keydown', handler)
+      eventOn(el, EVENT_NAME_KEYDOWN, handler)
     }
   }
 }
diff --git a/src/mixins/click-out.js b/src/mixins/click-out.js
index 37737265f34..14d1d9d6b9e 100644
--- a/src/mixins/click-out.js
+++ b/src/mixins/click-out.js
@@ -1,4 +1,4 @@
-import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events'
+import { EVENT_NAME_CLICK, EVENT_OPTIONS_NO_CAPTURE } from '../constants/events'
 import { contains } from '../utils/dom'
 import { eventOn, eventOff } from '../utils/events'
 
@@ -39,7 +39,7 @@ export default {
       this.clickOutElement = document
     }
     if (!this.clickOutEventName) {
-      this.clickOutEventName = 'click'
+      this.clickOutEventName = EVENT_NAME_CLICK
     }
     if (this.listenForClickOut) {
       eventOn(
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
index cf662c08a0f..52c87715429 100644
--- a/src/mixins/dropdown.js
+++ b/src/mixins/dropdown.js
@@ -9,6 +9,7 @@ import {
   CLASS_NAME_DROPUP
 } from '../constants/class-names'
 import { NAME_DROPDOWN } from '../constants/components'
+import { EVENT_NAME_CLICK } from '../constants/events'
 import { DOWN, ENTER, ESC, SPACE, UP } from '../constants/key-codes'
 import {
   PLACEMENT_TOP_START,
@@ -381,7 +382,7 @@ export default {
         this.visible = false
         return
       }
-      this.$emit('click', evt)
+      this.$emit(EVENT_NAME_CLICK, evt)
     },
     // Shared hide handler between click-out and focus-in events
     hideHandler(evt) {
diff --git a/src/mixins/focus-in.js b/src/mixins/focus-in.js
index 8e4cf82406d..a2c42f4a487 100644
--- a/src/mixins/focus-in.js
+++ b/src/mixins/focus-in.js
@@ -1,4 +1,4 @@
-import { EVENT_OPTIONS_NO_CAPTURE } from '../constants/events'
+import { EVENT_NAME_FOCUSIN, EVENT_OPTIONS_NO_CAPTURE } from '../constants/events'
 import { eventOn, eventOff } from '../utils/events'
 
 // @vue/component
@@ -11,9 +11,19 @@ export default {
   watch: {
     listenForFocusIn(newValue, oldValue) {
       if (newValue !== oldValue) {
-        eventOff(this.focusInElement, 'focusin', this._focusInHandler, EVENT_OPTIONS_NO_CAPTURE)
+        eventOff(
+          this.focusInElement,
+          EVENT_NAME_FOCUSIN,
+          this._focusInHandler,
+          EVENT_OPTIONS_NO_CAPTURE
+        )
         if (newValue) {
-          eventOn(this.focusInElement, 'focusin', this._focusInHandler, EVENT_OPTIONS_NO_CAPTURE)
+          eventOn(
+            this.focusInElement,
+            EVENT_NAME_FOCUSIN,
+            this._focusInHandler,
+            EVENT_OPTIONS_NO_CAPTURE
+          )
         }
       }
     }
@@ -27,11 +37,21 @@ export default {
       this.focusInElement = document
     }
     if (this.listenForFocusIn) {
-      eventOn(this.focusInElement, 'focusin', this._focusInHandler, EVENT_OPTIONS_NO_CAPTURE)
+      eventOn(
+        this.focusInElement,
+        EVENT_NAME_FOCUSIN,
+        this._focusInHandler,
+        EVENT_OPTIONS_NO_CAPTURE
+      )
     }
   },
   beforeDestroy() /* istanbul ignore next */ {
-    eventOff(this.focusInElement, 'focusin', this._focusInHandler, EVENT_OPTIONS_NO_CAPTURE)
+    eventOff(
+      this.focusInElement,
+      EVENT_NAME_FOCUSIN,
+      this._focusInHandler,
+      EVENT_OPTIONS_NO_CAPTURE
+    )
   },
   methods: {
     _focusInHandler(evt) {
diff --git a/src/mixins/form-radio-check-group.js b/src/mixins/form-radio-check-group.js
index 2ffab40ef1c..e55d9bb0445 100644
--- a/src/mixins/form-radio-check-group.js
+++ b/src/mixins/form-radio-check-group.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_INPUT } from '../constants/events'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_FIRST } from '../constants/slot-names'
 import { htmlOrText } from '../utils/html'
 import normalizeSlotMixin from './normalize-slot'
@@ -9,7 +10,7 @@ export default {
   mixins: [normalizeSlotMixin],
   model: {
     prop: 'checked',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     validated: {
@@ -72,7 +73,7 @@ export default {
       this.localChecked = newVal
     },
     localChecked(newVal) {
-      this.$emit('input', newVal)
+      this.$emit(EVENT_NAME_INPUT, newVal)
     }
   },
   render(h) {
diff --git a/src/mixins/form-radio-check.js b/src/mixins/form-radio-check.js
index d3c17063ada..e71d5adde34 100644
--- a/src/mixins/form-radio-check.js
+++ b/src/mixins/form-radio-check.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CHANGE, EVENT_NAME_INPUT } from '../constants/events'
 import { SLOT_NAME_DEFAULT } from '../constants/slot-names'
 import { attemptBlur, attemptFocus } from '../utils/dom'
 import attrsMixin from './attrs'
@@ -9,7 +10,7 @@ export default {
   inheritAttrs: false,
   model: {
     prop: 'checked',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props: {
     value: {
@@ -193,7 +194,7 @@ export default {
     const defaultSlot = this.normalizeSlot(SLOT_NAME_DEFAULT)
 
     // Generate the input element
-    const on = { change: this.handleChange }
+    const on = { [EVENT_NAME_CHANGE]: this.handleChange }
     if (this.isBtnMode) {
       // Handlers for focus styling when in button mode
       on.focus = on.blur = this.handleFocus
diff --git a/src/mixins/form-text.js b/src/mixins/form-text.js
index 321dd5ef73b..4816481112e 100644
--- a/src/mixins/form-text.js
+++ b/src/mixins/form-text.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_BLUR, EVENT_NAME_CHANGE, EVENT_NAME_INPUT } from '../constants/events'
 import { attemptBlur, attemptFocus } from '../utils/dom'
 import { isFunction } from '../utils/inspect'
 import { mathMax } from '../utils/math'
@@ -211,7 +212,7 @@ export default {
       }
       this.localValue = formattedValue
       this.updateValue(formattedValue)
-      this.$emit('input', formattedValue)
+      this.$emit(EVENT_NAME_INPUT, formattedValue)
     },
     onChange(evt) {
       const value = evt.target.value
@@ -225,7 +226,7 @@ export default {
       }
       this.localValue = formattedValue
       this.updateValue(formattedValue, true)
-      this.$emit('change', formattedValue)
+      this.$emit(EVENT_NAME_CHANGE, formattedValue)
     },
     onBlur(evt) {
       // Apply the `localValue` on blur to prevent cursor jumps
@@ -241,7 +242,7 @@ export default {
         this.updateValue(formattedValue, true)
       }
       // Emit native blur event
-      this.$emit('blur', evt)
+      this.$emit(EVENT_NAME_BLUR, evt)
     },
     focus() {
       // For external handler that may want a focus method
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
index 6d5929a32b7..5db6ec2c04c 100644
--- a/src/mixins/pagination.js
+++ b/src/mixins/pagination.js
@@ -1,3 +1,4 @@
+import { EVENT_NAME_CLICK, EVENT_NAME_INPUT, EVENT_NAME_KEYDOWN } from '../constants/events'
 import { DOWN, LEFT, RIGHT, SPACE, UP } from '../constants/key-codes'
 import range from '../utils/range'
 import {
@@ -185,7 +186,7 @@ export default {
   mixins: [normalizeSlotMixin],
   model: {
     prop: 'value',
-    event: 'input'
+    event: EVENT_NAME_INPUT
   },
   props,
   data() {
@@ -337,7 +338,7 @@ export default {
     currentPage(newValue, oldValue) {
       if (newValue !== oldValue) {
         // Emit null if no page selected
-        this.$emit('input', newValue > 0 ? newValue : null)
+        this.$emit(EVENT_NAME_INPUT, newValue > 0 ? newValue : null)
       }
     },
     limit(newValue, oldValue) {
@@ -463,10 +464,10 @@ export default {
           on: isDisabled
             ? {}
             : {
-                '!click': evt => {
+                [`!${EVENT_NAME_CLICK}`]: evt => {
                   this.onClick(linkTo, evt)
                 },
-                keydown: onSpaceKey
+                [EVENT_NAME_KEYDOWN]: onSpaceKey
               }
         },
         [$btnContent]
@@ -549,10 +550,10 @@ export default {
           on: disabled
             ? {}
             : {
-                '!click': evt => {
+                [`!${EVENT_NAME_CLICK}`]: evt => {
                   this.onClick(page.number, evt)
                 },
-                keydown: onSpaceKey
+                [EVENT_NAME_KEYDOWN]: onSpaceKey
               }
         },
         [this.normalizeSlot('page', scope) || btnContent]
@@ -671,7 +672,7 @@ export default {
           'aria-label': isNav ? null : this.ariaLabel || null
         },
         // We disable keyboard left/right nav when `<b-pagination-nav>`
-        on: isNav ? {} : { keydown: this.handleKeyNav }
+        on: isNav ? {} : { [EVENT_NAME_KEYDOWN]: this.handleKeyNav }
       },
       buttons
     )
diff --git a/src/utils/bv-form-btn-label-control.js b/src/utils/bv-form-btn-label-control.js
index 14ae09fcd81..ba302880011 100644
--- a/src/utils/bv-form-btn-label-control.js
+++ b/src/utils/bv-form-btn-label-control.js
@@ -2,6 +2,13 @@
  * Private component used by `b-form-datepicker` and `b-form-timepicker`
  */
 
+import {
+  EVENT_NAME_BLUR,
+  EVENT_NAME_CLICK,
+  EVENT_NAME_FOCUS,
+  EVENT_NAME_KEYDOWN,
+  EVENT_NAME_MOUSEDOWN
+} from '../constants/events'
 import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT } from '../constants/slot-names'
 import Vue from './vue'
 import { attemptBlur, attemptFocus } from './dom'
@@ -191,11 +198,11 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
         },
         directives: [{ name: 'b-hover', value: this.handleHover }],
         on: {
-          mousedown: this.onMousedown,
-          click: this.toggle,
-          keydown: this.toggle, // Handle ENTER, SPACE and DOWN
-          '!focus': this.setFocus,
-          '!blur': this.setFocus
+          [EVENT_NAME_MOUSEDOWN]: this.onMousedown,
+          [EVENT_NAME_CLICK]: this.toggle,
+          [EVENT_NAME_KEYDOWN]: this.toggle, // Handle ENTER, SPACE and DOWN
+          [`!${EVENT_NAME_FOCUS}`]: this.setFocus,
+          [`!${EVENT_NAME_BLUR}`]: this.setFocus
         }
       },
       [
@@ -239,7 +246,7 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
           'aria-labelledby': idLabel
         },
         on: {
-          keydown: this.onKeydown // Handle ESC
+          [EVENT_NAME_KEYDOWN]: this.onKeydown // Handle ESC
         }
       },
       [this.normalizeSlot(SLOT_NAME_DEFAULT, { opened: visible })]

From b009bffd716b08241fe3141bf09b0b9d25552a3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 15 May 2020 20:28:10 +0200
Subject: [PATCH 49/49] Add `buildObject()` util and add more constants

---
 src/components/alert/alert.js                 |  33 ++--
 src/components/avatar/avatar.js               |  70 +++++----
 src/components/breadcrumb/breadcrumb-link.js  |   3 +-
 src/components/button/button-close.js         |   5 +-
 src/components/button/button.js               |  23 ++-
 src/components/calendar/calendar.js           |  40 +++--
 src/components/form-file/form-file.js         |   4 +-
 src/components/form-select/form-select.js     |   3 +-
 src/components/form-tags/form-tags.js         |   2 +-
 .../table/helpers/mixin-selectable.js         |   4 +-
 src/components/tooltip/tooltip.js             |   4 +-
 src/constants/attrs.js                        |  21 +++
 src/constants/styles.js                       |   2 +
 src/constants/tags.js                         |   4 +
 src/utils/array.js                            |   6 +-
 src/utils/bv-form-btn-label-control.js        |   2 +-
 src/utils/inspect.js                          |  23 ++-
 src/utils/inspect.spec.js                     | 148 +++++++++++++++---
 src/utils/number.js                           |   3 -
 src/utils/number.spec.js                      |  18 +--
 src/utils/object.js                           | 136 +++++++++-------
 src/utils/object.spec.js                      |  34 +++-
 src/utils/router.js                           |   9 +-
 23 files changed, 400 insertions(+), 197 deletions(-)
 create mode 100644 src/constants/attrs.js
 create mode 100644 src/constants/styles.js
 create mode 100644 src/constants/tags.js

diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index 215938ba785..5a68d8c5926 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -1,15 +1,18 @@
-import { ARIA_LIVE_POLITE } from '../../constants/aria'
+import { ARIA_LIVE_POLITE, ARIA_VALUE_TRUE } from '../../constants/aria'
+import { ATTR_ARIA_ATOMIC, ATTR_ARIA_LABEL, ATTR_ARIA_LIVE, ATTR_ROLE } from '../../constants/attrs'
 import { CLASS_NAME_ALERT } from '../../constants/class-names'
 import { NAME_ALERT } from '../../constants/components'
 import { EVENT_NAME_CLICK, EVENT_NAME_INPUT } from '../../constants/events'
 import { ROLE_ALERT } from '../../constants/roles'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
+import { TAG_DIV } from '../../constants/tags'
 import BVTransition from '../../utils/bv-transition'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { requestAF } from '../../utils/dom'
 import { isBoolean, isNumeric } from '../../utils/inspect'
 import { toInteger } from '../../utils/number'
+import { buildObject } from '../../utils/object'
 import { suffixClass } from '../../utils/string'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButtonClose } from '../button/button-close'
@@ -144,32 +147,38 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
     let $alert = h()
     if (this.localShow) {
       const { dismissible, variant } = this
+
       let $dismissBtn = h()
       if (dismissible) {
         $dismissBtn = h(
           BButtonClose,
-          { attrs: { 'aria-label': this.dismissLabel }, on: { [EVENT_NAME_CLICK]: this.dismiss } },
+          {
+            attrs: buildObject([[ATTR_ARIA_LABEL, this.dismissLabel]]),
+            on: buildObject([[EVENT_NAME_CLICK, this.dismiss]])
+          },
           [this.normalizeSlot('dismiss')]
         )
       }
+
       $alert = h(
-        'div',
+        TAG_DIV,
         {
           staticClass: CLASS_NAME_ALERT,
-          class: {
-            [suffixClass(CLASS_NAME_ALERT, 'dismissible')]: dismissible,
-            [suffixClass(CLASS_NAME_ALERT, variant)]: !!variant
-          },
-          attrs: {
-            role: ROLE_ALERT,
-            'aria-live': ARIA_LIVE_POLITE,
-            'aria-atomic': true
-          },
+          class: buildObject([
+            [suffixClass(CLASS_NAME_ALERT, 'dismissible'), dismissible],
+            [suffixClass(CLASS_NAME_ALERT, variant), variant]
+          ]),
+          attrs: buildObject([
+            [ATTR_ROLE, ROLE_ALERT],
+            [ATTR_ARIA_LIVE, ARIA_LIVE_POLITE],
+            [ATTR_ARIA_ATOMIC, ARIA_VALUE_TRUE]
+          ]),
           key: this._uid
         },
         [$dismissBtn, this.normalizeSlot(SLOT_NAME_DEFAULT)]
       )
     }
+
     return h(BVTransition, { props: { noFade: !this.fade } }, [$alert])
   }
 })
diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js
index 599b4b8c813..9568b69706b 100644
--- a/src/components/avatar/avatar.js
+++ b/src/components/avatar/avatar.js
@@ -1,18 +1,22 @@
 import { ARIA_VALUE_TRUE } from '../../constants/aria'
+import { ATTR_ALT, ATTR_ARIA_HIDDEN, ATTR_ARIA_LABEL, ATTR_SRC } from '../../constants/attrs'
 import {
   CLASS_NAME_BADGE,
   CLASS_NAME_BV_AVATAR,
-  CLASS_NAME_ROUNDED
+  CLASS_NAME_ROUNDED,
+  CLASS_NAME_DISABLED
 } from '../../constants/class-names'
 import { NAME_AVATAR } from '../../constants/components'
 import { EVENT_NAME_CLICK } from '../../constants/events'
 import { RX_NUMBER } from '../../constants/regex'
 import { SLOT_NAME_DEFAULT } from '../../constants/slot-names'
+import { STYLE_HEIGHT, STYLE_WIDTH } from '../../constants/styles'
+import { TAG_IMAGE, TAG_SPAN } from '../../constants/tags'
 import Vue from '../../utils/vue'
 import { getComponentConfig } from '../../utils/config'
 import { isNumber, isString, isUndefinedOrNull } from '../../utils/inspect'
 import { toFloat } from '../../utils/number'
-import { omit } from '../../utils/object'
+import { buildObject, omit } from '../../utils/object'
 import { pluckProps } from '../../utils/props'
 import { isLink } from '../../utils/router'
 import { suffixClass } from '../../utils/string'
@@ -24,7 +28,7 @@ import { BIconPersonFill } from '../../icons/icons'
 
 // --- Constants ---
 
-const SLOT_BADGE = 'badge'
+const SLOT_NAME_BADGE = 'badge'
 
 const FONT_SIZE_SCALE = 0.4
 const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7
@@ -164,7 +168,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
       const overlapScale = avatarGroup ? avatarGroup.overlapScale : 0
       const size = this.computedSize
       const value = size && overlapScale ? `calc(${size} * -${overlapScale})` : null
-      return value ? { marginLeft: value, marginRight: value } : {}
+      return buildObject([['marginLeft', value], ['marginRight', value]], !!value)
     },
     badgeStyle() {
       const { computedSize: size, badgeTop, badgeLeft, badgeOffset } = this
@@ -209,72 +213,78 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
       buttonType: type,
       badge,
       badgeVariant,
-      badgeStyle
+      badgeStyle,
+      ariaLabel,
+      alt
     } = this
     const link = !button && isLink(this)
-    const tag = button ? BButton : link ? BLink : 'span'
-    const alt = this.alt || null
-    const ariaLabel = this.ariaLabel || null
+    const tag = button ? BButton : link ? BLink : TAG_SPAN
 
     let $content = null
     if (this.hasNormalizedSlot(SLOT_NAME_DEFAULT)) {
       // Default slot overrides props
-      $content = h('span', { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'custom') }, [
+      $content = h(TAG_SPAN, { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'custom') }, [
         this.normalizeSlot(SLOT_NAME_DEFAULT)
       ])
     } else if (src) {
-      $content = h('img', {
-        style: variant ? {} : { width: '100%', height: '100%' },
-        attrs: { src, alt },
+      const imageSize = '100%'
+      $content = h(TAG_IMAGE, {
+        style: buildObject([[STYLE_WIDTH, imageSize], [STYLE_HEIGHT, imageSize]], !!variant),
+        attrs: buildObject([[ATTR_SRC, src], [ATTR_ALT, alt]]),
         on: { error: this.onImgError }
       })
-      $content = h('span', { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'img') }, [$content])
+      $content = h(TAG_SPAN, { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'img') }, [$content])
     } else if (icon) {
       $content = h(BIcon, {
         props: { icon },
-        attrs: { 'aria-hidden': ARIA_VALUE_TRUE, alt }
+        attrs: buildObject([[ATTR_ARIA_HIDDEN, ARIA_VALUE_TRUE], [ATTR_ALT, alt]])
       })
     } else if (text) {
       $content = h(
-        'span',
-        { staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'text'), style: fontStyle },
-        [h('span', text)]
+        TAG_SPAN,
+        {
+          staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'text'),
+          style: fontStyle
+        },
+        [h(TAG_SPAN, text)]
       )
     } else {
       // Fallback default avatar content
-      $content = h(BIconPersonFill, { attrs: { 'aria-hidden': ARIA_VALUE_TRUE, alt } })
+      $content = h(BIconPersonFill, {
+        attrs: buildObject([[ATTR_ARIA_HIDDEN, ARIA_VALUE_TRUE], [ATTR_ALT, alt]])
+      })
     }
 
     let $badge = h()
-    const hasBadgeSlot = this.hasNormalizedSlot(SLOT_BADGE)
+    const hasBadgeSlot = this.hasNormalizedSlot(SLOT_NAME_BADGE)
     if (badge || badge === '' || hasBadgeSlot) {
       const badgeText = badge === true ? '' : badge
       $badge = h(
-        'span',
+        TAG_SPAN,
         {
           staticClass: suffixClass(CLASS_NAME_BV_AVATAR, 'badge'),
           class: { [suffixClass(CLASS_NAME_BADGE, badgeVariant)]: !!badgeVariant },
           style: badgeStyle
         },
-        [hasBadgeSlot ? this.normalizeSlot(SLOT_BADGE) : badgeText]
+        [hasBadgeSlot ? this.normalizeSlot(SLOT_NAME_BADGE) : badgeText]
       )
     }
 
     const componentData = {
       staticClass: CLASS_NAME_BV_AVATAR,
-      class: {
+      class: buildObject([
         // We use badge styles for theme variants when not rendering `BButton`
-        [suffixClass(CLASS_NAME_BADGE, variant)]: !button && variant,
+        [suffixClass(CLASS_NAME_BADGE, variant), !button && variant],
         // Rounding/Square
-        [CLASS_NAME_ROUNDED]: rounded === true,
-        [suffixClass(CLASS_NAME_ROUNDED, rounded)]: rounded && rounded !== true,
+        [CLASS_NAME_ROUNDED, rounded === true],
+        [suffixClass(CLASS_NAME_ROUNDED, rounded), rounded && rounded !== true],
         // Other classes
-        disabled
-      },
-      style: { width: size, height: size, ...marginStyle },
-      attrs: { 'aria-label': ariaLabel || null },
+        [CLASS_NAME_DISABLED, disabled]
+      ]),
+      style: buildObject([[STYLE_WIDTH, size], [STYLE_HEIGHT, size], marginStyle]),
+      attrs: buildObject([[ATTR_ARIA_LABEL, ariaLabel]]),
       props: button ? { variant, disabled, type } : link ? pluckProps(linkProps, this) : {},
-      on: button || link ? { [EVENT_NAME_CLICK]: this.onClick } : {}
+      on: buildObject([[EVENT_NAME_CLICK, this.onClick]], !button && !link)
     }
 
     return h(tag, componentData, [$content, $badge])
diff --git a/src/components/breadcrumb/breadcrumb-link.js b/src/components/breadcrumb/breadcrumb-link.js
index 104c228e48c..ab9c1e2404c 100644
--- a/src/components/breadcrumb/breadcrumb-link.js
+++ b/src/components/breadcrumb/breadcrumb-link.js
@@ -1,3 +1,4 @@
+import { ATTR_ARIA_CURRENT } from '../../constants/attrs'
 import { NAME_BREADCRUMB_LINK } from '../../constants/components'
 import Vue, { mergeData } from '../../utils/vue'
 import { hasChildren } from '../../utils/dom'
@@ -35,7 +36,7 @@ export const BBreadcrumbLink = /*#__PURE__*/ Vue.extend({
     const tag = active ? 'span' : BLink
 
     const componentData = {
-      attrs: { 'aria-current': active ? suppliedProps.ariaCurrent : null },
+      attrs: { [ATTR_ARIA_CURRENT]: active ? suppliedProps.ariaCurrent : null },
       props: pluckProps(props, suppliedProps)
     }
 
diff --git a/src/components/button/button-close.js b/src/components/button/button-close.js
index 907fefad469..a536b0fbee9 100644
--- a/src/components/button/button-close.js
+++ b/src/components/button/button-close.js
@@ -1,3 +1,4 @@
+import { ATTR_ARIA_LABEL, ATTR_TYPE } from '../../constants/attrs'
 import { CLASS_NAME_BUTTON_CLOSE } from '../../constants/class-names'
 import { NAME_BUTTON_CLOSE } from '../../constants/components'
 import Vue, { mergeData } from '../../utils/vue'
@@ -39,9 +40,9 @@ export const BButtonClose = /*#__PURE__*/ Vue.extend({
         [`text-${textVariant}`]: textVariant
       },
       attrs: {
-        type: 'button',
+        [ATTR_TYPE]: 'button',
         disabled,
-        'aria-label': ariaLabel ? String(ariaLabel) : null
+        [ATTR_ARIA_LABEL]: ariaLabel ? String(ariaLabel) : null
       },
       on: {
         click(evt) {
diff --git a/src/components/button/button.js b/src/components/button/button.js
index 4405257634e..acc5d684e76 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -1,3 +1,12 @@
+import {
+  ATTR_ARIA_DISABLED,
+  ATTR_ARIA_PRESSED,
+  ATTR_AUTOCOMPLETE,
+  ATTR_DISABLED,
+  ATTR_ROLE,
+  ATTR_TABINDEX,
+  ATTR_TYPE
+} from '../../constants/attrs'
 import {
   CLASS_NAME_ACTIVE,
   CLASS_NAME_BUTTON,
@@ -125,25 +134,25 @@ const computeAttrs = (props, data) => {
   }
   return {
     // Type only used for "real" buttons
-    type: button && !link ? props.type : null,
+    [ATTR_TYPE]: button && !link ? props.type : null,
     // Disabled only set on "real" buttons
-    disabled: button ? disabled : null,
+    [ATTR_DISABLED]: button ? disabled : null,
     // We add a role of button when the tag is not a link or button for ARIA
     // Don't bork any role provided in `data.attrs` when `isLink` or `isButton`
     // Except when link has `href` of `#`
-    role: nonStandardTag || hashLink ? ROLE_BUTTON : role,
+    [ATTR_ROLE]: nonStandardTag || hashLink ? ROLE_BUTTON : role,
     // We set the `aria-disabled` state for non-standard tags
-    'aria-disabled': nonStandardTag ? String(disabled) : null,
+    [ATTR_ARIA_DISABLED]: nonStandardTag ? String(disabled) : null,
     // For toggles, we need to set the pressed state for ARIA
-    'aria-pressed': toggle ? String(props.pressed) : null,
+    [ATTR_ARIA_PRESSED]: toggle ? String(props.pressed) : null,
     // `autocomplete="off"` is needed in toggle mode to prevent some browsers
     // from remembering the previous setting when using the back button
-    autocomplete: toggle ? 'off' : null,
+    [ATTR_AUTOCOMPLETE]: toggle ? 'off' : null,
     // `tabindex` is used when the component is not a button
     // Links are tabbable, but don't allow disabled, while non buttons or links
     // are not tabbable, so we mimic that functionality by disabling tabbing
     // when disabled, and adding a `tabindex="0"` to non buttons or non links
-    tabindex: disabled && !button ? '-1' : tabindex
+    [ATTR_TABINDEX]: disabled && !button ? '-1' : tabindex
   }
 }
 
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index 0b817680d06..cd04dcdbca2 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -1,4 +1,16 @@
 import { ARIA_LIVE_POLITE, ARIA_VALUE_OFF, ARIA_VALUE_TRUE } from '../../constants/aria'
+import {
+  ATTR_ARIA_ATOMIC,
+  ATTR_ARIA_CONTROLS,
+  ATTR_ARIA_DISABLED,
+  ATTR_ARIA_HIDDEN,
+  ATTR_ARIA_LABEL,
+  ATTR_ARIA_LIVE,
+  ATTR_FOR,
+  ATTR_ROLE,
+  ATTR_TABINDEX,
+  ATTR_TITLE
+} from '../../constants/attrs'
 import {
   CLASS_NAME_ACTIVE,
   CLASS_NAME_BACKGROUND,
@@ -874,16 +886,16 @@ export const BCalendar = Vue.extend({
         ],
         attrs: {
           id: valueId,
-          for: gridId,
-          role: ROLE_STATUS,
-          tabindex: this.disabled ? null : '-1',
+          [ATTR_FOR]: gridId,
+          [ATTR_ROLE]: ROLE_STATUS,
+          [ATTR_TABINDEX]: this.disabled ? null : '-1',
           // Mainly for testing purposes, as we do not know
           // the exact format `Intl` will format the date string
           'data-selected': toString(selectedYMD),
           // We wait until after mount to enable `aria-live`
           // to prevent initial announcement on page render
-          'aria-live': isLive ? ARIA_LIVE_POLITE : ARIA_VALUE_OFF,
-          'aria-atomic': isLive ? ARIA_VALUE_TRUE : null
+          [ATTR_ARIA_LIVE]: isLive ? ARIA_LIVE_POLITE : ARIA_VALUE_OFF,
+          [ATTR_ARIA_ATOMIC]: isLive ? ARIA_VALUE_TRUE : null
         },
         on: {
           // Transfer focus/click to focus grid
@@ -949,15 +961,15 @@ export const BCalendar = Vue.extend({
             { disabled: btnDisabled }
           ],
           attrs: {
-            title: label || null,
-            type: 'button',
-            'aria-label': label || null,
-            'aria-disabled': btnDisabled ? ARIA_VALUE_TRUE : null,
+            [ATTR_TITLE]: label || null,
+            [ATTR_ROLE]: 'button',
+            [ATTR_ARIA_LABEL]: label || null,
+            [ATTR_ARIA_DISABLED]: btnDisabled ? ARIA_VALUE_TRUE : null,
             'aria-keyshortcuts': shortcut || null
           },
           on: btnDisabled ? {} : { [EVENT_NAME_CLICK]: handler }
         },
-        [h('div', { attrs: { 'aria-hidden': ARIA_VALUE_TRUE } }, [content])]
+        [h('div', { attrs: { [ATTR_ARIA_HIDDEN]: ARIA_VALUE_TRUE } }, [content])]
       )
     }
 
@@ -969,10 +981,10 @@ export const BCalendar = Vue.extend({
         class: CLASS_NAME_DISPLAY_FLEX,
         attrs: {
           id: navId,
-          role: ROLE_GROUP,
-          'aria-hidden': this.disabled ? ARIA_VALUE_TRUE : null,
-          'aria-label': this.labelNav || null,
-          'aria-controls': gridId
+          [ATTR_ROLE]: ROLE_GROUP,
+          [ATTR_ARIA_HIDDEN]: this.disabled ? ARIA_VALUE_TRUE : null,
+          [ATTR_ARIA_LABEL]: this.labelNav || null,
+          [ATTR_ARIA_CONTROLS]: gridId
         }
       },
       [
diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js
index cc65e3418f2..f2313fad78e 100644
--- a/src/components/form-file/form-file.js
+++ b/src/components/form-file/form-file.js
@@ -6,9 +6,9 @@ import {
 } from '../../constants/events'
 import Vue from '../../utils/vue'
 import identity from '../../utils/identity'
-import { from as arrayFrom, isArray, concat } from '../../utils/array'
+import { from as arrayFrom, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
-import { isFile, isFunction, isUndefinedOrNull } from '../../utils/inspect'
+import { isArray, isFile, isFunction, isUndefinedOrNull } from '../../utils/inspect'
 import { File } from '../../utils/safe-types'
 import { toString } from '../../utils/string'
 import { warn } from '../../utils/warn'
diff --git a/src/components/form-select/form-select.js b/src/components/form-select/form-select.js
index fb55bdf36d5..4dd2a0bc9f8 100644
--- a/src/components/form-select/form-select.js
+++ b/src/components/form-select/form-select.js
@@ -1,9 +1,10 @@
 import { EVENT_NAME_CHANGE, EVENT_NAME_INPUT } from '../../constants/events'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_FIRST } from '../../constants/slot-names'
 import Vue from '../../utils/vue'
-import { from as arrayFrom, isArray } from '../../utils/array'
+import { from as arrayFrom } from '../../utils/array'
 import { attemptBlur, attemptFocus } from '../../utils/dom'
 import { htmlOrText } from '../../utils/html'
+import { isArray } from '../../utils/inspect'
 import formCustomMixin from '../../mixins/form-custom'
 import formMixin from '../../mixins/form'
 import formSizeMixin from '../../mixins/form-size'
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
index c95728906e3..5c7cd4361f1 100644
--- a/src/components/form-tags/form-tags.js
+++ b/src/components/form-tags/form-tags.js
@@ -541,7 +541,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
               // so we do not need to set the ID prop
               tag: 'li',
               title: tag,
-              disabled: disabled,
+              disabled,
               variant: tagVariant,
               pill: tagPills,
               removeLabel: tagRemoveLabel
diff --git a/src/components/table/helpers/mixin-selectable.js b/src/components/table/helpers/mixin-selectable.js
index a66e9580caf..b8d30173609 100644
--- a/src/components/table/helpers/mixin-selectable.js
+++ b/src/components/table/helpers/mixin-selectable.js
@@ -1,9 +1,9 @@
 import identity from '../../../utils/identity'
 import looseEqual from '../../../utils/loose-equal'
 import range from '../../../utils/range'
-import { isArray, arrayIncludes } from '../../../utils/array'
+import { arrayIncludes } from '../../../utils/array'
 import { getComponentConfig } from '../../../utils/config'
-import { isNumber } from '../../../utils/inspect'
+import { isArray, isNumber } from '../../../utils/inspect'
 import { mathMax, mathMin } from '../../../utils/math'
 import sanitizeRow from './sanitize-row'
 
diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
index deaa87a7d85..c0c8e533548 100644
--- a/src/components/tooltip/tooltip.js
+++ b/src/components/tooltip/tooltip.js
@@ -1,8 +1,8 @@
 import Vue from '../../utils/vue'
 import getScopId from '../../utils/get-scope-id'
-import { isArray, arrayIncludes } from '../../utils/array'
+import { arrayIncludes } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
-import { isString, isUndefinedOrNull } from '../../utils/inspect'
+import { isArray, isString, isUndefinedOrNull } from '../../utils/inspect'
 import { HTMLElement, SVGElement } from '../../utils/safe-types'
 import { BVTooltip } from './helpers/bv-tooltip'
 
diff --git a/src/constants/attrs.js b/src/constants/attrs.js
new file mode 100644
index 00000000000..a8b587c29d1
--- /dev/null
+++ b/src/constants/attrs.js
@@ -0,0 +1,21 @@
+export const ATTR_ALT = 'alt'
+export const ATTR_AUTOCOMPLETE = 'autocomplete'
+export const ATTR_DISABLED = 'disabled'
+export const ATTR_FOR = 'for'
+export const ATTR_ROLE = 'role'
+export const ATTR_SRC = 'src'
+export const ATTR_TABINDEX = 'tabindex'
+export const ATTR_TITLE = 'title'
+export const ATTR_TYPE = 'type'
+
+// ARIA
+export const ATTR_ARIA_ATOMIC = 'aria-atomic'
+export const ATTR_ARIA_CHECKED = 'aria-checked'
+export const ATTR_ARIA_CONTROLS = 'aria-controls'
+export const ATTR_ARIA_CURRENT = 'aria-current'
+export const ATTR_ARIA_DESCRIBEDBY = 'aria-describedby'
+export const ATTR_ARIA_DISABLED = 'aria-disabled'
+export const ATTR_ARIA_HIDDEN = 'aria-hidden'
+export const ATTR_ARIA_LABEL = 'aria-label'
+export const ATTR_ARIA_LIVE = 'aria-live'
+export const ATTR_ARIA_PRESSED = 'aria-pressed'
diff --git a/src/constants/styles.js b/src/constants/styles.js
new file mode 100644
index 00000000000..73545c90320
--- /dev/null
+++ b/src/constants/styles.js
@@ -0,0 +1,2 @@
+export const STYLE_WIDTH = 'width'
+export const STYLE_HEIGHT = 'height'
diff --git a/src/constants/tags.js b/src/constants/tags.js
new file mode 100644
index 00000000000..becc06a3591
--- /dev/null
+++ b/src/constants/tags.js
@@ -0,0 +1,4 @@
+export const TAG_ANCHOR = 'a'
+export const TAG_DIV = 'div'
+export const TAG_IMAGE = 'img'
+export const TAG_SPAN = 'span'
diff --git a/src/utils/array.js b/src/utils/array.js
index edc904c8987..1f47c9b07db 100644
--- a/src/utils/array.js
+++ b/src/utils/array.js
@@ -1,9 +1,11 @@
 // --- Static ---
 
 export const from = (...args) => Array.from(...args)
-export const isArray = val => Array.isArray(val)
 
 // --- Instance ---
 
-export const arrayIncludes = (array, value) => array.indexOf(value) !== -1
 export const concat = (...args) => Array.prototype.concat.apply([], args)
+
+// --- Utilities ---
+
+export const arrayIncludes = (array, value) => array.indexOf(value) !== -1
diff --git a/src/utils/bv-form-btn-label-control.js b/src/utils/bv-form-btn-label-control.js
index ba302880011..11499fea087 100644
--- a/src/utils/bv-form-btn-label-control.js
+++ b/src/utils/bv-form-btn-label-control.js
@@ -190,7 +190,7 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
         attrs: {
           id: idButton,
           type: 'button',
-          disabled: disabled,
+          disabled,
           'aria-haspopup': 'dialog',
           'aria-expanded': visible ? 'true' : 'false',
           'aria-invalid': state === false || (required && !value) ? 'true' : null,
diff --git a/src/utils/inspect.js b/src/utils/inspect.js
index 0cc44e26e27..6794d01d069 100644
--- a/src/utils/inspect.js
+++ b/src/utils/inspect.js
@@ -1,10 +1,5 @@
-import { isArray } from './array'
-import { isNumeric } from './number'
-import { isObject, isPlainObject } from './object'
 import { File } from './safe-types'
 
-// --- Convenience inspection utilities ---
-
 export const toType = val => typeof val
 
 export const toRawType = val => Object.prototype.toString.call(val).slice(8, -1)
@@ -29,8 +24,23 @@ export const isString = val => toType(val) === 'string'
 
 export const isNumber = val => toType(val) === 'number'
 
+// Is a value number like (i.e. a number or a number as string)
+export const isNumeric = value => !isNaN(parseInt(value, 10))
+
 export const isPrimitive = val => isBoolean(val) || isString(val) || isNumber(val)
 
+export const isArray = val => Array.isArray(val)
+
+// Quick object check
+// This is primarily used to tell Objects from primitive values
+// when we know the value is a JSON-compliant type
+// Note object could be a complex type like array, date, etc.
+export const isObject = obj => obj !== null && typeof obj === 'object'
+
+// Strict object type check
+// Only returns true for plain JavaScript objects
+export const isPlainObject = obj => Object.prototype.toString.call(obj) === '[object Object]'
+
 export const isDate = val => val instanceof Date
 
 export const isEvent = val => val instanceof Event
@@ -41,6 +51,3 @@ export const isRegExp = val => toRawType(val) === 'RegExp'
 
 export const isPromise = val =>
   !isUndefinedOrNull(val) && isFunction(val.then) && isFunction(val.catch)
-
-// Extra convenience named re-exports
-export { isArray, isNumeric, isObject, isPlainObject }
diff --git a/src/utils/inspect.spec.js b/src/utils/inspect.spec.js
index 29b13d76638..525560c6967 100644
--- a/src/utils/inspect.spec.js
+++ b/src/utils/inspect.spec.js
@@ -1,23 +1,29 @@
 import {
-  toType,
-  toRawType,
-  toRawTypeLC,
-  isUndefined,
-  isNull,
-  isUndefinedOrNull,
-  isFunction,
+  isArray,
   isBoolean,
-  isString,
-  isNumber,
-  isPrimitive,
   isDate,
+  isEmptyString,
   isEvent,
+  isFunction,
+  isNull,
+  isNumber,
+  isNumeric,
+  isObject,
+  isPlainObject,
+  isPrimitive,
+  isPromise,
   isRegExp,
-  isPromise
+  isString,
+  isUndefined,
+  isUndefinedOrNull,
+  isUndefinedOrNullOrEmpty,
+  toRawType,
+  toRawTypeLC,
+  toType
 } from './inspect'
 
 describe('utils/inspect', () => {
-  it('toType', async () => {
+  it('toType() works', async () => {
     expect(toType(123)).toEqual('number')
     expect(toType('123')).toEqual('string')
     expect(toType(true)).toEqual('boolean')
@@ -31,7 +37,7 @@ describe('utils/inspect', () => {
     expect(toType(null)).toEqual('object')
   })
 
-  it('toRawType', async () => {
+  it('toRawType() works', async () => {
     expect(toRawType(123)).toEqual('Number')
     expect(toRawType('123')).toEqual('String')
     expect(toRawType(true)).toEqual('Boolean')
@@ -45,7 +51,7 @@ describe('utils/inspect', () => {
     expect(toRawType(null)).toEqual('Null')
   })
 
-  it('toRawTypeLC', async () => {
+  it('toRawTypeLC() works', async () => {
     expect(toRawTypeLC(123)).toEqual('number')
     expect(toRawTypeLC('123')).toEqual('string')
     expect(toRawTypeLC(true)).toEqual('boolean')
@@ -59,7 +65,7 @@ describe('utils/inspect', () => {
     expect(toRawTypeLC(null)).toEqual('null')
   })
 
-  it('isUndefined', async () => {
+  it('isUndefined() works', async () => {
     expect(isUndefined(123)).toEqual(false)
     expect(isUndefined('123')).toEqual(false)
     expect(isUndefined(true)).toEqual(false)
@@ -73,7 +79,7 @@ describe('utils/inspect', () => {
     expect(isUndefined(null)).toEqual(false)
   })
 
-  it('isNull', async () => {
+  it('isNull() works', async () => {
     expect(isNull(123)).toEqual(false)
     expect(isNull('123')).toEqual(false)
     expect(isNull(true)).toEqual(false)
@@ -87,7 +93,23 @@ describe('utils/inspect', () => {
     expect(isNull(null)).toEqual(true)
   })
 
-  it('isUndefinedOrNull', async () => {
+  it('isEmptyString() works', async () => {
+    expect(isEmptyString(123)).toEqual(false)
+    expect(isEmptyString('123')).toEqual(false)
+    expect(isEmptyString('')).toEqual(true)
+    expect(isEmptyString(' ')).toEqual(false)
+    expect(isEmptyString(true)).toEqual(false)
+    expect(isEmptyString({})).toEqual(false)
+    expect(isEmptyString([])).toEqual(false)
+    expect(isEmptyString(/abc/)).toEqual(false)
+    expect(isEmptyString(() => {})).toEqual(false)
+    expect(isEmptyString(Date)).toEqual(false)
+    expect(isEmptyString(new Date())).toEqual(false)
+    expect(isEmptyString(undefined)).toEqual(false)
+    expect(isEmptyString(null)).toEqual(false)
+  })
+
+  it('isUndefinedOrNull() works', async () => {
     expect(isUndefinedOrNull(123)).toEqual(false)
     expect(isUndefinedOrNull('123')).toEqual(false)
     expect(isUndefinedOrNull(true)).toEqual(false)
@@ -101,7 +123,23 @@ describe('utils/inspect', () => {
     expect(isUndefinedOrNull(null)).toEqual(true)
   })
 
-  it('isFunction', async () => {
+  it('isUndefinedOrNullOrEmpty() works', async () => {
+    expect(isUndefinedOrNullOrEmpty(123)).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty('123')).toEqual(false)
+    expect(isEmptyString('')).toEqual(true)
+    expect(isEmptyString(' ')).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty(true)).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty({})).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty([])).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty(/abc/)).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty(() => {})).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty(Date)).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty(new Date())).toEqual(false)
+    expect(isUndefinedOrNullOrEmpty(undefined)).toEqual(true)
+    expect(isUndefinedOrNullOrEmpty(null)).toEqual(true)
+  })
+
+  it('isFunction() works', async () => {
     expect(isFunction(123)).toEqual(false)
     expect(isFunction('123')).toEqual(false)
     expect(isFunction(true)).toEqual(false)
@@ -115,7 +153,7 @@ describe('utils/inspect', () => {
     expect(isFunction(null)).toEqual(false)
   })
 
-  it('isBoolean', async () => {
+  it('isBoolean() works', async () => {
     expect(isBoolean(123)).toEqual(false)
     expect(isBoolean('123')).toEqual(false)
     expect(isBoolean(true)).toEqual(true)
@@ -129,7 +167,7 @@ describe('utils/inspect', () => {
     expect(isBoolean(null)).toEqual(false)
   })
 
-  it('isString', async () => {
+  it('isString() works', async () => {
     expect(isString(123)).toEqual(false)
     expect(isString('123')).toEqual(true)
     expect(isString(true)).toEqual(false)
@@ -143,7 +181,7 @@ describe('utils/inspect', () => {
     expect(isString(null)).toEqual(false)
   })
 
-  it('isNumber', async () => {
+  it('isNumber() works', async () => {
     expect(isNumber(123)).toEqual(true)
     expect(isNumber('123')).toEqual(false)
     expect(isNumber(true)).toEqual(false)
@@ -157,7 +195,23 @@ describe('utils/inspect', () => {
     expect(isNumber(null)).toEqual(false)
   })
 
-  it('isPrimitive', async () => {
+  it('isNumeric() works', async () => {
+    expect(isNumeric(0)).toBe(true)
+    expect(isNumeric('0')).toBe(true)
+    expect(isNumeric(1)).toBe(true)
+    expect(isNumeric('1')).toBe(true)
+    expect(isNumeric(1e5)).toBe(true)
+    expect(isNumeric('1e5')).toBe(true)
+    expect(isNumeric('256 foobar')).toBe(true)
+    expect(isNumeric('foo 256bar')).toBe(false)
+    expect(isNumeric({})).toBe(false)
+    expect(isNumeric([])).toBe(false)
+    expect(isNumeric(new Date())).toBe(false)
+    expect(isNumeric(null)).toBe(false)
+    expect(isNumeric(undefined)).toBe(false)
+  })
+
+  it('isPrimitive() works', async () => {
     expect(isPrimitive(123)).toEqual(true)
     expect(isPrimitive('123')).toEqual(true)
     expect(isPrimitive(true)).toEqual(true)
@@ -171,7 +225,49 @@ describe('utils/inspect', () => {
     expect(isPrimitive(null)).toEqual(false)
   })
 
-  it('isDate', async () => {
+  it('isArray() works', async () => {
+    expect(isArray(123)).toEqual(false)
+    expect(isArray('123')).toEqual(false)
+    expect(isArray(true)).toEqual(false)
+    expect(isArray({})).toEqual(false)
+    expect(isArray([])).toEqual(true)
+    expect(isArray(/abc/)).toEqual(false)
+    expect(isArray(() => {})).toEqual(false)
+    expect(isArray(Date)).toEqual(false)
+    expect(isArray(new Date())).toEqual(false)
+    expect(isArray(undefined)).toEqual(false)
+    expect(isArray(null)).toEqual(false)
+  })
+
+  it('isObject() works', async () => {
+    expect(isObject(123)).toEqual(false)
+    expect(isObject('123')).toEqual(false)
+    expect(isObject(true)).toEqual(false)
+    expect(isObject({})).toEqual(true)
+    expect(isObject([])).toEqual(true)
+    expect(isObject(/abc/)).toEqual(true)
+    expect(isObject(() => {})).toEqual(false)
+    expect(isObject(Date)).toEqual(false)
+    expect(isObject(new Date())).toEqual(true)
+    expect(isObject(undefined)).toEqual(false)
+    expect(isObject(null)).toEqual(false)
+  })
+
+  it('isPlainObject() works', async () => {
+    expect(isPlainObject(123)).toEqual(false)
+    expect(isPlainObject('123')).toEqual(false)
+    expect(isPlainObject(true)).toEqual(false)
+    expect(isPlainObject({})).toEqual(true)
+    expect(isPlainObject([])).toEqual(false)
+    expect(isPlainObject(/abc/)).toEqual(false)
+    expect(isPlainObject(() => {})).toEqual(false)
+    expect(isPlainObject(Date)).toEqual(false)
+    expect(isPlainObject(new Date())).toEqual(false)
+    expect(isPlainObject(undefined)).toEqual(false)
+    expect(isPlainObject(null)).toEqual(false)
+  })
+
+  it('isDate() works', async () => {
     expect(isDate(123)).toEqual(false)
     expect(isDate('123')).toEqual(false)
     expect(isDate(true)).toEqual(false)
@@ -185,7 +281,7 @@ describe('utils/inspect', () => {
     expect(isDate(null)).toEqual(false)
   })
 
-  it('isEvent', async () => {
+  it('isEvent() works', async () => {
     expect(isEvent(123)).toEqual(false)
     expect(isEvent('123')).toEqual(false)
     expect(isEvent(true)).toEqual(false)
@@ -201,7 +297,7 @@ describe('utils/inspect', () => {
     expect(isEvent(null)).toEqual(false)
   })
 
-  it('isRegExp', async () => {
+  it('isRegExp() works', async () => {
     expect(isRegExp(123)).toEqual(false)
     expect(isRegExp('123')).toEqual(false)
     expect(isRegExp(true)).toEqual(false)
@@ -215,7 +311,7 @@ describe('utils/inspect', () => {
     expect(isRegExp(null)).toEqual(false)
   })
 
-  it('isPromise', async () => {
+  it('isPromise() works', async () => {
     expect(isPromise(123)).toEqual(false)
     expect(isPromise('123')).toEqual(false)
     expect(isPromise(true)).toEqual(false)
diff --git a/src/utils/number.js b/src/utils/number.js
index 5a9895c52cb..2892515bca9 100644
--- a/src/utils/number.js
+++ b/src/utils/number.js
@@ -17,6 +17,3 @@ export const toFloat = (value, defaultValue = NaN) => {
 // representation with `precision` digits after the decimal
 // Returns the string 'NaN' if the value cannot be converted
 export const toFixed = (val, precision) => toFloat(val).toFixed(toInteger(precision, 0))
-
-// Is a value number like (i.e. a number or a number as string)
-export const isNumeric = value => toInteger(value, null) !== null
diff --git a/src/utils/number.spec.js b/src/utils/number.spec.js
index 7c41aba9b42..02639c5dc4e 100644
--- a/src/utils/number.spec.js
+++ b/src/utils/number.spec.js
@@ -1,4 +1,4 @@
-import { isNumeric, toFixed, toFloat, toInteger } from './number'
+import { toFixed, toFloat, toInteger } from './number'
 
 describe('utils/number', () => {
   it('toInteger() works', async () => {
@@ -69,20 +69,4 @@ describe('utils/number', () => {
     expect(toFixed('1 foo', null)).toBe('1')
     expect(toFixed('foo 1 bar', {})).toBe('NaN')
   })
-
-  it('isNumeric() works', async () => {
-    expect(isNumeric(0)).toBe(true)
-    expect(isNumeric('0')).toBe(true)
-    expect(isNumeric(1)).toBe(true)
-    expect(isNumeric('1')).toBe(true)
-    expect(isNumeric(1e5)).toBe(true)
-    expect(isNumeric('1e5')).toBe(true)
-    expect(isNumeric('256 foobar')).toBe(true)
-    expect(isNumeric('foo 256bar')).toBe(false)
-    expect(isNumeric({})).toBe(false)
-    expect(isNumeric([])).toBe(false)
-    expect(isNumeric(new Date())).toBe(false)
-    expect(isNumeric(null)).toBe(false)
-    expect(isNumeric(undefined)).toBe(false)
-  })
 })
diff --git a/src/utils/object.js b/src/utils/object.js
index 72cba7268cd..8d47baa01fe 100644
--- a/src/utils/object.js
+++ b/src/utils/object.js
@@ -1,87 +1,109 @@
-import { isArray } from './array'
+import { isArray, isPlainObject, isUndefinedOrNull } from './inspect'
+
+// --- Constants ---
+
+const o = Object
+const oProto = o.prototype
 
 // --- Static ---
 
-export const assign = (...args) => Object.assign(...args)
-export const create = (proto, optionalProps) => Object.create(proto, optionalProps)
-export const defineProperties = (obj, props) => Object.defineProperties(obj, props)
-export const defineProperty = (obj, prop, descriptor) =>
-  Object.defineProperty(obj, prop, descriptor)
-export const freeze = obj => Object.freeze(obj)
-export const getOwnPropertyNames = obj => Object.getOwnPropertyNames(obj)
-export const getOwnPropertyDescriptor = (obj, prop) => Object.getOwnPropertyDescriptor(obj, prop)
-export const getOwnPropertySymbols = obj => Object.getOwnPropertySymbols(obj)
-export const getPrototypeOf = obj => Object.getPrototypeOf(obj)
-export const is = (value1, value2) => Object.is(value1, value2)
-export const isFrozen = obj => Object.isFrozen(obj)
-export const keys = obj => Object.keys(obj)
-
-// --- "Instance" ---
-
-export const hasOwnProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
-export const toString = obj => Object.prototype.toString.call(obj)
+export const assign = (...args) => o.assign(...args)
+export const create = (proto, optionalProps) => o.create(proto, optionalProps)
+export const defineProperties = (obj, props) => o.defineProperties(obj, props)
+export const defineProperty = (obj, prop, descriptor) => o.defineProperty(obj, prop, descriptor)
+export const freeze = obj => o.freeze(obj)
+export const getOwnPropertyNames = obj => o.getOwnPropertyNames(obj)
+export const getOwnPropertyDescriptor = (obj, prop) => o.getOwnPropertyDescriptor(obj, prop)
+export const getOwnPropertySymbols = obj => o.getOwnPropertySymbols(obj)
+export const getPrototypeOf = obj => o.getPrototypeOf(obj)
+export const is = (obj1, obj2) => o.is(obj1, obj2)
+export const isFrozen = obj => o.isFrozen(obj)
+export const keys = obj => o.keys(obj)
 
-// --- Utilities ---
+// --- Instance ---
 
-/**
- * Quick object check - this is primarily used to tell
- * Objects from primitive values when we know the value
- * is a JSON-compliant type.
- * Note object could be a complex type like array, date, etc.
- */
-export const isObject = obj => obj !== null && typeof obj === 'object'
+export const hasOwnProperty = (obj, prop) => oProto.hasOwnProperty.call(obj, prop)
+export const toString = obj => oProto.toString.call(obj)
 
-/**
- * Strict object type check. Only returns true
- * for plain JavaScript objects.
- */
-export const isPlainObject = obj => Object.prototype.toString.call(obj) === '[object Object]'
+// --- Utilities ---
 
-/**
- * Shallow copy an object. If the passed in object
- * is null or undefined, returns an empty object
- */
+// Shallow copy an object
+// If the passed in object is `null` or `undefined`, returns an empty object
 export const clone = obj => ({ ...obj })
 
-/**
- * Return a shallow copy of object with the specified properties only
- * @link https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc
- */
-export const pick = (obj, props) =>
-  keys(obj)
-    .filter(key => props.indexOf(key) !== -1)
+// Return a shallow copy of object with the specified properties only
+// https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc
+export const pick = (obj, propsOrCondition) => {
+  const filterFn = isArray(propsOrCondition)
+    ? key => propsOrCondition.indexOf(key) !== -1
+    : key => propsOrCondition(obj[key], key)
+
+  return keys(obj)
+    .filter(filterFn)
     .reduce((result, key) => ({ ...result, [key]: obj[key] }), {})
+}
 
-/**
- * Return a shallow copy of object with the specified properties omitted
- * @link https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc
- */
-export const omit = (obj, props) =>
-  keys(obj)
-    .filter(key => props.indexOf(key) === -1)
+// Return a shallow copy of object with the specified properties omitted
+// https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc
+export const omit = (obj, propsOrCondition) => {
+  const filterFn = isArray(propsOrCondition)
+    ? key => propsOrCondition.indexOf(key) === -1
+    : key => !propsOrCondition(obj[key], key)
+
+  return keys(obj)
+    .filter(filterFn)
     .reduce((result, key) => ({ ...result, [key]: obj[key] }), {})
+}
 
 /**
  * Convenience method to create a read-only descriptor
  */
 export const readonlyDescriptor = () => ({ enumerable: true, configurable: false, writable: false })
 
-/**
- * Deep-freezes and object, making it immutable / read-only.
- * Returns the same object passed-in, but frozen.
- * Freezes inner object/array/values first.
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
- * Note: this method will not work for property values using Symbol() as a key
- */
+// Deep-freezes and object, making it immutable/read-only
+// Returns the same object passed-in, but frozen
+// Freezes inner object/array/values first
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
+// Note: This method will not work for property values using `Symbol()` as a key
 export const deepFreeze = obj => {
   // Retrieve the property names defined on object/array
   // Note: `keys` will ignore properties that are keyed by a `Symbol()`
   const props = keys(obj)
+
   // Iterate over each prop and recursively freeze it
   props.forEach(prop => {
     const value = obj[prop]
     // If value is a plain object or array, we deepFreeze it
     obj[prop] = value && (isPlainObject(value) || isArray(value)) ? deepFreeze(value) : value
   })
+
   return freeze(obj)
 }
+
+// Build an object from an array of key-value pairs
+// - `[['a', 'b'], ['c', 'd']]` => `{ a: 'b', c 'd' }`
+// It is also possible to pass in an object instead of the key-value pair
+// which will be merged with the other data
+// - `[['a', 'b'], { c: 'd' }]` => `{ a: 'b', c 'd' }`
+// The order of the key-value pairs is important, the last one takes precedence
+// The second argument takes in a loose expression wether to return an empty object
+// By default `null` and `undefined` values are omitted from the object
+// It's possible to pass in a custom `omitFn` as third argument
+export const buildObject = (props, empty = false, omitFn = isUndefinedOrNull) => {
+  if (empty) {
+    return {}
+  }
+
+  return props.reduce((obj, prop) => {
+    if (isPlainObject(prop)) {
+      return assign(obj, omit(prop, omitFn))
+    }
+
+    const [key, value, force = false] = prop
+    if (force || !omitFn(value)) {
+      obj[key] = value
+    }
+
+    return obj
+  }, {})
+}
diff --git a/src/utils/object.spec.js b/src/utils/object.spec.js
index 50b29841816..1a7a71d621e 100644
--- a/src/utils/object.spec.js
+++ b/src/utils/object.spec.js
@@ -1,19 +1,45 @@
-import { pick, omit } from './object'
+import { buildObject, omit, pick } from './object'
 
 describe('utils/object', () => {
   it('pick() works', async () => {
-    const obj = { a: 1, b: 2, c: 3, d: null, e: [] }
+    const obj = { a: 1, b: 2, c: 3, d: null, e: undefined, f: [] }
+    const pickFn = value => value === null
 
     expect(pick(obj, ['a', 'b', 'c'])).toEqual({ a: 1, b: 2, c: 3 })
     expect(pick(obj, Object.keys(obj))).toEqual(obj)
     expect(pick(obj, [])).toEqual({})
+    expect(pick(obj, pickFn)).toEqual({ d: null })
   })
 
   it('omit() works', async () => {
-    const obj = { a: 1, b: 2, c: 3, d: null, e: [] }
+    const obj = { a: 1, b: 2, c: 3, d: null, e: undefined, f: [] }
+    const omitFn = value => value === null
 
-    expect(omit(obj, ['a', 'b', 'c'])).toEqual({ d: null, e: [] })
+    expect(omit(obj, ['a', 'b', 'c'])).toEqual({ d: null, e: undefined, f: [] })
     expect(omit(obj, Object.keys(obj))).toEqual({})
     expect(omit(obj, [])).toEqual(obj)
+    expect(omit(obj, omitFn)).toEqual({ a: 1, b: 2, c: 3, e: undefined, f: [] })
+  })
+
+  it('buildObject() works', async () => {
+    const omitFn = value => value === null
+
+    expect(buildObject([])).toEqual({})
+    expect(buildObject([['a', 'b']])).toEqual({ a: 'b' })
+    expect(buildObject([['a', 'b'], ['a', 'c']])).toEqual({ a: 'c' })
+    expect(buildObject([['a', 'b'], { c: 'd', e: 'f' }])).toEqual({ a: 'b', c: 'd', e: 'f' })
+    expect(buildObject([['a', 'b']], true)).toEqual({})
+    expect(buildObject([['a', 'b']], false)).toEqual({ a: 'b' })
+    expect(buildObject([['a', 'b']], 'foo')).toEqual({})
+    expect(buildObject([['a', 'b'], ['c', null], ['d', undefined]])).toEqual({ a: 'b' })
+    expect(buildObject([['a', 'b'], ['c', null], ['d', undefined]], false, omitFn)).toEqual({
+      a: 'b',
+      d: undefined
+    })
+    expect(buildObject([['a', 'b'], ['c', null, true], ['d', undefined]], false, omitFn)).toEqual({
+      a: 'b',
+      c: null,
+      d: undefined
+    })
   })
 })
diff --git a/src/utils/router.js b/src/utils/router.js
index 521de9fd0bd..081a570be6d 100644
--- a/src/utils/router.js
+++ b/src/utils/router.js
@@ -1,10 +1,9 @@
+import { TAG_ANCHOR } from '../constants/tags'
 import { isTag } from './dom'
 import { isArray, isNull, isPlainObject, isString, isUndefined } from './inspect'
 import { keys } from './object'
 import { toString } from './string'
 
-const ANCHOR_TAG = 'a'
-
 // Precompile RegExp
 const commaRE = /%2C/g
 const encodeReserveRE = /[!'()*]/g
@@ -90,12 +89,12 @@ export const parseQuery = query => {
 
 export const isLink = props => !!(props.href || props.to)
 
-export const isRouterLink = tag => !isTag(tag, ANCHOR_TAG)
+export const isRouterLink = tag => !isTag(tag, TAG_ANCHOR)
 
 export const computeTag = ({ to, disabled, routerComponentName } = {}, thisOrParent) => {
   const hasRouter = thisOrParent.$router
   if (!hasRouter || (hasRouter && disabled) || (hasRouter && !to)) {
-    return ANCHOR_TAG
+    return TAG_ANCHOR
   }
 
   // TODO:
@@ -118,7 +117,7 @@ export const computeRel = ({ target, rel } = {}) => {
 
 export const computeHref = (
   { href, to } = {},
-  tag = ANCHOR_TAG,
+  tag = TAG_ANCHOR,
   fallback = '#',
   toFallback = '/'
 ) => {