@dialpad/dialtone-vue 3.44.1 → 3.45.0

package/dist/dialtone-vue.umd.js

@@ -1176,7 +1176,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),
@@ -1212,6 +1211,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),
@@ -6388,10 +6388,10 @@ const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collap
 /* harmony default export */ const collapsible = (collapsible_exports_);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=878a8588
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=5001ee82
 
-const dropdownvue_type_template_id_878a8588_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_878a8588_render(_ctx, _cache, $props, $setup, $data, $options) {
+const dropdownvue_type_template_id_5001ee82_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_5001ee82_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
@@ -6405,6 +6405,7 @@ function dropdownvue_type_template_id_878a8588_render(_ctx, _cache, $props, $set
     "fallback-placements": $props.fallbackPlacements,
     padding: "none",
     role: "menu",
+    "append-to": $props.appendTo,
     modal: $props.modal,
     "max-height": $props.maxHeight,
     "max-width": $props.maxWidth,
@@ -6441,18 +6442,18 @@ function dropdownvue_type_template_id_878a8588_render(_ctx, _cache, $props, $set
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         tabindex: $options.isArrowKeyNav ? -1 : 0,
         onClose: close
-      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_878a8588_hoisted_1)];
+      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_5001ee82_hoisted_1)];
     }),
     _: 3
-  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-with-arrow-keys", "open-on-context"]);
+  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "append-to", "modal", "max-height", "max-width", "open-with-arrow-keys", "open-on-context"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=878a8588
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=5001ee82
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=6557f2d6
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=2e015e2c
 
-const popovervue_type_template_id_6557f2d6_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_6557f2d6_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_6557f2d6_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_2e015e2c_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_2e015e2c_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_2e015e2c_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
@@ -6466,7 +6467,7 @@ function popovervue_type_template_id_6557f2d6_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_6557f2d6_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_2e015e2c_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--opened': $data.isOpen
@@ -6498,7 +6499,7 @@ function popovervue_type_template_id_6557f2d6_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_6557f2d6_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    })], 40, popovervue_type_template_id_2e015e2c_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -6561,7 +6562,7 @@ function popovervue_type_template_id_6557f2d6_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=6557f2d6
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=2e015e2c
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11122,7 +11123,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/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover_header_footer.vue?vue&type=template&id=6b9a4097
@@ -11582,11 +11583,12 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     /**
      * 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;
       }
@@ -11738,7 +11740,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   },
 
   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;
 
@@ -11775,7 +11777,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     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;
@@ -12022,13 +12026,15 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     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
@@ -12049,10 +12055,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=6557f2d6&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=2e015e2c&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=6557f2d6&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=2e015e2c&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -12062,7 +12068,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_6557f2d6_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_2e015e2c_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -12083,6 +12089,7 @@ const DROPDOWN_PADDING_CLASSES = {
 
 
 
+
 /* harmony default export */ const dropdownvue_type_script_lang_js = ({
   name: 'DtDropdown',
   components: {
@@ -12234,6 +12241,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: [
@@ -12466,10 +12486,10 @@ const DROPDOWN_PADDING_CLASSES = {
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=878a8588&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=5001ee82&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=878a8588&lang=less
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=5001ee82&lang=less
 
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue
 
@@ -12479,55 +12499,9 @@ const DROPDOWN_PADDING_CLASSES = {
 ;
 
 
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_878a8588_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_5001ee82_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_list.vue?vue&type=template&id=50f7e3e3
-
-const dropdown_listvue_type_template_id_50f7e3e3_hoisted_1 = {
-  key: 0,
-  class: "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"
-};
-function dropdown_listvue_type_template_id_50f7e3e3_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("li", null, [$props.heading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", dropdown_listvue_type_template_id_50f7e3e3_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.heading), 1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("ul", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ps-relative', 'd-stack2', 'd-px0', $props.listClass]),
-    "data-qa": "dt-dropdown-list-wrapper"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)]);
-}
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue?vue&type=template&id=50f7e3e3
-
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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
- 
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue
-
-
-
-
-;
-const dropdown_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_listvue_type_script_lang_js, [['render',dropdown_listvue_type_template_id_50f7e3e3_render]])
-
-/* harmony default export */ const dropdown_list = (dropdown_list_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_separator.vue?vue&type=template&id=7efcdecb
 
 const dropdown_separatorvue_type_template_id_7efcdecb_hoisted_1 = {
@@ -12564,7 +12538,6 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
 
-
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=438498f3
 
 const inputvue_type_template_id_438498f3_hoisted_1 = {
@@ -17397,15 +17370,15 @@ const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_t
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=2fe4ef96
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=24ea877c
 
-const tooltipvue_type_template_id_2fe4ef96_hoisted_1 = {
+const tooltipvue_type_template_id_24ea877c_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_2fe4ef96_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_24ea877c_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_2fe4ef96_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("a", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_24ea877c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("a", {
     ref: "anchor",
     role: "presentation",
     "data-qa": "dt-tooltip-anchor",
@@ -17441,7 +17414,7 @@ function tooltipvue_type_template_id_2fe4ef96_render(_ctx, _cache, $props, $setu
     _: 3
   }, 16, ["id", "show", "appear", "transition", "class"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=2fe4ef96
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=24ea877c
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -17643,9 +17616,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,
@@ -17710,7 +17685,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;
@@ -17791,10 +17768,10 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=2fe4ef96&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=24ea877c&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=2fe4ef96&lang=less
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=24ea877c&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -17804,7 +17781,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_2fe4ef96_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_24ea877c_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -18347,17 +18324,167 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=b78c0dda
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/stack/stack.vue?vue&type=template&id=ec7d952a
+
+function stackvue_type_template_id_ec7d952a_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.as), {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-stack', $options.defaultDirection, $options.stackResponsive, $options.stackGap])
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
+    _: 3
+  }, 8, ["class"]);
+}
+;// CONCATENATED MODULE: ./components/stack/stack.vue?vue&type=template&id=ec7d952a
+
+;// 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-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./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
+     */
+    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
+    };
+  },
 
-const combobox_with_popovervue_type_template_id_b78c0dda_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_b78c0dda_hoisted_2 = {
+  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
+ 
+;// CONCATENATED MODULE: ./components/stack/stack.vue
+
+
+
+
+;
+const stack_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(stackvue_type_script_lang_js, [['render',stackvue_type_template_id_ec7d952a_render]])
+
+/* harmony default export */ const stack = (stack_exports_);
+;// CONCATENATED MODULE: ./components/stack/index.js
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=935fbcea
+
+const combobox_with_popovervue_type_template_id_935fbcea_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_935fbcea_hoisted_2 = {
   ref: "header"
 };
-const combobox_with_popovervue_type_template_id_b78c0dda_hoisted_3 = ["onMouseleave", "onFocusout"];
-const combobox_with_popovervue_type_template_id_b78c0dda_hoisted_4 = {
+const combobox_with_popovervue_type_template_id_935fbcea_hoisted_3 = ["onMouseleave", "onFocusout"];
+const combobox_with_popovervue_type_template_id_935fbcea_hoisted_4 = {
   ref: "footer"
 };
-function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_with_popovervue_type_template_id_935fbcea_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -18396,7 +18523,7 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_b78c0dda_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_935fbcea_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
@@ -18423,6 +18550,7 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
         "content-tabindex": null,
         modal: false,
         "auto-focus": false,
+        "append-to": $props.appendTo,
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         "visually-hidden-close": _ctx.visuallyHiddenClose,
         onOpened: opened
@@ -18441,24 +18569,26 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
           key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_b78c0dda_hoisted_3)]),
+        })], 42, combobox_with_popovervue_type_template_id_935fbcea_hoisted_3)]),
         _: 2
       }, [$data.hasSlotContent(_ctx.$slots.header) ? {
         name: "headerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_b78c0dda_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_935fbcea_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
         key: "0"
       } : undefined, $data.hasSlotContent(_ctx.$slots.footer) ? {
         name: "footerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_b78c0dda_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_935fbcea_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
         key: "1"
-      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
+      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
     }),
     _: 3
   }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=b78c0dda
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=935fbcea
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
+/* eslint-disable vuejs-accessibility/no-static-element-interactions */
+
 
 
 
