@dialpad/dialtone-vue 3.34.0 → 3.35.1

package/dist/dialtone-vue.umd.js

@@ -203,7 +203,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 854:
+/***/ 752:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -1694,19 +1694,19 @@ var update = add("2b02cf58", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 198:
+/***/ 531:
 /***/ ((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__(854);
+var content = __webpack_require__(752);
 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("12209e2c", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("2105810a", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1822,7 +1822,7 @@ var update = add("2cc23047", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 190:
+/***/ 198:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
@@ -7411,11 +7411,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-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=1c311181
+;// 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=4e81d3c3
 
-const popovervue_type_template_id_1c311181_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_1c311181_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_1c311181_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");
@@ -7428,9 +7428,8 @@ function popovervue_type_template_id_1c311181_render(_ctx, _cache, $props, $setu
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     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"])),
-    onWheel: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 40, popovervue_type_template_id_1c311181_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), {
+    onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
+  }, 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
@@ -7442,18 +7441,18 @@ function popovervue_type_template_id_1c311181_render(_ctx, _cache, $props, $setu
       ref: "anchor",
       "data-qa": "dt-popover-anchor",
       tabindex: $props.openOnContext ? 0 : undefined,
-      onClickCapture: _cache[2] || (_cache[2] = function () {
+      onClickCapture: _cache[1] || (_cache[1] = function () {
         return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
       }),
-      onContextmenu: _cache[3] || (_cache[3] = function () {
+      onContextmenu: _cache[2] || (_cache[2] = function () {
         return $options.onContext && $options.onContext(...arguments);
       }),
-      onKeydown: [_cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
+      onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
-      }, ["prevent"]), ["up"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
+      }, ["prevent"]), ["up"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
-      }, ["prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => _ctx.$emit('keydown', $event), ["enter"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => _ctx.$emit('keydown', $event), ["space"]))],
-      onKeydownCapture: _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
+      }, ["prevent"]), ["down"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => _ctx.$emit('keydown', $event), ["enter"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => _ctx.$emit('keydown', $event), ["space"]))],
+      onKeydownCapture: _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
         return $options.closePopover && $options.closePopover(...arguments);
       }, ["escape"]))
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "anchor", {
@@ -7462,7 +7461,7 @@ function popovervue_type_template_id_1c311181_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_1c311181_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,
@@ -7483,9 +7482,7 @@ function popovervue_type_template_id_1c311181_render(_ctx, _cache, $props, $setu
       },
       css: _ctx.$attrs.css,
       tabindex: $props.contentTabindex
-    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.popoverListeners), {
-      onWheel: _cache[9] || (_cache[9] = e => $data.isOpen && $props.modal && e.preventDefault())
-    }), {
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.popoverListeners)), {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.headerContent || $props.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_popover_header_footer, {
         key: 0,
         ref: "popover__header",
@@ -7527,7 +7524,7 @@ function popovervue_type_template_id_1c311181_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=1c311181
+;// 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) {
@@ -12615,39 +12612,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
       });
     },
@@ -12663,13 +12670,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     isOpen(isOpen, isPrev) {
       if (isOpen) {
-        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();
       }
     }
@@ -12677,45 +12680,21 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   },
 
   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();
   },
 
   /******************
@@ -12763,18 +12742,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,
@@ -12784,7 +12761,6 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
           right: event.clientX
         })
       });
-      this.toggleOpen();
     },
 
     toggleOpen() {
@@ -12805,18 +12781,40 @@ 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() {
       this.isOpen = false;
     },
 
+    /*
+    * Prevents scrolling only when the popover is set to modal
+    **/
+    preventScrolling(e) {
+      if (!this.modal) return;
+      e.preventDefault();
+    },
+
     removeReferences() {
       this.anchorEl = null;
       this.popoverContentEl = null;
@@ -12834,15 +12832,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) {
@@ -12938,15 +12936,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-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/popover/popover.vue?vue&type=style&index=0&id=1c311181&lang=less
-var popovervue_type_style_index_0_id_1c311181_lang_less = __webpack_require__(198);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=1c311181&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/popover/popover.vue?vue&type=style&index=0&id=4e81d3c3&lang=less
+var popovervue_type_style_index_0_id_4e81d3c3_lang_less = __webpack_require__(531);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=4e81d3c3&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -12956,7 +12978,7 @@ var popovervue_type_style_index_0_id_1c311181_lang_less = __webpack_require__(19
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_1c311181_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
@@ -15704,65 +15726,73 @@ const notice_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noticevue_t
 ;// CONCATENATED MODULE: ./components/notice/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/pagination/pagination.vue?vue&type=template&id=0f3daac1
+;// 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/pagination/pagination.vue?vue&type=template&id=57c28750
 
-const paginationvue_type_template_id_0f3daac1_hoisted_1 = ["aria-label"];
-const paginationvue_type_template_id_0f3daac1_hoisted_2 = {
+const paginationvue_type_template_id_57c28750_hoisted_1 = ["aria-label"];
+const paginationvue_type_template_id_57c28750_hoisted_2 = {
   key: 0,
-  "data-qa": "dt-pagination-separator",
-  class: "d-h32 d-w32 d-d-flex d-ai-center d-jc-center"
+  class: "d-fc-tertiary d-w24 d-ta-center",
+  "data-qa": "dt-pagination-separator"
 };
-function paginationvue_type_template_id_0f3daac1_render(_ctx, _cache, $props, $setup, $data, $options) {
+function paginationvue_type_template_id_57c28750_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)("nav", {
     "aria-label": $props.ariaLabel,
-    class: "d-d-flex d-fd-row d-gg2 d-ai-center"
+    class: "d-d-flex d-fd-row d-gg4 d-ai-center"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
-    class: "d-h32 d-w32",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-px8", $options.isFirstPage ? 'd-fc-black-300 h:d-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary']),
     "data-qa": "dt-pagination-prev",
     "aria-label": $props.prevAriaLabel,
+    kind: "muted",
     importance: $options.isFirstPage ? 'primary' : 'clear',
     disabled: $options.isFirstPage,
     onClick: _cache[0] || (_cache[0] = $event => $options.changePage($data.currentPage - 1))
   }, {
     icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
       name: "chevron-left",
-      size: "200"
+      size: "300"
     })]),
     _: 1
-  }, 8, ["aria-label", "importance", "disabled"]), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($options.pages, (page, index) => {
+  }, 8, ["aria-label", "importance", "disabled", "class"]), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($options.pages, (page, index) => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-      key: `page-${page}-${index}`
-    }, [isNaN(Number(page)) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", paginationvue_type_template_id_0f3daac1_hoisted_2, " … ")) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
+      key: `page-${page}-${index}`,
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)({
+        'd-as-flex-end': isNaN(Number(page))
+      })
+    }, [isNaN(Number(page)) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", paginationvue_type_template_id_57c28750_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "more-horizontal",
+      size: "300"
+    })])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
       key: 1,
       "aria-label": $props.pageNumberAriaLabel(page),
+      kind: $data.currentPage === page ? 'default' : 'muted',
       importance: $data.currentPage === page ? 'primary' : 'clear',
-      class: "d-h32 d-w32",
-      "label-class": "d-fs-200",
+      "label-class": "",
       onClick: $event => $options.changePage(page)
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(page), 1)]),
       _: 2
-    }, 1032, ["aria-label", "importance", "onClick"]))]);
+    }, 1032, ["aria-label", "kind", "importance", "onClick"]))], 2);
   }), 128)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
-    class: "d-h32 d-w32",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-px8", $options.isLastPage ? 'd-fc-black-300 h:d-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary']),
     "data-qa": "dt-pagination-next",
     "aria-label": $props.nextAriaLabel,
     disabled: $options.isLastPage,
+    kind: "muted",
     importance: $options.isLastPage ? 'primary' : 'clear',
     onClick: _cache[1] || (_cache[1] = $event => $options.changePage($data.currentPage + 1))
   }, {
     icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
       name: "chevron-right",
-      size: "200"
+      size: "300"
     })]),
     _: 1
-  }, 8, ["aria-label", "disabled", "importance"])], 8, paginationvue_type_template_id_0f3daac1_hoisted_1);
+  }, 8, ["aria-label", "disabled", "importance", "class"])], 8, paginationvue_type_template_id_57c28750_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/pagination/pagination.vue?vue&type=template&id=0f3daac1
+;// CONCATENATED MODULE: ./components/pagination/pagination.vue?vue&type=template&id=57c28750
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/pagination/pagination.vue?vue&type=script&lang=js
 
@@ -15917,7 +15947,7 @@ function paginationvue_type_template_id_0f3daac1_render(_ctx, _cache, $props, $s
 
 
 ;
-const pagination_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(paginationvue_type_script_lang_js, [['render',paginationvue_type_template_id_0f3daac1_render]])
+const pagination_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(paginationvue_type_script_lang_js, [['render',paginationvue_type_template_id_57c28750_render]])
 
 /* harmony default export */ const pagination = (pagination_exports_);
 ;// CONCATENATED MODULE: ./components/pagination/index.js
@@ -17100,26 +17130,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=f2b79d66
+;// 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=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(),
@@ -17127,12 +17158,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
@@ -17147,9 +17178,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 = {
@@ -17345,7 +17376,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
@@ -19033,11 +19064,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-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=35131c6d
+;// 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=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");
@@ -19072,14 +19109,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 {
@@ -19090,8 +19124,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,
@@ -19114,10 +19148,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)({
@@ -19127,32 +19158,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-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
 
@@ -19414,6 +19435,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);
     }
 
@@ -19478,17 +19505,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() {
@@ -19509,7 +19533,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
@@ -20860,7 +20884,7 @@ const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100', 'gol
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.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]!./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=style&index=0&id=1996f46e&lang=less
-var top_banner_infovue_type_style_index_0_id_1996f46e_lang_less = __webpack_require__(190);
+var top_banner_infovue_type_style_index_0_id_1996f46e_lang_less = __webpack_require__(198);
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=style&index=0&id=1996f46e&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.vue