From 834a4a271eb3c1929de2d43edc27037fffc62276 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 21:02:00 -0300
Subject: [PATCH 01/33] feat(b-aspect): new custom component `<b-aspect>`

---
 src/components/aspect/README.md      | 13 +++++++
 src/components/aspect/aspect.js      | 51 ++++++++++++++++++++++++++++
 src/components/aspect/aspect.spec.js | 29 ++++++++++++++++
 src/components/aspect/index.d.ts     | 11 ++++++
 src/components/aspect/index.js       |  8 +++++
 src/components/aspect/package.json   | 21 ++++++++++++
 6 files changed, 133 insertions(+)
 create mode 100644 src/components/aspect/README.md
 create mode 100644 src/components/aspect/aspect.js
 create mode 100644 src/components/aspect/aspect.spec.js
 create mode 100644 src/components/aspect/index.d.ts
 create mode 100644 src/components/aspect/index.js
 create mode 100644 src/components/aspect/package.json

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
new file mode 100644
index 00000000000..edef331357b
--- /dev/null
+++ b/src/components/aspect/README.md
@@ -0,0 +1,13 @@
+# Aspect
+
+> The `<b-aspect>` component can be used to maintain a specific aspect ratio for content.
+
+## Overview
+
+TBD 
+
+The `<b-aspect>` component was introduced in BootstrapVue `v2.9.0`.
+
+## Usage
+
+TBD
diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
new file mode 100644
index 00000000000..ea5942d8321
--- /dev/null
+++ b/src/components/aspect/aspect.js
@@ -0,0 +1,51 @@
+//
+// b-aspect
+//
+
+import Vue from '../../utils/vue'
+import { toFloat } from '../../utils/number'
+import normalizeSlotMixin from '../../mixns/normalize-slot'
+
+const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
+const RX_SEPARATOR = /[/:]/
+
+export const BAspect = /*#__PURE__*/ Vue.extend({
+  name: 'BAspect',
+  mixins: [normalizeSlotMixin],
+  props: {
+    aspect: {
+      // Accepts a number (i.e. 16 / 9, 1, 4 / 3)
+      // Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
+      type: [Number, String],
+      default: 1
+    }
+  },
+  computed: {
+    padding() {
+      const aspect = this.aspect
+      let ratio = 1
+      if (RX_ASPECT.test(aspect)) {
+        const [width, height] = aspect.split(RX_SEPARATOR).map(v => toFloat(v) || 1)
+        ratio = width / height
+      } else {
+        ratio = toFloat(aspect) || 1
+      }
+      return `${100 / Math.abs(ratio)}%`
+    }
+  },
+  render(h) {
+    const $sizer = h('div', {
+      staticClass: 'b-aspect-size flex-grow-1',
+      style: { paddingBottom: this.padding; height: 0 }
+    })
+    const $content = h(
+      'div',
+      {
+        staticClass: 'b-aspect-content flex-grow-1 w-100 mw-100',
+        style: { marginLeft: '-100%' }
+      },
+      [this.normalizeSlot('default')]
+    )
+    return h('div', { staticClass: 'b-aspect d-flex' }, [$sizer, $content])
+  }
+})
\ No newline at end of file
diff --git a/src/components/aspect/aspect.spec.js b/src/components/aspect/aspect.spec.js
new file mode 100644
index 00000000000..58bde28b91b
--- /dev/null
+++ b/src/components/aspect/aspect.spec.js
@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils'
+import { BAspect } from './aspect'
+
+describe('aspect', () => {
+  it('should have expected default structure', async () => {
+    const wrapper = mount(BAspect)
+    expect(wrapper.isVueInstance()).tobe(true)
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('b-aspect')
+    expect(wrapper.classes()).toContain('d-flex')
+    expect(wrapper.classes().length).toBe(2)
+    
+    const $sizer = wrapper.find('.b-aspect-sizer')
+    expect($sizer.exists()).toBe(true)
+    expect($sizer.is('div')).toBe(true)
+    expect($sizer.classes()).toContain('flex-grow-1')
+    expect($sizer.attributes('style')).toContain('padding-bottom: 100%;')
+
+    const $content = wrapper.find('.b-aspect-content')
+    expect($content.exists()).toBe(true)
+    expect($content.is('div')).toBe(true)
+    expect($content.classes()).toContain('flex-grow-1')
+    expect($content.classes()).toContain('w-100')
+    expect($content.classes()).toContain('mw-100')
+    expect($content.attributes('style')).toContain('margin-left: -100%;')
+
+    wrapper.destroy()
+  })
+})
diff --git a/src/components/aspect/index.d.ts b/src/components/aspect/index.d.ts
new file mode 100644
index 00000000000..d2113036ca6
--- /dev/null
+++ b/src/components/aspect/index.d.ts
@@ -0,0 +1,11 @@
+//
+// Aspect
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const AspectPlugin: BvPlugin
+
+// Component: b-aspect
+export declare class BAspect extends BvComponent {}
diff --git a/src/components/aspect/index.js b/src/components/aspect/index.js
new file mode 100644
index 00000000000..82ca1cf7233
--- /dev/null
+++ b/src/components/aspect/index.js
@@ -0,0 +1,8 @@
+import { BAspect } from './aspect'
+import { pluginFactory } from '../../utils/plugins'
+
+const AspectPlugin = /*#__PURE__*/ pluginFactory({
+  components: { BAspect }
+})
+
+export { AspectPlugin, BAspect }
diff --git a/src/components/aspect/package.json b/src/components/aspect/package.json
new file mode 100644
index 00000000000..ee118791e98
--- /dev/null
+++ b/src/components/aspect/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@bootstrap-vue/aspect",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Aspect",
+    "new": true,
+    "version": "2.9.0",
+    "description": "The `<b-aspect>` component can be used to maintain a specific aspect ratio for content.",
+    "components": [
+      {
+        "component": "BAspect",
+        "props": [
+          {
+            "prop": "aspect",
+            "description": "Aspecct ratio as a numeric ratio or `width:height` string"
+          }
+        ]
+      }
+    ]
+  }
+}