@@ -18656,6 +18786,19 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
     emptyStateMessage: {
       type: String,
       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: [
@@ -18817,32 +18960,32 @@ function combobox_with_popovervue_type_template_id_b78c0dda_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_b78c0dda_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_935fbcea_render]])
 
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=491f9b2d
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=4d7926a7
 
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative d-d-block"
 };
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_491f9b2d_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_4d7926a7_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
 
   const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-input");
@@ -18861,13 +19004,14 @@ function combobox_multi_selectvue_type_template_id_491f9b2d_render(_ctx, _cache,
     "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
     "visually-hidden-close": _ctx.visuallyHiddenClose,
     "content-width": "anchor",
+    "append-to": $props.appendTo,
     onSelect: $options.onComboboxSelect
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
     input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           ref_for: true,
           ref: "chips",
@@ -18909,19 +19053,19 @@ function combobox_multi_selectvue_type_template_id_491f9b2d_render(_ctx, _cache,
       onMousedown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent"]))
     }, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
       key: 0
-    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [$data.hasSlotContent(_ctx.$slots.header) ? {
     name: "header",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
     key: "0"
   } : undefined, $data.hasSlotContent(_ctx.$slots.footer) ? {
     name: "footer",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_4d7926a7_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
     key: "1"
-  } : undefined]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "onSelect"]);
+  } : undefined]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "append-to", "onSelect"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=491f9b2d
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=4d7926a7
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -19039,6 +19183,7 @@ const CHIP_TOP_POSITION = {
 
 
 
+
 /* harmony default export */ const combobox_multi_selectvue_type_script_lang_js = ({
   name: 'DtRecipeComboboxMultiSelect',
   components: {
@@ -19188,6 +19333,19 @@ 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.
+     * '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: [
@@ -19521,7 +19679,7 @@ const CHIP_TOP_POSITION = {
 
 
 ;
-const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_491f9b2d_render]])
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_4d7926a7_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
@@ -20599,6 +20757,7 @@ const grouped_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group
 
 
 
+
 
 
  /// Recipes