@dialpad/dialtone-vue 3.40.0 → 3.41.0-beta.2

package/dist/dialtone-vue.common.js

@@ -2330,20 +2330,20 @@ function notice_contentvue_type_template_id_45f8172a_render(_ctx, _cache, $props
 const notice_content_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_contentvue_type_script_lang_js, [['render',notice_contentvue_type_template_id_45f8172a_render]])
 
 /* harmony default export */ const notice_content = (notice_content_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/notice/notice_action.vue?vue&type=template&id=51cd131a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/notice/notice_action.vue?vue&type=template&id=b37ee780
 
-const notice_actionvue_type_template_id_51cd131a_hoisted_1 = {
+const notice_actionvue_type_template_id_b37ee780_hoisted_1 = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
-function notice_actionvue_type_template_id_51cd131a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function notice_actionvue_type_template_id_b37ee780_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_actionvue_type_template_id_51cd131a_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_actionvue_type_template_id_b37ee780_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     ref: "closeButton",
     "data-qa": "dt-notice-action-close-button",
@@ -2365,7 +2365,7 @@ function notice_actionvue_type_template_id_51cd131a_render(_ctx, _cache, $props,
     onClose: $options.close
   }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/notice/notice_action.vue?vue&type=template&id=51cd131a
+;// CONCATENATED MODULE: ./components/notice/notice_action.vue?vue&type=template&id=b37ee780
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/button/button.vue?vue&type=template&id=6629834d
 
@@ -2902,17 +2902,6 @@ const sr_only_close_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.
    * @event close
    */
   'close'],
-  watch: {
-    $props: {
-      immediate: true,
-      deep: true,
-
-      handler() {
-        this.validateProps();
-      }
-
-    }
-  },
 
   created() {
     if (!this.hideClose && !this.closeButtonProps.ariaLabel) {
@@ -2935,12 +2924,6 @@ const sr_only_close_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.
   methods: {
     close() {
       this.$emit('close');
-    },
-
-    validateProps() {
-      if (this.hideClose && !this.visuallyHiddenClose) {
-        console.error('If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props ' + 'need to be set so the component always includes a close button');
-      }
     }
 
   }
@@ -2953,7 +2936,7 @@ const sr_only_close_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.
 
 
 ;
-const notice_action_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_actionvue_type_script_lang_js, [['render',notice_actionvue_type_template_id_51cd131a_render]])
+const notice_action_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_actionvue_type_script_lang_js, [['render',notice_actionvue_type_template_id_b37ee780_render]])
 
 /* harmony default export */ const notice_action = (notice_action_exports_);
 ;// CONCATENATED MODULE: ./common/mixins/modal.js
@@ -6296,10 +6279,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-40.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=d36ba644
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
 
-const dropdownvue_type_template_id_d36ba644_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_d36ba644_render(_ctx, _cache, $props, $setup, $data, $options) {
+const dropdownvue_type_template_id_878a8588_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_878a8588_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");
@@ -6316,7 +6299,7 @@ function dropdownvue_type_template_id_d36ba644_render(_ctx, _cache, $props, $set
     modal: $props.modal,
     "max-height": $props.maxHeight,
     "max-width": $props.maxWidth,
-    "open-with-arrow-keys": true,
+    "open-with-arrow-keys": $options.shouldOpenWithArrowKeys,
     "open-on-context": $props.openOnContext
   }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.dropdownListeners)), {
     anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
@@ -6349,18 +6332,18 @@ function dropdownvue_type_template_id_d36ba644_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_d36ba644_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_878a8588_hoisted_1)];
     }),
     _: 3
-  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-on-context"]);
+  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-with-arrow-keys", "open-on-context"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=d36ba644
+;// CONCATENATED MODULE: ./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-40.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=21a6161e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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=4136497c
 
