@dialpad/dialtone-vue 3.5.0 → 3.6.0

package/dist/dialtone-vue.umd.js

@@ -59,7 +59,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 63:
+/***/ 854:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -435,19 +435,19 @@ var update = add("463815e5", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 621:
+/***/ 770:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(63);
+var content = __webpack_require__(854);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("51c1283c", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("f006c8fc", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1153,6 +1153,8 @@ __webpack_require__.d(__webpack_exports__, {
   "DtPopover": () => (/* reexport */ popover),
   "DtRadio": () => (/* reexport */ radio_radio),
   "DtRadioGroup": () => (/* reexport */ radio_group),
+  "DtRecipeComboboxMultiSelect": () => (/* reexport */ combobox_multi_select),
+  "DtRecipeComboboxWithPopover": () => (/* reexport */ combobox_with_popover),
   "DtRecipeContactInfo": () => (/* reexport */ contact_info),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
   "DtRootLayout": () => (/* reexport */ root_layout),
@@ -1246,7 +1248,7 @@ if (typeof window !== 'undefined') {
 
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(203);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=3dcc5cfa
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=a43ab9f6
 
 const _hoisted_1 = ["id"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1256,7 +1258,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-avatar"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=3dcc5cfa
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=a43ab9f6
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
 const AVATAR_KIND_MODIFIERS = {
@@ -1514,16 +1516,23 @@ const flushPromises = () => {
       const firstChild = this.$el.children[0];
 
       if (firstChild) {
-        this.validateElementType(firstChild);
         this.setKind(firstChild);
         this.validateImageAttrsPresence();
       }
     },
 
     setKind(element) {
-      if (this.isSvgType(element)) this.kind = 'icon';
-      if (this.isImageType(element)) this.kind = 'image';
-      if (this.isInitialsType(element)) this.kind = 'initials';
+      if (this.isSvgType(element)) {
+        this.kind = 'icon';
+        return;
+      }
+
+      if (this.isImageType(element)) {
+        this.kind = 'image';
+        return;
+      }
+
+      this.kind = 'initials';
     },
 
     isSvgType(element) {
@@ -1538,15 +1547,6 @@ const flushPromises = () => {
       return (element === null || element === void 0 ? void 0 : (_element$tagName2 = element.tagName) === null || _element$tagName2 === void 0 ? void 0 : _element$tagName2.toUpperCase()) === 'IMG';
     },
 
-    isInitialsType(element) {
-      return (element === null || element === void 0 ? void 0 : element.nodeType) === Node.TEXT_NODE;
-    },
-
-    validateElementType(element) {
-      if (this.isInitialsType(element) || this.isSvgType(element) || this.isImageType(element)) return;
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.warn)('img, svg, and raw text are the only valid elements to put inside the avatar', this);
-    },
-
     validateImageAttrsPresence() {
       if (this.kind === 'image') {
         // Check that default slot image required attributes are provided
@@ -3562,10 +3562,10 @@ const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxv
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=e86dedbc
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=b0e1f8ba
 
-const dropdownvue_type_template_id_e86dedbc_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_e86dedbc_render(_ctx, _cache, $props, $setup, $data, $options) {
+const dropdownvue_type_template_id_b0e1f8ba_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_b0e1f8ba_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-popover");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
@@ -3573,7 +3573,7 @@ function dropdownvue_type_template_id_e86dedbc_render(_ctx, _cache, $props, $set
     "content-width": $props.contentWidth,
     open: $props.open,
     placement: $props.placement,
-    "initial-focus-element": "first",
+    "initial-focus-element": $data.openedWithKeyboard ? 'first' : 'dialog',
     "fallback-placements": $props.fallbackPlacements,
     padding: "none",
     role: "menu",
@@ -3610,12 +3610,12 @@ function dropdownvue_type_template_id_e86dedbc_render(_ctx, _cache, $props, $set
         })
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
         close: close
-      })], 42, dropdownvue_type_template_id_e86dedbc_hoisted_1)];
+      })], 42, dropdownvue_type_template_id_b0e1f8ba_hoisted_1)];
     }),
     _: 3
-  }, 16, ["content-width", "open", "placement", "fallback-placements", "modal", "max-height", "max-width", "onOpened", "onKeydown"]);
+  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "onOpened", "onKeydown"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=e86dedbc
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=b0e1f8ba
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=0656612f
 
@@ -9343,7 +9343,7 @@ const DROPDOWN_PADDING_CLASSES = {
 
 
 ;
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_e86dedbc_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_b0e1f8ba_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
@@ -10257,15 +10257,15 @@ const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_typ
 ;// CONCATENATED MODULE: ./components/emoji/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=0337d4a5
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=1204d99d
 
-const inputvue_type_template_id_0337d4a5_hoisted_1 = {
+const inputvue_type_template_id_1204d99d_hoisted_1 = {
   ref: "container",
   class: "base-input",
   "data-qa": "dt-input"
 };
-const inputvue_type_template_id_0337d4a5_hoisted_2 = ["aria-details"];
-const inputvue_type_template_id_0337d4a5_hoisted_3 = ["id"];
+const inputvue_type_template_id_1204d99d_hoisted_2 = ["aria-details"];
+const inputvue_type_template_id_1204d99d_hoisted_3 = ["id"];
 const _hoisted_4 = {
   key: 0
 };
@@ -10279,23 +10279,25 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = ["value", "name", "disabled", "maxlength"];
 const _hoisted_8 = ["value", "name", "type", "disabled", "maxlength"];
-function inputvue_type_template_id_0337d4a5_render(_ctx, _cache, $props, $setup, $data, $options) {
+function inputvue_type_template_id_1204d99d_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-validation-messages");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", inputvue_type_template_id_0337d4a5_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("label", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", inputvue_type_template_id_1204d99d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("label", {
     class: "base-input__label",
     "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : undefined,
     "data-qa": "dt-input-label-wrapper"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "labelSlot", {}, () => [$props.label ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
     key: 0,
+    ref: "label",
     "data-qa": "dt-input-label",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['base-input__label-text', 'd-label', $data.labelSizeClasses[$props.size]])
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($props.label), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]), _ctx.$slots.description || $props.description || $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
     key: 0,
     id: $options.descriptionKey,
+    ref: "description",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['base-input__description', 'd-description', 'd-fd-column', $data.descriptionSizeClasses[$props.size]]),
     "data-qa": "dt-input-description"
-  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", _hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 10, inputvue_type_template_id_0337d4a5_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", _hoisted_6, [_ctx.$slots.leftIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", _hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 10, inputvue_type_template_id_1204d99d_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", _hoisted_6, [_ctx.$slots.leftIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)($options.inputIconClasses('left')),
     "data-qa": "dt-input-left-icon-wrapper",
@@ -10328,7 +10330,7 @@ function inputvue_type_template_id_0337d4a5_render(_ctx, _cache, $props, $setup,
     onFocusout: _cache[1] || (_cache[1] = function () {
       return $options.onBlur && $options.onBlur(...arguments);
     })
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)])], 8, inputvue_type_template_id_0337d4a5_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)])], 8, inputvue_type_template_id_1204d99d_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     "validation-messages": $options.validationMessages,
     "show-messages": _ctx.showMessages,
     class: _ctx.messagesClass
@@ -10336,7 +10338,7 @@ function inputvue_type_template_id_0337d4a5_render(_ctx, _cache, $props, $setup,
     "data-qa": "dt-input-messages"
   }), null, 16, ["validation-messages", "show-messages", "class"])], 512);
 }
-;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=0337d4a5
+;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=1204d99d
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
 // Valid input types, any other input types (for example: 'radio' or 'checkbox') should
@@ -11239,7 +11241,7 @@ const MessagesMixin = {
 
 
 ;
-const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_0337d4a5_render]])
+const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_1204d99d_render]])
 
 /* harmony default export */ const input_input = (input_exports_);
 ;// CONCATENATED MODULE: ./components/input/index.js
@@ -11980,9 +11982,9 @@ const list_section_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_
 /* harmony default export */ const list_section = (list_section_exports_);
 ;// CONCATENATED MODULE: ./components/list_section/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=7876bc36
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=237d2c10
 
-function list_itemvue_type_template_id_7876bc36_render(_ctx, _cache, $props, $setup, $data, $options) {
+function list_itemvue_type_template_id_237d2c10_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     id: $props.id,
     class: ['dt-list-item d-ls-none focus-visible', {
@@ -12008,7 +12010,7 @@ function list_itemvue_type_template_id_7876bc36_render(_ctx, _cache, $props, $se
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=7876bc36
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=237d2c10
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed
 
@@ -12136,7 +12138,7 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     }
   },
-  emits: ['click', 'keydown', 'mousemove', 'mouseleave'],
+  emits: ['keydown', 'mousemove', 'mouseleave', 'mousedown'],
 
   data() {
     return {
@@ -12165,6 +12167,13 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 
           this.$emit('keydown', event);
         },
+        mousedown: event => {
+          if (!this.isFocusable) {
+            event.preventDefault();
+          }
+
+          this.$emit('mousedown', event);
+        },
         mousemove: event => {
           this.onMouseHover(event);
           this.$emit('mousemove', event);
@@ -12203,6 +12212,8 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
   },
   methods: {
     onClick(e) {
+      // disabled as we do not want to override native click
+      // eslint-disable-next-line vue/require-explicit-emits
       this.$emit('click', e);
     },
 
@@ -12218,9 +12229,9 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 });
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
-var list_itemvue_type_style_index_0_id_7876bc36_lang_less = __webpack_require__(621);
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=237d2c10&lang=less
+var list_itemvue_type_style_index_0_id_237d2c10_lang_less = __webpack_require__(770);
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=237d2c10&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -12230,7 +12241,7 @@ var list_itemvue_type_style_index_0_id_7876bc36_lang_less = __webpack_require__(
 ;
 
 
-const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_7876bc36_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_237d2c10_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -12570,16 +12581,31 @@ const radio_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(radiovue_typ
     }
   },
   emits: ['input'],
+
+  data() {
+    return {
+      internalValue: this.value
+    };
+  },
+
   watch: {
-    /*
-     * watching value to support 2 way binding for slotted radios.
-     * need this to pass value to slotted radios if modified outside
-     * radio group.
-     */
     value(newValue) {
-      this.provideObj.selectedValue = newValue;
-    }
+      this.internalValue = newValue;
+    },
+
+    /*
+    * watching value to support 2 way binding for slotted radios.
+    * need this to pass value to slotted checkboxes if modified outside
+    * radio group.
+    */
+    internalValue: {
+      immediate: true,
 
+      handler(newInternalValue) {
+        this.provideObj.selectedValue = newInternalValue;
+      }
+
+    }
   },
   methods: {
     /*
@@ -13409,27 +13435,27 @@ const checkbox_group_exports_ = checkbox_groupvue_type_script_lang_js;
 /* harmony default export */ const checkbox_group = (checkbox_group_exports_);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=8a56dabe
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=1805ca4d
 
-const chipvue_type_template_id_8a56dabe_hoisted_1 = {
+const chipvue_type_template_id_1805ca4d_hoisted_1 = {
   class: "d-chip"
 };
-const chipvue_type_template_id_8a56dabe_hoisted_2 = {
+const chipvue_type_template_id_1805ca4d_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_8a56dabe_hoisted_3 = {
+const chipvue_type_template_id_1805ca4d_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_8a56dabe_hoisted_4 = ["id"];
-function chipvue_type_template_id_8a56dabe_render(_ctx, _cache, $props, $setup, $data, $options) {
+const chipvue_type_template_id_1805ca4d_hoisted_4 = ["id"];
+function chipvue_type_template_id_1805ca4d_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("icon-close");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_1805ca4d_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     id: $props.id,
     type: $props.interactive && 'button',
     class: $options.chipClasses(),
@@ -13437,12 +13463,12 @@ function chipvue_type_template_id_8a56dabe_render(_ctx, _cache, $props, $setup,
     "aria-labelledby": $props.ariaLabel ? undefined : "".concat($props.id, "-content"),
     "aria-label": $props.ariaLabel
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.chipListeners)), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_1805ca4d_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_1805ca4d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
       key: 2,
       id: "".concat($props.id, "-content"),
       "data-qa": "dt-chip-label",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_8a56dabe_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]),
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_1805ca4d_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]),
     _: 3
   }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     key: 0
@@ -13456,7 +13482,7 @@ function chipvue_type_template_id_8a56dabe_render(_ctx, _cache, $props, $setup,
     _: 1
   }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=8a56dabe
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=1805ca4d
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
@@ -13489,6 +13515,11 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
      */
     closeButtonProps: {
       type: Object,
+      default: function () {
+        return {
+          ariaLabel: 'close'
+        };
+      },
       validator: props => {
         return !!props.ariaLabel;
       }
@@ -13602,7 +13633,7 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_8a56dabe_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_1805ca4d_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -15208,6 +15239,868 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6e4f62a5
+
+const combobox_with_popovervue_type_template_id_6e4f62a5_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_6e4f62a5_hoisted_2 = ["onMouseleave", "onFocusout"];
+function combobox_with_popovervue_type_template_id_6e4f62a5_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-popover");
+
+  const _component_dt_combobox = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-combobox");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_combobox, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+    ref: "combobox",
+    "show-list": $data.isListShown,
+    "on-beginning-of-list": $props.onBeginningOfList,
+    "on-end-of-list": $props.onEndOfList,
+    "list-aria-label": $props.listAriaLabel,
+    "list-rendered-outside": true,
+    "list-id": $props.listId,
+    "data-qa": "dt-combobox"
+  }, $options.comboboxListeners), {
+    input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(_ref => {
+      let {
+        inputProps
+      } = _ref;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+        id: $data.externalAnchor,
+        ref: "input",
+        onFocusin: _cache[0] || (_cache[0] = function () {
+          return $options.onFocusIn && $options.onFocusIn(...arguments);
+        }),
+        onFocusout: _cache[1] || (_cache[1] = function () {
+          return $options.onFocusOut && $options.onFocusOut(...arguments);
+        }),
+        onKeydown: [_cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($event => $options.openOnArrowKeyPress($event), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($event => $options.openOnArrowKeyPress($event), ["down"]))]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "input", {
+        inputProps: inputProps,
+        onInput: $options.handleDisplayList
+      })], 40, combobox_with_popovervue_type_template_id_6e4f62a5_hoisted_1)];
+    }),
+    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(_ref2 => {
+      let {
+        opened,
+        listProps,
+        clearHighlightIndex
+      } = _ref2;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_popover, {
+        ref: "popover",
+        open: $data.isListShown,
+        "onUpdate:open": _cache[6] || (_cache[6] = $event => $data.isListShown = $event),
+        "hide-on-click": true,
+        "max-height": $props.maxHeight,
+        "max-width": $props.maxWidth,
+        offset: $props.popoverOffset,
+        placement: "bottom-start",
+        padding: "none",
+        role: "listbox",
+        "external-anchor": $data.externalAnchor,
+        "content-width": $props.contentWidth,
+        "content-tabindex": null,
+        modal: false,
+        "auto-focus": false,
+        onOpened: opened
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createSlots)({
+        content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+          ref: "listWrapper",
+          class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
+          onMouseleave: clearHighlightIndex,
+          onFocusout: $event => {
+            clearHighlightIndex;
+            $options.onFocusOut;
+          }
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
+          listProps: listProps
+        })], 42, combobox_with_popovervue_type_template_id_6e4f62a5_hoisted_2)]),
+        _: 2
+      }, [_ctx.$slots.header ? {
+        name: "headerContent",
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+          ref: "header",
+          onFocusout: _cache[4] || (_cache[4] = function () {
+            return $options.onFocusOut && $options.onFocusOut(...arguments);
+          })
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")], 544)])
+      } : undefined, _ctx.$slots.footer ? {
+        name: "footerContent",
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+          ref: "footer",
+          onFocusout: _cache[5] || (_cache[5] = function () {
+            return $options.onFocusOut && $options.onFocusOut(...arguments);
+          })
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "footer")], 544)])
+      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "external-anchor", "content-width", "onOpened"])];
+    }),
+    _: 3
+  }, 16, ["show-list", "on-beginning-of-list", "on-end-of-list", "list-aria-label", "list-id"]);
+}
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6e4f62a5
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
+  name: 'DtRecipeComboboxWithPopover',
+  components: {
+    DtCombobox: combobox,
+    DtPopover: popover
+  },
+  props: {
+    /**
+     * String to use for the list's aria-label.
+     */
+    listAriaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * Leaving this null will have the combobox trigger on input focus by default.
+     * If you set this value, the default trigger behavior will be disabled and you can
+     * control it as you need.
+     */
+    showList: {
+      type: Boolean,
+      default: null
+    },
+
+    /**
+     * Sets an ID on the list element of the component. Used by several aria attributes
+     * as well as when deriving the IDs for each item.
+     */
+    listId: {
+      type: String,
+
+      default() {
+        return getUniqueString();
+      }
+
+    },
+
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * A method that will be called when the selection goes past the beginning of the list.
+     */
+    onBeginningOfList: {
+      type: Function,
+      default: null
+    },
+
+    /**
+     * A method that will be called when the selection goes past the end of the list.
+     */
+    onEndOfList: {
+      type: Function,
+      default: null
+    },
+
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    maxHeight: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Vertical padding size around the list element.
+     */
+    padding: {
+      type: String,
+      default: 'small',
+      validator: padding => {
+        return Object.keys(DROPDOWN_PADDING_CLASSES).some(item => item === padding);
+      }
+    },
+
+    /**
+     * Width configuration for the popover content. When its value is 'anchor',
+     * the popover content will have the same width as the anchor.
+     */
+    contentWidth: {
+      type: String,
+      default: null,
+      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth)
+    },
+
+    /**
+     * If the list should be shown by pressing up or down arrow key on the input element.
+     * This can be set when not passing showList prop.
+     */
+    openWithArrowKeys: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     *  Displaces the popover content box from its anchor element
+     *  by the specified number of pixels.
+     */
+    popoverOffset: {
+      type: Array,
+      default: () => [0, 4]
+    },
+
+    /**
+     * 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.
+     */
+    hasSuggestionList: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['select', 'escape', 'highlight', 'opened'],
+
+  data() {
+    return {
+      DROPDOWN_PADDING_CLASSES: DROPDOWN_PADDING_CLASSES,
+      isListShown: false,
+      isInputFocused: false,
+      isListFocused: false,
+      externalAnchor: getUniqueString()
+    };
+  },
+
+  computed: {
+    comboboxListeners() {
+      return { ...this.$attrs,
+        onSelect: this.onSelect,
+        onEscape: this.onEscape,
+        onHighlight: this.onHighlight
+      };
+    }
+
+  },
+  watch: {
+    showList: {
+      handler: function (show) {
+        if (show !== null) {
+          this.isListShown = show;
+        }
+      },
+      immediate: true
+    },
+
+    isListShown(val) {
+      this.onOpened(val);
+    }
+
+  },
+  methods: {
+    async handleDisplayList(value) {
+      if (this.isListShown) {
+        // After the list is updated, hightlight the first item
+        await this.$nextTick();
+        this.$refs.combobox.setInitialHighlightIndex();
+      }
+
+      if (!this.hasSuggestionList) {
+        if (value) {
+          // Displays the list after the user has typed anything
+          this.showComboboxList();
+        } else {
+          this.closeComboboxList();
+        }
+      }
+    },
+
+    showComboboxList() {
+      if (this.showList != null) {
+        return;
+      }
+
+      this.isListShown = true;
+    },
+
+    closeComboboxList() {
+      if (this.showList != null) {
+        return;
+      }
+
+      this.isListShown = false;
+    },
+
+    onSelect(highlightIndex) {
+      this.$emit('select', highlightIndex);
+
+      if (!this.hasSuggestionList) {
+        // we don't display the list before the user has typed anything
+        this.closeComboboxList();
+      }
+    },
+
+    onEscape() {
+      this.$emit('escape');
+      this.closeComboboxList();
+    },
+
+    onHighlight(highlightIndex) {
+      this.$emit('highlight', highlightIndex);
+    },
+
+    onOpened(opened) {
+      this.$emit('opened', opened);
+    },
+
+    onFocusIn(e) {
+      if (this.hasSuggestionList && e && this.$refs.input.querySelector('input') === e.target) {
+        // only trigger if we show suggestion list when focus and
+        // it's the input specifically that was focused
+        this.showComboboxList();
+      }
+    },
+
+    onFocusOut(e) {
+      const comboboxRefs = ['input', 'header', 'footer', 'listWrapper'];
+      const isComboboxStillFocused = comboboxRefs.some(ref => {
+        var _this$$refs$ref;
+
+        return (_this$$refs$ref = this.$refs[ref]) === null || _this$$refs$ref === void 0 ? void 0 : _this$$refs$ref.contains(e.relatedTarget);
+      });
+
+      if (!isComboboxStillFocused) {
+        this.closeComboboxList();
+      }
+    },
+
+    openOnArrowKeyPress(e) {
+      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) {
+        return;
+      }
+
+      this.showComboboxList();
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue
+
+
+
+
+;
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_6e4f62a5_render]])
+
+/* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=74f7079d
+
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_1 = {
+  ref: "inputSlotWrapper",
+  class: "d-ps-relative"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_2 = {
+  ref: "chipsWrapper",
+  class: "d-ps-absolute d-mx2"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_3 = {
+  ref: "header"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_4 = {
+  ref: "list"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_5 = {
+  key: 1,
+  class: "d-ta-center d-py16"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_6 = {
+  ref: "footer"
+};
+function combobox_multi_selectvue_type_template_id_74f7079d_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-chip");
+
+  const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-input");
+
+  const _component_dt_validation_messages = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-validation-messages");
+
+  const _component_dt_recipe_combobox_with_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-recipe-combobox-with-popover");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_recipe_combobox_with_popover, {
+    ref: "comboboxWithPopover",
+    "list-aria-label": "listAriaLabel",
+    "show-list": $props.showList,
+    "max-height": $props.listMaxHeight,
+    "popover-offset": $data.popoverOffset,
+    "has-suggestion-list": $props.hasSuggestionList,
+    "content-width": "anchor",
+    onSelect: $options.onComboboxSelect
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createSlots)({
+    input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(_ref => {
+      let {
+        onInput
+      } = _ref;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)($props.selectedItems, item => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+          ref_for: true,
+          ref: "chips",
+          key: item,
+          class: "d-mt4 d-mx2 d-zi-base1",
+          "close-button-props": {
+            ariaLabel: 'close'
+          }
+        }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.chipListeners), {
+          onKeyup: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($event => $options.onChipRemove(item), ["backspace"]),
+          onClose: $event => $options.onChipRemove(item)
+        }), {
+          default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(item), 1)]),
+          _: 2
+        }, 1040, ["onKeyup", "onClose"]);
+      }), 128))], 512), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_input, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+        ref: "input",
+        modelValue: $data.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => $data.value = $event),
+        class: "d-fl-grow1 d-mb4",
+        label: $props.label,
+        description: $props.description,
+        placeholder: $options.inputPlaceHolder,
+        "show-messages": $props.showInputMessages,
+        messages: $props.inputMessages
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.inputListeners), {
+        onInput: onInput
+      }), null, 16, ["modelValue", "label", "description", "placeholder", "show-messages", "messages", "onInput"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_validation_messages, {
+        "validation-messages": $props.maxSelectedMessage,
+        "show-messages": $data.showValidationMessages
+      }, null, 8, ["validation-messages", "show-messages"])], 512)];
+    }),
+    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_4, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
+      key: 0
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($props.loadingMessage), 1))], 512)]),
+    _: 2
+  }, [_ctx.$slots.header ? {
+    name: "header",
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")], 512)])
+  } : undefined, _ctx.$slots.footer ? {
+    name: "footer",
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "footer")], 512)])
+  } : undefined]), 1032, ["show-list", "max-height", "popover-offset", "has-suggestion-list", "onSelect"]);
+}
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=74f7079d
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js
+/* eslint-disable max-lines */
+
+
+/* harmony default export */ const combobox_multi_selectvue_type_script_lang_js = ({
+  name: 'DtRecipeComboboxMultiSelect',
+  components: {
+    DtRecipeComboboxWithPopover: combobox_with_popover,
+    DtInput: input_input,
+    DtChip: chip,
+    DtValidationMessages: validation_messages
+  },
+  props: {
+    /**
+     * Label for the combobox
+     */
+    label: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Description for the combobox
+     */
+    description: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Input placeholder
+     */
+    placeholder: {
+      type: String,
+      default: 'Select one or start typing'
+    },
+
+    /**
+     * Input validation messages
+     */
+    inputMessages: {
+      type: Array,
+      default: () => [],
+      validator: inputMessages => {
+        return validationMessageValidator(inputMessages);
+      }
+    },
+
+    /**
+     * Show input validation message
+     */
+    showInputMessages: {
+      type: Boolean,
+      default: true
+    },
+    // @TODO: https://dialpad.atlassian.net/browse/DP-52324
+    // type: {
+    //   type: String,
+    //   values: ['input', 'select'],
+    //   default: 'select',
+    // },
+
+    /**
+     * Determines if the list is loading
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * The message when the list is loading
+     */
+    loadingMessage: {
+      type: String,
+      default: 'loading...'
+    },
+
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * Leaving this null will have the combobox trigger on input focus by default.
+     * If you set this value, the default trigger behavior will be disabled and you can
+     * control it as you need.
+     */
+    showList: {
+      type: Boolean,
+      default: null
+    },
+
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    listMaxHeight: {
+      type: String,
+      default: '300px'
+    },
+
+    /**
+     * The selected items
+     */
+    selectedItems: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    },
+
+    /**
+     * Would be the maximum number of selections you can make. 0 is unlimited
+     */
+    maxSelected: {
+      type: Number,
+      default: 0
+    },
+
+    /**
+     * Max select message when the max selections has been reached with the structure:
+     * `[{"message": string, "type": VALIDATION_MESSAGE_TYPES }]`
+     */
+    maxSelectedMessage: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    },
+
+    /**
+     * 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.
+     */
+    hasSuggestionList: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['input', 'select', 'remove', 'max-selected', 'keyup'],
+
+  data() {
+    return {
+      value: '',
+      popoverOffset: [0, 0],
+      showValidationMessages: false,
+      initialInputPadding: {},
+      resizeWindowObserver: null
+    };
+  },
+
+  computed: {
+    inputPlaceHolder() {
+      var _this$selectedItems;
+
+      return ((_this$selectedItems = this.selectedItems) === null || _this$selectedItems === void 0 ? void 0 : _this$selectedItems.length) > 0 ? '' : this.placeholder;
+    },
+
+    chipListeners() {
+      return {
+        keyup: event => {
+          this.onChipKeyup(event);
+          this.$emit('keyup', event);
+        }
+      };
+    },
+
+    inputListeners() {
+      return {
+        input: event => {
+          this.$emit('input', event);
+        },
+        keyup: event => {
+          this.onInputKeyup(event);
+          this.$emit('keyup', event);
+        }
+      };
+    }
+
+  },
+  watch: {
+    selectedItems: {
+      deep: true,
+      immediate: true,
+      handler: async function () {
+        await this.$nextTick();
+        this.setInputPadding();
+        this.setInputMinWidth();
+        this.checkMaxSelected();
+      }
+    },
+
+    async label() {
+      await this.$nextTick(); // Adjust the chips position if label changed
+
+      this.setChipsTopPosition();
+    },
+
+    async description() {
+      await this.$nextTick(); // Adjust the chips position if description changed
+
+      this.setChipsTopPosition();
+    }
+
+  },
+
+  mounted() {
+    this.setChipsTopPosition(); // Recalculate chip position and input padding when resizing window
+
+    this.resizeWindowObserver = new ResizeObserver(() => {
+      this.setChipsTopPosition();
+      this.setInputPadding();
+    }).observe(document.body);
+  },
+
+  beforeUnmount() {
+    var _this$resizeWindowObs;
+
+    (_this$resizeWindowObs = this.resizeWindowObserver) === null || _this$resizeWindowObs === void 0 ? void 0 : _this$resizeWindowObs.unobserve(document.body);
+  },
+
+  methods: {
+    onChipRemove(item) {
+      this.$emit('remove', item);
+      this.$refs.input.focus();
+    },
+
+    onComboboxSelect(i) {
+      this.value = '';
+      this.$emit('select', i);
+    },
+
+    getChipButtons() {
+      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));
+    },
+
+    getChips() {
+      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);
+    },
+
+    getLastChipButton() {
+      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];
+    },
+
+    getLastChip() {
+      return this.$refs.chips && this.getChips()[this.getChips().length - 1];
+    },
+
+    getFirstChip() {
+      return this.$refs.chips && this.getChips()[0];
+    },
+
+    getInput() {
+      var _this$$refs$input;
+
+      return (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.$refs.input;
+    },
+
+    onChipKeyup(event) {
+      var _event$code;
+
+      const key = (_event$code = event.code) === null || _event$code === void 0 ? void 0 : _event$code.toLowerCase();
+
+      if (key === 'arrowleft') {
+        // Move to the previous chip
+        this.navigateBetweenChips(event.target, true);
+      } else if (key === 'arrowright') {
+        if (event.target.id === this.getLastChipButton().id) {
+          // Move to the input if it's the last chip
+          this.moveFromChipToInput();
+        } else {
+          // Move to the next chip
+          this.navigateBetweenChips(event.target, false);
+        }
+      }
+    },
+
+    onInputKeyup(event) {
+      var _event$code2;
+
+      const key = (_event$code2 = event.code) === null || _event$code2 === void 0 ? void 0 : _event$code2.toLowerCase(); // If the cursor is at the start of the text,
+      // press 'backspace' or 'left' focuses the last chip
+
+      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {
+        if (key === 'backspace' || key === 'arrowleft') {
+          this.moveFromInputToChip();
+        }
+      }
+    },
+
+    moveFromInputToChip() {
+      this.getLastChipButton().focus();
+      this.$refs.input.blur();
+      this.$refs.comboboxWithPopover.closeComboboxList();
+    },
+
+    moveFromChipToInput() {
+      this.getLastChipButton().blur();
+      this.$refs.input.focus();
+      this.$refs.comboboxWithPopover.showComboboxList();
+    },
+
+    navigateBetweenChips(target, toLeft) {
+      const from = this.getChipButtons().indexOf(target);
+      const to = toLeft ? from - 1 : from + 1;
+
+      if (to < 0 || to >= this.$refs.chips.length) {
+        return;
+      }
+
+      this.getChipButtons()[from].blur();
+      this.getChipButtons()[to].focus();
+      this.$refs.comboboxWithPopover.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;
+      const chipsWrapper = this.$refs.chipsWrapper;
+      chipsWrapper.style.top = top + 'px';
+    },
+
+    setInputPadding() {
+      const lastChip = this.getLastChip();
+      const input = this.getInput();
+      if (!input) return;
+
+      if (!lastChip) {
+        // Revert padding if no chip
+        this.revertInputPadding(input);
+        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
+
+      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
+
+      this.popoverOffset = [0, 0];
+    },
+
+    getFullWidth(el) {
+      const styles = window.getComputedStyle(el);
+      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);
+    },
+
+    revertInputPadding(input) {
+      input.style.paddingLeft = '';
+      input.style.paddingTop = '';
+      input.style.paddingBottom = '';
+    },
+
+    setInputMinWidth() {
+      // Ensure the width of the input is "slightly bigger" than the width of a single chip
+      const firstChip = this.getFirstChip();
+      const input = this.getInput();
+      if (!input) return;
+
+      if (firstChip) {
+        // Add 4px buffer for typing room
+        input.style.minWidth = this.getFullWidth(firstChip) + 4 + 'px';
+      } else {
+        input.style.minWidth = '';
+      }
+    },
+
+    checkMaxSelected() {
+      if (this.maxSelected === 0) return;
+
+      if (this.selectedItems.length >= this.maxSelected) {
+        this.showValidationMessages = true;
+        this.$emit('max-selected');
+      } else {
+        this.showValidationMessages = false;
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue
+
+
+
+
+;
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_74f7079d_render]])
+
+/* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=7091b031
 
 const contact_infovue_type_template_id_7091b031_hoisted_1 = {
@@ -15498,6 +16391,8 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
  /// Recipes
 
 
+
+
  // Mixins
 
  // Emoji