@dialpad/dialtone-vue 2.33.0 → 2.34.0

package/dist/dialtone-vue.common.js

@@ -1331,6 +1331,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'.
@@ -2128,9 +2146,9 @@ var notice_content_component = normalizeComponent(
 )
 
 /* harmony default export */ const notice_content = (notice_content_component.exports);
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice_action.vue?vue&type=template&id=1daa6e86&
-var notice_actionvue_type_template_id_1daa6e86_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-notice__actions",attrs:{"data-qa":"notice-content-actions"}},[_vm._t("default"),(!_vm.hideClose)?_c('dt-button',_vm._b({ref:"closeButton",attrs:{"data-qa":"dt-notice-action-close-button","size":"sm","importance":"clear","circle":"","aria-label":_vm.closeButtonProps.ariaLabel ? _vm.closeButtonProps.ariaLabel : 'Close'},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.close}}):_vm._e()],2)}
-var notice_actionvue_type_template_id_1daa6e86_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice_action.vue?vue&type=template&id=0591aece&
+var notice_actionvue_type_template_id_0591aece_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-notice__actions",attrs:{"data-qa":"notice-content-actions"}},[_vm._t("default"),(!_vm.hideClose)?_c('dt-button',_vm._g(_vm._b({ref:"closeButton",attrs:{"data-qa":"dt-notice-action-close-button","size":"sm","importance":"clear","circle":"","aria-label":_vm.closeButtonProps.ariaLabel ? _vm.closeButtonProps.ariaLabel : 'Close'},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false),_vm.noticeActionListeners)):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.close}}):_vm._e()],2)}
+var notice_actionvue_type_template_id_0591aece_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue?vue&type=template&id=4ef5457b&
@@ -2763,6 +2781,17 @@ var sr_only_close_button_component = normalizeComponent(
    * @event close
    */
   'close'],
