@dialpad/dialtone-vue 2.56.1 → 2.57.1

package/dist/dialtone-vue.umd.js

@@ -268,7 +268,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".root-layout__body{display:flex;flex-wrap:wrap;gap:0}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1}.root-layout__content{flex-basis:0;flex-grow:999;overflow-y:auto}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".root-layout__body{display:flex;flex-wrap:wrap;gap:0}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1}.root-layout__content{flex-basis:0;flex-grow:999}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1562,7 +1562,7 @@ var update = add("63ce6251", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 422:
+/***/ 329:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
@@ -2223,7 +2223,6 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCollapsible": () => (/* reexport */ collapsible),
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
-  "DtDropdownList": () => (/* reexport */ dropdown_list),
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
   "DtIcon": () => (/* reexport */ icon),
@@ -3127,7 +3126,7 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js&
  /* harmony default export */ const avatar_avatarvue_type_script_lang_js_ = (avatarvue_type_script_lang_js_); 
 // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-72[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-72[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-72[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-72[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-72[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=style&index=0&lang=less&
-var avatarvue_type_style_index_0_lang_less_ = __webpack_require__(422);
+var avatarvue_type_style_index_0_lang_less_ = __webpack_require__(329);
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&lang=less&
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
@@ -3176,12 +3175,15 @@ const BADGE_KIND_MODIFIERS = {
   label: '',
   count: 'd-badge--count'
 };
-;// 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/icon/icon.vue?vue&type=template&id=0c7462d0&
-var iconvue_type_template_id_0c7462d0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon","aria-hidden":_vm.ariaLabel ? 'false' : 'true',"aria-label":_vm.ariaLabel}})}
-var iconvue_type_template_id_0c7462d0_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/icon/icon.vue?vue&type=template&id=7bf3355d&
+var iconvue_type_template_id_7bf3355d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon","aria-hidden":_vm.ariaLabel ? 'false' : 'true',"aria-label":_vm.ariaLabel}})}
+var iconvue_type_template_id_7bf3355d_staticRenderFns = []
 
 
+;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
+const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
 ;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+
 const ICON_SIZE_MODIFIERS = {
   100: 'd-icon--size-100',
   200: 'd-icon--size-200',
@@ -3192,11 +3194,11 @@ const ICON_SIZE_MODIFIERS = {
   700: 'd-icon--size-700',
   800: 'd-icon--size-800'
 };
+const DIALTONE_ICONS = dialtone_icons_namespaceObject;
 /* harmony default export */ const icon_constants = ({
-  ICON_SIZE_MODIFIERS
+  ICON_SIZE_MODIFIERS,
+  DIALTONE_ICONS
 });
-;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
-const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
 ;// 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/icon/icon.vue?vue&type=script&lang=js&
 //
 //
@@ -3210,7 +3212,6 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
 //
 
 
-
 /**
  * The Icon component provides a set of glyphs and sizes to provide context your application.
  * @see https://dialpad.design/components/icon.html
@@ -3245,13 +3246,6 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
       default: undefined
     }
   },
-
-  data() {
-    return {
-      dialtoneIcons: dialtone_icons_namespaceObject
-    };
-  },
-
   computed: {
     iconSize() {
       return ICON_SIZE_MODIFIERS[this.size];
@@ -3262,7 +3256,7 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
     },
 
     currentIcon() {
-      return this.dialtoneIcons[this.iconName];
+      return DIALTONE_ICONS[this.iconName];
     }
 
   }
@@ -3279,8 +3273,8 @@ const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
 ;
 var icon_component = normalizeComponent(
   icon_iconvue_type_script_lang_js_,
-  iconvue_type_template_id_0c7462d0_render,
-  iconvue_type_template_id_0c7462d0_staticRenderFns,
+  iconvue_type_template_id_7bf3355d_render,
+  iconvue_type_template_id_7bf3355d_staticRenderFns,
   false,
   null,
   null,
@@ -5620,13 +5614,13 @@ var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var
 var combobox_loading_listvue_type_template_id_07d9971d_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/list_item/list_item.vue?vue&type=template&id=344ae1a2&
-var list_itemvue_type_template_id_344ae1a2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none', {
+;// 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/list_item/list_item.vue?vue&type=template&id=b658c946&
+var list_itemvue_type_template_id_b658c946_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
     'dt-list-item--static': !_vm.isHoverable,
-  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_344ae1a2_staticRenderFns = []
+  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}}),(_vm.selected)?{key:"selected",fn:function(){return [_c('dt-icon',{staticClass:"d-ml8",attrs:{"name":"check","size":"400"}})]},proxy:true}:null],null,true)}):_vm._t("default")],2)}
+var list_itemvue_type_template_id_b658c946_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -5643,9 +5637,9 @@ const LIST_ITEM_NAVIGATION_TYPES = {
   LIST_ITEM_TYPES,
   LIST_ITEM_NAVIGATION_TYPES
 });
-;// 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/list_item/default_list_item.vue?vue&type=template&id=19664905&
-var default_list_itemvue_type_template_id_19664905_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dt-default-list-item d-fs-200 d-lh-300 d-py4 d-px8 d-d-flex d-ai-center"},[(_vm.$slots.left)?_c('section',{staticClass:"dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8",attrs:{"data-qa":"dt-default-list-item-left-wrapper"}},[_vm._t("left")],2):_vm._e(),_c('section',{staticClass:"d-fl-grow1 d-of-hidden"},[(_vm.$slots.default)?_c('div',[_vm._t("default")],2):_vm._e(),(_vm.$slots.subtitle)?_c('div',{class:['d-fs-100 d-fc-black-600', { 'd-mtn2': _vm.$slots.default }],attrs:{"data-qa":"dt-default-list-item-subtitle-wrapper"}},[_vm._t("subtitle")],2):_vm._e(),(_vm.$slots.bottom)?_c('div',{staticClass:"d-mt2",attrs:{"data-qa":"dt-default-list-item-bottom-wrapper"}},[_vm._t("bottom")],2):_vm._e()]),(_vm.$slots.right)?_c('section',{staticClass:"dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",attrs:{"data-qa":"dt-default-list-item-right-wrapper"}},[_vm._t("right")],2):_vm._e()])}
-var default_list_itemvue_type_template_id_19664905_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/list_item/default_list_item.vue?vue&type=template&id=2e45cfbd&
+var default_list_itemvue_type_template_id_2e45cfbd_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dt-default-list-item d-fs-200 d-lh-300 d-py4 d-px8 d-d-flex d-ai-center"},[(_vm.$slots.left)?_c('section',{staticClass:"dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8",attrs:{"data-qa":"dt-default-list-item-left-wrapper"}},[_vm._t("left")],2):_vm._e(),_c('section',{staticClass:"d-fl-grow1 d-of-hidden"},[(_vm.$slots.default)?_c('div',[_vm._t("default")],2):_vm._e(),(_vm.$slots.subtitle)?_c('div',{class:['d-fs-100 d-fc-black-600', { 'd-mtn2': _vm.$slots.default }],attrs:{"data-qa":"dt-default-list-item-subtitle-wrapper"}},[_vm._t("subtitle")],2):_vm._e(),(_vm.$slots.bottom)?_c('div',{staticClass:"d-mt2",attrs:{"data-qa":"dt-default-list-item-bottom-wrapper"}},[_vm._t("bottom")],2):_vm._e()]),(_vm.$slots.right)?_c('section',{staticClass:"dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",attrs:{"data-qa":"dt-default-list-item-right-wrapper"}},[_vm._t("right")],2):_vm._e(),_vm._t("selected")],2)}
+var default_list_itemvue_type_template_id_2e45cfbd_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/list_item/default_list_item.vue?vue&type=script&lang=js&
@@ -5692,6 +5686,7 @@ var default_list_itemvue_type_template_id_19664905_staticRenderFns = []
 //
 //
 //
+//
 /* harmony default export */ const default_list_itemvue_type_script_lang_js_ = ({
   name: 'DefaultListItem'
 });
@@ -5712,8 +5707,8 @@ var default_list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(737
 
 var default_list_item_component = normalizeComponent(
   list_item_default_list_itemvue_type_script_lang_js_,
-  default_list_itemvue_type_template_id_19664905_render,
-  default_list_itemvue_type_template_id_19664905_staticRenderFns,
+  default_list_itemvue_type_template_id_2e45cfbd_render,
+  default_list_itemvue_type_template_id_2e45cfbd_staticRenderFns,
   false,
   null,
   null,
@@ -5755,6 +5750,17 @@ var default_list_item_component = normalizeComponent(
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 
 
 
@@ -5766,7 +5772,8 @@ var default_list_item_component = normalizeComponent(
 /* harmony default export */ const list_itemvue_type_script_lang_js_ = ({
   name: 'ListItem',
   components: {
-    DtDefaultListItem: default_list_item
+    DtDefaultListItem: default_list_item,
+    DtIcon: icon
   },
 
   /**
@@ -5827,6 +5834,14 @@ var default_list_item_component = normalizeComponent(
       type: String,
       default: LIST_ITEM_NAVIGATION_TYPES.NONE,
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
+    },
+
+    /**
+     * Applies selected styles to the list item
+     */
+    selected: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -5954,8 +5969,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(285);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_344ae1a2_render,
-  list_itemvue_type_template_id_344ae1a2_staticRenderFns,
+  list_itemvue_type_template_id_b658c946_render,
+  list_itemvue_type_template_id_b658c946_staticRenderFns,
   false,
   null,
   null,
@@ -7474,9 +7489,9 @@ var collapsiblevue_type_template_id_280f6c34_render = function () {var _vm=this;
 var collapsiblevue_type_template_id_280f6c34_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/collapsible/collapsible_lazy_show.vue?vue&type=template&id=7a3b1f44&
-var collapsible_lazy_showvue_type_template_id_7a3b1f44_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"appear":_vm.appear,"enter-active-class":"enter-active","leave-active-class":"leave-active"},on:{"before-enter":_vm.beforeEnter,"enter":_vm.enter,"after-enter":_vm.afterEnter,"before-leave":_vm.beforeLeave,"leave":_vm.leave,"after-leave":_vm.afterLeave}},_vm.$listeners),[_c(_vm.elementType,_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],tag:"component"},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)],1)}
-var collapsible_lazy_showvue_type_template_id_7a3b1f44_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/collapsible/collapsible_lazy_show.vue?vue&type=template&id=3ceeeccc&
+var collapsible_lazy_showvue_type_template_id_3ceeeccc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"appear":_vm.appear,"enter-active-class":"enter-active","leave-active-class":"leave-active","css":_vm.isCSSEnabled},on:{"before-enter":_vm.beforeEnter,"enter":_vm.enter,"after-enter":_vm.afterEnter,"before-leave":_vm.beforeLeave,"leave":_vm.leave,"after-leave":_vm.afterLeave}},_vm.$listeners),[_c(_vm.elementType,_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],tag:"component"},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)],1)}
+var collapsible_lazy_showvue_type_template_id_3ceeeccc_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/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js&
@@ -7505,6 +7520,7 @@ var collapsible_lazy_showvue_type_template_id_7a3b1f44_staticRenderFns = []
 //
 //
 //
