diff --git a/js/index.esm.js b/js/index.esm.js
index f5acb42da7..a0e93bf218 100644
--- a/js/index.esm.js
+++ b/js/index.esm.js
@@ -5,6 +5,8 @@
* --------------------------------------------------------------------------
*/
+import Toa from './src/toa'
+
export { default as Alert } from './src/alert'
export { default as Button } from './src/button'
export { default as Carousel } from './src/carousel'
@@ -17,3 +19,5 @@ export { default as ScrollSpy } from './src/scrollspy'
export { default as Tab } from './src/tab'
export { default as Toast } from './src/toast'
export { default as Tooltip } from './src/tooltip'
+
+window.customElements.define('bs-toa', Toa)
diff --git a/js/index.umd.js b/js/index.umd.js
index 1b39e82b44..6eb4c82fa2 100644
--- a/js/index.umd.js
+++ b/js/index.umd.js
@@ -16,6 +16,7 @@ import Popover from './src/popover'
import ScrollSpy from './src/scrollspy'
import Tab from './src/tab'
import Toast from './src/toast'
+import Toa from './src/toa'
import Tooltip from './src/tooltip'
export default {
@@ -32,3 +33,5 @@ export default {
Toast,
Tooltip
}
+
+window.customElements.define('bs-toa', Toa)
diff --git a/js/src/base.js b/js/src/base.js
new file mode 100644
index 0000000000..3e52b98f10
--- /dev/null
+++ b/js/src/base.js
@@ -0,0 +1,3 @@
+class Base extends HTMLElement {}
+
+export default Base
diff --git a/js/src/toa.js b/js/src/toa.js
new file mode 100644
index 0000000000..85c2b90571
--- /dev/null
+++ b/js/src/toa.js
@@ -0,0 +1,75 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.2.1): toa.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+import Base from './base'
+//
+// const TEMPLATE = ''
+
+export default class Toa extends Base {
+ constructor() {
+ super()
+ this.autohide = this.getAttribute('autohide') !== 'false'
+ console.log(this.autohide) // eslint-disable-line no-console
+ this.classList.add('toast', 'bg-danger', 'p-2')
+ this.setAttribute('role', 'alert')
+ this.ariaLive = 'assertlive'
+ this.ariaAtomic = 'true'
+ }
+
+ show() {
+ this.classList.add('show')
+ this.style.display = 'block'
+ if (this.autohide) {
+ setTimeout(() => this.hide(), this.constructor.properties.delay.value)
+ }
+ }
+
+ hide() {
+ if (this._hasMouseInteraction) {
+ setTimeout(() => this.hide(), this.constructor.properties.delay.value)
+ return
+ }
+
+ this.style.removeProperty('display')
+ this.classList.remove('show')
+ }
+
+ // Button's properties.
+ static get properties() {
+ return {
+ animation: {
+ type: Boolean,
+ value: true
+ },
+ autohide: {
+ type: Boolean,
+ value: true
+ },
+ delay: {
+ type: Number,
+ value: 3000
+ }
+ }
+ }
+
+ connectedCallback() {
+ this.show()
+
+ this.addEventListener('pointerenter', event => this._onInteraction(event, true))
+ this.addEventListener('pointerleave', event => this._onInteraction(event, false))
+ }
+
+ _onInteraction(event, isInteracting) {
+ switch (event.type) {
+ case 'pointerenter':
+ case 'pointerleave':
+ this._hasMouseInteraction = isInteracting
+ break
+ default:
+ break
+ }
+ }
+}
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index ed43f5cda4..54a28cdf8f 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -1,6 +1,13 @@