From 0c4c2d881f904b40457262a0cbcc84e3877ce852 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 21:04:08 -0300
Subject: [PATCH 02/33] Update aspect.js

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

diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index ea5942d8321..74756a98e26 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -36,7 +36,7 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
   render(h) {
     const $sizer = h('div', {
       staticClass: 'b-aspect-size flex-grow-1',
-      style: { paddingBottom: this.padding; height: 0 }
+      style: { paddingBottom: this.padding, height: 0 }
     })
     const $content = h(
       'div',
@@ -48,4 +48,4 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
     )
     return h('div', { staticClass: 'b-aspect d-flex' }, [$sizer, $content])
   }
-})
\ No newline at end of file
+})

From b163bb72d35f76a62e01e3d45d2d5101d2d2b01c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 21:09:13 -0300
Subject: [PATCH 03/33] Update aspect.js

---
 src/components/aspect/aspect.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index 74756a98e26..e29d0ff2a71 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -1,10 +1,6 @@
-//
-// b-aspect
-//
-
 import Vue from '../../utils/vue'
 import { toFloat } from '../../utils/number'
-import normalizeSlotMixin from '../../mixns/normalize-slot'
+import normalizeSlotMixin from '../../mixins/normalize-slot'
 
 const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
 const RX_SEPARATOR = /[/:]/

From e74022e2a3f2681512403a4446b1f9380fb231ac Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 21:09:36 -0300
Subject: [PATCH 04/33] Update aspect.spec.js

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

