@dialpad/dialtone-vue 3.22.0 → 3.22.1-beta.1

package/dist/dialtone-vue.umd.js

@@ -35,7 +35,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 
 /***/ }),
 
-/***/ 463:
+/***/ 125:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -179,7 +179,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 796:
+/***/ 319:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -275,7 +275,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;str
 
 /***/ }),
 
-/***/ 539:
+/***/ 917:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -552,19 +552,19 @@ var update = add("7e717ca0", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 59:
+/***/ 991:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(463);
+var content = __webpack_require__(125);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("3ec377be", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("60e1cc4a", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -648,19 +648,19 @@ var update = add("2b02cf58", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 882:
+/***/ 249:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(796);
+var content = __webpack_require__(319);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("0330dfb4", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("372daf72", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -680,7 +680,7 @@ var update = add("09de2218", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 249:
+/***/ 580:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
@@ -712,19 +712,19 @@ var update = add("69f5defa", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 136:
+/***/ 455:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(539);
+var content = __webpack_require__(917);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("13900a5f", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("38fad59c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1364,6 +1364,24 @@ const LABEL_SIZE_MODIFIERS = {
   lg: 'd-label--lg',
   xl: 'd-label--xl'
 };
+const EVENT_KEYNAMES = {
+  esc: 'Esc',
+  escape: 'Escape',
+  tab: 'Tab',
+  enter: 'Enter',
+  space: 'Space',
+  spacebar: 'Spacebar',
+  up: 'Up',
+  arrowup: 'ArrowUp',
+  left: 'Left',
+  arrowleft: 'ArrowLeft',
+  right: 'Right',
+  arrowright: 'ArrowRight',
+  down: 'Down',
+  arrowdown: 'ArrowDown',
+  home: 'Home',
+  end: 'End'
+};
 /*
  * Any string message or message object in the messages prop that do not specify
  * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.
@@ -1471,7 +1489,7 @@ const flushPromises = () => {
   });
 };
 /**
- * Transform a string from kebab-case to pascalCase
+ * Transform a string from kebab-case to PascalCase
  * @param string
  * @returns {string}
  */
@@ -1479,6 +1497,15 @@ const flushPromises = () => {
 const kebabCaseToPascalCase = string => {
   return string.toLowerCase().split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
 };
+/**
+ * Transform a string from PascalCase to kebab-case
+ * @param string
+ * @returns {string}
+ */
+
+const pascalCaseToKebabCase = string => {
+  return string.replace(/\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase()).replace(/^-/, '');
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   formatMessages,
@@ -2094,10 +2121,10 @@ const IconClose_script = {}
 const IconClose_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconClose_script, [['render',IconClosevue_type_template_id_4ef5457b_render]])
 
 /* harmony default export */ const IconClose = (IconClose_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/button/button.vue?vue&type=template&id=6d10e472
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/button/button.vue?vue&type=template&id=6629834d
 
-const buttonvue_type_template_id_6d10e472_hoisted_1 = ["type", "disabled", "aria-live", "aria-label"];
-function buttonvue_type_template_id_6d10e472_render(_ctx, _cache, $props, $setup, $data, $options) {
+const buttonvue_type_template_id_6629834d_hoisted_1 = ["type", "disabled", "aria-live", "aria-label"];
+function buttonvue_type_template_id_6629834d_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     class: ['base-button__button', $options.buttonClasses()],
     "data-qa": "dt-button",
@@ -2116,9 +2143,9 @@ function buttonvue_type_template_id_6d10e472_render(_ctx, _cache, $props, $setup
     key: 1,
     "data-qa": "dt-button-label",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-w100p', 'd-btn__label', 'base-button__label', $props.labelClass])
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16, buttonvue_type_template_id_6d10e472_hoisted_1);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16, buttonvue_type_template_id_6629834d_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/button/button.vue?vue&type=template&id=6d10e472
+;// CONCATENATED MODULE: ./components/button/button.vue?vue&type=template&id=6629834d
 
 ;// CONCATENATED MODULE: ./components/button/button_constants.js
 const BUTTON_SIZE_MODIFIERS = {
@@ -2360,13 +2387,6 @@ const LINK_KIND_MODIFIERS = {
     }
   },
   emits: [
-  /**
-   * Native button click event
-   *
-   * @event click
-   * @type {PointerEvent | KeyboardEvent}
-   */
-  'click',
   /**
    * Native button focus in event
    *
@@ -2393,7 +2413,6 @@ const LINK_KIND_MODIFIERS = {
   computed: {
     buttonListeners() {
       return {
-        click: e => this.$emit('click', e),
         focusin: e => {
           this.isInFocus = this.assertiveOnFocus;
           this.$emit('focusin', e);
@@ -2475,7 +2494,7 @@ const LINK_KIND_MODIFIERS = {
 
 
 ;
-const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_type_script_lang_js, [['render',buttonvue_type_template_id_6d10e472_render]])
+const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_type_script_lang_js, [['render',buttonvue_type_template_id_6629834d_render]])
 
 /* harmony default export */ const button_button = (button_exports_);
 ;// CONCATENATED MODULE: ./common/mixins/sr_only_close_button.js
@@ -5933,10 +5952,10 @@ const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collap
 /* harmony default export */ const collapsible = (collapsible_exports_);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=2021ac9d
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=6b8ca270
 
-const dropdownvue_type_template_id_2021ac9d_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_2021ac9d_render(_ctx, _cache, $props, $setup, $data, $options) {
+const dropdownvue_type_template_id_6b8ca270_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_6b8ca270_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
@@ -5950,15 +5969,12 @@ function dropdownvue_type_template_id_2021ac9d_render(_ctx, _cache, $props, $set
     "fallback-placements": $props.fallbackPlacements,
     padding: "none",
     role: "menu",
-    modal: $props.modal
-  }, _ctx.$attrs, {
+    modal: $props.modal,
     "max-height": $props.maxHeight,
     "max-width": $props.maxWidth,
     "open-with-arrow-keys": true,
-    "open-on-context": $props.openOnContext,
-    onOpened: $options.updateInitialHighlightIndex,
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"])), _cache[6] || (_cache[6] = $event => $options.onKeyValidation($event, 'onKeyPress'))]
-  }), {
+    "open-on-context": $props.openOnContext
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.dropdownListeners)), {
     anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
       let {
         attrs
@@ -5989,18 +6005,18 @@ function dropdownvue_type_template_id_2021ac9d_render(_ctx, _cache, $props, $set
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         tabindex: $options.isArrowKeyNav ? -1 : 0,
         onClose: close
-      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_2021ac9d_hoisted_1)];
+      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_6b8ca270_hoisted_1)];
     }),
     _: 3
-  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-on-context", "onOpened", "onKeydown"]);
+  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-on-context"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=2021ac9d
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=6b8ca270
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=90818940
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=245d490f
 
-const popovervue_type_template_id_90818940_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_90818940_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_245d490f_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_245d490f_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_245d490f_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
@@ -6014,7 +6030,7 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_90818940_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_245d490f_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--opened': $data.isOpen
@@ -6029,14 +6045,14 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
       onClickCapture: _cache[1] || (_cache[1] = function () {
         return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
       }),
-      onContextmenu: _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
+      onContextmenu: _cache[2] || (_cache[2] = function () {
         return $options.onContext && $options.onContext(...arguments);
-      }, ["prevent"])),
+      }),
       onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
       }, ["prevent"]), ["up"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
-      }, ["prevent"]), ["down"]))],
+      }, ["prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => _ctx.$emit('keydown', $event), ["enter"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => _ctx.$emit('keydown', $event), ["space"]))],
       onWheel: _cache[5] || (_cache[5] = e => $data.isOpen && $props.modal && e.preventDefault()),
       onKeydownCapture: _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
         return $options.closePopover && $options.closePopover(...arguments);
@@ -6047,7 +6063,7 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_90818940_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
+    })], 40, popovervue_type_template_id_245d490f_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -6059,19 +6075,16 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
       transition: $props.transition,
       show: $data.isOpen,
       appear: "",