-const popovervue_type_template_id_21a6161e_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_21a6161e_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_21a6161e_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_4136497c_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_4136497c_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_4136497c_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");
@@ -6374,7 +6357,7 @@ function popovervue_type_template_id_21a6161e_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_21a6161e_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_4136497c_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
@@ -6406,7 +6389,7 @@ function popovervue_type_template_id_21a6161e_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_21a6161e_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_4136497c_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,
@@ -6417,7 +6400,7 @@ function popovervue_type_template_id_21a6161e_render(_ctx, _cache, $props, $setu
       "aria-modal": `${!$props.modal}`,
       transition: $props.transition,
       show: $data.isOpen,
-      appear: $props.contentAppear,
+      appear: $data.toAppear,
       class: ['d-popover__dialog', {
         'd-popover__dialog--modal': $props.modal
       }, $props.dialogClass],
@@ -6469,7 +6452,7 @@ function popovervue_type_template_id_21a6161e_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=21a6161e
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=4136497c
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11287,7 +11270,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
      */
     contentAppear: {
       type: Boolean,
-      default: false
+      default: null
     },
 
     /**
@@ -11518,6 +11501,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       POPOVER_PADDING_CLASSES: POPOVER_PADDING_CLASSES,
       POPOVER_HEADER_FOOTER_PADDING_CLASSES: POPOVER_HEADER_FOOTER_PADDING_CLASSES,
       isOpen: false,
+      toAppear: false,
       anchorEl: null,
       popoverContentEl: null
     };
@@ -11572,23 +11556,23 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       });
     },
 
-    sticky(sticky) {
+    appendTo(appendTo) {
       var _this$tip3;
 
       (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
-        sticky
+        appendTo
       });
     },
 
-    fallbackPlacements() {
+    sticky(sticky) {
       var _this$tip4;
 
       (_this$tip4 = this.tip) === null || _this$tip4 === void 0 ? void 0 : _this$tip4.setProps({
-        popperOptions: this.popperOptions()
+        sticky
       });
     },
 
-    tether() {
+    fallbackPlacements() {
       var _this$tip5;
 
       (_this$tip5 = this.tip) === null || _this$tip5 === void 0 ? void 0 : _this$tip5.setProps({
@@ -11596,10 +11580,18 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       });
     },
 
-    placement(placement) {
+    tether() {
       var _this$tip6;
 
       (_this$tip6 = this.tip) === null || _this$tip6 === void 0 ? void 0 : _this$tip6.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+
+    placement(placement) {
+      var _this$tip7;
+
+      (_this$tip7 = this.tip) === null || _this$tip7 === void 0 ? void 0 : _this$tip7.setProps({
         placement
       });
     },
@@ -11609,9 +11601,20 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         if (open !== null) {
           this.isOpen = open;
         }
+
+        if (open === true) {
+          this.toAppear = true;
+        }
       },
       immediate: true
     },
+    contentAppear: {
+      handler: function (contentAppear) {
+        if (contentAppear !== null) {
+          this.toAppear = contentAppear;
+        }
+      }
+    },
 
     isOpen(isOpen, isPrev) {
       if (isOpen) {
@@ -11625,7 +11628,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;
 
@@ -11635,9 +11638,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   },
 
   beforeUnmount() {
-    var _this$tip7;
+    var _this$tip8;
 
-    (_this$tip7 = this.tip) === null || _this$tip7 === void 0 ? void 0 : _this$tip7.destroy();
+    (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.destroy();
     this.removeReferences();
     this.removeEventListeners();
   },
@@ -11662,7 +11665,7 @@ 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"]')) {
         return 650;
       } else {
         return 300;
@@ -11756,7 +11759,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     * Prevents scrolling only when the popover is set to modal
     **/
     preventScrolling(e) {
-      if (!this.modal || this.$refs.content.$el.contains(e.target)) return;
+      if (!this.modal) return;
       e.preventDefault();
     },
 
@@ -11777,7 +11780,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     async onLeaveTransitionComplete() {
-      var _this$tip8;
+      var _this$tip9;
 
       if (this.modal) {
         await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
@@ -11785,7 +11788,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         await this.$nextTick();
       }
 
-      (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
+      (_this$tip9 = this.tip) === null || _this$tip9 === void 0 ? void 0 : _this$tip9.unmount();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -11911,10 +11914,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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=21a6161e&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=4136497c&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=21a6161e&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=4136497c&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -11924,7 +11927,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_21a6161e_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_4136497c_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -12152,14 +12155,14 @@ const DROPDOWN_PADDING_CLASSES = {
           switch (eventCode) {
             case EVENT_KEYNAMES.up:
             case EVENT_KEYNAMES.arrowup:
-              this.onKeyValidation(event, 'onUpKeyPress');
+              this.onUpKeyPress(event);
               event.stopPropagation();
               event.preventDefault();
               break;
 
             case EVENT_KEYNAMES.down:
             case EVENT_KEYNAMES.arrowdown:
-              this.onKeyValidation(event, 'onDownKeyPress');
+              this.onDownKeyPress(event);
               event.stopPropagation();
               event.preventDefault();
               break;
@@ -12174,19 +12177,19 @@ const DROPDOWN_PADDING_CLASSES = {
               break;
 
             case EVENT_KEYNAMES.home:
-              this.onKeyValidation(event, 'onHomeKeyPress');
+              this.onHomeKeyPress(event);
               event.stopPropagation();
               event.preventDefault();
               break;
 
             case EVENT_KEYNAMES.end:
-              this.onKeyValidation(event, 'onEndKeyPress');
+              this.onEndKeyPress(event);
               event.stopPropagation();
               event.preventDefault();
               break;
 
             default:
-              this.onKeyValidation(event, 'onKeyPress');
+              this.onKeyPress(event);
               break;
           }
 
@@ -12215,6 +12218,10 @@ const DROPDOWN_PADDING_CLASSES = {
       return ['d-ps-relative', 'd-stack2', 'd-m4', 'd-px0', DROPDOWN_PADDING_CLASSES[this.padding], this.listClass, {
         'd-context-menu-list': this.openOnContext
       }];
+    },
+
+    shouldOpenWithArrowKeys() {
+      return !this.openOnContext;
     }
 
   },
@@ -12318,24 +12325,16 @@ const DROPDOWN_PADDING_CLASSES = {
       e.stopPropagation();
       e.preventDefault();
       return this.onNavigationKey(e.key);
-    },
-
-    onKeyValidation(e, eventHandler) {
-      if (this.open !== null && !this.openOnContext) {
-        return;
-      }
-
-      this[eventHandler](e);
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=d36ba644&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=d36ba644&lang=less
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=878a8588&lang=less
 
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue
 
@@ -12345,7 +12344,7 @@ const DROPDOWN_PADDING_CLASSES = {
 ;
 
 
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_d36ba644_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_878a8588_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-40.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
@@ -13834,16 +13833,16 @@ const input_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(input_
 /* harmony default export */ const input_group_input_group = (input_group_exports_);
 ;// CONCATENATED MODULE: ./components/input_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/modal/modal.vue?vue&type=template&id=2aa05149
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/modal/modal.vue?vue&type=template&id=68e78e9e
 
-const modalvue_type_template_id_2aa05149_hoisted_1 = ["aria-describedby", "aria-labelledby"];
-const modalvue_type_template_id_2aa05149_hoisted_2 = ["id"];
-const modalvue_type_template_id_2aa05149_hoisted_3 = ["id"];
-const modalvue_type_template_id_2aa05149_hoisted_4 = {
+const modalvue_type_template_id_68e78e9e_hoisted_1 = ["aria-describedby", "aria-labelledby"];
+const modalvue_type_template_id_68e78e9e_hoisted_2 = ["id"];
+const modalvue_type_template_id_68e78e9e_hoisted_3 = ["id"];
+const modalvue_type_template_id_68e78e9e_hoisted_4 = {
   key: 4,
   class: "d-modal__footer"
 };
-function modalvue_type_template_id_2aa05149_render(_ctx, _cache, $props, $setup, $data, $options) {
+function modalvue_type_template_id_68e78e9e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
@@ -13862,7 +13861,7 @@ function modalvue_type_template_id_2aa05149_render(_ctx, _cache, $props, $setup,
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$props.show && (_ctx.$slots.banner || $props.bannerTitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
       key: 0,
       "data-qa": "dt-modal-banner",
-      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-modal__banner', $props.bannerClass])
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-modal__banner', $props.bannerClass, $options.bannerKindClass])
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "banner", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.bannerTitle), 1)])], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
       appear: "",
       name: "d-modal__dialog"
@@ -13880,12 +13879,12 @@ function modalvue_type_template_id_2aa05149_render(_ctx, _cache, $props, $setup,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_2aa05149_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_68e78e9e_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
         key: 1,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_2aa05149_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_68e78e9e_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
         key: 2,
         class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-modal__content', $props.contentClass]),
         "data-qa": "dt-modal-copy"
@@ -13893,7 +13892,7 @@ function modalvue_type_template_id_2aa05149_render(_ctx, _cache, $props, $setup,
         key: 3,
         class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-modal__content', $props.contentClass]),
         "data-qa": "dt-modal-copy"
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 3)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_2aa05149_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 3)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_68e78e9e_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         key: 5,
         class: "d-modal__close",
         circle: "",
@@ -13912,13 +13911,13 @@ function modalvue_type_template_id_2aa05149_render(_ctx, _cache, $props, $setup,
         key: 6,
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         onClose: $options.close
-      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_2aa05149_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
+      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_68e78e9e_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
       _: 3
     })]),
     _: 3
   }, 16, ["show", "class", "aria-hidden"]);
 }
-;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=2aa05149
+;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=68e78e9e
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
 // Modal style modifiers
@@ -13931,6 +13930,199 @@ const MODAL_SIZE_MODIFIERS = {
   default: '',
   full: 'd-modal--full'
 };
+const MODAL_BANNER_KINDS = {
+  error: 'd-modal__banner--critical',
+  info: 'd-modal__banner--info',
+  success: 'd-modal__banner--success',
+  warning: 'd-modal__banner--warning',
+  base: 'd-modal__banner--general'
+};
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/notice/notice.vue?vue&type=template&id=28b8ab50
+
+function noticevue_type_template_id_28b8ab50_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
+
+  const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-content");
+
+  const _component_dt_notice_action = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-action");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("aside", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.noticeClass),
+    "data-qa": "notice"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_icon, {
+    kind: $props.kind
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
+    _: 3
+  }, 8, ["kind"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_content, {
+    "title-id": $props.titleId,
+    "content-id": $props.contentId,
+    title: $props.title,
+    role: $props.role
+  }, {
+    titleOverride: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "titleOverride")]),
+    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, ["title-id", "content-id", "title", "role"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_action, {
+    "hide-close": $props.hideClose,
+    "close-button-props": $props.closeButtonProps,
+    "visually-hidden-close": _ctx.visuallyHiddenClose,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+    onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
+    _: 3
+  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 2);
+}
+;// CONCATENATED MODULE: ./components/notice/notice.vue?vue&type=template&id=28b8ab50
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice.vue?vue&type=script&lang=js
+
+
+
+
+
+/**
+ * A notice is an informational and assistive message that appears inline with content.
+ * @see https://dialpad.design/components/notice.html
+ */
+
+/* harmony default export */ const noticevue_type_script_lang_js = ({
+  name: 'DtNotice',
+  components: {
+    DtNoticeIcon: notice_icon,
+    DtNoticeContent: notice_content,
+    DtNoticeAction: notice_action
+  },
+  mixins: [sr_only_close_button],
+  props: {
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default: undefined
+    },
+
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default: undefined
+    },
+
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
+    title: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
+     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
+     * important message that does contain interactive elements.
+     * @values alert, alertdialog, status
+     */
+    role: {
+      type: String,
+      default: 'status',
+
+      validate(role) {
+        return NOTICE_ROLES.includes(role);
+      }
+
+    },
+
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * This will also change the aria role from status to alert.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: 'base',
+
+      validate(kind) {
+        return NOTICE_KINDS.includes(kind);
+      }
+
+    },
+
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+  /**
+   * Close button click event
+   *
+   * @event close
+   */
+  'close',
+  /**
+   * Native button click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
+  computed: {
+    noticeClass() {
+      const noticeKinds = {
+        error: 'd-notice--error',
+        info: 'd-notice--info',
+        success: 'd-notice--success',
+        warning: 'd-notice--warning',
+        base: 'd-notice--base'
+      };
+      return ['d-notice', noticeKinds[this.kind], {
+        'd-notice--important': this.important
+      }];
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/notice/notice.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/notice/notice.vue
+
+
+
+
+;
+const notice_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noticevue_type_script_lang_js, [['render',noticevue_type_template_id_28b8ab50_render]])
+
+/* harmony default export */ const notice = (notice_exports_);
+;// CONCATENATED MODULE: ./components/notice/index.js
+
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=script&lang=js
 
 
@@ -13941,6 +14133,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 
+
 /**
  * Modals focus the user’s attention exclusively on one task or piece of information
  * via a window that sits on top of the page content.
@@ -14073,6 +14266,20 @@ const MODAL_SIZE_MODIFIERS = {
       default: ''
     },
 
+    /**
+     * Sets the color of the banner.
+     * @values base, error, info, success, warning
+     */
+    bannerKind: {
+      type: String,
+      default: 'warning',
+
+      validate(kind) {
+        return NOTICE_KINDS.includes(kind);
+      }
+
+    },
+
     /**
      * Additional class name for the banner element within the modal.
      * Can accept String, Object, and Array, i.e. has the
@@ -14128,7 +14335,9 @@ const MODAL_SIZE_MODIFIERS = {
   data() {
     return {
       MODAL_KIND_MODIFIERS: MODAL_KIND_MODIFIERS,
-      MODAL_SIZE_MODIFIERS: MODAL_SIZE_MODIFIERS
+      MODAL_SIZE_MODIFIERS: MODAL_SIZE_MODIFIERS,
+      MODAL_BANNER_KINDS: MODAL_BANNER_KINDS,
+      EVENT_KEYNAMES: EVENT_KEYNAMES
     };
   },
 
@@ -14165,6 +14374,10 @@ const MODAL_SIZE_MODIFIERS = {
 
     hasFooterSlot() {
       return !!this.$slots.footer;
+    },
+
+    bannerKindClass() {
+      return MODAL_BANNER_KINDS[this.bannerKind];
     }
 
   },
@@ -14228,7 +14441,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 ;
-const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_2aa05149_render]])
+const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_68e78e9e_render]])
 
 /* harmony default export */ const modal_modal = (modal_exports_);
 ;// CONCATENATED MODULE: ./components/modal/index.js