+//
 /* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js_ = ({
   name: 'DtCollapsibleLazyShow',
 
@@ -7546,6 +7562,22 @@ var collapsible_lazy_showvue_type_template_id_7a3b1f44_staticRenderFns = []
     };
   },
 
+  /******************
+   *    COMPUTED    *
+   ******************/
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return "production" !== 'test';
+    }
+
+  },
+
   /******************
    *      WATCH     *
    ******************/
@@ -7635,8 +7667,8 @@ var collapsible_lazy_showvue_type_style_index_0_lang_css_ = __webpack_require__(
 
 var collapsible_lazy_show_component = normalizeComponent(
   collapsible_collapsible_lazy_showvue_type_script_lang_js_,
-  collapsible_lazy_showvue_type_template_id_7a3b1f44_render,
-  collapsible_lazy_showvue_type_template_id_7a3b1f44_staticRenderFns,
+  collapsible_lazy_showvue_type_template_id_3ceeeccc_render,
+  collapsible_lazy_showvue_type_template_id_3ceeeccc_staticRenderFns,
   false,
   null,
   null,
@@ -7645,9 +7677,9 @@ var collapsible_lazy_show_component = normalizeComponent(
 )
 
 /* harmony default export */ const collapsible_lazy_show = (collapsible_lazy_show_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/lazy_show/lazy_show.vue?vue&type=template&id=68041c9d&
-var lazy_showvue_type_template_id_68041c9d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"name":_vm.transition,"appear":_vm.appear}},_vm.$listeners),[_c('div',_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}]},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)])}
-var lazy_showvue_type_template_id_68041c9d_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/lazy_show/lazy_show.vue?vue&type=template&id=25070b78&
+var lazy_showvue_type_template_id_25070b78_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"name":_vm.transition,"appear":_vm.appear,"css":_vm.isCSSEnabled}},_vm.$listeners),[_c('div',_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}]},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)])}
+var lazy_showvue_type_template_id_25070b78_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/lazy_show/lazy_show.vue?vue&type=script&lang=js&
@@ -7668,6 +7700,7 @@ var lazy_showvue_type_template_id_68041c9d_staticRenderFns = []
 //
 //
 //