+  computed: {
+    noticeActionListeners() {
+      return { ...this.$listeners,
+        click: event => {
+          this.close();
+          this.$emit('click', event);
+        }
+      };
+    }
+
+  },
   watch: {
     $props: {
       immediate: true,
@@ -2818,8 +2847,8 @@ var sr_only_close_button_component = normalizeComponent(
 ;
 var notice_action_component = normalizeComponent(
   notice_notice_actionvue_type_script_lang_js_,
-  notice_actionvue_type_template_id_1daa6e86_render,
-  notice_actionvue_type_template_id_1daa6e86_staticRenderFns,
+  notice_actionvue_type_template_id_0591aece_render,
+  notice_actionvue_type_template_id_0591aece_staticRenderFns,
   false,
   null,
   null,
@@ -3211,13 +3240,13 @@ var banner_component = normalizeComponent(
 /* harmony default export */ const banner = (banner_component.exports);
 ;// CONCATENATED MODULE: ./components/banner/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/breadcrumbs/breadcrumbs.vue?vue&type=template&id=44efd414&
-var breadcrumbsvue_type_template_id_44efd414_render = function () {
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/breadcrumbs/breadcrumbs.vue?vue&type=template&id=5e8b7914&
+var breadcrumbsvue_type_template_id_5e8b7914_render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{class:[
     'd-breadcrumbs',
-    ( _obj = {}, _obj[_vm.BREADCRUMBS_INVERTED_MODIFIER] = _vm.inverted, _obj ) ],attrs:{"aria-label":_vm.ariaLabel,"data-qa":"dt-breadcrumbs"}},[_c('ol',[_vm._t("default",function(){return _vm._l((_vm.breadcrumbs),function(item,index){return _c('dt-breadcrumb-item',_vm._b({key:_vm.getBreadcrumbItemKey(index),attrs:{"inverted":_vm.inverted}},'dt-breadcrumb-item',item,false))})})],2)])}
-var breadcrumbsvue_type_template_id_44efd414_staticRenderFns = []
+    ( _obj = {}, _obj[_vm.BREADCRUMBS_INVERTED_MODIFIER] = _vm.inverted, _obj ) ],attrs:{"aria-label":_vm.ariaLabel,"data-qa":"dt-breadcrumbs"}},[_c('ol',[_vm._t("default",function(){return _vm._l((_vm.breadcrumbs),function(item,index){return _c('dt-breadcrumb-item',_vm._g(_vm._b({key:_vm.getBreadcrumbItemKey(index),attrs:{"inverted":_vm.inverted}},'dt-breadcrumb-item',item,false),_vm.$listeners))})})],2)])}
+var breadcrumbsvue_type_template_id_5e8b7914_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/breadcrumbs/breadcrumbs_constants.js
@@ -3455,6 +3484,7 @@ var breadcrumb_item_component = normalizeComponent(
 //
 //
 //
+//
 
 
 
@@ -3532,8 +3562,8 @@ var breadcrumb_item_component = normalizeComponent(
 ;
 var breadcrumbs_component = normalizeComponent(
   breadcrumbs_breadcrumbsvue_type_script_lang_js_,
-  breadcrumbsvue_type_template_id_44efd414_render,
-  breadcrumbsvue_type_template_id_44efd414_staticRenderFns,
+  breadcrumbsvue_type_template_id_5e8b7914_render,
+  breadcrumbsvue_type_template_id_5e8b7914_staticRenderFns,
   false,
   null,
   null,
@@ -6531,28 +6561,28 @@ var collapsible_component = normalizeComponent(
 /* harmony default export */ const collapsible = (collapsible_component.exports);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=0a8a683d&
-var dropdownvue_type_template_id_0a8a683d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true,"open-on-context":_vm.openOnContext},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=1b8b46fc&
+var dropdownvue_type_template_id_1b8b46fc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true,"open-on-context":_vm.openOnContext},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
-return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close}),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"tabindex":_vm.isArrowKeyNav ? -1 : 0},on:{"close":close}}):_vm._e()],2)]}}],null,true)},_vm.$listeners))}
-var dropdownvue_type_template_id_0a8a683d_staticRenderFns = []
+return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close}),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"tabindex":_vm.isArrowKeyNav ? -1 : 0},on:{"close":close}}):_vm._e()],2)]}}],null,true)},_vm.dropdownListeners))}
+var dropdownvue_type_template_id_1b8b46fc_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=b8a8f084&
-var popovervue_type_template_id_b8a8f084_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":function($event){$event.preventDefault();return _vm.onContext.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=50a89e08&
+var popovervue_type_template_id_50a89e08_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":function($event){$event.preventDefault();return _vm.onContext.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
         }})],2),_c('dt-lazy-show',_vm._g({ref:"content",class:['d-popover__dialog', { 'd-popover__dialog--modal': _vm.modal }, _vm.dialogClass],style:({
         'max-height': _vm.maxHeight,
         'max-width': _vm.maxWidth,
-      }),attrs:{"id":_vm.id,"role":_vm.role,"data-qa":"dt-popover","aria-hidden":("" + (!_vm.isOpen)),"aria-labelledby":_vm.labelledBy,"aria-label":_vm.ariaLabel,"aria-modal":("" + (!_vm.modal)),"transition":_vm.transition,"show":_vm.isOpen,"tabindex":_vm.contentTabindex,"appear":""},on:{"!keydown":function($event){return _vm.onKeydown.apply(null, arguments)},"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},_vm.$listeners),[(_vm.$slots.headerContent || _vm.showCloseButton)?_c('popover-header-footer',{ref:"popover__header",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"content-class":_vm.headerClass,"type":"header","show-close-button":_vm.showCloseButton,"close-button-props":_vm.closeButtonProps},on:{"close":_vm.closePopover},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("headerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),_c('div',{ref:"popover__content",class:[
+      }),attrs:{"id":_vm.id,"role":_vm.role,"data-qa":"dt-popover","aria-hidden":("" + (!_vm.isOpen)),"aria-labelledby":_vm.labelledBy,"aria-label":_vm.ariaLabel,"aria-modal":("" + (!_vm.modal)),"transition":_vm.transition,"show":_vm.isOpen,"tabindex":_vm.contentTabindex,"appear":""}},_vm.popoverListeners),[(_vm.$slots.headerContent || _vm.showCloseButton)?_c('popover-header-footer',{ref:"popover__header",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"content-class":_vm.headerClass,"type":"header","show-close-button":_vm.showCloseButton,"close-button-props":_vm.closeButtonProps},on:{"close":_vm.closePopover},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("headerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),_c('div',{ref:"popover__content",class:[
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_b8a8f084_staticRenderFns = []
+var popovervue_type_template_id_50a89e08_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -11499,9 +11529,6 @@ var popover_header_footer_component = normalizeComponent(
 //
 //
 //
-//
-//
-//
 
 /* eslint-disable max-lines */
 
@@ -11860,6 +11887,21 @@ var popover_header_footer_component = normalizeComponent(
   },
 
   computed: {
+    popoverListeners() {
+      return { ...this.$listeners,
+        keydown: event => {
+          this.onKeydown(event);
+          this.$emit('keydown', 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.
@@ -12212,8 +12254,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_b8a8f084_render,
-  popovervue_type_template_id_b8a8f084_staticRenderFns,
+  popovervue_type_template_id_50a89e08_render,
+  popovervue_type_template_id_50a89e08_staticRenderFns,
   false,
   null,
   null,
@@ -12283,14 +12325,7 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
+
 
 
 
@@ -12475,12 +12510,67 @@ const DROPDOWN_PADDING_CLASSES = {
     return {
       LIST_ITEM_NAVIGATION_TYPES: LIST_ITEM_NAVIGATION_TYPES,
       DROPDOWN_PADDING_CLASSES: DROPDOWN_PADDING_CLASSES,
+      EVENT_KEYNAMES: EVENT_KEYNAMES,
       openedWithKeyboard: false,
       isOpen: null
     };
   },
 
   computed: {
+    dropdownListeners() {
+      return { ...this.$listeners,
+        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;
     },
@@ -12633,8 +12723,8 @@ var dropdownvue_type_style_index_0_lang_less_ = __webpack_require__(782);
 
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_0a8a683d_render,
-  dropdownvue_type_template_id_0a8a683d_staticRenderFns,
+  dropdownvue_type_template_id_1b8b46fc_render,
+  dropdownvue_type_template_id_1b8b46fc_staticRenderFns,
   false,
   null,
   null,
@@ -14234,18 +14324,18 @@ var input_group_component = normalizeComponent(
 /* harmony default export */ const input_group_input_group = (input_group_component.exports);
 ;// CONCATENATED MODULE: ./components/input_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/modal/modal.vue?vue&type=template&id=21785ac6&
-var modalvue_type_template_id_21785ac6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-lazy-show',{class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/modal/modal.vue?vue&type=template&id=170e46bc&
+var modalvue_type_template_id_170e46bc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-lazy-show',_vm._g({class:[
     'd-modal',
     _vm.MODAL_KIND_MODIFIERS[_vm.kind],
     _vm.MODAL_SIZE_MODIFIERS[_vm.size],
-    _vm.modalClass ],attrs:{"transition":"d-zoom","show":_vm.show,"data-qa":"dt-modal","aria-hidden":_vm.open},on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }return _vm.close.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.close.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}],"after-enter":function($event){if($event.target !== $event.currentTarget){ return null; }return _vm.setFocusAfterTransition.apply(null, arguments)}}},[(_vm.show && (_vm.$slots.banner || _vm.bannerTitle))?_c('div',{class:[
+    _vm.modalClass ],attrs:{"transition":"d-zoom","show":_vm.show,"data-qa":"dt-modal","aria-hidden":_vm.open}},_vm.modalListeners),[(_vm.show && (_vm.$slots.banner || _vm.bannerTitle))?_c('div',{class:[
       'd-modal__banner',
       _vm.bannerClass ],attrs:{"data-qa":"dt-modal-banner"}},[_vm._t("banner",function(){return [_vm._v(" "+_vm._s(_vm.bannerTitle)+" ")]})],2):_vm._e(),_c('transition',{attrs:{"appear":"","name":"d-modal__dialog"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],class:[
         'd-modal__dialog',
         { 'd-modal__dialog--scrollable': _vm.fixedHeaderFooter },
         _vm.dialogClass ],attrs:{"role":"dialog","aria-modal":"true","aria-describedby":_vm.describedById,"aria-labelledby":_vm.labelledById}},[(_vm.$slots.header)?_c('div',{staticClass:"d-modal__header",attrs:{"id":_vm.labelledById,"data-qa":"dt-modal-title"}},[_vm._t("header")],2):_c('h2',{staticClass:"d-modal__header",attrs:{"id":_vm.labelledById,"data-qa":"dt-modal-title"}},[_vm._v(" "+_vm._s(_vm.title)+" ")]),(_vm.$slots.default)?_c('div',{staticClass:"d-modal__content",attrs:{"data-qa":"dt-modal-copy"}},[_vm._t("default")],2):_c('p',{staticClass:"d-modal__content",attrs:{"data-qa":"dt-modal-copy"}},[_vm._v(" "+_vm._s(_vm.copy)+" ")]),(_vm.hasFooterSlot)?_c('footer',{staticClass:"d-modal__footer"},[_vm._t("footer")],2):_vm._e(),(!_vm.hideClose)?_c('dt-button',_vm._b({staticClass:"d-modal__close",attrs:{"circle":"","size":"lg","importance":"clear","aria-label":_vm.closeButtonProps.ariaLabel,"kind":_vm.kind},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.close}}):_vm._e()],1)])],1)}
-var modalvue_type_template_id_21785ac6_staticRenderFns = []
+var modalvue_type_template_id_170e46bc_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
@@ -14367,9 +14457,7 @@ const MODAL_SIZE_MODIFIERS = {
 //
 //
 //
-//
-//
-//
+
 
 
 
@@ -14541,11 +14629,38 @@ const MODAL_SIZE_MODIFIERS = {
   data() {
     return {
       MODAL_KIND_MODIFIERS: MODAL_KIND_MODIFIERS,
-      MODAL_SIZE_MODIFIERS: MODAL_SIZE_MODIFIERS
+      MODAL_SIZE_MODIFIERS: MODAL_SIZE_MODIFIERS,
+      EVENT_KEYNAMES: EVENT_KEYNAMES
     };
   },
 
   computed: {
+    modalListeners() {
+      return { ...this.$listeners,
+        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}`;
     },
@@ -14619,8 +14734,8 @@ const MODAL_SIZE_MODIFIERS = {
 ;
 var modal_component = normalizeComponent(
   modal_modalvue_type_script_lang_js_,
-  modalvue_type_template_id_21785ac6_render,
-  modalvue_type_template_id_21785ac6_staticRenderFns,
+  modalvue_type_template_id_170e46bc_render,
+  modalvue_type_template_id_170e46bc_staticRenderFns,
   false,
   null,
   null,
@@ -14815,9 +14930,9 @@ var list_section_component = normalizeComponent(
 /* harmony default export */ const list_section = (list_section_component.exports);
 ;// CONCATENATED MODULE: ./components/list_section/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice.vue?vue&type=template&id=5825773c&
-var noticevue_type_template_id_5825773c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',_vm._g({class:_vm.noticeClass,attrs:{"data-qa":"notice"}},_vm.$listeners),[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)}
-var noticevue_type_template_id_5825773c_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice.vue?vue&type=template&id=e0e44b44&
+var noticevue_type_template_id_e0e44b44_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.noticeClass,attrs:{"data-qa":"notice"}},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)}
+var noticevue_type_template_id_e0e44b44_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice.vue?vue&type=script&lang=js&
@@ -14861,7 +14976,6 @@ var noticevue_type_template_id_5825773c_staticRenderFns = []
 //
 //
 //
-//
 
 
 
@@ -14999,8 +15113,8 @@ var noticevue_type_template_id_5825773c_staticRenderFns = []
 ;
 var notice_component = normalizeComponent(
   notice_noticevue_type_script_lang_js_,
-  noticevue_type_template_id_5825773c_render,
-  noticevue_type_template_id_5825773c_staticRenderFns,
+  noticevue_type_template_id_e0e44b44_render,
+  noticevue_type_template_id_e0e44b44_staticRenderFns,
   false,
   null,
   null,
@@ -15940,14 +16054,14 @@ var tab_group_component = normalizeComponent(
 )
 
 /* harmony default export */ const tab_group = (tab_group_component.exports);
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tabs/tab.vue?vue&type=template&id=91977b48&
-var tabvue_type_template_id_91977b48_render = function () {
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tabs/tab.vue?vue&type=template&id=2eb1f514&
+var tabvue_type_template_id_2eb1f514_render = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-button',_vm._b({class:[
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-button',_vm._g(_vm._b({class:[
     'd-tab',
     ( _obj = {}, _obj[_vm.TAB_IMPORTANCE_MODIFIERS.selected] = _vm.isSelected, _obj ),
-    _vm.tabClass ],attrs:{"id":("dt-tab-" + _vm.id),"role":"tab","aria-selected":("" + _vm.isSelected),"aria-controls":("dt-panel-" + _vm.panelId),"aria-label":_vm.label,"data-qa":"dt-tab","tabindex":_vm.isSelected ? '0' : '-1',"disabled":_vm.groupContext.disabled || _vm.disabled},on:{"click":function($event){return _vm.selectPanel()},"focus":function($event){return _vm.setFocus(_vm.id)}}},'dt-button',_vm.$attrs,false),[_vm._t("default")],2)}
-var tabvue_type_template_id_91977b48_staticRenderFns = []
+    _vm.tabClass ],attrs:{"id":("dt-tab-" + _vm.id),"role":"tab","aria-selected":("" + _vm.isSelected),"aria-controls":("dt-panel-" + _vm.panelId),"aria-label":_vm.label,"data-qa":"dt-tab","tabindex":_vm.isSelected ? '0' : '-1',"disabled":_vm.groupContext.disabled || _vm.disabled}},'dt-button',_vm.$attrs,false),_vm.tabListeners),[_vm._t("default")],2)}
+var tabvue_type_template_id_2eb1f514_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tabs/tab.vue?vue&type=script&lang=js&
@@ -15976,7 +16090,6 @@ var tabvue_type_template_id_91977b48_staticRenderFns = []
 //
 //
 //
-//
 
 
 /**
@@ -16052,6 +16165,19 @@ var tabvue_type_template_id_91977b48_staticRenderFns = []
   computed: {
     isSelected() {
       return this.groupContext.selected === this.panelId;
+    },
+
+    tabListeners() {
+      return { ...this.$listeners,
+        click: event => {
+          this.selectPanel();
+          this.$emit('click', event);
+        },
+        focus: event => {
+          this.setFocus(this.id);
+          this.$emit('focus', event);
+        }
+      };
     }
 
   },
@@ -16089,8 +16215,8 @@ var tabvue_type_template_id_91977b48_staticRenderFns = []
 ;
 var tab_component = normalizeComponent(
   tabs_tabvue_type_script_lang_js_,
-  tabvue_type_template_id_91977b48_render,
-  tabvue_type_template_id_91977b48_staticRenderFns,
+  tabvue_type_template_id_2eb1f514_render,
+  tabvue_type_template_id_2eb1f514_staticRenderFns,
   false,
   null,
   null,
@@ -17530,14 +17656,20 @@ var toast_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/toast/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/toggle/toggle.vue?vue&type=template&id=8e140268&
-var togglevue_type_template_id_8e140268_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-d-flex d-ai-center"},[(_vm.$slots.default)?_c('label',_vm._b({class:_vm.labelClass,attrs:{"for":_vm.id,"data-qa":"toggle-label"}},'label',_vm.labelChildProps,false),[_vm._t("default")],2):_vm._e(),_c('button',_vm._g(_vm._b({class:['d-toggle', {
-      'd-toggle--checked': _vm.internalChecked,
-      'd-toggle--disabled': _vm.disabled,
-    }],attrs:{"id":_vm.id,"role":"switch","type":"button","aria-checked":_vm.internalChecked.toString(),"disabled":_vm.disabled,"aria-disabled":_vm.disabled.toString()}},'button',_vm.$attrs,false),_vm.inputListeners),[_c('span',{staticClass:"d-toggle__inner"})])])}
-var togglevue_type_template_id_8e140268_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/toggle/toggle.vue?vue&type=template&id=5a3c3595&
+var togglevue_type_template_id_5a3c3595_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-d-flex d-ai-center"},[(_vm.$slots.default)?_c('label',_vm._b({class:_vm.labelClass,attrs:{"for":_vm.id,"data-qa":"toggle-label"}},'label',_vm.labelChildProps,false),[_vm._t("default")],2):_vm._e(),_c('button',_vm._g(_vm._b({class:_vm.toggleClasses,attrs:{"id":_vm.id,"role":_vm.toggleRole,"type":"button","aria-checked":_vm.internalChecked.toString(),"disabled":_vm.disabled,"aria-disabled":_vm.disabled.toString()}},'button',_vm.$attrs,false),_vm.inputListeners),[(_vm.showIcon)?_c('span',{staticClass:"d-toggle__inner"}):_vm._e()])])}
+var togglevue_type_template_id_5a3c3595_staticRenderFns = []
 
 
+;// CONCATENATED MODULE: ./components/toggle/toggle_constants.js
+const TOGGLE_SIZE_MODIFIERS = {
+  sm: 'd-toggle--small',
+  md: ''
+};
+const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];
+/* harmony default export */ const toggle_constants = ({
+  TOGGLE_SIZE_MODIFIERS
+});
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/toggle/toggle.vue?vue&type=script&lang=js&
 //
 //
@@ -17572,6 +17704,7 @@ var togglevue_type_template_id_8e140268_staticRenderFns = []
 //
 
 
+
 /**
  * A toggle (or "switch") is a button control element that allows the user to make a binary (on/off) selection.
  * @see https://dialpad.design/components/toggle.html
@@ -17609,11 +17742,31 @@ var togglevue_type_template_id_8e140268_staticRenderFns = []
     /**
      * Value of the toggle
      * @model checked
-     * @values true, false
+     * @values true, false, 'mixed'
      */
     checked: {
+      type: [Boolean, String],
+      default: false,
+      validator: v => TOGGLE_CHECKED_VALUES.includes(v)
+    },
+
+    /**
+     * The size of the toggle.
+     * @values sm, md
+     */
+    size: {
+      type: String,
+      default: 'md',
+      validator: s => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * Shows the icon
+     * @values true, false
+     */
+    showIcon: {
       type: Boolean,
-      default: false
+      default: true
     },
 
     /**
@@ -17653,6 +17806,22 @@ var togglevue_type_template_id_8e140268_staticRenderFns = []
       return { ...this.$listeners,
         click: _ => this.toggleCheckedValue()
       };
+    },
+
+    isIndeterminate() {
+      return this.internalChecked === 'mixed';
+    },
+
+    toggleRole() {
+      return this.isIndeterminate ? 'checkbox' : 'switch';
+    },
+
+    toggleClasses() {
+      return ['d-toggle', TOGGLE_SIZE_MODIFIERS[this.size], {
+        'd-toggle--checked': this.internalChecked === true,
+        'd-toggle--disabled': this.disabled,
+        'd-toggle--indeterminate': this.isIndeterminate
+      }];
     }
 
   },
@@ -17701,8 +17870,8 @@ var togglevue_type_template_id_8e140268_staticRenderFns = []
 ;
 var toggle_component = normalizeComponent(
   toggle_togglevue_type_script_lang_js_,
-  togglevue_type_template_id_8e140268_render,
-  togglevue_type_template_id_8e140268_staticRenderFns,
+  togglevue_type_template_id_5a3c3595_render,
+  togglevue_type_template_id_5a3c3595_staticRenderFns,
   false,
   null,
   null,
@@ -17713,15 +17882,15 @@ var toggle_component = normalizeComponent(
 /* harmony default export */ const toggle = (toggle_component.exports);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tooltip/tooltip.vue?vue&type=template&id=2cddd20a&
-var tooltipvue_type_template_id_2cddd20a_render = function () {
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tooltip/tooltip.vue?vue&type=template&id=7bbc33e0&
+var tooltipvue_type_template_id_7bbc33e0_render = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-qa":"dt-tooltip-container"}},[_c('div',{ref:"anchor",attrs:{"data-qa":"dt-tooltip-anchor"},on:{"focusin":_vm.onEnterAnchor,"focusout":_vm.onLeaveAnchor,"mouseenter":_vm.onEnterAnchor,"mouseleave":_vm.onLeaveAnchor,"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.onLeaveAnchor.apply(null, arguments)}}},[_vm._t("anchor")],2),_c('dt-lazy-show',{ref:"content",class:[
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-qa":"dt-tooltip-container"}},[_c('div',{ref:"anchor",attrs:{"data-qa":"dt-tooltip-anchor"},on:{"focusin":_vm.onEnterAnchor,"focusout":_vm.onLeaveAnchor,"mouseenter":_vm.onEnterAnchor,"mouseleave":_vm.onLeaveAnchor,"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.onLeaveAnchor.apply(null, arguments)}}},[_vm._t("anchor")],2),_c('dt-lazy-show',_vm._g({ref:"content",class:[
       'd-tooltip',
       ("d-tooltip__arrow-tippy--" + _vm.currentPlacement),
       ( _obj = {}, _obj[ _vm.TOOLTIP_KIND_MODIFIERS.inverted ] = _vm.inverted, _obj ),
-      _vm.contentClass ],attrs:{"id":_vm.id,"show":_vm.isShown && (!!_vm.message.trim() || !!_vm.$slots.default),"role":"tooltip","aria-hidden":"false","data-qa":"dt-tooltip","appear":"","transition":_vm.transition},on:{"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2)],1)}
-var tooltipvue_type_template_id_2cddd20a_staticRenderFns = []
+      _vm.contentClass ],attrs:{"id":_vm.id,"show":_vm.isShown && (!!_vm.message.trim() || !!_vm.$slots.default),"role":"tooltip","aria-hidden":"false","data-qa":"dt-tooltip","appear":"","transition":_vm.transition}},_vm.tooltipListeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2)],1)}
+var tooltipvue_type_template_id_7bbc33e0_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
@@ -17784,7 +17953,6 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 //
 //
 //
-//
 
 
 
@@ -17949,6 +18117,17 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
   },
 
   computed: {
+    tooltipListeners() {
+      return { ...this.$listeners,
+        'after-leave': event => {
+          this.onLeaveTransitionComplete();
+        },
+        'after-enter': event => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+
     tippyProps() {
       return {
         offset: this.offset,
@@ -18113,8 +18292,8 @@ var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(213);
 
 var tooltip_component = normalizeComponent(
   tooltip_tooltipvue_type_script_lang_js_,
-  tooltipvue_type_template_id_2cddd20a_render,
-  tooltipvue_type_template_id_2cddd20a_staticRenderFns,
+  tooltipvue_type_template_id_7bbc33e0_render,
+  tooltipvue_type_template_id_7bbc33e0_staticRenderFns,
   false,
   null,
   null,
@@ -19943,9 +20122,9 @@ var combobox_multi_select_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=0de8daf7&
-var callbar_buttonvue_type_template_id_0de8daf7_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs-100","width":"8.4rem"}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
-var callbar_buttonvue_type_template_id_0de8daf7_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=57656787&
+var callbar_buttonvue_type_template_id_57656787_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs-100","width":"8.4rem"}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
+var callbar_buttonvue_type_template_id_57656787_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js&
@@ -20071,7 +20250,7 @@ var callbar_buttonvue_type_template_id_0de8daf7_staticRenderFns = []
   'click'],
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-stack4', 'd-px0', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-stack4', 'd-px0', 'h:d-bgc-black-200', 'h:d-bgo50', {
         'dt-recipe-callbar-button--circle': this.circle,
         'dt-recipe-callbar-button--active': this.active,
         'dt-recipe-callbar-button--danger': this.danger
@@ -20097,8 +20276,8 @@ var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(759);
 
 var callbar_button_component = normalizeComponent(
   callbar_button_callbar_buttonvue_type_script_lang_js_,
-  callbar_buttonvue_type_template_id_0de8daf7_render,
-  callbar_buttonvue_type_template_id_0de8daf7_staticRenderFns,
+  callbar_buttonvue_type_template_id_57656787_render,
+  callbar_buttonvue_type_template_id_57656787_staticRenderFns,
   false,
   null,
   null,
@@ -20429,8 +20608,8 @@ var callbar_button_with_popover_component = normalizeComponent(
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=466e560c&
-var contact_infovue_type_template_id_466e560c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-list-item',{attrs:{"id":_vm.id,"role":_vm.role,"element-type":"div","data-qa":"contact-info"},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('div',{staticClass:"d-ps-relative",attrs:{"data-qa":"contact-info-left"}},[(_vm.avatarSrc)?_c('dt-avatar',{attrs:{"size":"lg"}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"kind":"initials","size":"lg","color":_vm.avatarColor}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e(),(_vm.showUserStatus)?_c('div',{class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=c1f377a8&
+var contact_infovue_type_template_id_c1f377a8_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-list-item',{attrs:{"id":_vm.id,"role":_vm.role,"element-type":"div","data-qa":"contact-info"},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('div',{staticClass:"d-ps-relative",attrs:{"data-qa":"contact-info-left"}},[(_vm.avatarSrc)?_c('dt-avatar',{attrs:{"size":"lg"}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"kind":"initials","size":"lg","color":_vm.avatarColor}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e(),(_vm.showUserStatus)?_c('div',{class:[
           'd-ba',
           'd-bc-white',
           'd-baw2',
@@ -20441,7 +20620,7 @@ var contact_infovue_type_template_id_466e560c_render = function () {var _vm=this
           'd-w20p',
           'd-h20p',
           _vm.USER_STATUS_COLOR_MODIFIERS[_vm.userStatusColor] ],attrs:{"data-qa":"contact-info-user-status"}},[_vm._v("   ")]):_vm._e()],1)]},proxy:true},{key:"default",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-header"}},[_vm._t("header")],2)]},proxy:true},{key:"subtitle",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-subtitle"}},[_vm._t("subtitle")],2)]},proxy:true},{key:"bottom",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-bottom"}},[_vm._t("bottom")],2)]},proxy:true},{key:"right",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-right"}},[_vm._t("right")],2)]},proxy:true}],null,true)})}
-var contact_infovue_type_template_id_466e560c_staticRenderFns = []
+var contact_infovue_type_template_id_c1f377a8_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
@@ -20575,6 +20754,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
     /**
      * Optional avatar image url.
+     * if provided, it's also required to provide a value in the `avatarInitials` prop to use
+     * in the alt attribute of the avatar.
      */
     avatarSrc: {
       type: String,
@@ -20633,8 +20814,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 ;
 var contact_info_component = normalizeComponent(
   contact_info_contact_infovue_type_script_lang_js_,
-  contact_infovue_type_template_id_466e560c_render,
-  contact_infovue_type_template_id_466e560c_staticRenderFns,
+  contact_infovue_type_template_id_c1f377a8_render,
+  contact_infovue_type_template_id_c1f377a8_staticRenderFns,
   false,
   null,
   null,