@dialpad/dialtone-vue 2.57.1 → 2.59.0

package/dist/dialtone-vue.umd.js

@@ -2258,6 +2258,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtSkeletonParagraph": () => (/* reexport */ skeleton_paragraph),
   "DtSkeletonShape": () => (/* reexport */ skeleton_shape),
   "DtSkeletonText": () => (/* reexport */ skeleton_text),
+  "DtStack": () => (/* reexport */ stack),
   "DtTab": () => (/* reexport */ tab),
   "DtTabGroup": () => (/* reexport */ tab_group),
   "DtTabPanel": () => (/* reexport */ tab_panel),
@@ -2334,7 +2335,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ const setPublicPath = (null);
 
-;// 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/avatar/avatar.vue?vue&type=template&id=f68dc5f0&
+;// 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/avatar/avatar.vue?vue&type=template&id=39b70ea2&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.avatarClasses,style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_c('div',{ref:"canvas",staticClass:"d-avatar__canvas"},[(_vm.showDefaultSlot)?_vm._t("default"):(_vm.showInitials)?_c('span',{class:_vm.AVATAR_KIND_MODIFIERS.initials},[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e()],2),(_vm.showGroup)?_c('span',{staticClass:"d-avatar__count",attrs:{"data-qa":"dt-avatar-count"}},[_vm._v(_vm._s(_vm.formattedGroup))]):_vm._e(),(_vm.presence && !_vm.showGroup)?_c('dt-presence',_vm._b({class:[
       'd-avatar__presence',
       _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],1)}
@@ -2562,14 +2563,14 @@ const pascalCaseToKebabCase = string => {
   flushPromises,
   kebabCaseToPascalCase
 });
-;// 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/presence/presence.vue?vue&type=template&id=30834c22&
-var presencevue_type_template_id_30834c22_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-presence",attrs:{"data-qa":"dt-presence","role":"status","aria-live":_vm.$attrs.ariaLive || 'off'}},[(_vm.srText)?_c('span',{staticClass:"sr-only",attrs:{"data-qa":"dt-presence-sr-text"}},[_vm._v(_vm._s(_vm.srText)+" ")]):_vm._e(),_c('div',{staticClass:"d-presence__inner",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/presence/presence.vue?vue&type=template&id=77957bb3&
+var presencevue_type_template_id_77957bb3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-presence",attrs:{"data-qa":"dt-presence","role":"status","aria-live":_vm.$attrs.ariaLive || 'off'}},[(_vm.srText)?_c('span',{staticClass:"sr-only",attrs:{"data-qa":"dt-presence-sr-text"}},[_vm._v(_vm._s(_vm.srText)+" ")]):_vm._e(),_c('div',{staticClass:"d-presence__inner",class:{
       'd-presence__inner--active': _vm.presence === 'active',
       'd-presence__inner--away': _vm.presence === 'away',
       'd-presence__inner--busy': _vm.presence === 'busy',
       'd-presence__inner--offline': _vm.presence === 'offline',
     }})])}