+//
 
 /**
  * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.
@@ -7716,6 +7749,19 @@ var lazy_showvue_type_template_id_68041c9d_staticRenderFns = []
     };
   },
 
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return "production" !== 'test';
+    }
+
+  },
+
   /******************
    *      WATCH     *
    ******************/
@@ -7738,8 +7784,8 @@ var lazy_showvue_type_template_id_68041c9d_staticRenderFns = []
 ;
 var lazy_show_component = normalizeComponent(
   lazy_show_lazy_showvue_type_script_lang_js_,
-  lazy_showvue_type_template_id_68041c9d_render,
-  lazy_showvue_type_template_id_68041c9d_staticRenderFns,
+  lazy_showvue_type_template_id_25070b78_render,
+  lazy_showvue_type_template_id_25070b78_staticRenderFns,
   false,
   null,
   null,
@@ -14283,73 +14329,6 @@ var dropdown_component = normalizeComponent(
 )
 
 /* harmony default export */ const dropdown = (dropdown_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/dropdown/dropdown_list.vue?vue&type=template&id=c83c6b9a&
-var dropdown_listvue_type_template_id_c83c6b9a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',[(_vm.heading)?_c('div',{staticClass:"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[_c('span',[_vm._v(_vm._s(_vm.heading))])]):_vm._e(),_c('ul',{class:['d-ps-relative', 'd-stack2', 'd-px0', _vm.listClass],attrs:{"data-qa":"dt-dropdown-list-wrapper"}},[_vm._t("default")],2)])}
-var dropdown_listvue_type_template_id_c83c6b9a_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/dropdown/dropdown_list.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ const dropdown_listvue_type_script_lang_js_ = ({
-  name: 'DtDropdownList',
-  props: {
-    /**
-     * List's heading.
-     */
-    heading: {
-      type: String,
-      default: ''
-    },
-
-    /**
-     * Additional class for the wrapper list element.
-     */
-    listClass: {
-      type: [String, Array, Object],
-      default: ''
-    }
-  }
-});
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue?vue&type=script&lang=js&
- /* harmony default export */ const dropdown_dropdown_listvue_type_script_lang_js_ = (dropdown_listvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue
-
-
-
-
-
-/* normalize component */
-;
-var dropdown_list_component = normalizeComponent(
-  dropdown_dropdown_listvue_type_script_lang_js_,
-  dropdown_listvue_type_template_id_c83c6b9a_render,
-  dropdown_listvue_type_template_id_c83c6b9a_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ const dropdown_list = (dropdown_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/dropdown/dropdown_separator.vue?vue&type=template&id=7efcdecb&
 var dropdown_separatorvue_type_template_id_7efcdecb_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"dt-list-separator d-bgc-black-300 d-my4 d-mxn4",attrs:{"aria-hidden":"true"}})}
 var dropdown_separatorvue_type_template_id_7efcdecb_staticRenderFns = []
@@ -14396,7 +14375,6 @@ var dropdown_separator_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/dropdown/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/input/input.vue?vue&type=template&id=5be97b31&
 var inputvue_type_template_id_5be97b31_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.labelVisible && _vm.label)?_c('div',{ref:"label",class:[
           'base-input__label-text',
@@ -20250,9 +20228,9 @@ var root_layoutvue_type_template_id_29e484da_render = function () {var _vm=this;
 var root_layoutvue_type_template_id_29e484da_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/root_layout/root_layout_body.vue?vue&type=template&id=d8938174&
-var root_layout_bodyvue_type_template_id_d8938174_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"root-layout-body",class:['root-layout__body', 'd-fl-grow1', _vm.bodyClasses],attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{ref:"root-layout-sidebar",class:['root-layout__sidebar', _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{ref:"root-layout-content",class:['root-layout__content', _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent, 'height': _vm.mainHeight }),attrs:{"data-qa":"root-layout-content"}},[_vm._t("content")],2):_vm._e()])}
-var root_layout_bodyvue_type_template_id_d8938174_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/root_layout/root_layout_body.vue?vue&type=template&id=031febe5&
+var root_layout_bodyvue_type_template_id_031febe5_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"root-layout-body",class:['root-layout__body', { 'd-of-y-auto': _vm.isInMobileMode }, 'd-fl-grow1', _vm.bodyClasses],style:({ 'height': _vm.isInMobileMode ? _vm.mainHeight : null }),attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{ref:"root-layout-sidebar",class:['root-layout__sidebar', { 'd-of-y-auto': !_vm.isInMobileMode }, _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth, 'height': !_vm.isInMobileMode ? _vm.mainHeight : null }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{ref:"root-layout-content",class:['root-layout__content', { 'd-of-y-auto': !_vm.isInMobileMode }, _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent, 'height': !_vm.isInMobileMode ? _vm.mainHeight : null }),attrs:{"data-qa":"root-layout-content","tabindex":"0"}},[_vm._t("content")],2):_vm._e()])}
+var root_layout_bodyvue_type_template_id_031febe5_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
@@ -20293,6 +20271,8 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 //
 //
 //