-      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover__dialog', {
+      class: ['d-popover__dialog', {
         'd-popover__dialog--modal': $props.modal
-      }, $props.dialogClass]),
-      style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      }, $props.dialogClass],
+      style: {
         'max-height': $props.maxHeight,
         'max-width': $props.maxWidth
-      }),
+      },
       css: _ctx.$attrs.css,
-      tabindex: $props.contentTabindex,
-      onKeydownCapture: $options.onKeydown,
-      onAfterLeave: $options.onLeaveTransitionComplete,
-      onAfterEnter: $options.onEnterTransitionComplete
-    }, {
+      tabindex: $props.contentTabindex
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.popoverListeners)), {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.headerContent || $props.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_popover_header_footer, {
         key: 0,
         ref: "popover__header",
@@ -6109,11 +6122,11 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
         onClose: $options.closePopover
       }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
       _: 3
-    }, 8, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "class", "style", "css", "tabindex", "onKeydownCapture", "onAfterLeave", "onAfterEnter"])]),
+    }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "class", "style", "css", "tabindex"])]),
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=90818940
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=245d490f
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11115,6 +11128,13 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     }
   },
   emits: [
+  /**
+   * Native keydown event
+   *
+   * @event keydown
+   * @type {KeyboardEvent}
+   */
+  'keydown',
   /**
    * Event fired to sync the open prop with the parent component
    * @event update:open
@@ -11139,6 +11159,20 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   },
 
   computed: {
+    popoverListeners() {
+      return {
+        keydown: event => {
+          this.onKeydown(event);
+        },
+        'after-leave': event => {
+          this.onLeaveTransitionComplete();
+        },
+        'after-enter': event => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+
     labelledBy() {
       // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if
       // there is no aria-label and the labelledby should point to the anchor.
@@ -11200,8 +11234,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         if (open !== null) {
           this.isOpen = open;
         }
-      },
-      immediate: true
+      }
     },
 
     isOpen(isOpen, isPrev) {
@@ -11244,11 +11277,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
       onClickOutside: this.onClickOutside,
       onShow: this.onShow
-    }); // immediate watcher fires before mounted, so have this here in case
-    // show prop was initially set to true.
+    }); // Set internal open state on mounted since the watcher is not fired initially.
 
-    if (this.isOpen) {
-      this.tip.show();
+    if (this.open !== null) {
+      this.isOpen = this.open;
     }
   },
 
@@ -11313,6 +11345,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         return;
       }
 
+      event.preventDefault();
       (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
         placement: 'right-start'
       });
@@ -11343,6 +11376,8 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
           this.isOpen = true;
         }
       }
+
+      this.$emit('keydown', e);
     },
 
     addClosePopoverEventListener() {
@@ -11456,6 +11491,8 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       if (e.key === 'Escape') {
         this.closePopover();
       }
+
+      this.$emit('keydown', e);
     },
 
     async setPopoverContentAnchorWidth() {
@@ -11482,9 +11519,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=90818940&lang=less
-var popovervue_type_style_index_0_id_90818940_lang_less = __webpack_require__(882);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=90818940&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=245d490f&lang=less
+var popovervue_type_style_index_0_id_245d490f_lang_less = __webpack_require__(249);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=245d490f&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -11494,7 +11531,7 @@ var popovervue_type_style_index_0_id_90818940_lang_less = __webpack_require__(88
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_90818940_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_245d490f_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -11514,6 +11551,7 @@ const DROPDOWN_PADDING_CLASSES = {
 
 
 
+
 /* harmony default export */ const dropdownvue_type_script_lang_js = ({
   name: 'DtDropdown',
   components: {
@@ -11668,6 +11706,13 @@ const DROPDOWN_PADDING_CLASSES = {
     }
   },
   emits: [
+  /**
+   * Native keydown event
+   *
+   * @event keydown
+   * @type {KeyboardEvent}
+   */
+  'keydown',
   /**
    * Event fired when the highlight changes
    *
@@ -11703,6 +11748,60 @@ const DROPDOWN_PADDING_CLASSES = {
   },
 
   computed: {
+    dropdownListeners() {
+      return {
+        opened: isPopoverOpen => {
+          this.updateInitialHighlightIndex(isPopoverOpen);
+        },
+        keydown: event => {
+          const eventCode = event.code;
+
+          switch (eventCode) {
+            case EVENT_KEYNAMES.up:
+            case EVENT_KEYNAMES.arrowup:
+              this.onKeyValidation(event, 'onUpKeyPress');
+              event.stopPropagation();
+              event.preventDefault();
+              break;
+
+            case EVENT_KEYNAMES.down:
+            case EVENT_KEYNAMES.arrowdown:
+              this.onKeyValidation(event, 'onDownKeyPress');
+              event.stopPropagation();
+              event.preventDefault();
+              break;
+
+            case EVENT_KEYNAMES.space:
+            case EVENT_KEYNAMES.spacebar:
+              this.onSpaceKey();
+              break;
+
+            case EVENT_KEYNAMES.enter:
+              this.onEnterKey();
+              break;
+
+            case EVENT_KEYNAMES.home:
+              this.onKeyValidation(event, 'onHomeKeyPress');
+              event.stopPropagation();
+              event.preventDefault();
+              break;
+
+            case EVENT_KEYNAMES.end:
+              this.onKeyValidation(event, 'onEndKeyPress');
+              event.stopPropagation();
+              event.preventDefault();
+              break;
+
+            default:
+              this.onKeyValidation(event, 'onKeyPress');
+              break;
+          }
+
+          this.$emit('keydown', event);
+        }
+      };
+    },
+
     beginningOfListMethod() {
       return this.onBeginningOfList || this.jumpToEnd;
     },
@@ -11840,9 +11939,9 @@ const DROPDOWN_PADDING_CLASSES = {
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=2021ac9d&lang=less
-var dropdownvue_type_style_index_0_id_2021ac9d_lang_less = __webpack_require__(59);
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=2021ac9d&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=6b8ca270&lang=less
+var dropdownvue_type_style_index_0_id_6b8ca270_lang_less = __webpack_require__(991);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=6b8ca270&lang=less
 
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue
 
@@ -11852,7 +11951,7 @@ var dropdownvue_type_style_index_0_id_2021ac9d_lang_less = __webpack_require__(5
 ;
 
 
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_2021ac9d_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_6b8ca270_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_list.vue?vue&type=template&id=eefb7378
@@ -13331,26 +13430,26 @@ const input_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(input_
 /* harmony default export */ const input_group_input_group = (input_group_exports_);
 ;// CONCATENATED MODULE: ./components/input_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=template&id=21785ac6
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=template&id=7bbbda2b
 
-const modalvue_type_template_id_21785ac6_hoisted_1 = ["aria-describedby", "aria-labelledby"];
-const modalvue_type_template_id_21785ac6_hoisted_2 = ["id"];
-const modalvue_type_template_id_21785ac6_hoisted_3 = ["id"];
-const modalvue_type_template_id_21785ac6_hoisted_4 = {
+const modalvue_type_template_id_7bbbda2b_hoisted_1 = ["aria-describedby", "aria-labelledby"];
+const modalvue_type_template_id_7bbbda2b_hoisted_2 = ["id"];
+const modalvue_type_template_id_7bbbda2b_hoisted_3 = ["id"];
+const modalvue_type_template_id_7bbbda2b_hoisted_4 = {
   key: 2,
   class: "d-modal__content",
   "data-qa": "dt-modal-copy"
 };
-const modalvue_type_template_id_21785ac6_hoisted_5 = {
+const modalvue_type_template_id_7bbbda2b_hoisted_5 = {
   key: 3,
   class: "d-modal__content",
   "data-qa": "dt-modal-copy"
 };
-const modalvue_type_template_id_21785ac6_hoisted_6 = {
+const modalvue_type_template_id_7bbbda2b_hoisted_6 = {
   key: 4,
   class: "d-modal__footer"
 };
-function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup, $data, $options) {
+function modalvue_type_template_id_7bbbda2b_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
@@ -13359,16 +13458,13 @@ function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup,
 
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_lazy_show, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     transition: "d-zoom",
     show: $props.show,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-modal', $data.MODAL_KIND_MODIFIERS[$props.kind], $data.MODAL_SIZE_MODIFIERS[$props.size], $props.modalClass]),
+    class: ['d-modal', $data.MODAL_KIND_MODIFIERS[$props.kind], $data.MODAL_SIZE_MODIFIERS[$props.size], $props.modalClass],
     "data-qa": "dt-modal",
-    "aria-hidden": $options.open,
-    onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($options.close, ["self"]),
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.close, ["esc"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.trapFocus, ["tab"])],
-    onAfterEnter: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($options.setFocusAfterTransition, ["self"])
-  }, {
+    "aria-hidden": $options.open
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$props.show && (_ctx.$slots.banner || $props.bannerTitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
       key: 0,
       "data-qa": "dt-modal-banner",
@@ -13390,12 +13486,12 @@ function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_21785ac6_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_7bbbda2b_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
         key: 1,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_21785ac6_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_21785ac6_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_21785ac6_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_21785ac6_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_7bbbda2b_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_7bbbda2b_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_7bbbda2b_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_7bbbda2b_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         key: 5,
         class: "d-modal__close",
         circle: "",
@@ -13412,13 +13508,13 @@ function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup,
         key: 6,
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         onClose: $options.close
-      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_21785ac6_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
+      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_7bbbda2b_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
       _: 3
     })]),
     _: 3
-  }, 8, ["show", "class", "aria-hidden", "onClick", "onKeydown", "onAfterEnter"]);
+  }, 16, ["show", "class", "aria-hidden"]);
 }
