bootstrap-vue · jacobmllr95 · Jan 1, 2021 · Oct 22, 2020 · Oct 22, 2020 · Oct 22, 2020
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,3 +1,3 @@
 {
-  "sandboxes": ["qeu9j"]
+  "sandboxes": ["qeu9j", "xblbj"]
 }
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js version
-        uses: actions/setup-node@v2.1.3
+        uses: actions/setup-node@v2.1.4
         with:
           node-version: ${{ matrix.node }}
 

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js version
-        uses: actions/setup-node@v2.1.3
+        uses: actions/setup-node@v2.1.4
         with:
           node-version: ${{ matrix.node }}
 
@@ -61,7 +61,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js version
-        uses: actions/setup-node@v2.1.3
+        uses: actions/setup-node@v2.1.4
         with:
           node-version: ${{ matrix.node }}
 
@@ -98,7 +98,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js version
-        uses: actions/setup-node@v2.1.3
+        uses: actions/setup-node@v2.1.4
         with:
           node-version: ${{ matrix.node }}
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,39 @@ All notable changes to this project will be documented in this file. See
 [standard-version](https://github.com/conventional-changelog/standard-version) for commit
 guidelines.
 
+<a name="2.21.2"></a>
+
+### [v2.21.2](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.21.1...v2.21.2)
+
+Released: 2021-01-01
+
+### Bug Fixes v2.21.2
+
+- **b-dropdown:** only apply `heading` role to header when not a `header` tag
+  ([#6274](https://github.com/bootstrap-vue/bootstrap-vue/issues/6274))
+  ([bd67da0](https://github.com/bootstrap-vue/bootstrap-vue/commit/bd67da0c40744e6b245a4e514e2319ca7bfafe2d))
+- **b-table:** allow `responsive` and `stacked` props together
+  ([#6266](https://github.com/bootstrap-vue/bootstrap-vue/issues/6266))
+  ([fa977a8](https://github.com/bootstrap-vue/bootstrap-vue/commit/fa977a83cf21dd118e30f81aacf80d1c25b5c484))
+- clean up props inheritance ([#6265](https://github.com/bootstrap-vue/bootstrap-vue/issues/6265))
+  ([79784ae](https://github.com/bootstrap-vue/bootstrap-vue/commit/79784ae6e03f90ee14ce90f8f5e02d0249eb5c4a))
+- **b-form-datepicker/b-form-timepicker:** control size
+  ([#6249](https://github.com/bootstrap-vue/bootstrap-vue/issues/6249))
+  ([f2ffbeb](https://github.com/bootstrap-vue/bootstrap-vue/commit/f2ffbeb85a71f0e3ac5c6ea55622771357c703e1))
+- **b-icon:** title render handling
+  ([#6233](https://github.com/bootstrap-vue/bootstrap-vue/issues/6233))
+  ([b025047](https://github.com/bootstrap-vue/bootstrap-vue/commit/b0250477e6b4228f1f228c2776c8c211d8a57f00))
+- **b-sidebar:** make sure to not exceed 100% in height (closes
+  [#6176](https://github.com/bootstrap-vue/bootstrap-vue/issues/6176))
+  ([#6234](https://github.com/bootstrap-vue/bootstrap-vue/issues/6234))
+  ([782e11d](https://github.com/bootstrap-vue/bootstrap-vue/commit/782e11dedf8ed9f362a1c44772d660adf24975a5))
+- **b-table:** only set `aria-describedby` when caption really exists
+  ([#6251](https://github.com/bootstrap-vue/bootstrap-vue/issues/6251))
+  ([b980017](https://github.com/bootstrap-vue/bootstrap-vue/commit/b980017139613db5d7c8df4293a4d80673c9e646))
+- environment detection based on `userAgent`
+  ([#6226](https://github.com/bootstrap-vue/bootstrap-vue/issues/6226))
+  ([cdfd16c](https://github.com/bootstrap-vue/bootstrap-vue/commit/cdfd16c32296072e49596a8acf722c77709f1b93))
+
 <a name="2.21.1"></a>
 
 ## [v2.21.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.21.0...v2.21.1)

diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
@@ -20,7 +20,7 @@ If you are migrating from a previous `v2.0.0-rc.##` release, please see the
 
 ## Documentation sections
 
-The online documentation is comprised of the following sections:
+The online documentation comprises:
 
 - [Components](/docs/components) - Components and component plugin documentation
 - [Directives](/docs/directives) - Directives and directive plugin documentation
@@ -31,9 +31,8 @@ The online documentation is comprised of the following sections:
 
 ## Prerequisites
 
-Before getting started with BootstrapVue, you should have general familiarity with Vue functionality
-and Bootstrap v{{ bootstrapVersionMajor }} CSS. If you are unfamiliar with Vue and/or Bootstrap,
-some good starting points would be:
+This BootstrapVue documentation assumes you are familiar with Vue and and Bootstrap
+v{{ bootstrapVersionMajor }} CSS. Good starting points for these:
 
 - [Vue Guide](https://vuejs.org/v2/guide/)
 - [Vue API](https://vuejs.org/v2/api/)
@@ -64,8 +63,8 @@ the normalization of cross browser styles. Refer to the following sub-sections f
 
 ### HTML5 doctype
 
-Bootstrap requires the use of the `HTML5` doctype. Without it, you _may_ see some funky incomplete
-styling, but including it shouldn't cause any considerable hiccups.
+Bootstrap requires the use of the `HTML5` doctype. Without it, you may see some strange incomplete
+styling.
 
 ```html
 <!doctype html>
@@ -76,9 +75,9 @@ styling, but including it shouldn't cause any considerable hiccups.
 
 ### Responsive meta tag
 
-Bootstrap is developed for mobile first, a strategy in which code is optimized for mobile devices
-first and then scales up components as necessary using CSS media queries. To ensure proper rendering
-and touch zooming for all devices, **add the responsive viewport meta** tag to your `<head>`.
+Bootstrap is optimized for mobile devices first and then scales up components as necessary using CSS
+media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive
+viewport meta** tag to your `<head>`.
 
 ```html
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -113,88 +112,70 @@ browsers and devices while providing slightly more opinionated resets to common
 
 ## Using module bundlers
 
-If you are using module bundlers like [Webpack](https://webpack.js.org/),
-[Parcel](https://parceljs.org/) or [rollup.js](https://rollupjs.org/), you may prefer to directly
-include the package into your project. To get started, use `yarn` or `npm` to get the latest version
-of Vue.js, BootstrapVue and Bootstrap v4:
+Most likely you are using module bundlers like [Webpack](https://webpack.js.org/),
+[Parcel](https://parceljs.org/) or [rollup.js](https://rollupjs.org/), which makes it easy to
+directly include the package into your project. To do this, use `npm` or `yarn` to get the latest
+version of Vue.js, Bootstrap v4 and BootstrapVue:
 
 ```bash
 # With npm
-npm install vue bootstrap-vue bootstrap
+npm install vue bootstrap bootstrap-vue
 
 # With yarn
-yarn add vue bootstrap-vue bootstrap
+yarn add vue bootstrap bootstrap-vue
 ```
 
-Then, register BootstrapVue in your app entry point:
+Then, register BootstrapVue in your app entry point (typically `app.js` or `main.js`):
 
 ```js
 // app.js
 import Vue from 'vue'
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
-// Install BootstrapVue
+// Import Bootstrap an BootstrapVue CSS files (order is important)
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+// Make BootstrapVue available throughout your project
 Vue.use(BootstrapVue)
 // Optionally install the BootstrapVue icon components plugin
 Vue.use(IconsPlugin)
 ```
 
-And import Bootstrap and BootstrapVue `css` files:
+### Theming Bootstrap
 
-```js
-// app.js
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-```
+If you want to change Bootstrap's default styles (e.g. the `$body-color`), you have to use
+Bootstrap's and BootstrapVue's `scss` files.
 
-**Alternatively** you can import Bootstrap and BootstrapVue `scss` files in a custom SCSS file:
+Create your own `scss` file (e.g. `app.scss`) containing **both** your custom definitions **and**
+the 2 `@import`'s at the end:
 
 ```scss
-// custom.scss
+// app.scss
+
+// Define variable defaults
+$body-bg: #000;
+$body-color: #111;
+
+// Then import Bootstrap an BootstrapVue SCSS files (order is important)
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import 'node_modules/bootstrap-vue/src/index.scss';
 ```
 
-Make sure to import the `custom.scss` file in your app entry point:
+Then import that single `scss` file into your project:
 
 ```js
 // app.js
-import './custom.scss'
-```
-
-Be sure to `@import` or define your custom variable values _before_ including Bootstrap SCSS
-(`bootstrap.scss`), and include BootstrapVue SCSS (`bootstrap-vue.scss`) _after that_ to ensure
-variables are set up correctly.
-
-Place all of the SCSS `@import`s into a **single SCSS file**, and import that single file into your
-project. Importing individual SCSS files into your project will **not** share variable values and
-functions between files by default.
-
-Webpack and Parcel support prepending the `scss` modules with tilde paths (`~`) when importing from
-a `scss` file:
+import Vue from 'vue'
+import { BootstrapVue } from 'bootstrap-vue'
 
-```scss
-// Webpack example
-@import '~bootstrap';
-@import '~bootstrap-vue';
-```
+import './app.scss'
 
-```scss
-// Parcel example
-@import '~bootstrap/scss/bootstrap.scss';
-@import '~bootstrap-vue/src/index.scss';
+Vue.use(BootstrapVue)
 ```
 
-For more details how to configure asset loading and how modules are resolved, please consult the
-module bundlers documentation.
-
-**Notes**:
-
-- Webpack configuration to load CSS files
-  ([official guide](https://webpack.js.org/guides/asset-management/#loading-css))
-- Webpack Loader for SASS/SCSS files ([official guide](https://webpack.js.org/loaders/sass-loader/))
-- Parcel CSS ([official guide](https://parceljs.org/css.html))
-- Parcel SCSS ([official guide](https://parceljs.org/scss.html))
+Do not import the individual SCSS files separately into your project, because variables and
+functions will fail to be shared between files.
 
 For information on theming Bootstrap, check out the [Theming](/docs/reference/theming) reference
 section.
@@ -256,6 +237,34 @@ See the [Vue.js](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-v
 Guide for full details on setting up aliases for [webpack](https://webpack.js.org/),
 [rollup.js](https://rollupjs.org/), [Parcel](https://parceljs.org/), etc.
 
+### Advanced module bundler usage
+
+Webpack and Parcel support prepending the `scss` modules with tilde paths (`~`) when importing from
+a `scss` file:
+
+```scss
+// Webpack example
+@import '~bootstrap';
+@import '~bootstrap-vue';
+```
+
+```scss
+// Parcel example
+@import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap-vue/src/index.scss';
+```
+
+For more details how to configure asset loading and how modules are resolved, please consult the
+module bundlers documentation.
+
+**Notes**:
+
+- Webpack configuration to load CSS files
+  ([official guide](https://webpack.js.org/guides/asset-management/#loading-css))
+- Webpack Loader for SASS/SCSS files ([official guide](https://webpack.js.org/loaders/sass-loader/))
+- Parcel CSS ([official guide](https://parceljs.org/css.html))
+- Parcel SCSS ([official guide](https://parceljs.org/scss.html))
+
 ## Tree shaking with module bundlers
 
 When using a module bundler you can optionally import only specific components groups (plugins),

diff --git a/docs/markdown/reference/theming/README.md b/docs/markdown/reference/theming/README.md
@@ -44,7 +44,7 @@ $body-color: #111;
 
 ## Default theme colors
 
-The default them colors defined in the Bootstrap v4.4 SCSS are as follows:
+The default theme colors defined in the Bootstrap v4.4 SCSS are as follows:
 
 <div class="row">
   <div class="col-md-4">
@@ -73,9 +73,9 @@ The default them colors defined in the Bootstrap v4.4 SCSS are as follows:
   </div>
 </div>
 
-Various components will use variations (intensities) of these default theme colors.
+BootstrapVue components use variations (intensities) of these d
10000
efault theme colors.
 
-You can alter the theme colors, and create additional theme colors, as needed via SASS variables and
+You can alter these theme colors and create additional theme colors as needed via SASS variables and
 maps. Refer to the [Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/)
 docs for more details. All theme colors automatically become available as
 [color variants](/docs/reference/color-variants) to all BootstrapVue components.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue",
-  "version": "2.21.1",
+  "version": "2.21.2",
   "description": "With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.",
   "main": "dist/bootstrap-vue.common.js",
   "web": "dist/bootstrap-vue.js",
@@ -96,28 +96,28 @@
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@babel/standalone": "^7.12.11",
+    "@babel/standalone": "^7.12.12",
     "@nuxt/content": "^1.11.1",
     "@nuxtjs/google-analytics": "^2.4.0",
-    "@nuxtjs/pwa": "^3.3.2",
+    "@nuxtjs/pwa": "^3.3.3",
     "@nuxtjs/robots": "^2.4.2",
     "@nuxtjs/sitemap": "^2.4.0",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "^5.11.8",
     "@vue/test-utils": "^1.1.2",
     "autoprefixer": "^10.1.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-plugin-istanbul": "^6.0.0",
-    "bootstrap-icons": "^1.2.1",
+    "bootstrap-icons": "^1.2.2",
     "bundlewatch": "^0.3.1",
     "clean-css-cli": "^4.3.0",
-    "codemirror": "^5.58.3",
+    "codemirror": "^5.59.0",
     "codesandbox": "^2.2.1",
     "core-js": "^3.8.1",
     "cross-env": "^7.0.3",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^7.0.0",
+    "eslint": "^7.16.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-config-vue": "^2.0.2",
     "eslint-plugin-import": "^2.22.1",
@@ -126,10 +126,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-vue": "^7.3.0",
+    "eslint-plugin-vue": "^7.4.0",
     "esm": "^3.2.25",
     "execa": "^5.0.0",
-    "highlight.js": "^10.4.1",
+    "highlight.js": "^10.5.0",
     "html-loader": "^1.3.2",
     "husky": "^4.3.6",
     "improved-yarn-audit": "^2.3.2",
@@ -138,18 +138,18 @@
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.20",
     "marked": "^1.2.7",
-    "nuxt": "^2.14.11",
-    "postcss": "^8.2.1",
+    "nuxt": "^2.14.12",
+    "postcss": "^8.2.2",
     "postcss-cli": "^8.3.1",
     "prettier": "1.14.3",
     "require-context": "^1.1.0",
     "rollup": "^2.35.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "sass": "^1.30.0",
+    "sass": "^1.32.0",
     "sass-loader": "^10.1.0",
-    "standard-version": "^9.0.0",
+    "standard-version": "^9.1.0",
     "terser": "^5.5.1",
     "vue": "^2.6.12",
     "vue-jest": "^3.0.7",