@dialpad/dialtone-vue 2.32.1 → 2.34.0

package/dist/dialtone-vue.umd.js

@@ -1349,6 +1349,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'.
@@ -1848,9 +1866,9 @@ var badge_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/badge/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/banner/banner.vue?vue&type=template&id=6a644b26&
-var bannervue_type_template_id_6a644b26_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.bannerClass,style:(_vm.bannerBackgroundImage),attrs:{"role":_vm.role},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}}},[_c('div',{staticClass:"d-banner__dialog",class:_vm.dialogClass,attrs:{"aria-labelledby":_vm.titleId,"aria-describedby":_vm.contentId}},[(!_vm.hideIcon)?_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2):_vm._e(),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title},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}},_vm.$listeners),[_vm._t("action")],2)],1)])}
-var bannervue_type_template_id_6a644b26_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/banner/banner.vue?vue&type=template&id=756779c1&
+var bannervue_type_template_id_756779c1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.bannerClass,style:(_vm.bannerBackgroundImage),attrs:{"role":_vm.role},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}}},[_c('div',{staticClass:"d-banner__dialog",class:_vm.dialogClass,attrs:{"aria-labelledby":_vm.titleId,"aria-describedby":_vm.contentId}},[(!_vm.hideIcon)?_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2):_vm._e(),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title},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 bannervue_type_template_id_756779c1_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_icon.vue?vue&type=template&id=5544041e&
@@ -2146,9 +2164,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=49bf6244&
-var notice_actionvue_type_template_id_49bf6244_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:{"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()],2)}
-var notice_actionvue_type_template_id_49bf6244_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&
@@ -2594,6 +2612,125 @@ var button_component = normalizeComponent(
 )
 
 /* harmony default export */ const button_button = (button_component.exports);
+;// CONCATENATED MODULE: ./common/mixins/sr_only_close_button.js
+/**
+ * @displayName Sr-Only close button mixin
+ */
+/* harmony default export */ const sr_only_close_button = ({
+  props: {
+    /**
+     * If true, a hidden close button is included for screen readers
+     * @values true, false
+     */
+    visuallyHiddenClose: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Label for the visually hidden close button
+     * Required if visuallyHiddenClose is set to `true`
+     */
+    visuallyHiddenCloseLabel: {
+      type: String,
+      default: null
+    }
+  },
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateVisuallyHiddenCloseProps();
+      }
+
+    }
+  },
+  computed: {
+    showVisuallyHiddenClose() {
+      return this.visuallyHiddenClose && this.visuallyHiddenCloseLabel != null;
+    }
+
+  },
+  methods: {
+    validateVisuallyHiddenCloseProps() {
+      if (this.visuallyHiddenClose && !this.visuallyHiddenCloseLabel) {
+        console.error(`If visuallyHiddenClose prop is true, the component includes
+           a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
+      }
+    }
+
+  }
+});
+;// 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!./common/sr_only_close_button.vue?vue&type=template&id=3480ff70&
+var sr_only_close_buttonvue_type_template_id_3480ff70_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-button',{staticClass:"d-vi-visible-sr",attrs:{"id":"sr-only-close-button","data-qa":"dt-sr-only-close-button","aria-label":_vm.visuallyHiddenCloseLabel},on:{"click":_vm.close,"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }$event.preventDefault();$event.stopPropagation();return _vm.close.apply(null, arguments)}}},[_c('icon-close')],1)}
+var sr_only_close_buttonvue_type_template_id_3480ff70_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/button/index.js
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./common/sr_only_close_button.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/* harmony default export */ const sr_only_close_buttonvue_type_script_lang_js_ = ({
+  name: 'SrOnlyCloseButton',
+  components: {
+    IconClose: IconClose,
+    DtButton: button_button
+  },
+  props: {
+    /**
+     * Label for the visually hidden close button
+     * Required if visuallyHiddenClose is set to `true`
+     */
+    visuallyHiddenCloseLabel: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./common/sr_only_close_button.vue?vue&type=script&lang=js&
+ /* harmony default export */ const common_sr_only_close_buttonvue_type_script_lang_js_ = (sr_only_close_buttonvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./common/sr_only_close_button.vue
+
+
+
+
+
+/* normalize component */
+;
+var sr_only_close_button_component = normalizeComponent(
+  common_sr_only_close_buttonvue_type_script_lang_js_,
+  sr_only_close_buttonvue_type_template_id_3480ff70_render,
+  sr_only_close_buttonvue_type_template_id_3480ff70_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const common_sr_only_close_button = (sr_only_close_button_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[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_action.vue?vue&type=script&lang=js&
 //
 //
@@ -2619,14 +2756,24 @@ var button_component = normalizeComponent(
 //
 //
 //
+//
+//
+//
+//
+//
+//
+
+
 
 
 /* harmony default export */ const notice_actionvue_type_script_lang_js_ = ({
   name: 'DtNoticeAction',
   components: {
     IconClose: IconClose,
-    DtButton: button_button
+    DtButton: button_button,
+    SrOnlyCloseButton: common_sr_only_close_button
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * Props for the notice close button.
@@ -2652,6 +2799,28 @@ var button_component = normalizeComponent(
    * @event close
    */
   'close'],
+  computed: {
+    noticeActionListeners() {
+      return { ...this.$listeners,
+        click: event => {
+          this.close();
+          this.$emit('click', event);
+        }
+      };
+    }
+
+  },
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateProps();
+      }
+
+    }
+  },
 
   created() {
     if (!this.hideClose && !this.closeButtonProps.ariaLabel) {
@@ -2674,6 +2843,12 @@ var button_component = normalizeComponent(
   methods: {
     close() {
       this.$emit('close');
+    },
+
+    validateProps() {
+      if (this.hideClose && !this.visuallyHiddenClose) {
+        console.error('If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props ' + 'need to be set so the component always includes a close button');
+      }
     }
 
   }
@@ -2690,8 +2865,8 @@ var button_component = normalizeComponent(
 ;
 var notice_action_component = normalizeComponent(
   notice_notice_actionvue_type_script_lang_js_,
-  notice_actionvue_type_template_id_49bf6244_render,
-  notice_actionvue_type_template_id_49bf6244_staticRenderFns,
+  notice_actionvue_type_template_id_0591aece_render,
+  notice_actionvue_type_template_id_0591aece_staticRenderFns,
   false,
   null,
   null,
@@ -2866,6 +3041,9 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 //
 //
 //
+//
+//
+
 
 
 
@@ -2885,7 +3063,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
     DtNoticeContent: notice_content,
     DtNoticeAction: notice_action
   },
-  mixins: [modal],
+  mixins: [modal, sr_only_close_button],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -3068,8 +3246,8 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 ;
 var banner_component = normalizeComponent(
   banner_bannervue_type_script_lang_js_,
-  bannervue_type_template_id_6a644b26_render,
-  bannervue_type_template_id_6a644b26_staticRenderFns,
+  bannervue_type_template_id_756779c1_render,
+  bannervue_type_template_id_756779c1_staticRenderFns,
   false,
   null,
   null,
@@ -3080,13 +3258,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
@@ -3324,6 +3502,7 @@ var breadcrumb_item_component = normalizeComponent(
 //
 //
 //
+//
 
 
 
@@ -3401,8 +3580,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,
@@ -3415,8 +3594,6 @@ var breadcrumbs_component = normalizeComponent(
 
 
 
-;// CONCATENATED MODULE: ./components/button/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/button_group/button_group.vue?vue&type=template&id=26eb52e6&
 var button_groupvue_type_template_id_26eb52e6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-btn-group',
@@ -3860,7 +4037,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return null;
         }
 
-        return Array.from(listElement.querySelectorAll(`[role="${listItemRole}"]`));
+        return Array.from(listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`));
       },
 
       onUpKey() {
@@ -3963,7 +4140,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return;
         }
 
-        const listItems = Array.from(listElement.querySelectorAll(`[role="${listItemRole}"]`));
+        const listItems = Array.from(listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`));
         return listItems.indexOf(listElement.querySelector(`#${id}`));
       },
 
@@ -3976,7 +4153,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return;
         }
 
-        return (_listElement$querySel = listElement.querySelectorAll(`[role="${listItemRole}"]`)[index]) === null || _listElement$querySel === void 0 ? void 0 : _listElement$querySel.id;
+        return (_listElement$querySel = listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`)[index]) === null || _listElement$querySel === void 0 ? void 0 : _listElement$querySel.id;
       },
 
       scrollActiveItemIntoViewIfNeeded() {
@@ -5329,9 +5506,9 @@ var combobox_loading_list_component = normalizeComponent(
 )
 
 /* harmony default export */ const combobox_loading_list = (combobox_loading_list_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/combobox/combobox_empty-list.vue?vue&type=template&id=d0c59b2c&
-var combobox_empty_listvue_type_template_id_d0c59b2c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ol',{staticClass:"d-p0",attrs:{"data-qa":"dt-combobox-empty-list"}},[_c('dt-list-item',{staticClass:"d-d-flex d-jc-center",attrs:{"role":"option","navigation-type":"arrow-keys"}},[_c('span',[_vm._v(_vm._s(_vm.message))])])],1)}
-var combobox_empty_listvue_type_template_id_d0c59b2c_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/combobox/combobox_empty-list.vue?vue&type=template&id=ee5abe2c&
+var combobox_empty_listvue_type_template_id_ee5abe2c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ol',{staticClass:"d-p0",attrs:{"data-qa":"dt-combobox-empty-list"}},[_c('dt-list-item',{staticClass:"d-d-flex d-jc-center",attrs:{"role":"option","navigation-type":"none"}},[_c('span',[_vm._v(_vm._s(_vm.message))])])],1)}
+var combobox_empty_listvue_type_template_id_ee5abe2c_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js&
@@ -5378,8 +5555,8 @@ var combobox_empty_listvue_type_template_id_d0c59b2c_staticRenderFns = []
 ;
 var combobox_empty_list_component = normalizeComponent(
   combobox_combobox_empty_listvue_type_script_lang_js_,
-  combobox_empty_listvue_type_template_id_d0c59b2c_render,
-  combobox_empty_listvue_type_template_id_d0c59b2c_staticRenderFns,
+  combobox_empty_listvue_type_template_id_ee5abe2c_render,
+  combobox_empty_listvue_type_template_id_ee5abe2c_staticRenderFns,
   false,
   null,
   null,
@@ -6402,28 +6579,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=0ddf9e89&
-var dropdownvue_type_template_id_0ddf9e89_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})],2)]}}],null,true)},_vm.$listeners))}
-var dropdownvue_type_template_id_0ddf9e89_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=c06c43b6&
-var popovervue_type_template_id_c06c43b6_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--modal-opened': _vm.modal && _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}),(_vm.visuallyHiddenClose)?_c('dt-button',{staticClass:"d-vi-visible-sr",attrs:{"data-qa":"dt-popover-sr-only-close","aria-label":_vm.visuallyHiddenCloseLabel},on:{"click":_vm.closePopover}},[_c('icon-close')],1):_vm._e()],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()],1)],1)],1)}
-var popovervue_type_template_id_c06c43b6_staticRenderFns = []
+          _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_50a89e08_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -11370,13 +11547,6 @@ var popover_header_footer_component = normalizeComponent(
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
 
 /* eslint-disable max-lines */
 
@@ -11400,17 +11570,16 @@ var popover_header_footer_component = normalizeComponent(
    * CHILD COMPONENTS *
    ********************/
   components: {
+    SrOnlyCloseButton: common_sr_only_close_button,
     DtLazyShow: lazy_show,
     PopoverHeaderFooter: popover_header_footer,
-    Portal: Portal,
-    DtButton: button_button,
-    IconClose: IconClose
+    Portal: Portal
   },
-  mixins: [modal],
+  mixins: [modal, sr_only_close_button],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
-     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
      * Supports .sync modifier
      * @values null, true, false
      */
@@ -11693,7 +11862,7 @@ var popover_header_footer_component = normalizeComponent(
      */
     initialFocusElement: {
       type: [String, HTMLElement],
-      default: 'none',
+      default: 'first',
       validator: initialFocusElement => {
         return POPOVER_INITIAL_FOCUS_STRINGS.includes(initialFocusElement) || initialFocusElement instanceof HTMLElement || initialFocusElement.startsWith('#');
       }
@@ -11707,24 +11876,6 @@ var popover_header_footer_component = normalizeComponent(
     openWithArrowKeys: {
       type: Boolean,
       default: false
-    },
-
-    /**
-     * If true, a visually hidden close button its included in the popover.
-     * @values true, false
-     */
-    visuallyHiddenClose: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Label for the visually hidden close button
-     * Required if visuallyHiddenClose is set to `true`
-     */
-    visuallyHiddenCloseLabel: {
-      type: String,
-      default: ''
     }
   },
   emits: [
@@ -11754,6 +11905,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.
@@ -11774,7 +11940,7 @@ var popover_header_footer_component = normalizeComponent(
 
     modal(modal) {
       this.tip.setProps({
-        zIndex: modal ? 650 : 300
+        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
       });
     },
 
@@ -11821,6 +11987,9 @@ var popover_header_footer_component = normalizeComponent(
 
     isOpen(isOpen, isPrev) {
       if (isOpen) {
+        this.tip.setProps({
+          zIndex: this.modal ? 650 : this.calculateAnchorZindex()
+        });
         this.tip.show();
         this.addClosePopoverEventListener();
       } else if (!isOpen && isPrev !== isOpen) {
@@ -11889,10 +12058,6 @@ var popover_header_footer_component = normalizeComponent(
       if (this.modal && this.initialFocusElement === 'none') {
         console.error('If the popover is modal you must set the ' + 'initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
       }
-
-      if (this.visuallyHiddenClose && !this.visuallyHiddenCloseLabel) {
-        console.error('If visuallyHiddenClose prop is true (default), the popover includes a visually hidden ' + 'close button and you must set the visuallyHiddenCloseLabel prop.');
-      }
     },
 
     calculateAnchorZindex() {
@@ -12047,9 +12212,9 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     onClickOutside() {
-      if (!this.hideOnClick) return; // If a modal popover is opened inside of this one, do not hide on click out
+      if (!this.hideOnClick) return; // If a popover is opened inside of this one, do not hide on click out
 
-      const innerModals = this.popoverContentEl.querySelector('.d-popover__anchor--modal-opened');
+      const innerModals = this.popoverContentEl.querySelector('.d-popover__anchor--opened');
 
       if (!innerModals) {
         this.closePopover();
@@ -12107,8 +12272,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(532);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_c06c43b6_render,
-  popovervue_type_template_id_c06c43b6_staticRenderFns,
+  popovervue_type_template_id_50a89e08_render,
+  popovervue_type_template_id_50a89e08_staticRenderFns,
   false,
   null,
   null,
@@ -12178,8 +12343,9 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
-//
-//
+
+
+
 
 
 
@@ -12188,7 +12354,8 @@ const DROPDOWN_PADDING_CLASSES = {
 /* harmony default export */ const dropdownvue_type_script_lang_js_ = ({
   name: 'DtDropdown',
   components: {
-    DtPopover: popover
+    DtPopover: popover,
+    SrOnlyCloseButton: common_sr_only_close_button
   },
   mixins: [keyboard_list_navigation({
     indexKey: 'highlightIndex',
@@ -12200,7 +12367,7 @@ const DROPDOWN_PADDING_CLASSES = {
     endOfListMethod: 'endOfListMethod',
     activeItemKey: 'activeItemEl',
     focusOnKeyboardNavigation: true
-  })],
+  }), sr_only_close_button],
   props: {
     /**
      * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.
@@ -12361,12 +12528,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;
     },
@@ -12409,6 +12631,10 @@ const DROPDOWN_PADDING_CLASSES = {
     },
 
     afterHighlight() {
+      if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {
+        return;
+      }
+
       this.$emit('highlight', this.highlightIndex);
     },
 
@@ -12416,7 +12642,7 @@ const DROPDOWN_PADDING_CLASSES = {
       this.isOpen = isPopoverOpen;
 
       if (isPopoverOpen) {
-        if (this.openedWithKeyboard && this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+        if (this.openedWithKeyboard && this.isArrowKeyNav) {
           this.setHighlightIndex(0);
         }
 
@@ -12515,8 +12741,8 @@ var dropdownvue_type_style_index_0_lang_less_ = __webpack_require__(774);
 
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_0ddf9e89_render,
-  dropdownvue_type_template_id_0ddf9e89_staticRenderFns,
+  dropdownvue_type_template_id_1b8b46fc_render,
+  dropdownvue_type_template_id_1b8b46fc_staticRenderFns,
   false,
   null,
   null,
@@ -14116,18 +14342,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=d71a3468&
-var modalvue_type_template_id_d71a3468_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()],1)])],1)}
-var modalvue_type_template_id_d71a3468_staticRenderFns = []
+        _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_170e46bc_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
@@ -14247,6 +14473,11 @@ const MODAL_SIZE_MODIFIERS = {
 //
 //
 //
+//
+//
+
+
+
 
 
 
@@ -14264,9 +14495,10 @@ const MODAL_SIZE_MODIFIERS = {
   components: {
     DtLazyShow: lazy_show,
     DtButton: button_button,
-    IconClose: IconClose
+    IconClose: IconClose,
+    SrOnlyCloseButton: common_sr_only_close_button
   },
-  mixins: [modal],
+  mixins: [modal, sr_only_close_button],
   props: {
     /**
      * A set of props to be passed into the modal's close button.
@@ -14415,11 +14647,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}`;
     },
@@ -14446,6 +14705,15 @@ const MODAL_SIZE_MODIFIERS = {
         }
       }
 
+    },
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateProps();
+      }
+
     }
   },
   methods: {
@@ -14461,6 +14729,13 @@ const MODAL_SIZE_MODIFIERS = {
       if (this.show) {
         this.focusTrappedTabPress(e);
       }
+    },
+
+    validateProps() {
+      if (this.hideClose && !this.visuallyHiddenClose) {
+        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props
+        need to be set so the component always includes a close button`);
+      }
     }
 
   }
@@ -14477,8 +14752,8 @@ const MODAL_SIZE_MODIFIERS = {
 ;
 var modal_component = normalizeComponent(
   modal_modalvue_type_script_lang_js_,
-  modalvue_type_template_id_d71a3468_render,
-  modalvue_type_template_id_d71a3468_staticRenderFns,
+  modalvue_type_template_id_170e46bc_render,
+  modalvue_type_template_id_170e46bc_staticRenderFns,
   false,
   null,
   null,
@@ -14673,9 +14948,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=30c65ac1&
-var noticevue_type_template_id_30c65ac1_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}},_vm.$listeners),[_vm._t("action")],2)],1)}
-var noticevue_type_template_id_30c65ac1_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-80[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&
@@ -14718,6 +14993,8 @@ var noticevue_type_template_id_30c65ac1_staticRenderFns = []
 //
 //
 //
+//
+
 
 
 
@@ -14734,6 +15011,7 @@ var noticevue_type_template_id_30c65ac1_staticRenderFns = []
     DtNoticeContent: notice_content,
     DtNoticeAction: notice_action
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -14853,8 +15131,8 @@ var noticevue_type_template_id_30c65ac1_staticRenderFns = []
 ;
 var notice_component = normalizeComponent(
   notice_noticevue_type_script_lang_js_,
-  noticevue_type_template_id_30c65ac1_render,
-  noticevue_type_template_id_30c65ac1_staticRenderFns,
+  noticevue_type_template_id_e0e44b44_render,
+  noticevue_type_template_id_e0e44b44_staticRenderFns,
   false,
   null,
   null,
@@ -15794,14 +16072,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-80[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&
@@ -15830,7 +16108,6 @@ var tabvue_type_template_id_91977b48_staticRenderFns = []
 //
 //
 //
-//
 
 
 /**
@@ -15906,6 +16183,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);
+        }
+      };
     }
 
   },
@@ -15943,8 +16233,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,
@@ -17072,12 +17362,12 @@ var select_menu_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/select_menu/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/toast/toast.vue?vue&type=template&id=48807c9a&
-var toastvue_type_template_id_48807c9a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isShown)?_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!./components/toast/toast.vue?vue&type=template&id=b85afb74&
+var toastvue_type_template_id_b85afb74_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isShown)?_c('div',{class:[
     'd-toast',
     _vm.kindClass,
-    { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":(!_vm.isShown).toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_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",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.noticeActionListeners),[_vm._t("action")],2)],1)]):_vm._e()}
-var toastvue_type_template_id_48807c9a_staticRenderFns = []
+    { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":(!_vm.isShown).toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_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",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],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.noticeActionListeners),[_vm._t("action")],2)],1)]):_vm._e()}
+var toastvue_type_template_id_b85afb74_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
@@ -17136,6 +17426,9 @@ const TOAST_MIN_DURATION = 6000;
 //
 //
 //
+//
+//
+
 
 
 
@@ -17155,6 +17448,7 @@ const TOAST_MIN_DURATION = 6000;
     DtNoticeContent: notice_content,
     DtNoticeAction: notice_action
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -17367,8 +17661,8 @@ const TOAST_MIN_DURATION = 6000;
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_48807c9a_render,
-  toastvue_type_template_id_48807c9a_staticRenderFns,
+  toastvue_type_template_id_b85afb74_render,
+  toastvue_type_template_id_b85afb74_staticRenderFns,
   false,
   null,
   null,
@@ -17380,14 +17674,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-80[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&
 //
 //
@@ -17422,6 +17722,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
@@ -17459,11 +17760,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
     },
 
     /**
@@ -17503,6 +17824,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
+      }];
     }
 
   },
@@ -17551,8 +17888,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,
@@ -17563,15 +17900,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
@@ -17634,7 +17971,6 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 //
 //
 //
-//
 
 
 
@@ -17799,6 +18135,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,
@@ -17963,8 +18310,8 @@ var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(228);
 
 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,
@@ -18646,15 +18993,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=27a3126a&
-var combobox_with_popovervue_type_template_id_27a3126a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=96ff85ec&
+var combobox_with_popovervue_type_template_id_96ff85ec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
-return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":_vm.modal,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns = []
+return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
+var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -18758,6 +19105,10 @@ var combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+
 
 
 
@@ -18772,6 +19123,7 @@ var combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns = []
     ComboboxLoadingList: combobox_loading_list,
     ComboboxEmptyList: combobox_empty_list
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * String to use for the list's aria-label.
@@ -18894,15 +19246,6 @@ var combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns = []
       default: false
     },
 
-    /**
-     * Determines modal state. If enabled popover has a modal overlay
-     * preventing interaction with elements below it, but it is invisible.
-     */
-    modal: {
-      type: Boolean,
-      default: true
-    },
-
     /**
      * Displays the list when the combobox is focused, before the user has typed anything.
      * When this is enabled the list will not close after selection.
@@ -19054,7 +19397,7 @@ var combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns = []
 
     onFocusIn(e) {
       if (this.hasSuggestionList && e && this.$refs.input.querySelector('input') === e.target) {
-        // only trigger if we show suggestion list when focus and
+        // only trigger if we show suggestion list when focused, and
         // it's the input specifically that was focused
         this.showComboboxList();
       }
@@ -19067,7 +19410,7 @@ var combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns = []
         var _this$$refs$ref;
 
         return (_this$$refs$ref = this.$refs[ref]) === null || _this$$refs$ref === void 0 ? void 0 : _this$$refs$ref.contains(e.relatedTarget);
-      }); // If outside of the combobox then close
+      }) || this.visuallyHiddenClose; // If outside the combobox then close
 
       if (!isComboboxStillFocused) {
         this.closeComboboxList();
@@ -19096,8 +19439,8 @@ var combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_27a3126a_render,
-  combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns,
+  combobox_with_popovervue_type_template_id_96ff85ec_render,
+  combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns,
   false,
   null,
   null,
@@ -19108,11 +19451,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=6305bf12&
-var combobox_multi_selectvue_type_template_id_6305bf12_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",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!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=652b0440&
+var combobox_multi_selectvue_type_template_id_652b0440_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1 d-mb4",attrs:{"label":_vm.label,"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_6305bf12_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_652b0440_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -19314,6 +19657,9 @@ const MULTI_SELECT_SIZES = {
 //
 //
 //
+//
+//
+
 
 
 
@@ -19328,6 +19674,7 @@ const MULTI_SELECT_SIZES = {
     DtChip: chip,
     DtValidationMessages: validation_messages
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * Label for the combobox
@@ -19494,7 +19841,7 @@ const MULTI_SELECT_SIZES = {
   data() {
     return {
       value: '',
-      popoverOffset: [0, 0],
+      popoverOffset: [0, 4],
       showValidationMessages: false,
       initialInputPadding: {},
       resizeWindowObserver: null
@@ -19727,7 +20074,7 @@ const MULTI_SELECT_SIZES = {
       // If the new chip goes to the next line and the input box expands,
       // move the popover down to the next line. Same when chips are removed
 
-      this.popoverOffset = [0, 0];
+      this.popoverOffset = [0, 4];
     },
 
     getFullWidth(el) {
@@ -19780,8 +20127,8 @@ const MULTI_SELECT_SIZES = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_6305bf12_render,
-  combobox_multi_selectvue_type_template_id_6305bf12_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_652b0440_render,
+  combobox_multi_selectvue_type_template_id_652b0440_staticRenderFns,
   false,
   null,
   null,
@@ -19793,9 +20140,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-80[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&
@@ -19921,7 +20268,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
@@ -19947,8 +20294,8 @@ var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(736);
 
 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,
@@ -20279,8 +20626,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',
@@ -20291,7 +20638,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
@@ -20425,6 +20772,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,
@@ -20483,8 +20832,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,