-;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=21785ac6
+;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=7bbbda2b
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
 // Modal style modifiers
@@ -13440,6 +13536,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 
+
 /**
  * Modals focus the user’s attention exclusively on one task or piece of information
  * via a window that sits on top of the page content.
@@ -13591,6 +13688,20 @@ const MODAL_SIZE_MODIFIERS = {
     }
   },
   emits: [
+  /**
+   * Native button click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click',
+  /**
+   * Native keydown event
+   *
+   * @event keydown
+   * @type {KeyboardEvent}
+   */
+  'keydown',
   /**
    * The modal will emit a "false" boolean value for this event when the user performs a modal-closing action.
    * Parent components can sync on this value to create a 2-way binding to control modal visibility.
@@ -13608,6 +13719,32 @@ const MODAL_SIZE_MODIFIERS = {
   },
 
   computed: {
+    modalListeners() {
+      return {
+        click: event => {
+          event.target === event.currentTarget && this.close();
+          this.$emit('click', event);
+        },
+        keydown: event => {
+          switch (event.code) {
+            case EVENT_KEYNAMES.esc:
+            case EVENT_KEYNAMES.escape:
+              this.close();
+              break;
+
+            case EVENT_KEYNAMES.tab:
+              this.trapFocus(event);
+              break;
+          }
+
+          this.$emit('keydown', event);
+        },
+        'after-enter': event => {
+          event.target === event.currentTarget && this.setFocusAfterTransition();
+        }
+      };
+    },
+
     open() {
       return `${!this.show}`;
     },
@@ -13677,7 +13814,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 ;
-const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_21785ac6_render]])
+const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_7bbbda2b_render]])
 
 /* harmony default export */ const modal_modal = (modal_exports_);
 ;// CONCATENATED MODULE: ./components/modal/index.js
@@ -14999,9 +15136,9 @@ const TAB_IMPORTANCE_MODIFIERS = {
 const tab_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tab_groupvue_type_script_lang_js, [['render',tab_groupvue_type_template_id_617fd84e_render]])
 
 /* harmony default export */ const tab_group = (tab_group_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab.vue?vue&type=template&id=91977b48
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab.vue?vue&type=template&id=af343bac
 
-function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tabvue_type_template_id_af343bac_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
@@ -15016,15 +15153,12 @@ function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $
     "data-qa": "dt-tab",
     tabindex: $options.isSelected ? '0' : '-1',
     disabled: $options.groupContext.disabled || $props.disabled
-  }, _ctx.$attrs, {
-    onClick: _cache[0] || (_cache[0] = $event => $options.selectPanel()),
-    onFocus: _cache[1] || (_cache[1] = $event => $options.setFocus($props.id))
-  }), {
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.tabListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
     _: 3
   }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
 }
-;// CONCATENATED MODULE: ./components/tabs/tab.vue?vue&type=template&id=91977b48
+;// CONCATENATED MODULE: ./components/tabs/tab.vue?vue&type=template&id=af343bac
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab.vue?vue&type=script&lang=js
 
@@ -15092,6 +15226,21 @@ function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $
       default: ''
     }
   },