+//
+//
 
 /* harmony default export */ const root_layout_bodyvue_type_script_lang_js_ = ({
   name: 'DtRootLayoutBody',
@@ -20380,21 +20360,19 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 
     mainHeight() {
       if (this.fixed) {
-        return `calc(${this.documentHeight}
-          - (${this.headerHeight} + ${this.extraSidebarHeight} + ${this.footerHeight}))`;
+        return `calc(${this.documentHeight} - (${this.headerHeight} + ${this.footerHeight}))`;
       }
 
       return null;
     },
 
-    // When the sidebar is above the header due to contentWrapWidthPercent, it needs to be excluded
-    // in the main content height calculation. Otherwise it is 0 since it is at equal height with the main content.
-    extraSidebarHeight() {
+    // When the sidebar is above the header due to contentWrapWidthPercent it is considered to be in mobile mode.
+    isInMobileMode() {
       if (this.contentTop > this.sidebarTop) {
-        return this.$refs['root-layout-sidebar'].offsetHeight + 'px';
+        return true;
       }
 
-      return '0px';
+      return false;
     }
 
   },
@@ -20416,8 +20394,10 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
     },
 
     getElementTops() {
-      this.sidebarTop = this.$refs['root-layout-sidebar'].offsetTop;
-      this.contentTop = this.$refs['root-layout-content'].offsetTop;
+      var _this$$refs$rootLayo, _this$$refs$rootLayo2;
+
+      this.sidebarTop = (_this$$refs$rootLayo = this.$refs['root-layout-sidebar']) === null || _this$$refs$rootLayo === void 0 ? void 0 : _this$$refs$rootLayo.offsetTop;
+      this.contentTop = (_this$$refs$rootLayo2 = this.$refs['root-layout-content']) === null || _this$$refs$rootLayo2 === void 0 ? void 0 : _this$$refs$rootLayo2.offsetTop;
     },
 
     getDocumentHeight() {
@@ -20443,8 +20423,8 @@ var root_layout_bodyvue_type_style_index_0_lang_less_ = __webpack_require__(75);
 
 var root_layout_body_component = normalizeComponent(
   root_layout_root_layout_bodyvue_type_script_lang_js_,
-  root_layout_bodyvue_type_template_id_d8938174_render,
-  root_layout_bodyvue_type_template_id_d8938174_staticRenderFns,
+  root_layout_bodyvue_type_template_id_031febe5_render,
+  root_layout_bodyvue_type_template_id_031febe5_staticRenderFns,
   false,
   null,
   null,
@@ -20653,15 +20633,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=7027b3a3&
-var combobox_with_popovervue_type_template_id_7027b3a3_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,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"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-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=8075a3ae&
+var combobox_with_popovervue_type_template_id_8075a3ae_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,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"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-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,"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":false,"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"},[_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":clearHighlightIndex}},[(_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"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns = []
+return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":false,"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,"append-to":_vm.appendTo,"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"},[_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":clearHighlightIndex}},[(_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"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
+var combobox_with_popovervue_type_template_id_8075a3ae_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&
@@ -20770,6 +20750,8 @@ var combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns = []
 //
 //
 //
+//
+
 
 
 
@@ -20967,6 +20949,18 @@ var combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns = []
     emptyStateMessage: {
       type: String,
       default: ''
+    },
+
+    /**
+     * Sets the element to which the popover is going to append to.
+     * @values 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: () => document.body,
+      validator: appendTo => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
     }
   },
   emits: [
@@ -21131,8 +21125,8 @@ var combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_7027b3a3_render,
-  combobox_with_popovervue_type_template_id_7027b3a3_staticRenderFns,
+  combobox_with_popovervue_type_template_id_8075a3ae_render,
+  combobox_with_popovervue_type_template_id_8075a3ae_staticRenderFns,
   false,
   null,
   null,
@@ -21143,11 +21137,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=cd2212ea&
-var combobox_multi_selectvue_type_template_id_cd2212ea_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:{"label":_vm.label,"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){
+;// 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=a62f00d6&
+var combobox_multi_selectvue_type_template_id_a62f00d6_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:{"label":_vm.label,"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","append-to":_vm.appendTo},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 d-d-block"},[_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,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.CHIP_SIZES[_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",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _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_cd2212ea_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_a62f00d6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -21363,6 +21357,8 @@ const CHIP_TOP_POSITION = {
 //
 //
 //
+//
+
 
 
 
@@ -21519,6 +21515,18 @@ const CHIP_TOP_POSITION = {
       type: String,
       default: null,
       validator: t => Object.values(MULTI_SELECT_SIZES).includes(t)
+    },
+
+    /**
+     * Sets the element to which the popover is going to append to.
+     * @values 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: () => document.body,
+      validator: appendTo => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
     }
   },
   emits: [
@@ -21849,8 +21857,8 @@ const CHIP_TOP_POSITION = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_cd2212ea_render,
-  combobox_multi_selectvue_type_template_id_cd2212ea_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_a62f00d6_render,
+  combobox_multi_selectvue_type_template_id_a62f00d6_staticRenderFns,
   false,
   null,
   null,