@dialpad/dialtone-vue 2.53.1 → 2.54.0-beta.1

package/dist/dialtone-vue.common.js

@@ -7990,17 +7990,17 @@ var collapsible_component = normalizeComponent(
 /* harmony default export */ const collapsible = (collapsible_component.exports);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=70cb2bdc&
-var dropdownvue_type_template_id_70cb2bdc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true,"open-on-context":_vm.openOnContext},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=5944f754&
+var dropdownvue_type_template_id_5944f754_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close}),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"tabindex":_vm.isArrowKeyNav ? -1 : 0},on:{"close":close}}):_vm._e()],2)]}}],null,true)},_vm.dropdownListeners))}
-var dropdownvue_type_template_id_70cb2bdc_staticRenderFns = []
+var dropdownvue_type_template_id_5944f754_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=64e7122e&
-var popovervue_type_template_id_64e7122e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=8dc20c0e&
+var popovervue_type_template_id_8dc20c0e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8011,7 +8011,7 @@ var popovervue_type_template_id_64e7122e_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_64e7122e_staticRenderFns = []
+var popovervue_type_template_id_8dc20c0e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13431,7 +13431,7 @@ var popover_header_footer_component = normalizeComponent(
   },
 
   mounted() {
-    const externalAnchorEl = document.getElementById(this.externalAnchor);
+    const externalAnchorEl = this.externalAnchor ? this.$el.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
     this.anchorEl = externalAnchorEl !== null && externalAnchorEl !== void 0 ? externalAnchorEl : this.$refs.anchor.children[0];
     this.popoverContentEl = this.$refs.content.$el;
 
@@ -13468,7 +13468,7 @@ var popover_header_footer_component = normalizeComponent(
 
     calculateAnchorZindex() {
       // if a modal is currently active render at modal-element z-index, otherwise at popover z-index
-      if (document.querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')) {
+      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')) {
         return 650;
       } else {
         return 300;
@@ -13554,7 +13554,7 @@ var popover_header_footer_component = normalizeComponent(
     * 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();
     },
 
@@ -13722,8 +13722,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_64e7122e_render,
-  popovervue_type_template_id_64e7122e_staticRenderFns,
+  popovervue_type_template_id_8dc20c0e_render,
+  popovervue_type_template_id_8dc20c0e_staticRenderFns,
   false,
   null,
   null,
@@ -13996,14 +13996,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;
@@ -14018,19 +14018,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;
           }
 
@@ -14059,6 +14059,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;
     }
 
   },
@@ -14162,14 +14166,6 @@ 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);
     }
 
   }
@@ -14191,8 +14187,8 @@ var dropdownvue_type_style_index_0_lang_less_ = __webpack_require__(782);
 
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_70cb2bdc_render,
-  dropdownvue_type_template_id_70cb2bdc_staticRenderFns,
+  dropdownvue_type_template_id_5944f754_render,
+  dropdownvue_type_template_id_5944f754_staticRenderFns,
   false,
   null,
   null,
@@ -15801,14 +15797,15 @@ var input_group_component = normalizeComponent(
 /* harmony default export */ const input_group_input_group = (input_group_component.exports);
 ;// CONCATENATED MODULE: ./components/input_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/modal/modal.vue?vue&type=template&id=e9bf0878&
-var modalvue_type_template_id_e9bf0878_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-lazy-show',_vm._g({class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/modal/modal.vue?vue&type=template&id=a8730b96&
+var modalvue_type_template_id_a8730b96_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-lazy-show',_vm._g({class:[
     'd-modal',
     _vm.MODAL_KIND_MODIFIERS[_vm.kind],
     _vm.MODAL_SIZE_MODIFIERS[_vm.size],
     _vm.modalClass ],attrs:{"transition":"d-zoom","show":_vm.show,"data-qa":"dt-modal","aria-hidden":_vm.open}},_vm.modalListeners),[(_vm.show && (_vm.$slots.banner || _vm.bannerTitle))?_c('div',{class:[
       'd-modal__banner',
-      _vm.bannerClass ],attrs:{"data-qa":"dt-modal-banner"}},[_vm._t("banner",function(){return [_vm._v(" "+_vm._s(_vm.bannerTitle)+" ")]})],2):_vm._e(),_c('transition',{attrs:{"appear":"","name":"d-modal__dialog"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],class:[
+      _vm.bannerClass,
+      _vm.bannerKindClass ],attrs:{"data-qa":"dt-modal-banner"}},[_vm._t("banner",function(){return [_vm._v(" "+_vm._s(_vm.bannerTitle)+" ")]})],2):_vm._e(),_c('transition',{attrs:{"appear":"","name":"d-modal__dialog"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],class:[
         'd-modal__dialog',
         { 'd-modal__dialog--scrollable': _vm.fixedHeaderFooter },
         _vm.dialogClass ],attrs:{"role":"dialog","aria-modal":"true","aria-describedby":_vm.describedById,"aria-labelledby":_vm.labelledById}},[(_vm.$slots.header)?_c('div',{staticClass:"d-modal__header",attrs:{"id":_vm.labelledById,"data-qa":"dt-modal-title"}},[_vm._t("header")],2):_c('h2',{staticClass:"d-modal__header",attrs:{"id":_vm.labelledById,"data-qa":"dt-modal-title"}},[_vm._v(" "+_vm._s(_vm.title)+" ")]),(_vm.$slots.default)?_c('div',{class:[
@@ -15816,7 +15813,7 @@ var modalvue_type_template_id_e9bf0878_render = function () {var _vm=this;var _h
           _vm.contentClass ],attrs:{"data-qa":"dt-modal-copy"}},[_vm._t("default")],2):_c('p',{class:[
           'd-modal__content',
           _vm.contentClass ],attrs:{"data-qa":"dt-modal-copy"}},[_vm._v(" "+_vm._s(_vm.copy)+" ")]),(_vm.hasFooterSlot)?_c('footer',{staticClass:"d-modal__footer"},[_vm._t("footer")],2):_vm._e(),(!_vm.hideClose)?_c('dt-button',_vm._b({staticClass:"d-modal__close",attrs:{"circle":"","size":"lg","importance":"clear","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":"400"}})]},proxy:true}],null,false,1709155279)},'dt-button',_vm.closeButtonProps,false)):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.close}}):_vm._e()],1)])],1)}
-var modalvue_type_template_id_e9bf0878_staticRenderFns = []
+var modalvue_type_template_id_a8730b96_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
@@ -15830,6 +15827,208 @@ 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/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice.vue?vue&type=template&id=bdb2f588&
+var noticevue_type_template_id_bdb2f588_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.noticeClass,attrs:{"data-qa":"notice"}},[_c('dt-notice-icon',{attrs:{"kind":_vm.kind}},[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)}
+var noticevue_type_template_id_bdb2f588_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+/**
+ * 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'],
+  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&
+ /* harmony default export */ const notice_noticevue_type_script_lang_js_ = (noticevue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/notice/notice.vue
+
+
+
+
+
+/* normalize component */
+;
+var notice_component = normalizeComponent(
+  notice_noticevue_type_script_lang_js_,
+  noticevue_type_template_id_bdb2f588_render,
+  noticevue_type_template_id_bdb2f588_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const notice = (notice_component.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[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/modal/modal.vue?vue&type=script&lang=js&
 //
 //
@@ -15946,6 +16145,8 @@ const MODAL_SIZE_MODIFIERS = {
 //
 //
 //
+//
+
 
 
 
@@ -16087,6 +16288,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
@@ -16129,6 +16344,7 @@ const MODAL_SIZE_MODIFIERS = {
     return {
       MODAL_KIND_MODIFIERS: MODAL_KIND_MODIFIERS,
       MODAL_SIZE_MODIFIERS: MODAL_SIZE_MODIFIERS,
+      MODAL_BANNER_KINDS: MODAL_BANNER_KINDS,
       EVENT_KEYNAMES: EVENT_KEYNAMES
     };
   },
@@ -16166,6 +16382,10 @@ const MODAL_SIZE_MODIFIERS = {
 
     hasFooterSlot() {
       return !!this.$slots.footer;
+    },
+
+    bannerKindClass() {
+      return MODAL_BANNER_KINDS[this.bannerKind];
     }
 
   },
@@ -16233,8 +16453,8 @@ const MODAL_SIZE_MODIFIERS = {
 ;
 var modal_component = normalizeComponent(
   modal_modalvue_type_script_lang_js_,
-  modalvue_type_template_id_e9bf0878_render,
-  modalvue_type_template_id_e9bf0878_staticRenderFns,
+  modalvue_type_template_id_a8730b96_render,
+  modalvue_type_template_id_a8730b96_staticRenderFns,
   false,
   null,
   null,
@@ -16532,201 +16752,6 @@ var list_item_group_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/list_item_group/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice.vue?vue&type=template&id=bdb2f588&
-var noticevue_type_template_id_bdb2f588_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.noticeClass,attrs:{"data-qa":"notice"}},[_c('dt-notice-icon',{attrs:{"kind":_vm.kind}},[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)}
-var noticevue_type_template_id_bdb2f588_staticRenderFns = []
-
-
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-
-
-
-
-/**
- * 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'],
-  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&
- /* harmony default export */ const notice_noticevue_type_script_lang_js_ = (noticevue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./components/notice/notice.vue
-
-
-
-
-
-/* normalize component */
-;
-var notice_component = normalizeComponent(
-  notice_noticevue_type_script_lang_js_,
-  noticevue_type_template_id_bdb2f588_render,
-  noticevue_type_template_id_bdb2f588_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ const notice = (notice_component.exports);
-;// CONCATENATED MODULE: ./components/notice/index.js
-
-
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/pagination/pagination.vue?vue&type=template&id=8a1dbe50&
 var paginationvue_type_template_id_8a1dbe50_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"d-d-flex d-fd-row d-gg4 d-ai-center",attrs:{"aria-label":_vm.ariaLabel}},[_c('dt-button',{staticClass:"d-px8",class:_vm.isFirstPage ? 'd-fc-black-300 h:d-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary',attrs:{"data-qa":"dt-pagination-prev","aria-label":_vm.prevAriaLabel,"kind":"muted","importance":_vm.isFirstPage ? 'primary' : 'clear',"disabled":_vm.isFirstPage},on:{"click":function($event){return _vm.changePage(_vm.currentPage - 1)}}},[_c('template',{slot:"icon"},[_c('dt-icon',{attrs:{"name":"chevron-left","size":"300"}})],1)],2),_vm._l((_vm.pages),function(page,index){return _c('div',{key:("page-" + page + "-" + index),class:{ 'd-as-flex-end': isNaN(Number(page)) }},[(isNaN(Number(page)))?_c('div',{staticClass:"d-fc-tertiary d-w24 d-ta-center",attrs:{"data-qa":"dt-pagination-separator"}},[_c('dt-icon',{attrs:{"name":"more-horizontal","size":"300"}})],1):_c('dt-button',{attrs:{"aria-label":_vm.pageNumberAriaLabel(page),"kind":_vm.currentPage === page ? 'default' : 'muted',"importance":_vm.currentPage === page ? 'primary' : 'clear',"label-class":""},on:{"click":function($event){return _vm.changePage(page)}}},[_vm._v(" "+_vm._s(page)+" ")])],1)}),_c('dt-button',{staticClass:"d-px8",class:_vm.isLastPage ? 'd-fc-black-300 h:d-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary',attrs:{"data-qa":"dt-pagination-next","aria-label":_vm.nextAriaLabel,"disabled":_vm.isLastPage,"kind":"muted","importance":_vm.isLastPage ? 'primary' : 'clear'},on:{"click":function($event){return _vm.changePage(_vm.currentPage + 1)}}},[_c('template',{slot:"icon"},[_c('dt-icon',{attrs:{"name":"chevron-right","size":"300"}})],1)],2)],2)}
 var paginationvue_type_template_id_8a1dbe50_staticRenderFns = []
@@ -20418,15 +20443,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=ad3e7dce&
-var combobox_with_popovervue_type_template_id_ad3e7dce_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=294704b9&
+var combobox_with_popovervue_type_template_id_294704b9_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"append-to":_vm.appendTo,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
 return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":false,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":clearHighlightIndex}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns = []
+var combobox_with_popovervue_type_template_id_294704b9_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -20533,6 +20558,8 @@ var combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns = []
 //
 //
 //
+//
+
 
 
 
@@ -20699,6 +20726,18 @@ var combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns = []
       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.
@@ -20894,8 +20933,8 @@ var combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_ad3e7dce_render,
-  combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns,
+  combobox_with_popovervue_type_template_id_294704b9_render,
+  combobox_with_popovervue_type_template_id_294704b9_staticRenderFns,
   false,
   null,
   null,
@@ -20906,11 +20945,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=97461302&
-var combobox_multi_selectvue_type_template_id_97461302_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=8a9854ae&
+var combobox_multi_selectvue_type_template_id_8a9854ae_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"append-to":_vm.appendTo,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
-return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative d-d-block"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_97461302_staticRenderFns = []
+return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative d-d-block"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.CHIP_SIZES[_vm.size]},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
+var combobox_multi_selectvue_type_template_id_8a9854ae_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -21010,6 +21049,16 @@ const MULTI_SELECT_SIZES = {
   SMALL: 'sm',
   DEFAULT: 'md'
 };
+const CHIP_SIZES = {
+  xs: 'xs',
+  sm: 'xs',
+  md: 'sm'
+};
+const CHIP_BOTTOM_POSITION = {
+  xs: 4,
+  sm: 5,
+  md: 5
+};
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js&
 //
 //
@@ -21116,6 +21165,8 @@ const MULTI_SELECT_SIZES = {
 //
 //
 //
+//
+
 
 
 
@@ -21177,6 +21228,18 @@ const MULTI_SELECT_SIZES = {
       }
     },
 
+    /**
+     * 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
      */
@@ -21310,7 +21373,9 @@ const MULTI_SELECT_SIZES = {
       popoverOffset: [0, 4],
       showValidationMessages: false,
       initialInputPadding: {},
-      resizeWindowObserver: null
+      resizeWindowObserver: null,
+      originalInputSize: null,
+      CHIP_SIZES: CHIP_SIZES
     };
   },
 
@@ -21359,6 +21424,7 @@ const MULTI_SELECT_SIZES = {
       async handler() {
         await this.$nextTick();
         this.setInputPadding();
+        this.setChipsPosition();
         this.setInputMinWidth();
         this.checkMaxSelected();
       }
@@ -21368,24 +21434,36 @@ const MULTI_SELECT_SIZES = {
     async label() {
       await this.$nextTick(); // Adjust the chips position if label changed
 
-      this.setChipsTopPosition();
+      this.setChipsPosition();
     },
 
     async description() {
       await this.$nextTick(); // Adjust the chips position if description changed
 
-      this.setChipsTopPosition();
-    }
+      this.setChipsPosition();
+    },
+
+    size: {
+      async handler() {
+        await this.$nextTick();
+        const input = this.getInput();
+        this.revertInputPadding(input);
+        this.originalInputSize = input.getBoundingClientRect().height;
+        this.setInputPadding();
+      },
 
+      immediate: true
+    }
   },
 
   mounted() {
-    this.setChipsTopPosition(); // Recalculate chip position and input padding when resizing window
+    this.setChipsPosition(); // Recalculate chip position and input padding when resizing window
 
     this.resizeWindowObserver = new ResizeObserver(() => {
-      this.setChipsTopPosition();
+      this.setChipsPosition();
       this.setInputPadding();
-    }).observe(document.body);
+    });
+    this.resizeWindowObserver.observe(document.body);
   },
 
   beforeDestroy() {
@@ -21504,48 +21582,31 @@ const MULTI_SELECT_SIZES = {
       this.closeComboboxList();
     },
 
-    setChipsTopPosition() {
-      // To place the chips in the input box
-      // The chip "top" position should be the same line as the input box
-      if (!this.$refs.input) {
-        return;
-      }
-
-      const input = this.getInput();
-      if (!input) return;
-      const inputSlotWrapper = this.$refs.inputSlotWrapper;
-      const top = input.getBoundingClientRect().top - inputSlotWrapper.getBoundingClientRect().top;
+    setChipsPosition() {
       const chipsWrapper = this.$refs.chipsWrapper;
-      chipsWrapper.style.top = top + 'px';
+      chipsWrapper.style.bottom = `${CHIP_BOTTOM_POSITION[this.size]}px`;
     },
 
     setInputPadding() {
       const lastChip = this.getLastChip();
       const input = this.getInput();
+      const chipsWrapper = this.$refs.chipsWrapper;
       if (!input) return;
-
-      if (!lastChip) {
-        // Revert padding if no chip
-        this.revertInputPadding(input);
-        return;
-      } // Get the position of the last chip
+      this.revertInputPadding(input);
+      this.popoverOffset = [0, 4];
+      if (!lastChip) return; // Get the position of the last chip
       // The input cursor should be the same "top" as that chip and next besides it
 
-
       const left = lastChip.offsetLeft + this.getFullWidth(lastChip);
-      input.style.paddingLeft = left + 'px'; // Chip has vertical margin. We add buffer to top center the input text
+      input.style.paddingLeft = left + 'px'; // Get the chip size minus the 4px padding
 
-      const top = lastChip.offsetTop + 3;
-      input.style.paddingTop = top + 'px'; // TODO: refresh the tippy.js instance in the popover
-      // If the new chip goes to the next line and the input box expands,
-      // move the popover down to the next line. Same when chips are removed
+      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4; // Get lastChip offsetTop plus 2px of the input padding.
 
-      this.popoverOffset = [0, 4];
-    },
+      const top = lastChip.offsetTop + 2; // Add padding to Top only if the chips need more space
 
-    getFullWidth(el) {
-      const styles = window.getComputedStyle(el);
-      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);
+      if (chipsSize > this.originalInputSize) {
+        input.style.paddingTop = `${top}px`;
+      }
     },
 
     revertInputPadding(input) {
@@ -21554,6 +21615,11 @@ const MULTI_SELECT_SIZES = {
       input.style.paddingBottom = '';
     },
 
+    getFullWidth(el) {
+      const styles = window.getComputedStyle(el);
+      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);
+    },
+
     setInputMinWidth() {
       // Ensure the width of the input is "slightly bigger" than the width of a single chip
       const firstChip = this.getFirstChip();
@@ -21593,8 +21659,8 @@ const MULTI_SELECT_SIZES = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_97461302_render,
-  combobox_multi_selectvue_type_template_id_97461302_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_8a9854ae_render,
+  combobox_multi_selectvue_type_template_id_8a9854ae_staticRenderFns,
   false,
   null,
   null,