+  emits: [
+  /**
+   * Native button focus in event
+   *
+   * @event focus
+   * @type {FocusEvent}
+   */
+  'focus',
+  /**
+   * Native button click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
 
   data() {
     return {
@@ -15100,6 +15249,19 @@ function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $
   },
 
   computed: {
+    tabListeners() {
+      return {
+        click: event => {
+          this.selectPanel();
+          this.$emit('click', event);
+        },
+        focus: event => {
+          this.setFocus(this.id);
+          this.$emit('focus', event);
+        }
+      };
+    },
+
     isSelected() {
       return this.groupContext.selected === this.panelId;
     }
@@ -15135,7 +15297,7 @@ function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $
 
 
 ;
-const tab_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tabvue_type_script_lang_js, [['render',tabvue_type_template_id_91977b48_render]])
+const tab_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tabvue_type_script_lang_js, [['render',tabvue_type_template_id_af343bac_render]])
 
 /* harmony default export */ const tab = (tab_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab_panel.vue?vue&type=template&id=572b0140
@@ -16614,15 +16776,15 @@ const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_t
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=3533d022
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=bacc9698
 
-const tooltipvue_type_template_id_3533d022_hoisted_1 = {
+const tooltipvue_type_template_id_bacc9698_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_3533d022_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_bacc9698_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_3533d022_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_bacc9698_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     ref: "anchor",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -16640,7 +16802,7 @@ function tooltipvue_type_template_id_3533d022_render(_ctx, _cache, $props, $setu
     onKeydown: _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
       return $options.onLeaveAnchor && $options.onLeaveAnchor(...arguments);
     }, ["esc"]))
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "anchor")], 544), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "anchor")], 544), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     ref: "content",
     show: $data.isShown && (!!$props.message.trim() || !$options.defaultSlotIsEmpty),
@@ -16649,17 +16811,15 @@ function tooltipvue_type_template_id_3533d022_render(_ctx, _cache, $props, $setu
     "data-qa": "dt-tooltip",
     appear: "",
     transition: $props.transition,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-tooltip', `d-tooltip__arrow-tippy--${$data.currentPlacement}`, {
+    class: ['d-tooltip', `d-tooltip__arrow-tippy--${$data.currentPlacement}`, {
       [$data.TOOLTIP_KIND_MODIFIERS.inverted]: $props.inverted
-    }, $props.contentClass]),
-    onAfterLeave: $options.onLeaveTransitionComplete,
-    onAfterEnter: $options.onEnterTransitionComplete
-  }, {
+    }, $props.contentClass]
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.tooltipListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.message), 1)])]),
     _: 3
-  }, 8, ["id", "show", "transition", "class", "onAfterLeave", "onAfterEnter"])]);
+  }, 16, ["id", "show", "transition", "class"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=3533d022
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=bacc9698
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -16840,6 +17000,17 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
   },
 
   computed: {
+    tooltipListeners() {
+      return {
+        'after-leave': event => {
+          this.onLeaveTransitionComplete();
+        },
+        'after-enter': event => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+
     tippyProps() {
       return {
         offset: this.offset,
@@ -16998,9 +17169,9 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=3533d022&lang=less
-var tooltipvue_type_style_index_0_id_3533d022_lang_less = __webpack_require__(136);
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=3533d022&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=bacc9698&lang=less
+var tooltipvue_type_style_index_0_id_bacc9698_lang_less = __webpack_require__(455);
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=bacc9698&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -17010,7 +17181,7 @@ var tooltipvue_type_style_index_0_id_3533d022_lang_less = __webpack_require__(13
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_3533d022_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_bacc9698_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -17482,7 +17653,7 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=script&lang=js
  
 // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=98ce9f78&lang=less
-var root_layout_bodyvue_type_style_index_0_id_98ce9f78_lang_less = __webpack_require__(249);
+var root_layout_bodyvue_type_style_index_0_id_98ce9f78_lang_less = __webpack_require__(580);
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=98ce9f78&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue