@dialpad/dialtone-vue 3.35.0 → 3.36.0

package/dist/dialtone-vue.common.js

@@ -145,7 +145,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 587:
+/***/ 399:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -162,7 +162,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-900-h),var(--black-900-s),var(--black-900-l),.05)}.dt-list-item--highlighted:active{background-color:hsla(var(--black-900-h),var(--black-900-s),var(--black-900-l),.1)}.dt-list-item:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--su2) var(--focus-ring)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-900-h),var(--black-900-s),var(--black-900-l),.05)}.dt-list-item--highlighted:active{background-color:hsla(var(--black-900-h),var(--black-900-s),var(--black-900-l),.1)}.dt-list-item:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--su2) var(--focus-ring)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -193,7 +193,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 53:
+/***/ 273:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -1652,19 +1652,19 @@ var update = add("0c78fb76", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 305:
+/***/ 897:
 /***/ ((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__(587);
+var content = __webpack_require__(399);
 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("752566cc", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("61c1a254", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1684,19 +1684,19 @@ var update = add("4d925410", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 825:
+/***/ 786:
 /***/ ((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__(53);
+var content = __webpack_require__(273);
 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("1ea8ef45", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("5f7d7664", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -5176,9 +5176,9 @@ function combobox_loading_listvue_type_template_id_07d9971d_render(_ctx, _cache,
 }
 ;// CONCATENATED MODULE: ./components/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=5817ca14
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=65cb4fdd
 
-function list_itemvue_type_template_id_5817ca14_render(_ctx, _cache, $props, $setup, $data, $options) {
+function list_itemvue_type_template_id_65cb4fdd_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     class: ['dt-list-item d-ls-none', {
@@ -5205,7 +5205,7 @@ function list_itemvue_type_template_id_5817ca14_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=5817ca14
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=65cb4fdd
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
 const LIST_ITEM_TYPES = {
@@ -5465,9 +5465,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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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=5817ca14&lang=less
-var list_itemvue_type_style_index_0_id_5817ca14_lang_less = __webpack_require__(305);
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=5817ca14&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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=65cb4fdd&lang=less
+var list_itemvue_type_style_index_0_id_65cb4fdd_lang_less = __webpack_require__(897);
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=65cb4fdd&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -5477,7 +5477,7 @@ var list_itemvue_type_style_index_0_id_5817ca14_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_5817ca14_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_65cb4fdd_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -7401,11 +7401,11 @@ function dropdownvue_type_template_id_d36ba644_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=d36ba644
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=68f0a8f5
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=4e81d3c3
 
-const popovervue_type_template_id_68f0a8f5_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_68f0a8f5_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_68f0a8f5_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_4e81d3c3_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_4e81d3c3_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_4e81d3c3_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
@@ -7419,7 +7419,7 @@ function popovervue_type_template_id_68f0a8f5_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_68f0a8f5_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_4e81d3c3_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--opened': $data.isOpen
@@ -7451,7 +7451,7 @@ function popovervue_type_template_id_68f0a8f5_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_68f0a8f5_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    })], 40, popovervue_type_template_id_4e81d3c3_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -7514,7 +7514,7 @@ function popovervue_type_template_id_68f0a8f5_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=68f0a8f5
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=4e81d3c3
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -12602,39 +12602,49 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     modal(modal) {
-      this.tip.setProps({
-        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
+      var _this$tip;
+
+      (_this$tip = this.tip) === null || _this$tip === void 0 ? void 0 : _this$tip.setProps({
+        zIndex: modal ? 650 : this.calculateAnchorZindex()
       });
     },
 
     offset(offset) {
-      this.tip.setProps({
+      var _this$tip2;
+
+      (_this$tip2 = this.tip) === null || _this$tip2 === void 0 ? void 0 : _this$tip2.setProps({
         offset
       });
     },
 
     sticky(sticky) {
-      this.tip.setProps({
+      var _this$tip3;
+
+      (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
         sticky
       });
     },
 
     fallbackPlacements() {
-      this.tip.setProps({
+      var _this$tip4;
+
+      (_this$tip4 = this.tip) === null || _this$tip4 === void 0 ? void 0 : _this$tip4.setProps({
         popperOptions: this.popperOptions()
       });
     },
 
     tether() {
-      this.tip.setProps({
+      var _this$tip5;
+
+      (_this$tip5 = this.tip) === null || _this$tip5 === void 0 ? void 0 : _this$tip5.setProps({
         popperOptions: this.popperOptions()
       });
     },
 
     placement(placement) {
-      var _this$tip;
+      var _this$tip6;
 
-      (_this$tip = this.tip) === null || _this$tip === void 0 ? void 0 : _this$tip.setProps({
+      (_this$tip6 = this.tip) === null || _this$tip6 === void 0 ? void 0 : _this$tip6.setProps({
         placement
       });
     },
@@ -12650,65 +12660,31 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     isOpen(isOpen, isPrev) {
       if (isOpen) {
-        window.addEventListener('wheel', this.preventScrolling, {
-          passive: false
-        });
-        this.tip.setProps({
-          zIndex: this.modal ? 650 : this.calculateAnchorZindex()
-        });
-        this.tip.show();
-        this.addClosePopoverEventListener();
+        this.initTippyInstance();
       } else if (!isOpen && isPrev !== isOpen) {
-        this.removeClosePopoverEventListener();
+        this.removeEventListeners();
         this.tip.hide();
-        window.removeEventListener('wheel', this.preventScrolling, {
-          passive: false
-        });
       }
     }
 
   },
 
   mounted() {
-    // support single anchor for popover, not multi anchor
     const externalAnchorEl = document.getElementById(this.externalAnchor);
     this.anchorEl = externalAnchorEl !== null && externalAnchorEl !== void 0 ? externalAnchorEl : this.$refs.anchor.children[0];
-    this.popoverContentEl = this.$refs.content.$el; // align popover content width when
-
-    if (this.contentWidth === 'anchor') {
-      window.addEventListener('resize', this.onResize);
-    }
-
-    this.tip = tippy_utils_createTippy(this.anchorEl, {
-      popperOptions: this.popperOptions(),
-      contentElement: this.popoverContentEl,
-      placement: this.placement,
-      offset: this.offset,
-      sticky: this.sticky,
-      appendTo: this.appendTo,
-      interactive: true,
-      trigger: 'manual',
-      // We have to manage hideOnClick functionality manually to handle
-      // popover within popover situations.
-      hideOnClick: false,
-      zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
-      onClickOutside: this.onClickOutside,
-      onShow: this.onShow
-    }); // immediate watcher fires before mounted, so have this here in case
-    // show prop was initially set to true.
+    this.popoverContentEl = this.$refs.content.$el;
 
     if (this.isOpen) {
-      this.tip.show();
+      this.initTippyInstance();
     }
   },
 
   beforeUnmount() {
-    var _this$tip2;
+    var _this$tip7;
 
-    window.removeEventListener('resize', this.onResize);
-    (_this$tip2 = this.tip) === null || _this$tip2 === void 0 ? void 0 : _this$tip2.destroy();
+    (_this$tip7 = this.tip) === null || _this$tip7 === void 0 ? void 0 : _this$tip7.destroy();
     this.removeReferences();
-    this.removeClosePopoverEventListener();
+    this.removeEventListeners();
   },
 
   /******************
@@ -12756,18 +12732,16 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       }
     },
 
-    onContext(event) {
-      var _this$tip3;
-
+    async onContext(event) {
       if (!this.openOnContext) {
         return;
       }
 
       event.preventDefault();
-      (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
-        placement: 'right-start'
-      });
+      this.isOpen = true;
+      await this.$nextTick();
       this.tip.setProps({
+        placement: 'right-start',
         getReferenceClientRect: () => ({
           width: 0,
           height: 0,
@@ -12777,7 +12751,6 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
           right: event.clientX
         })
       });
-      this.toggleOpen();
     },
 
     toggleOpen() {
@@ -12798,12 +12771,26 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       this.$emit('keydown', e);
     },
 
-    addClosePopoverEventListener() {
+    addEventListeners() {
       window.addEventListener('dt-popover-close', this.closePopover);
+      window.addEventListener('wheel', this.preventScrolling, {
+        passive: false
+      }); // align popover content width when contentWidth is 'anchor'
+
+      if (this.contentWidth === 'anchor') {
+        window.addEventListener('resize', this.onResize);
+      }
     },
 
-    removeClosePopoverEventListener() {
+    removeEventListeners() {
       window.removeEventListener('dt-popover-close', this.closePopover);
+      window.removeEventListener('wheel', this.preventScrolling, {
+        passive: false
+      });
+
+      if (this.contentWidth === 'anchor') {
+        window.removeEventListener('resize', this.onResize);
+      }
     },
 
     closePopover() {
@@ -12835,15 +12822,15 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     async onLeaveTransitionComplete() {
-      var _this$tip4;
+      var _this$tip8;
 
       if (this.modal) {
-        this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
+        await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
 
         await this.$nextTick();
       }
 
-      (_this$tip4 = this.tip) === null || _this$tip4 === void 0 ? void 0 : _this$tip4.unmount();
+      (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -12939,15 +12926,39 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         // if there are no focusable elements at all focus the dialog itself
         this.$refs.content.$el.focus();
       }
+    },
+
+    initTippyInstance() {
+      this.tip = tippy_utils_createTippy(this.anchorEl, {
+        popperOptions: this.popperOptions(),
+        contentElement: this.popoverContentEl,
+        placement: this.placement,
+        offset: this.offset,
+        sticky: this.sticky,
+        appendTo: this.appendTo,
+        interactive: true,
+        trigger: 'manual',
+        // We have to manage hideOnClick functionality manually to handle
+        // popover within popover situations.
+        hideOnClick: false,
+        zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
+        onClickOutside: this.onClickOutside,
+        onShow: this.onShow
+      });
+      this.tip.setProps({
+        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
+      });
+      this.tip.show();
+      this.addEventListeners();
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=68f0a8f5&lang=less
-var popovervue_type_style_index_0_id_68f0a8f5_lang_less = __webpack_require__(825);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=68f0a8f5&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=4e81d3c3&lang=less
+var popovervue_type_style_index_0_id_4e81d3c3_lang_less = __webpack_require__(786);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=4e81d3c3&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -12957,7 +12968,7 @@ var popovervue_type_style_index_0_id_68f0a8f5_lang_less = __webpack_require__(82
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_68f0a8f5_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_4e81d3c3_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -12966,8 +12977,8 @@ const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown_constants.js
 const DROPDOWN_PADDING_CLASSES = {
   none: undefined,
-  small: 'd-py4',
-  large: 'd-py8'
+  small: 'd-py0',
+  large: 'd-py4'
 };
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=script&lang=js
 
@@ -17109,26 +17120,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=f2b79d66
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=7cc71ad9
 
-const chipvue_type_template_id_f2b79d66_hoisted_1 = {
+const chipvue_type_template_id_7cc71ad9_hoisted_1 = {
+  class: "d-chip"
+};
+const chipvue_type_template_id_7cc71ad9_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_f2b79d66_hoisted_2 = {
+const chipvue_type_template_id_7cc71ad9_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_f2b79d66_hoisted_3 = ["id"];
-function chipvue_type_template_id_f2b79d66_render(_ctx, _cache, $props, $setup, $data, $options) {
+const chipvue_type_template_id_7cc71ad9_hoisted_4 = ["id"];
+function chipvue_type_template_id_7cc71ad9_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-chip', _ctx.parentClass])
-  }, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_7cc71ad9_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     type: $props.interactive && 'button',
     class: $options.chipClasses(),
@@ -17136,12 +17148,12 @@ function chipvue_type_template_id_f2b79d66_render(_ctx, _cache, $props, $setup,
     "aria-labelledby": $props.ariaLabel ? undefined : `${$props.id}-content`,
     "aria-label": $props.ariaLabel
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners)), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_f2b79d66_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_f2b79d66_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_7cc71ad9_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_7cc71ad9_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 2,
       id: `${$props.id}-content`,
       "data-qa": "dt-chip-label",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_f2b79d66_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_7cc71ad9_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 3
   }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0
@@ -17156,9 +17168,9 @@ function chipvue_type_template_id_f2b79d66_render(_ctx, _cache, $props, $setup,
       size: $options.closeButtonIconSize
     }, null, 8, ["size"])]),
     _: 1
-  }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+  }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=f2b79d66
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=7cc71ad9
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
@@ -17173,8 +17185,8 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
 };
 const CHIP_ICON_SIZES = {
   xs: '200',
-  sm: '300',
-  md: '300'
+  sm: '200',
+  md: '200'
 };
 /* harmony default export */ const chip_constants = ({
   CHIP_SIZE_MODIFIERS,
@@ -17354,7 +17366,7 @@ const CHIP_ICON_SIZES = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_f2b79d66_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_7cc71ad9_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -17985,25 +17997,25 @@ const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_typ
 ;// CONCATENATED MODULE: ./components/toast/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toggle/toggle.vue?vue&type=template&id=54ed4aa0
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toggle/toggle.vue?vue&type=template&id=2b01a980
 
-const togglevue_type_template_id_54ed4aa0_hoisted_1 = {
+const togglevue_type_template_id_2b01a980_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-const togglevue_type_template_id_54ed4aa0_hoisted_2 = ["for"];
-const togglevue_type_template_id_54ed4aa0_hoisted_3 = ["id", "role", "aria-checked", "disabled", "aria-disabled"];
-const togglevue_type_template_id_54ed4aa0_hoisted_4 = {
+const togglevue_type_template_id_2b01a980_hoisted_2 = ["for"];
+const togglevue_type_template_id_2b01a980_hoisted_3 = ["id", "role", "aria-checked", "disabled", "aria-disabled"];
+const togglevue_type_template_id_2b01a980_hoisted_4 = {
   key: 0,
   class: "d-toggle__inner"
 };
-function togglevue_type_template_id_54ed4aa0_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", togglevue_type_template_id_54ed4aa0_hoisted_1, [_ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+function togglevue_type_template_id_2b01a980_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", togglevue_type_template_id_2b01a980_hoisted_1, [_ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     class: $props.labelClass,
     for: $props.id
   }, $props.labelChildProps, {
     "data-qa": "toggle-label"
-  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 16, togglevue_type_template_id_54ed4aa0_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 16, togglevue_type_template_id_2b01a980_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     role: $options.toggleRole,
     type: "button",
@@ -18011,9 +18023,9 @@ function togglevue_type_template_id_54ed4aa0_render(_ctx, _cache, $props, $setup
     disabled: $props.disabled,
     "aria-disabled": $props.disabled.toString(),
     class: $options.toggleClasses
-  }, $options.inputListeners), [$props.showIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", togglevue_type_template_id_54ed4aa0_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16, togglevue_type_template_id_54ed4aa0_hoisted_3)]);
+  }, $options.inputListeners), [$props.showIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", togglevue_type_template_id_2b01a980_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16, togglevue_type_template_id_2b01a980_hoisted_3)]);
 }
-;// CONCATENATED MODULE: ./components/toggle/toggle.vue?vue&type=template&id=54ed4aa0
+;// CONCATENATED MODULE: ./components/toggle/toggle.vue?vue&type=template&id=2b01a980
 
 ;// CONCATENATED MODULE: ./components/toggle/toggle_constants.js
 const TOGGLE_SIZE_MODIFIERS = {
@@ -18073,6 +18085,16 @@ const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];
       validator: v => TOGGLE_CHECKED_VALUES.includes(v)
     },
 
+    /**
+     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually
+     * via the checked prop or v-model. Change events will still be triggered.
+     * @values true, false
+     */
+    toggleOnClick: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * The size of the toggle.
      * @values sm, md
@@ -18161,8 +18183,11 @@ const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];
 
   methods: {
     toggleCheckedValue() {
-      this.internalChecked = !this.internalChecked;
-      this.$emit('change', this.internalChecked);
+      this.$emit('change', !this.internalChecked);
+
+      if (this.toggleOnClick) {
+        this.internalChecked = !this.internalChecked;
+      }
     },
 
     hasSlotLabel() {
@@ -18189,7 +18214,7 @@ const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];
 
 
 ;
-const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_type_script_lang_js, [['render',togglevue_type_template_id_54ed4aa0_render]])
+const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_type_script_lang_js, [['render',togglevue_type_template_id_2b01a980_render]])
 
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
@@ -19042,11 +19067,17 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=35131c6d
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6b1072ea
 
-const combobox_with_popovervue_type_template_id_35131c6d_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_35131c6d_hoisted_2 = ["onMouseleave", "onFocusout"];
-function combobox_with_popovervue_type_template_id_35131c6d_render(_ctx, _cache, $props, $setup, $data, $options) {
+const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_2 = {
+  ref: "header"
+};
+const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_3 = ["onMouseleave", "onFocusout"];
+const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_4 = {
+  ref: "footer"
+};
+function combobox_with_popovervue_type_template_id_6b1072ea_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -19081,14 +19112,11 @@ function combobox_with_popovervue_type_template_id_35131c6d_render(_ctx, _cache,
         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_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["down"]))]
+        onKeydown: [_cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["up"])), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["down"]))]
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_35131c6d_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_6b1072ea_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
@@ -19099,8 +19127,8 @@ function combobox_with_popovervue_type_template_id_35131c6d_render(_ctx, _cache,
       return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_popover, {
         ref: "popover",
         open: $data.isListShown,
-        "onUpdate:open": _cache[6] || (_cache[6] = $event => $data.isListShown = $event),
-        "hide-on-click": $props.showList === null,
+        "onUpdate:open": _cache[3] || (_cache[3] = $event => $data.isListShown = $event),
+        "hide-on-click": false,
         "max-height": $props.maxHeight,
         "max-width": $props.maxWidth,
         offset: $props.popoverOffset,
@@ -19123,10 +19151,7 @@ function combobox_with_popovervue_type_template_id_35131c6d_render(_ctx, _cache,
           ref: "listWrapper",
           class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
           onMouseleave: clearHighlightIndex,
-          onFocusout: $event => {
-            clearHighlightIndex;
-            $options.onFocusOut;
-          }
+          onFocusout: clearHighlightIndex
         }, [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           key: 0
         }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
@@ -19136,32 +19161,22 @@ function combobox_with_popovervue_type_template_id_35131c6d_render(_ctx, _cache,
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
           key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_35131c6d_hoisted_2)]),
+        })], 42, combobox_with_popovervue_type_template_id_6b1072ea_hoisted_3)]),
         _: 2
       }, [_ctx.$slots.header ? {
         name: "headerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
-          ref: "header",
-          onFocusout: _cache[4] || (_cache[4] = function () {
-            return $options.onFocusOut && $options.onFocusOut(...arguments);
-          })
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 544)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_6b1072ea_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
         key: "0"
       } : undefined, _ctx.$slots.footer ? {
         name: "footerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
-          ref: "footer",
-          onFocusout: _cache[5] || (_cache[5] = function () {
-            return $options.onFocusOut && $options.onFocusOut(...arguments);
-          })
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 544)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_6b1072ea_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
         key: "1"
-      } : undefined]), 1032, ["open", "hide-on-click", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
+      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
     }),
     _: 3
   }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=35131c6d
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6b1072ea
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
 
@@ -19423,6 +19438,12 @@ function combobox_with_popovervue_type_template_id_35131c6d_render(_ctx, _cache,
     },
 
     isListShown(val) {
+      if (val) {
+        window.addEventListener('mousedown', this.onFocusOut);
+      } else {
+        window.removeEventListener('mousedown', this.onFocusOut);
+      }
+
       this.onOpened(val);
     }
 
@@ -19487,17 +19508,14 @@ function combobox_with_popovervue_type_template_id_35131c6d_render(_ctx, _cache,
     },
 
     onFocusOut(e) {
-      const comboboxRefs = ['input', 'header', 'footer', 'listWrapper']; // Check if the focus change was to another target within the combobox component
-
-      const isComboboxStillFocused = e.relatedTarget === null || 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);
-      }) || this.visuallyHiddenClose; // If outside the combobox then close
+      // Check if the focus change was to another target within the combobox component
+      const isComboboxStillFocused = Object.keys(this.$refs).some(refName => {
+        const ref = this.$refs[refName];
+        return ref.$el ? ref.$el.contains(e.target) : ref.contains(e.target);
+      });
+      if (isComboboxStillFocused) return; // If outside the combobox then close
 
-      if (!isComboboxStillFocused) {
-        this.closeComboboxList();
-      }
+      this.closeComboboxList();
     },
 
     openOnArrowKeyPress() {
@@ -19518,7 +19536,7 @@ function combobox_with_popovervue_type_template_id_35131c6d_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_35131c6d_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_6b1072ea_render]])
 
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js