diff --git a/src/components/aspect/aspect.spec.js b/src/components/aspect/aspect.spec.js
index 58bde28b91b..c4566a18c42 100644
--- a/src/components/aspect/aspect.spec.js
+++ b/src/components/aspect/aspect.spec.js
@@ -9,7 +9,7 @@ describe('aspect', () => {
     expect(wrapper.classes()).toContain('b-aspect')
     expect(wrapper.classes()).toContain('d-flex')
     expect(wrapper.classes().length).toBe(2)
-    
+
     const $sizer = wrapper.find('.b-aspect-sizer')
     expect($sizer.exists()).toBe(true)
     expect($sizer.is('div')).toBe(true)

From c13e65d1c57da6b8f54453ee62dfebc4b738375e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 21:11:47 -0300
Subject: [PATCH 05/33] Update aspect.spec.js

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

diff --git a/src/components/aspect/aspect.spec.js b/src/components/aspect/aspect.spec.js
index c4566a18c42..5f44c7fc58f 100644
--- a/src/components/aspect/aspect.spec.js
+++ b/src/components/aspect/aspect.spec.js
@@ -4,7 +4,7 @@ import { BAspect } from './aspect'
 describe('aspect', () => {
   it('should have expected default structure', async () => {
     const wrapper = mount(BAspect)
-    expect(wrapper.isVueInstance()).tobe(true)
+    expect(wrapper.isVueInstance()).toBe(true)
     expect(wrapper.is('div')).toBe(true)
     expect(wrapper.classes()).toContain('b-aspect')
     expect(wrapper.classes()).toContain('d-flex')

From f77f434571f182c09d946e6e588eb5cfa29d245d Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 21:52:01 -0300
Subject: [PATCH 06/33] Update aspect.js

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

diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index e29d0ff2a71..c5ef6fa7157 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -31,7 +31,7 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
   },
   render(h) {
     const $sizer = h('div', {
-      staticClass: 'b-aspect-size flex-grow-1',
+      staticClass: 'b-aspect-sizer flex-grow-1',
       style: { paddingBottom: this.padding, height: 0 }
     })
     const $content = h(

From 5878eb06503623e13994ea9d62709cca5a4fea94 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 22:01:11 -0300
Subject: [PATCH 07/33] Update aspect.spec.js

---
 src/components/aspect/aspect.spec.js | 58 ++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/components/aspect/aspect.spec.js b/src/components/aspect/aspect.spec.js
index 5f44c7fc58f..3bedb6e6cbd 100644
--- a/src/components/aspect/aspect.spec.js
+++ b/src/components/aspect/aspect.spec.js
@@ -14,6 +14,7 @@ describe('aspect', () => {
     expect($sizer.exists()).toBe(true)
     expect($sizer.is('div')).toBe(true)
     expect($sizer.classes()).toContain('flex-grow-1')
+    // Default aspect ratio is 1:1
     expect($sizer.attributes('style')).toContain('padding-bottom: 100%;')
 
     const $content = wrapper.find('.b-aspect-content')
@@ -26,4 +27,61 @@ describe('aspect', () => {
 
     wrapper.destroy()
   })
+
+  it('should have expected structure when aspect is set to "4:3"', async () => {
+    const wrapper = mount(BAspect, {
+      propsData: {
+        aspect: '4:3'
+      }
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('b-aspect')
+    expect(wrapper.classes()).toContain('d-flex')
+    expect(wrapper.classes().length).toBe(2)
+
+    const $sizer = wrapper.find('.b-aspect-sizer')
+    expect($sizer.exists()).toBe(true)
+    expect($sizer.is('div')).toBe(true)
+    expect($sizer.classes()).toContain('flex-grow-1')
+    expect($sizer.attributes('style')).toContain('padding-bottom: 75%;')
+
+    const $content = wrapper.find('.b-aspect-content')
+    expect($content.exists()).toBe(true)
+    expect($content.is('div')).toBe(true)
+    expect($content.classes()).toContain('flex-grow-1')
+    expect($content.classes()).toContain('w-100')
+    expect($content.classes()).toContain('mw-100')
+    expect($content.attributes('style')).toContain('margin-left: -100%;')
+
+    wrapper.destroy()
+  })
+  it('should have expected structure when aspect is set to `4/3`', async () => {
+    const wrapper = mount(BAspect, {
+      propsData: {
+        aspect: 4 / 3
+      }
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('b-aspect')
+    expect(wrapper.classes()).toContain('d-flex')
+    expect(wrapper.classes().length).toBe(2)
+
+    const $sizer = wrapper.find('.b-aspect-sizer')
+    expect($sizer.exists()).toBe(true)
+    expect($sizer.is('div')).toBe(true)
+    expect($sizer.classes()).toContain('flex-grow-1')
+    expect($sizer.attributes('style')).toContain('padding-bottom: 75%;')
+
+    const $content = wrapper.find('.b-aspect-content')
+    expect($content.exists()).toBe(true)
+    expect($content.is('div')).toBe(true)
+    expect($content.classes()).toContain('flex-grow-1')
+    expect($content.classes()).toContain('w-100')
+    expect($content.classes()).toContain('mw-100')
+    expect($content.attributes('style')).toContain('margin-left: -100%;')
+
+    wrapper.destroy()
+  })
 })

From 3465799d0bcf296b9aa76f1935990155ce8a55b3 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 22:02:12 -0300
Subject: [PATCH 08/33] Update aspect.spec.js

---
 src/components/aspect/aspect.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/aspect/aspect.spec.js b/src/components/aspect/aspect.spec.js
index 3bedb6e6cbd..7bb65b7d1c7 100644
--- a/src/components/aspect/aspect.spec.js
+++ b/src/components/aspect/aspect.spec.js
@@ -56,10 +56,10 @@ describe('aspect', () => {
 
     wrapper.destroy()
   })
-  it('should have expected structure when aspect is set to `4/3`', async () => {
+  it('should have expected structure when aspect is set to `16/9`', async () => {
     const wrapper = mount(BAspect, {
       propsData: {
-        aspect: 4 / 3
+        aspect: 16 / 9
       }
     })
     expect(wrapper.isVueInstance()).toBe(true)
@@ -72,7 +72,7 @@ describe('aspect', () => {
     expect($sizer.exists()).toBe(true)
     expect($sizer.is('div')).toBe(true)
     expect($sizer.classes()).toContain('flex-grow-1')
-    expect($sizer.attributes('style')).toContain('padding-bottom: 75%;')
+    expect($sizer.attributes('style')).toContain('padding-bottom: 56.25%;')
 
     const $content = wrapper.find('.b-aspect-content')
     expect($content.exists()).toBe(true)

From 4f93b8d54479bbb1505270cebc66928ac9c1154e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 22:08:02 -0300
Subject: [PATCH 09/33] Update index.d.ts

---
 src/components/index.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 102a27b47bb..5b3c3d1c7d0 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -5,6 +5,7 @@ export declare const componentsPlugin: BvPlugin
 
 // Export all components as named exports
 export * from './alert'
+export * from './aspect'
 export * from './avatar'
 export * from './badge'
 export * from './breadcrumb'

From e23d563bc694445d6555625cbbe91cd4bb61b3b2 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 22:08:38 -0300
Subject: [PATCH 10/33] Update index.js

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

diff --git a/src/components/index.js b/src/components/index.js
index 8b876cbc1d6..74e47073bb6 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,6 +2,7 @@ import { pluginFactory } from '../utils/plugins'
 
 // Component group plugins
 import { AlertPlugin } from './alert'
+import { AspectPlugin } from './aspect'
 import { AvatarPlugin } from './avatar'
 import { BadgePlugin } from './badge'
 import { BreadcrumbPlugin } from './breadcrumb'
@@ -53,6 +54,7 @@ import { TooltipPlugin } from './tooltip'
 export const componentsPlugin = /*#__PURE__*/ pluginFactory({
   plugins: {
     AlertPlugin,
+    AspectPlugin,
     AvatarPlugin,
     BadgePlugin,
     BreadcrumbPlugin,

From 06f1c4350da55dc1dbdf821cec776894d8608a7c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 22:09:24 -0300
Subject: [PATCH 11/33] Update index.js

---
 src/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/index.js b/src/index.js
index 8dfecef73db..80c4ce9eac1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -67,6 +67,10 @@ export * from './icons/icons'
 export { AlertPlugin } from './components/alert'
 export { BAlert } from './components/alert/alert'
 
+// export * from './components/aspect'
+export { AspectPlugin } from './components/aspect'
+export { BAspect } from './components/aspect/aspect'
+
 // export * from './components/avatar'
 export { AvatarPlugin } from './components/avatar'
 export { BAvatar } from './components/avatar/avatar'

From 31e1f05aafe50f6ee1e1d2d028213c205de57ec2 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 22:28:59 -0300
Subject: [PATCH 12/33] Update package.json

---
 src/components/aspect/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/aspect/package.json b/src/components/aspect/package.json
index ee118791e98..7f637626830 100644
--- a/src/components/aspect/package.json
+++ b/src/components/aspect/package.json
@@ -12,7 +12,7 @@
         "props": [
           {
             "prop": "aspect",
-            "description": "Aspecct ratio as a numeric ratio or `width:height` string"
+            "description": "Aspect as a width/height numeric ratio (such as 1.5) or `width:height` string (such as `16:9`)"
           }
         ]
       }

From f1c2896359818973992afddf79708d190f65aa90 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 22:31:42 -0300
Subject: [PATCH 13/33] Update package.json

---
 src/components/aspect/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/aspect/package.json b/src/components/aspect/package.json
index 7f637626830..273e5d6f1e9 100644
--- a/src/components/aspect/package.json
+++ b/src/components/aspect/package.json
@@ -5,7 +5,7 @@
     "title": "Aspect",
     "new": true,
     "version": "2.9.0",
-    "description": "The `<b-aspect>` component can be used to maintain a specific aspect ratio for content.",
+    "description": "The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content.",
     "components": [
       {
         "component": "BAspect",

From 9ba4a173755afb152f32aeb1fac07a9ce864d90d Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 23:00:58 -0300
Subject: [PATCH 14/33] Update README.md

---
 src/components/aspect/README.md | 52 +++++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index edef331357b..4e8af7fd584 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -1,13 +1,55 @@
 # Aspect
 
-> The `<b-aspect>` component can be used to maintain a specific aspect ratio for content.
+> The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content.
+> When the content is longer than the available height, then the component will expand vertically
+> to fit all content.
 
 ## Overview
 
-TBD 
-
 The `<b-aspect>` component was introduced in BootstrapVue `v2.9.0`.
 
-## Usage
+The default aspect ratio is `1:1` (ratio of `1`), which makes the height always be at least the same
+as the width. The `aspect` prop can be used to specify an arbitrary aspect ratio (i.e. `1.5`) or a
+ratio as a string such as `'16:9'` or `'4:3'`.
+
+The width will always be 100% of the available width in the parent element/component.
+
+```html
+<template>
+  <div>
+    <b-form-group label="Aspect ratio" label-for="ratio" label-cols-md="auto" class="mb-3">
+      <b-form-select id="ratio" v-model="aspect" :options="aspects"></b-form-input>
+    </b-form-group>
+    <b-card class="w-50">
+      <b-aspect :aspect="aspect">
+        This will always be an aspect of "{{ aspect }}",
+        except when the content is too tall.
+      </b-aspect>
+    </b-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        aspect: '16:9',
+        aspects: [
+          { text: '4:3', value: '4:3' },
+          { text: '1:1', value: '1:1' },
+          { text: '16:9', value: '16:9' },
+          { text: '16 / 9', value: 16 / 9 },
+          { text: '4', value: 4 },
+          { text: '1.5', value: 1.5 }
+        ]
+      }
+    }
+  }
+</script>
+
+<!-- b-aspect.vue -->
+```
+
+## See also
 
-TBD
+- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc)

From e998b03c83cea53d631672b31f9d9fe3055801f1 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 23:01:40 -0300
Subject: [PATCH 15/33] Update aspect.js

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

diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index c5ef6fa7157..ed4cdb0efbe 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -14,6 +14,10 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
       // Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
       type: [Number, String],
       default: 1
+    },
+    tag: {
+      type: String,
+      default: 'div'
     }
   },
   computed: {
@@ -42,6 +46,6 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
       },
       [this.normalizeSlot('default')]
     )
-    return h('div', { staticClass: 'b-aspect d-flex' }, [$sizer, $content])
+    return h(this.tag, { staticClass: 'b-aspect d-flex' }, [$sizer, $content])
   }
 })

From 7beb14576a45170c44e3b3da57582d7a5f67845c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 23:34:31 -0300
Subject: [PATCH 16/33] Update aspect.js

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

diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index ed4cdb0efbe..bc977426dfa 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -13,7 +13,7 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
       // Accepts a number (i.e. 16 / 9, 1, 4 / 3)
       // Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
       type: [Number, String],
-      default: 1
+      default: '1:1'
     },
     tag: {
       type: String,

From b72bbe96fd519f39ad2c49c9d31f0ede8fa2554d Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 23:35:42 -0300
Subject: [PATCH 17/33] Update aspect.spec.js

---
 src/components/aspect/aspect.spec.js | 30 ++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/aspect/aspect.spec.js b/src/components/aspect/aspect.spec.js
index 7bb65b7d1c7..66e003c2c59 100644
--- a/src/components/aspect/aspect.spec.js
+++ b/src/components/aspect/aspect.spec.js
@@ -28,6 +28,36 @@ describe('aspect', () => {
     wrapper.destroy()
   })
 
+  it('should have expected structure when prop `tag` is set', async () => {
+    const wrapper = mount(BAspect, {
+      propsData: {
+        tag: 'section'
+      }
+    })
+    expect(wrapper.isVueInstance()).toBe(true)
+    expect(wrapper.is('section')).toBe(true)
+    expect(wrapper.classes()).toContain('b-aspect')
+    expect(wrapper.classes()).toContain('d-flex')
+    expect(wrapper.classes().length).toBe(2)
+
+    const $sizer = wrapper.find('.b-aspect-sizer')
+    expect($sizer.exists()).toBe(true)
+    expect($sizer.is('div')).toBe(true)
+    expect($sizer.classes()).toContain('flex-grow-1')
+    // Default aspect ratio is 1:1
+    expect($sizer.attributes('style')).toContain('padding-bottom: 100%;')
+
+    const $content = wrapper.find('.b-aspect-content')
+    expect($content.exists()).toBe(true)
+    expect($content.is('div')).toBe(true)
+    expect($content.classes()).toContain('flex-grow-1')
+    expect($content.classes()).toContain('w-100')
+    expect($content.classes()).toContain('mw-100')
+    expect($content.attributes('style')).toContain('margin-left: -100%;')
+
+    wrapper.destroy()
+  })
+
   it('should have expected structure when aspect is set to "4:3"', async () => {
     const wrapper = mount(BAspect, {
       propsData: {

From a842110b453586deb8c128635af096a2aa72580a Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 24 Mar 2020 23:37:35 -0300
Subject: [PATCH 18/33] Update package.json

---
 src/components/aspect/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/aspect/package.json b/src/components/aspect/package.json
index 273e5d6f1e9..5a3440f7a3e 100644
--- a/src/components/aspect/package.json
+++ b/src/components/aspect/package.json
@@ -12,7 +12,7 @@
         "props": [
           {
             "prop": "aspect",
-            "description": "Aspect as a width/height numeric ratio (such as 1.5) or `width:height` string (such as `16:9`)"
+            "description": "Aspect as a width to height numeric ratio (such as `1.5`) or `width:height` string (such as '16:9')"
           }
         ]
       }

From 42500720df5ec547aa6ea47a9836e0231110dcdb Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:15:23 -0300
Subject: [PATCH 19/33] Update README.md

---
 src/components/aspect/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index 4e8af7fd584..64b84865b51 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -20,7 +20,7 @@ The width will always be 100% of the available width in the parent element/compo
     <b-form-group label="Aspect ratio" label-for="ratio" label-cols-md="auto" class="mb-3">
       <b-form-select id="ratio" v-model="aspect" :options="aspects"></b-form-input>
     </b-form-group>
-    <b-card class="w-50">
+    <b-card>
       <b-aspect :aspect="aspect">
         This will always be an aspect of "{{ aspect }}",
         except when the content is too tall.

From 8c3022b80d7a3b327c8684e07db8b2ab549279c0 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:32:12 -0300
Subject: [PATCH 20/33] Update README.md

---
 src/components/aspect/README.md | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index 64b84865b51..09a36d5cfbf 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -35,12 +35,18 @@ The width will always be 100% of the available width in the parent element/compo
       return {
         aspect: '16:9',
         aspects: [
-          { text: '4:3', value: '4:3' },
-          { text: '1:1', value: '1:1' },
-          { text: '16:9', value: '16:9' },
-          { text: '16 / 9', value: 16 / 9 },
+          { text: '4:3 (SD)', value: '4:3' },
+          { text: '4/3 (Same as `4:3`)', value: 4 / 3 },
+          { text: '1:1 (Square)', value: '1:1' },
+          { text: '16:9 (HD)', value: '16:9' },
+          { text: '16/9 (Same as `16:9`)', value: 16 / 9 },
+          { text: '1.85:1 (Widescreen)', value: '1.85:1' },
+          { text: '2:1 (Univisium)', value: '1:1' },
+          { text: '21:9 (Anamorphic)', value: '21:9' },
           { text: '4', value: 4 },
-          { text: '1.5', value: 1.5 }
+          { text: '2 (Same as `2:1`)', value: 2 },
+          { text: '1.5', value: 1.5 },
+          { text: '1 (Same as `1:1`)', value: 1 }
         ]
       }
     }

From cc2779480efc5906a0353ba04f89c91885d5f7ea Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:33:18 -0300
Subject: [PATCH 21/33] Update README.md

---
 src/components/embed/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/embed/README.md b/src/components/embed/README.md
index 5957a3cb006..2b5e56643c6 100644
--- a/src/components/embed/README.md
+++ b/src/components/embed/README.md
@@ -56,4 +56,8 @@ embedded element. Note that the type `iframe` does not support any children.
 </div>
 ```
 
+## See also
+
+- [`<b-aspect>` component](docs/components/aspect)
+
 <!-- Component reference added automatically from component package.json -->

From c6afe701437a85589d49a449c12769343e5a2c4d Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:39:38 -0300
Subject: [PATCH 22/33] Update README.md

---
 src/components/aspect/README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index 09a36d5cfbf..eb9f956065f 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -2,15 +2,16 @@
 
 > The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content.
 > When the content is longer than the available height, then the component will expand vertically
-> to fit all content.
+> to fit all content. If the content is shorter than the computed aspect height, the component will
+> ensure a minimum height is maintained.
 
 ## Overview
 
 The `<b-aspect>` component was introduced in BootstrapVue `v2.9.0`.
 
-The default aspect ratio is `1:1` (ratio of `1`), which makes the height always be at least the same
-as the width. The `aspect` prop can be used to specify an arbitrary aspect ratio (i.e. `1.5`) or a
-ratio as a string such as `'16:9'` or `'4:3'`.
+The default [aspect](https://en.wikipedia.org/wiki/Aspect_ratio_(image)) ratio is `1:1` (ratio of
+`1`), which makes the height always be at least the same as the width. The `aspect` prop can be used
+to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or `'4:3'`.
 
 The width will always be 100% of the available width in the parent element/component.
 

From ebe560cdb33c45eca206f7a16bb8339b58f07161 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:41:28 -0300
Subject: [PATCH 23/33] Update README.md

---
 src/components/aspect/README.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index eb9f956065f..7579bb16118 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -37,17 +37,16 @@ The width will always be 100% of the available width in the parent element/compo
         aspect: '16:9',
         aspects: [
           { text: '4:3 (SD)', value: '4:3' },
-          { text: '4/3 (Same as `4:3`)', value: 4 / 3 },
+          { text: '4/3 (Same as 4:3)', value: 4 / 3 },
           { text: '1:1 (Square)', value: '1:1' },
           { text: '16:9 (HD)', value: '16:9' },
-          { text: '16/9 (Same as `16:9`)', value: 16 / 9 },
+          { text: '16/9 (Same as 16:9)', value: 16 / 9 },
           { text: '1.85:1 (Widescreen)', value: '1.85:1' },
-          { text: '2:1 (Univisium)', value: '1:1' },
+          { text: '2:1 (Univisium)', value: '2:1' },
           { text: '21:9 (Anamorphic)', value: '21:9' },
           { text: '4', value: 4 },
-          { text: '2 (Same as `2:1`)', value: 2 },
-          { text: '1.5', value: 1.5 },
-          { text: '1 (Same as `1:1`)', value: 1 }
+          { text: '2 (Same as 2:1)', value: 2 },
+          { text: '1 (Same as 1:1)', value: 1 }
         ]
       }
     }

From 39699a350f683cc6ae55cab4232567a34b0ef55c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:43:35 -0300
Subject: [PATCH 24/33] Update README.md

---
 src/components/aspect/README.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index 7579bb16118..b72b8558f39 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -37,16 +37,18 @@ The width will always be 100% of the available width in the parent element/compo
         aspect: '16:9',
         aspects: [
           { text: '4:3 (SD)', value: '4:3' },
-          { text: '4/3 (Same as 4:3)', value: 4 / 3 },
+          { text: '4/3 (Same as `4:3`)', value: 4 / 3 },
           { text: '1:1 (Square)', value: '1:1' },
           { text: '16:9 (HD)', value: '16:9' },
-          { text: '16/9 (Same as 16:9)', value: 16 / 9 },
+          { text: '16/9 (Same as `16:9`)', value: 16 / 9 },
           { text: '1.85:1 (Widescreen)', value: '1.85:1' },
-          { text: '2:1 (Univisium)', value: '2:1' },
+          { text: '1.85 (Same as 1.85:1)', value: 1.85 },
+          { text: '2:1 (Univisium)', value: '1:1' },
           { text: '21:9 (Anamorphic)', value: '21:9' },
           { text: '4', value: 4 },
-          { text: '2 (Same as 2:1)', value: 2 },
-          { text: '1 (Same as 1:1)', value: 1 }
+          { text: '2 (Same as `2:1`)', value: 2 },
+          { text: '1.5', value: 1.5 },
+          { text: '1 (Same as `1:1`)', value: 1 }
         ]
       }
     }

From cbda7add94a87993f3c43776215197f4e7797587 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:44:24 -0300
Subject: [PATCH 25/33] Update README.md

---
 src/components/aspect/README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index b72b8558f39..a06ffc22b55 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -37,18 +37,18 @@ The width will always be 100% of the available width in the parent element/compo
         aspect: '16:9',
         aspects: [
           { text: '4:3 (SD)', value: '4:3' },
-          { text: '4/3 (Same as `4:3`)', value: 4 / 3 },
+          { text: '4/3 (Same as 4:3)', value: 4 / 3 },
           { text: '1:1 (Square)', value: '1:1' },
           { text: '16:9 (HD)', value: '16:9' },
-          { text: '16/9 (Same as `16:9`)', value: 16 / 9 },
+          { text: '16/9 (Same as 16:9)', value: 16 / 9 },
           { text: '1.85:1 (Widescreen)', value: '1.85:1' },
           { text: '1.85 (Same as 1.85:1)', value: 1.85 },
-          { text: '2:1 (Univisium)', value: '1:1' },
+          { text: '2:1 (Univisium)', value: '2:1' },
           { text: '21:9 (Anamorphic)', value: '21:9' },
           { text: '4', value: 4 },
-          { text: '2 (Same as `2:1`)', value: 2 },
+          { text: '2 (Same as 2:1)', value: 2 },
           { text: '1.5', value: 1.5 },
-          { text: '1 (Same as `1:1`)', value: 1 }
+          { text: '1 (Same as 1:1)', value: 1 }
         ]
       }
     }

From f1628ee1cd10962aadccdfdb95858dec7bcd2d63 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:48:28 -0300
Subject: [PATCH 26/33] Update README.md

---
 src/components/aspect/README.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index a06ffc22b55..b2daa014be0 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -37,16 +37,18 @@ The width will always be 100% of the available width in the parent element/compo
         aspect: '16:9',
         aspects: [
           { text: '4:3 (SD)', value: '4:3' },
-          { text: '4/3 (Same as 4:3)', value: 4 / 3 },
           { text: '1:1 (Square)', value: '1:1' },
           { text: '16:9 (HD)', value: '16:9' },
-          { text: '16/9 (Same as 16:9)', value: 16 / 9 },
           { text: '1.85:1 (Widescreen)', value: '1.85:1' },
-          { text: '1.85 (Same as 1.85:1)', value: 1.85 },
           { text: '2:1 (Univisium)', value: '2:1' },
           { text: '21:9 (Anamorphic)', value: '21:9' },
-          { text: '4', value: 4 },
+          { text: '3:2 (35mm Film)', value: '3:2' },
+          { text: '3:1 (APS-P)', value: '3:1' },
+          { text: '4/3 (Same as 4:3)', value: 4 / 3 },
+          { text: '16/9 (Same as 16:9)', value: 16 / 9 },
+          { text: '3 (Same as 3:1)', value: 3 },
           { text: '2 (Same as 2:1)', value: 2 },
+          { text: '1.85 (Same as 1.85:1)', value: 1.85 },
           { text: '1.5', value: 1.5 },
           { text: '1 (Same as 1:1)', value: 1 }
         ]

From a06d2527380d6939c90a5cb5a357f36dbc9413f7 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:50:32 -0300
Subject: [PATCH 27/33] Update README.md

---
 src/components/embed/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/embed/README.md b/src/components/embed/README.md
index 2b5e56643c6..5ac71ad8672 100644
--- a/src/components/embed/README.md
+++ b/src/components/embed/README.md
@@ -58,6 +58,6 @@ embedded element. Note that the type `iframe` does not support any children.
 
 ## See also
 
-- [`<b-aspect>` component](docs/components/aspect)
+- [`<b-aspect>` component](/docs/components/aspect)
 
 <!-- Component reference added automatically from component package.json -->

From 0d32c81fdf050f107912c80d423a8eefe3594113 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:52:34 -0300
Subject: [PATCH 28/33] Update package.json

---
 src/components/form-spinbutton/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/form-spinbutton/package.json b/src/components/form-spinbutton/package.json
index 523f599eb94..d27b987de99 100644
--- a/src/components/form-spinbutton/package.json
+++ b/src/components/form-spinbutton/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0",
   "meta": {
     "title": "Form Spinbutton",
-    "new": true,
     "version": "2.5.0",
     "description": "BootstrapVue custom numerical spinbutton form input component, featuring WAI-ARIA accessibility (a11y) and internationalization (i18n)",
     "components": [

From 071029d7699962c6a881dad7f2af0ac8e4094440 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 01:55:31 -0300
Subject: [PATCH 29/33] Update README.md

---
 src/components/form-spinbutton/README.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/form-spinbutton/README.md b/src/components/form-spinbutton/README.md
index c6c9637e979..e72da2c1dc9 100644
--- a/src/components/form-spinbutton/README.md
+++ b/src/components/form-spinbutton/README.md
@@ -4,7 +4,11 @@
 > incrementing or decrementing a numerical value within a range of a minimum and maximum number,
 > with optional step value.
 
-`<b-form-spinbutton>` is
+## Overview
+
+`<b-form-spinbutton>` was introduced in BootstrapVue `v2.5.0`.
+
+The component `<b-form-spinbutton>` is
 [WAI-ARIA compliant](https://www.w3.org/TR/wai-aria-practices-1.2/#spinbutton), allowing for
 [keyboard control](#accessibility), and supports both horizontal (default) and vertical layout.
 
@@ -33,8 +37,6 @@ Similar to [range type inputs](/docs/components/form-input#range-type-input), Bo
 <!-- b-form-spinbutton-demo.vue -->
 ```
 
-## Overview
-
 The <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys can be used to increment or decrement the
 value.
 

From 9f1a587bbd9189149f9831d0b94e3f2c441fd630 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 02:12:22 -0300
Subject: [PATCH 30/33] Update README.md

---
 src/components/aspect/README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index b2daa014be0..77ca48763cc 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -40,8 +40,9 @@ The width will always be 100% of the available width in the parent element/compo
           { text: '1:1 (Square)', value: '1:1' },
           { text: '16:9 (HD)', value: '16:9' },
           { text: '1.85:1 (Widescreen)', value: '1.85:1' },
-          { text: '2:1 (Univisium)', value: '2:1' },
-          { text: '21:9 (Anamorphic)', value: '21:9' },
+          { text: '2:1 (Univisium/Superscope)', value: '2:1' },
+          { text: '21:9 (Anamorphic)', value: '21:9' },1.43:1
+          { text: '1.43:1 (IMAX)', value: '1.43:1' },
           { text: '3:2 (35mm Film)', value: '3:2' },
           { text: '3:1 (APS-P)', value: '3:1' },
           { text: '4/3 (Same as 4:3)', value: 4 / 3 },

From 86c5097a0f7de339ee8e12a982d1964e75d07e73 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 25 Mar 2020 02:34:35 -0300
Subject: [PATCH 31/33] Update README.md

---
 src/components/aspect/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index 77ca48763cc..958a5961d67 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -41,7 +41,7 @@ The width will always be 100% of the available width in the parent element/compo
           { text: '16:9 (HD)', value: '16:9' },
           { text: '1.85:1 (Widescreen)', value: '1.85:1' },
           { text: '2:1 (Univisium/Superscope)', value: '2:1' },
-          { text: '21:9 (Anamorphic)', value: '21:9' },1.43:1
+          { text: '21:9 (Anamorphic)', value: '21:9' },
           { text: '1.43:1 (IMAX)', value: '1.43:1' },
           { text: '3:2 (35mm Film)', value: '3:2' },
           { text: '3:1 (APS-P)', value: '3:1' },

From afdd7f17e557990d8868c3463044a6275a4d3fbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 25 Mar 2020 10:12:29 +0100
Subject: [PATCH 32/33] Update aspect.js

---
 src/components/aspect/aspect.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/aspect/aspect.js b/src/components/aspect/aspect.js
index bc977426dfa..905a226679f 100644
--- a/src/components/aspect/aspect.js
+++ b/src/components/aspect/aspect.js
@@ -2,15 +2,20 @@ import Vue from '../../utils/vue'
 import { toFloat } from '../../utils/number'
 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 ---
 export const BAspect = /*#__PURE__*/ Vue.extend({
-  name: 'BAspect',
+  name: NAME,
   mixins: [normalizeSlotMixin],
   props: {
     aspect: {
-      // Accepts a number (i.e. 16 / 9, 1, 4 / 3)
+      // Accepts a number (i.e. `16 / 9`, `1`, `4 / 3`)
       // Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
       type: [Number, String],
       default: '1:1'
@@ -35,17 +40,17 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
   },
   render(h) {
     const $sizer = h('div', {
-      staticClass: 'b-aspect-sizer flex-grow-1',
+      staticClass: `${CLASS_NAME}-sizer flex-grow-1`,
       style: { paddingBottom: this.padding, height: 0 }
     })
     const $content = h(
       'div',
       {
-        staticClass: 'b-aspect-content flex-grow-1 w-100 mw-100',
+        staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
         style: { marginLeft: '-100%' }
       },
       [this.normalizeSlot('default')]
     )
-    return h(this.tag, { staticClass: 'b-aspect d-flex' }, [$sizer, $content])
+    return h(this.tag, { staticClass: `${CLASS_NAME} d-flex` }, [$sizer, $content])
   }
 })

From 794f603e6b1ff16c1d06fab7e2a9263db1ac4c1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 25 Mar 2020 10:12:34 +0100
Subject: [PATCH 33/33] Update README.md

---
 src/components/aspect/README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
index 958a5961d67..59156c9d278 100644
--- a/src/components/aspect/README.md
+++ b/src/components/aspect/README.md
@@ -1,17 +1,18 @@
 # Aspect
 
 > The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content.
-> When the content is longer than the available height, then the component will expand vertically
-> to fit all content. If the content is shorter than the computed aspect height, the component will
+> When the content is longer than the available height, then the component will expand vertically to
+> fit all content. If the content is shorter than the computed aspect height, the component will
 > ensure a minimum height is maintained.
 
 ## Overview
 
 The `<b-aspect>` component was introduced in BootstrapVue `v2.9.0`.
 
-The default [aspect](https://en.wikipedia.org/wiki/Aspect_ratio_(image)) ratio is `1:1` (ratio of
+The default [aspect](<https://en.wikipedia.org/wiki/Aspect_ratio_(image)>) ratio is `1:1` (ratio of
 `1`), which makes the height always be at least the same as the width. The `aspect` prop can be used
-to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or `'4:3'`.
+to specify an arbitrary aspect ratio (i.e. `1.5`) or a ratio as a string such as `'16:9'` or
+`'4:3'`.
 
 The width will always be 100% of the available width in the parent element/component.