@@ -14489,192 +14702,6 @@ const list_item_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(li
 ;// CONCATENATED MODULE: ./components/list_item_group/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/notice/notice.vue?vue&type=template&id=28b8ab50
-
-function noticevue_type_template_id_28b8ab50_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
-
-  const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-content");
-
-  const _component_dt_notice_action = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-action");
-
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("aside", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.noticeClass),
-    "data-qa": "notice"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_icon, {
-    kind: $props.kind
-  }, {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
-    _: 3
-  }, 8, ["kind"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_content, {
-    "title-id": $props.titleId,
-    "content-id": $props.contentId,
-    title: $props.title,
-    role: $props.role
-  }, {
-    titleOverride: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "titleOverride")]),
-    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, ["title-id", "content-id", "title", "role"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_action, {
-    "hide-close": $props.hideClose,
-    "close-button-props": $props.closeButtonProps,
-    "visually-hidden-close": _ctx.visuallyHiddenClose,
-    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-    onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
-  }, {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
-    _: 3
-  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 2);
-}
-;// CONCATENATED MODULE: ./components/notice/notice.vue?vue&type=template&id=28b8ab50
-
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice.vue?vue&type=script&lang=js
-
-
-
-
-
-/**
- * A notice is an informational and assistive message that appears inline with content.
- * @see https://dialpad.design/components/notice.html
- */
-
-/* harmony default export */ const noticevue_type_script_lang_js = ({
-  name: 'DtNotice',
-  components: {
-    DtNoticeIcon: notice_icon,
-    DtNoticeContent: notice_content,
-    DtNoticeAction: notice_action
-  },
-  mixins: [sr_only_close_button],
-  props: {
-    /**
-     * Sets an ID on the title element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the title.
-     */
-    titleId: {
-      type: String,
-      default: undefined
-    },
-
-    /**
-     * Sets an ID on the content element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the content.
-     */
-    contentId: {
-      type: String,
-      default: undefined
-    },
-
-    /**
-     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
-     */
-    title: {
-      type: String,
-      default: ''
-    },
-
-    /**
-     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
-     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
-     * important message that does contain interactive elements.
-     * @values alert, alertdialog, status
-     */
-    role: {
-      type: String,
-      default: 'status',
-
-      validate(role) {
-        return NOTICE_ROLES.includes(role);
-      }
-
-    },
-
-    /**
-     * Used in scenarios where the message needs to visually dominate the screen.
-     * This will also change the aria role from status to alert.
-     * @values true, false
-     */
-    important: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Severity level of the notice, sets the icon and background
-     * @values base, error, info, success, warning
-     */
-    kind: {
-      type: String,
-      default: 'base',
-
-      validate(kind) {
-        return NOTICE_KINDS.includes(kind);
-      }
-
-    },
-
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
-
-    /**
-     * Hides the close button from the notice
-     * @values true, false
-     */
-    hideClose: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-  /**
-   * Close button click event
-   *
-   * @event close
-   */
-  'close',
-  /**
-   * Native button click event
-   *
-   * @event click
-   * @type {PointerEvent | KeyboardEvent}
-   */
-  'click'],
-  computed: {
-    noticeClass() {
-      const noticeKinds = {
-        error: 'd-notice--error',
-        info: 'd-notice--info',
-        success: 'd-notice--success',
-        warning: 'd-notice--warning',
-        base: 'd-notice--base'
-      };
-      return ['d-notice', noticeKinds[this.kind], {
-        'd-notice--important': this.important
-      }];
-    }
-
-  }
-});
-;// CONCATENATED MODULE: ./components/notice/notice.vue?vue&type=script&lang=js
- 
-;// CONCATENATED MODULE: ./components/notice/notice.vue
-
-
-
-
-;
-const notice_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noticevue_type_script_lang_js, [['render',noticevue_type_template_id_28b8ab50_render]])
-
-/* harmony default export */ const notice = (notice_exports_);
-;// CONCATENATED MODULE: ./components/notice/index.js
-
-
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/pagination/pagination.vue?vue&type=template&id=57c28750
 
 const paginationvue_type_template_id_57c28750_hoisted_1 = ["aria-label"];
@@ -18029,17 +18056,17 @@ 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-40.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=6b1072ea
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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=27b9863b
 
-const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_2 = {
+const combobox_with_popovervue_type_template_id_27b9863b_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_27b9863b_hoisted_2 = {
   ref: "header"
 };
-const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_3 = ["onMouseleave", "onFocusout"];
-const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_4 = {
+const combobox_with_popovervue_type_template_id_27b9863b_hoisted_3 = ["onMouseleave", "onFocusout"];
+const combobox_with_popovervue_type_template_id_27b9863b_hoisted_4 = {
   ref: "footer"
 };
-function combobox_with_popovervue_type_template_id_6b1072ea_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_with_popovervue_type_template_id_27b9863b_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");
@@ -18062,6 +18089,7 @@ function combobox_with_popovervue_type_template_id_6b1072ea_render(_ctx, _cache,
     "on-end-of-list": $props.onEndOfList,
     "list-rendered-outside": true,
     "list-id": $props.listId,
+    "append-to": $props.appendTo,
     "data-qa": "dt-combobox"
   }, $options.comboboxListeners), {
     input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
@@ -18078,7 +18106,7 @@ function combobox_with_popovervue_type_template_id_6b1072ea_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_6b1072ea_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_27b9863b_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
@@ -18123,22 +18151,22 @@ function combobox_with_popovervue_type_template_id_6b1072ea_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_6b1072ea_hoisted_3)]),
+        })], 42, combobox_with_popovervue_type_template_id_27b9863b_hoisted_3)]),
         _: 2
       }, [_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_6b1072ea_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_27b9863b_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
         key: "0"
       } : undefined, _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_6b1072ea_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_27b9863b_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"])];
     }),
     _: 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"]);
+  }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id", "append-to"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6b1072ea
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=27b9863b
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
 
@@ -18149,6 +18177,7 @@ function combobox_with_popovervue_type_template_id_6b1072ea_render(_ctx, _cache,
 
 
 
+
 /* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
   name: 'DtRecipeComboboxWithPopover',
   components: {
@@ -18307,6 +18336,18 @@ function combobox_with_popovervue_type_template_id_6b1072ea_render(_ctx, _cache,
       default: false
     },
 
+    /**
+     * Sets the element to which the popover is going to append to.
+     * @values 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: () => document.body,
+      validator: appendTo => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
+    },
+
     /**
      * Displays the list when the combobox is focused, before the user has typed anything.
      * When this is enabled the list will not close after selection.
@@ -18498,32 +18539,32 @@ function combobox_with_popovervue_type_template_id_6b1072ea_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_6b1072ea_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_27b9863b_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-40.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=5e05b863
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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=e2856cc6
 
-const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative d-d-block"
 };
-const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_5e05b863_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_e2856cc6_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");
@@ -18541,6 +18582,7 @@ function combobox_multi_selectvue_type_template_id_5e05b863_render(_ctx, _cache,
     "has-suggestion-list": $props.hasSuggestionList,
     "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
     "visually-hidden-close": _ctx.visuallyHiddenClose,
+    "append-to": $props.appendTo,
     "content-width": "anchor",
     onSelect: $options.onComboboxSelect
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
@@ -18548,7 +18590,7 @@ function combobox_multi_selectvue_type_template_id_5e05b863_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_5e05b863_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_5e05b863_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_e2856cc6_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_e2856cc6_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",
@@ -18590,19 +18632,19 @@ function combobox_multi_selectvue_type_template_id_5e05b863_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_5e05b863_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_e2856cc6_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [_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_5e05b863_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_e2856cc6_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
     key: "0"
   } : undefined, _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_5e05b863_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_e2856cc6_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=5e05b863
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=e2856cc6
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -18719,6 +18761,7 @@ const CHIP_BOTTOM_POSITION = {
 
 
 
+
 /* harmony default export */ const combobox_multi_selectvue_type_script_lang_js = ({
   name: 'DtRecipeComboboxMultiSelect',
   components: {
@@ -18773,6 +18816,18 @@ const CHIP_BOTTOM_POSITION = {
       }
     },
 
+    /**
+     * Sets the element to which the popover is going to append to.
+     * @values 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: () => document.body,
+      validator: appendTo => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
+    },
+
     /**
      * Show input validation message
      */
@@ -19194,7 +19249,7 @@ const CHIP_BOTTOM_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_5e05b863_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_e2856cc6_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js