-var presencevue_type_template_id_30834c22_staticRenderFns = []
+var presencevue_type_template_id_77957bb3_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/presence/presence_constants.js
@@ -2612,11 +2613,12 @@ const PRESENCE_STATES_LIST = [PRESENCE_STATES.BUSY, PRESENCE_STATES.AWAY, PRESEN
  */
 
 /* harmony default export */ const presencevue_type_script_lang_js_ = ({
-  name: 'Presence',
+  name: 'DtPresence',
   props: {
     /**
      * Determines the color of the inner presence circle, indicating status.
      * Accepts one of 4 values: 'busy', 'away', 'active', 'offline'
+     * @values busy, away, active, offline
      */
     presence: {
       type: String,
@@ -2749,8 +2751,8 @@ function normalizeComponent (
 ;
 var component = normalizeComponent(
   presence_presencevue_type_script_lang_js_,
-  presencevue_type_template_id_30834c22_render,
-  presencevue_type_template_id_30834c22_staticRenderFns,
+  presencevue_type_template_id_77957bb3_render,
+  presencevue_type_template_id_77957bb3_staticRenderFns,
   false,
   null,
   null,
@@ -2903,6 +2905,7 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
      * Determines whether to show the presence indicator for
      * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
      * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
      */
     presence: {
       type: String,
@@ -5614,13 +5617,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=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', {
+;// 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=1de8fea6&
+var list_itemvue_type_template_id_1de8fea6_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}}),(_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 = []
+var list_itemvue_type_template_id_1de8fea6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -5637,9 +5640,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=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/@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=37a42626&
+var default_list_itemvue_type_template_id_37a42626_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_37a42626_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&
@@ -5688,7 +5691,7 @@ var default_list_itemvue_type_template_id_2e45cfbd_staticRenderFns = []
 //
 //
 /* harmony default export */ const default_list_itemvue_type_script_lang_js_ = ({
-  name: 'DefaultListItem'
+  name: 'DtDefaultListItem'
 });
 ;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=script&lang=js&
  /* harmony default export */ const list_item_default_list_itemvue_type_script_lang_js_ = (default_list_itemvue_type_script_lang_js_); 
@@ -5707,8 +5710,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_2e45cfbd_render,
-  default_list_itemvue_type_template_id_2e45cfbd_staticRenderFns,
+  default_list_itemvue_type_template_id_37a42626_render,
+  default_list_itemvue_type_template_id_37a42626_staticRenderFns,
   false,
   null,
   null,
@@ -5770,7 +5773,7 @@ var default_list_item_component = normalizeComponent(
  */
 
 /* harmony default export */ const list_itemvue_type_script_lang_js_ = ({
-  name: 'ListItem',
+  name: 'DtListItem',
   components: {
     DtDefaultListItem: default_list_item,
     DtIcon: icon
@@ -5969,8 +5972,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_b658c946_render,
-  list_itemvue_type_template_id_b658c946_staticRenderFns,
+  list_itemvue_type_template_id_1de8fea6_render,
+  list_itemvue_type_template_id_1de8fea6_staticRenderFns,
   false,
   null,
   null,
@@ -8095,28 +8098,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=3c1dacf6&
-var dropdownvue_type_template_id_3c1dacf6_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":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext},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=359f1c8b&
+var dropdownvue_type_template_id_359f1c8b_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","append-to":_vm.appendTo,"modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close}),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"tabindex":_vm.isArrowKeyNav ? -1 : 0},on:{"close":close}}):_vm._e()],2)]}}],null,true)},_vm.dropdownListeners))}
-var dropdownvue_type_template_id_3c1dacf6_staticRenderFns = []
+var dropdownvue_type_template_id_359f1c8b_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=1fe3451a&
-var popovervue_type_template_id_1fe3451a_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":_vm.onContext,"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)}],"!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=cdba9054&
+var popovervue_type_template_id_cdba9054_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":_vm.onContext,"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)}],"!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-height': _vm.calculatedMaxHeight,
         '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":""}},_vm.popoverListeners),[(_vm.$slots.headerContent || _vm.showCloseButton)?_c('popover-header-footer',{ref:"popover__header",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"content-class":_vm.headerClass,"type":"header","show-close-button":_vm.showCloseButton,"close-button-props":_vm.closeButtonProps},on:{"close":_vm.closePopover},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("headerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),_c('div',{ref:"popover__content",class:[
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_1fe3451a_staticRenderFns = []
+var popovervue_type_template_id_cdba9054_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -12612,7 +12615,7 @@ const POPOVER_HEADER_FOOTER_PADDING_CLASSES = {
 const POPOVER_ROLES = ['dialog', 'menu', 'listbox', 'tree', 'grid'];
 const POPOVER_CONTENT_WIDTHS = [null, 'anchor'];
 const POPOVER_INITIAL_FOCUS_STRINGS = ['none', 'dialog', 'first'];
-const POPOVER_APPEND_TO_VALUES = ['parent'];
+const POPOVER_APPEND_TO_VALUES = ['parent', 'body'];
 const POPOVER_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const POPOVER_DIRECTIONS = [...BASE_TIPPY_DIRECTIONS];
 ;// CONCATENATED MODULE: ./node_modules/nanoid/non-secure/index.js
@@ -13398,11 +13401,12 @@ var popover_header_footer_component = normalizeComponent(
 
     /**
      * Sets the element to which the popover is going to append to.
-     * @values 'parent', HTMLElement,
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
      */
     appendTo: {
       type: [HTMLElement, String],
-      default: () => document.body,
+      default: 'body',
       validator: appendTo => {
         return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
       }
@@ -13428,6 +13432,8 @@ var popover_header_footer_component = normalizeComponent(
     return {
       POPOVER_PADDING_CLASSES: POPOVER_PADDING_CLASSES,
       POPOVER_HEADER_FOOTER_PADDING_CLASSES: POPOVER_HEADER_FOOTER_PADDING_CLASSES,
+      intersectionObserver: null,
+      isOutsideViewport: false,
       isOpen: false,
       anchorEl: null,
       popoverContentEl: null
@@ -13450,6 +13456,14 @@ var popover_header_footer_component = normalizeComponent(
       };
     },
 
+    calculatedMaxHeight() {
+      if (this.isOutsideViewport && this.modal) {
+        return `calc(100vh - var(--space-300))`;
+      }
+
+      return this.maxHeight;
+    },
+
     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.
@@ -13537,19 +13551,30 @@ var popover_header_footer_component = normalizeComponent(
   },
 
   mounted() {
-    const externalAnchorEl = document.getElementById(this.externalAnchor);
+    const externalAnchorEl = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
     this.anchorEl = externalAnchorEl !== null && externalAnchorEl !== void 0 ? externalAnchorEl : this.$refs.anchor.children[0];
     this.popoverContentEl = this.$refs.content.$el;
 
     if (this.isOpen) {
       this.initTippyInstance();
-    }
+    } // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which
+    // currently is var(--space-300) (4px). If not the intersectionObserver will continually trigger in an infinite
+    // loop.
+    // threshold 1.0 makes this trigger every time the dialog "touches" the edge of the viewport.
+
+
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport, {
+      rootMargin: '-8px',
+      threshold: 1.0
+    });
+    this.intersectionObserver.observe(this.popoverContentEl);
   },
 
   beforeDestroy() {
     var _this$tip7;
 
     (_this$tip7 = this.tip) === null || _this$tip7 === void 0 ? void 0 : _this$tip7.destroy();
+    this.intersectionObserver.disconnect();
     this.removeReferences();
     this.removeEventListeners();
   },
@@ -13558,6 +13583,11 @@ var popover_header_footer_component = normalizeComponent(
    *     METHODS    *
    ******************/
   methods: {
+    hasIntersectedViewport(entries) {
+      const dialog = entries === null || entries === void 0 ? void 0 : entries[0];
+      this.isOutsideViewport = !(dialog !== null && dialog !== void 0 && dialog.isIntersecting);
+    },
+
     popperOptions() {
       return getPopperOptions({
         fallbackPlacements: this.fallbackPlacements,
@@ -13574,7 +13604,9 @@ var popover_header_footer_component = normalizeComponent(
 
     calculateAnchorZindex() {
       // if a modal is currently active render at modal-element z-index, otherwise at popover z-index
-      if (document.querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')) {
+      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 650 when
+      // anchor of popover is within a drawer.
+      this.anchorEl.closest('.d-zi-drawer')) {
         return 650;
       } else {
         return 300;
@@ -13811,13 +13843,15 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     initTippyInstance() {
+      var _this$anchorEl2, _this$anchorEl2$getRo;
+
       this.tip = tippy_utils_createTippy(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
         offset: this.offset,
         sticky: this.sticky,
-        appendTo: this.appendTo,
+        appendTo: this.appendTo === 'body' ? (_this$anchorEl2 = this.anchorEl) === null || _this$anchorEl2 === void 0 ? void 0 : (_this$anchorEl2$getRo = _this$anchorEl2.getRootNode()) === null || _this$anchorEl2$getRo === void 0 ? void 0 : _this$anchorEl2$getRo.querySelector('body') : this.appendTo,
         interactive: true,
         trigger: 'manual',
         // We have to manage hideOnClick functionality manually to handle
@@ -13853,8 +13887,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_1fe3451a_render,
-  popovervue_type_template_id_1fe3451a_staticRenderFns,
+  popovervue_type_template_id_cdba9054_render,
+  popovervue_type_template_id_cdba9054_staticRenderFns,
   false,
   null,
   null,
@@ -13925,6 +13959,8 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
+//
+
 
 
 
@@ -13972,6 +14008,7 @@ const DROPDOWN_PADDING_CLASSES = {
 
     /**
      * Vertical padding size around the list element.
+     * @values none, small, large
      */
     padding: {
       type: String,
@@ -13993,6 +14030,7 @@ const DROPDOWN_PADDING_CLASSES = {
     /**
      * Width configuration for the popover content. When its value is 'anchor',
      * the popover content will have the same width as the anchor.
+     * @values null, anchor
      */
     contentWidth: {
       type: String,
@@ -14035,6 +14073,7 @@ const DROPDOWN_PADDING_CLASSES = {
      * - "arrow-keys" for items that are navigated with UP/DOWN keys.
      * - "tab" for items that are navigated using the TAB key.
      * - "none" for static items that are not interactive.
+     * @values arrow-keys, tab, none
      */
     navigationType: {
       type: String,
@@ -14045,6 +14084,12 @@ const DROPDOWN_PADDING_CLASSES = {
     /**
      * If the dropdown does not fit in the direction described by "placement",
      * it will attempt to change it's direction to the "fallbackPlacements".
+     *
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
      * */
     fallbackPlacements: {
       type: Array,
@@ -14083,6 +14128,19 @@ const DROPDOWN_PADDING_CLASSES = {
     listClass: {
       type: [String, Array, Object],
       default: ''
+    },
+
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: 'body',
+      validator: appendTo => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
     }
   },
   emits: [
@@ -14319,8 +14377,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_3c1dacf6_render,
-  dropdownvue_type_template_id_3c1dacf6_staticRenderFns,
+  dropdownvue_type_template_id_359f1c8b_render,
+  dropdownvue_type_template_id_359f1c8b_staticRenderFns,
   false,
   null,
   null,
@@ -19612,15 +19670,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=4f441454&
-var tooltipvue_type_template_id_4f441454_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=0c394aac&
+var tooltipvue_type_template_id_0c394aac_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('a',{ref:"anchor",attrs:{"role":"presentation","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}},_vm.tooltipListeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2)],1)}
-var tooltipvue_type_template_id_4f441454_staticRenderFns = []
+var tooltipvue_type_template_id_0c394aac_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
@@ -19696,7 +19754,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
  */
 
 /* harmony default export */ const tooltipvue_type_script_lang_js_ = ({
-  name: 'Tooltip',
+  name: 'DtTooltip',
   components: {
     DtLazyShow: lazy_show
   },
@@ -19860,9 +19918,11 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
     },
 
     tippyProps() {
+      var _this$anchorEl, _this$anchorEl$getRoo;
+
       return {
         offset: this.offset,
-        appendTo: document.body,
+        appendTo: (_this$anchorEl = this.anchorEl) === null || _this$anchorEl === void 0 ? void 0 : (_this$anchorEl$getRoo = _this$anchorEl.getRootNode()) === null || _this$anchorEl$getRoo === void 0 ? void 0 : _this$anchorEl$getRoo.querySelector('body'),
         interactive: false,
         trigger: 'manual',
         placement: this.placement,
@@ -19927,7 +19987,9 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
   methods: {
     calculateAnchorZindex() {
       // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index
-      if (document.querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')) {
+      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 651 when
+      // anchor of popover is within a drawer.
+      this.$el.closest('.d-zi-drawer')) {
         return 651;
       } else {
         return 400;
@@ -20023,8 +20085,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_4f441454_render,
-  tooltipvue_type_template_id_4f441454_staticRenderFns,
+  tooltipvue_type_template_id_0c394aac_render,
+  tooltipvue_type_template_id_0c394aac_staticRenderFns,
   false,
   null,
   null,
@@ -20633,15 +20695,189 @@ 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=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){
+;// 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/stack/stack.vue?vue&type=template&id=2f34414c&
+var stackvue_type_template_id_2f34414c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.as,{tag:"component",class:[
+    'd-stack',
+    _vm.defaultDirection,
+    _vm.stackResponsive,
+    _vm.stackGap ]},[_vm._t("default")],2)}
+var stackvue_type_template_id_2f34414c_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/stack/stack_constants.js
+const DT_STACK_DIRECTION = {
+  default: 'column',
+  column: 'column',
+  row: 'row',
+  'row-reverse': 'row-reverse',
+  'column-reverse': 'column-reverse'
+};
+const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];
+const DT_STACK_GAP = ['0', '100', '200', '300', '400', '500', '600'];
+;// CONCATENATED MODULE: ./components/stack/utils.js
+
+
+function _isDefaultDirection(direction) {
+  return direction === DT_STACK_DIRECTION["default"];
+}
+
+function _getValidDirection(direction) {
+  if (directionPropType(direction) === 'string') {
+    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;
+  } else if (directionPropType(direction) === 'object') {
+    const {
+      default: defaultStyle
+    } = direction;
+    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;
+  } else {
+    return null;
+  }
+}
+
+function directionPropType(value) {
+  return typeof value;
+}
+function getDefaultDirectionClass(direction) {
+  return _getValidDirection(direction) ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
+}
+function getResponsiveClasses(direction) {
+  if (directionPropType(direction) === 'object') {
+    return [...DT_STACK_RESPONSIVE_BREAKPOINTS.map(breakpoint => {
+      return direction[breakpoint] ? `d-stack--${breakpoint}--${direction[breakpoint]}` : null;
+    })];
+  } else {
+    return null;
+  }
+}
+function getGapClass(gap) {
+  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;
+}
+;// CONCATENATED MODULE: ./components/stack/validators.js
+
+
+function directionValidator(direction) {
+  if (directionPropType(direction) === 'string') {
+    return Object.keys(DT_STACK_DIRECTION).includes(direction);
+  } else if (directionPropType(direction) === 'object') {
+    const {
+      default: defaultStyle
+    } = direction;
+    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);
+  } else {
+    return null;
+  }
+}
+function gapValidator(gap) {
+  return DT_STACK_GAP.includes(gap);
+}
+;// 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/stack/stack.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/* harmony default export */ const stackvue_type_script_lang_js_ = ({
+  name: 'DtStack',
+  props: {
+    /**
+     * Set this prop to the direction to stack the items.
+     * You can override the default direction with 'default' key.
+     * All the undefined breakpoints will have 'default' value
+     */
+    direction: {
+      type: [String, Object],
+      default: 'column',
+      validator: direction => directionValidator(direction)
+    },
+
+    /**
+     * Set this prop to render stack as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+     * Set this prop to have the space between each stack item
+     * @values 0, 100, 200, 300, 400, 500, 600
+     */
+    gap: {
+      type: String,
+      default: '0',
+      validator: gap => gapValidator(gap)
+    }
+  },
+
+  data() {
+    return {
+      DT_STACK_DIRECTION: DT_STACK_DIRECTION,
+      DT_STACK_GAP: DT_STACK_GAP,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: DT_STACK_RESPONSIVE_BREAKPOINTS
+    };
+  },
+
+  computed: {
+    stackGap() {
+      return getGapClass(this.gap);
+    },
+
+    defaultDirection() {
+      return getDefaultDirectionClass(this.direction);
+    },
+
+    stackResponsive() {
+      return getResponsiveClasses(this.direction);
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/stack/stack.vue?vue&type=script&lang=js&
+ /* harmony default export */ const stack_stackvue_type_script_lang_js_ = (stackvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/stack/stack.vue
+
+
+
+
+
+/* normalize component */
+;
+var stack_component = normalizeComponent(
+  stack_stackvue_type_script_lang_js_,
+  stackvue_type_template_id_2f34414c_render,
+  stackvue_type_template_id_2f34414c_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const stack = (stack_component.exports);
+;// CONCATENATED MODULE: ./components/stack/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=2f87445e&
+var combobox_with_popovervue_type_template_id_2f87445e_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,"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 = []
+var combobox_with_popovervue_type_template_id_2f87445e_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&
@@ -20953,11 +21189,12 @@ var combobox_with_popovervue_type_template_id_8075a3ae_staticRenderFns = []
 
     /**
      * Sets the element to which the popover is going to append to.
-     * @values 'parent', HTMLElement,
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
      */
     appendTo: {
       type: [HTMLElement, String],
-      default: () => document.body,
+      default: 'body',
       validator: appendTo => {
         return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
       }
@@ -21125,8 +21362,8 @@ var combobox_with_popovervue_type_template_id_8075a3ae_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_8075a3ae_render,
-  combobox_with_popovervue_type_template_id_8075a3ae_staticRenderFns,
+  combobox_with_popovervue_type_template_id_2f87445e_render,
+  combobox_with_popovervue_type_template_id_2f87445e_staticRenderFns,
   false,
   null,
   null,
@@ -21137,11 +21374,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=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){
+;// 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=4a2d233d&
+var combobox_multi_selectvue_type_template_id_4a2d233d_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_a62f00d6_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_4a2d233d_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -21519,11 +21756,12 @@ const CHIP_TOP_POSITION = {
 
     /**
      * Sets the element to which the popover is going to append to.
-     * @values 'parent', HTMLElement,
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
      */
     appendTo: {
       type: [HTMLElement, String],
-      default: () => document.body,
+      default: 'body',
       validator: appendTo => {
         return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
       }
@@ -21857,8 +22095,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_a62f00d6_render,
-  combobox_multi_selectvue_type_template_id_a62f00d6_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_4a2d233d_render,
+  combobox_multi_selectvue_type_template_id_4a2d233d_staticRenderFns,
   false,
   null,
   null,
@@ -23073,6 +23311,7 @@ var grouped_chip_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes