@dialpad/dialtone-vue 2.49.1-alpha.1 → 2.50.0

package/dist/dialtone-vue.umd.js

@@ -172,7 +172,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_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___);
 
@@ -5573,13 +5573,13 @@ var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var
 var combobox_loading_listvue_type_template_id_07d9971d_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=8f7f45ce&
-var list_itemvue_type_template_id_8f7f45ce_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none', {
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=344ae1a2&
+var list_itemvue_type_template_id_344ae1a2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
     'dt-list-item--static': !_vm.isHoverable,
   }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_8f7f45ce_staticRenderFns = []
+var list_itemvue_type_template_id_344ae1a2_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -5907,8 +5907,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(285);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_8f7f45ce_render,
-  list_itemvue_type_template_id_8f7f45ce_staticRenderFns,
+  list_itemvue_type_template_id_344ae1a2_render,
+  list_itemvue_type_template_id_344ae1a2_staticRenderFns,
   false,
   null,
   null,
@@ -7407,8 +7407,8 @@ var combobox_component = normalizeComponent(
 /* harmony default export */ const combobox = (combobox_component.exports);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible.vue?vue&type=template&id=bf59f330&
-var collapsiblevue_type_template_id_bf59f330_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({ref:"collapsible",tag:"component"},_vm.$listeners),[_c('div',{ref:"anchor",class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible.vue?vue&type=template&id=280f6c34&
+var collapsiblevue_type_template_id_280f6c34_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({ref:"collapsible",tag:"component"},_vm.$listeners),[_c('div',{ref:"anchor",class:[
       'd-dt-collapsibe__anchor',
       _vm.anchorClass ],attrs:{"id":!_vm.ariaLabelledBy && _vm.labelledBy}},[_vm._t("anchor",function(){return [_c('dt-button',{style:({
           'width': _vm.maxWidth,
@@ -7422,7 +7422,7 @@ var collapsiblevue_type_template_id_bf59f330_render = function () {var _vm=this;
       'max-height': _vm.maxHeight,
       'max-width': _vm.maxWidth,
     }),attrs:{"id":_vm.id,"aria-hidden":("" + (!_vm.isOpen)),"aria-labelledby":_vm.labelledBy,"aria-label":_vm.ariaLabel,"show":_vm.isOpen,"element-type":_vm.contentElementType,"tabindex":"-1","appear":""},on:{"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},_vm.$listeners),[_vm._t("content")],2)],1)}
-var collapsiblevue_type_template_id_bf59f330_staticRenderFns = []
+var collapsiblevue_type_template_id_280f6c34_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=7a3b1f44&
@@ -7937,10 +7937,6 @@ var lazy_show_component = normalizeComponent(
     }
   },
 
-  created() {
-    this.validateProperAnchor();
-  },
-
   mounted() {
     this.validateProperAnchor();
   },
@@ -7992,8 +7988,8 @@ var lazy_show_component = normalizeComponent(
 ;
 var collapsible_component = normalizeComponent(
   collapsible_collapsiblevue_type_script_lang_js_,
-  collapsiblevue_type_template_id_bf59f330_render,
-  collapsiblevue_type_template_id_bf59f330_staticRenderFns,
+  collapsiblevue_type_template_id_280f6c34_render,
+  collapsiblevue_type_template_id_280f6c34_staticRenderFns,
   false,
   null,
   null,
@@ -8013,8 +8009,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_70cb2bdc_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=c1b2b9f2&
-var popovervue_type_template_id_c1b2b9f2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=47e76c3e&
+var popovervue_type_template_id_47e76c3e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8025,7 +8021,7 @@ var popovervue_type_template_id_c1b2b9f2_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_c1b2b9f2_staticRenderFns = []
+var popovervue_type_template_id_47e76c3e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13377,39 +13373,49 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     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
       });
     },
@@ -13425,65 +13431,31 @@ var popover_header_footer_component = normalizeComponent(
 
     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();
     }
   },
 
   beforeDestroy() {
-    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();
   },
 
   /******************
@@ -13525,18 +13497,16 @@ var popover_header_footer_component = normalizeComponent(
       (_this$open = this.open) !== null && _this$open !== void 0 ? _this$open : this.anchorEl.contains(e.target) && !((_this$anchorEl = this.anchorEl) !== null && _this$anchorEl !== void 0 && _this$anchorEl.disabled) && this.toggleOpen();
     },
 
-    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,
@@ -13546,7 +13516,6 @@ var popover_header_footer_component = normalizeComponent(
           right: event.clientX
         })
       });
-      this.toggleOpen();
     },
 
     toggleOpen() {
@@ -13565,12 +13534,26 @@ var popover_header_footer_component = normalizeComponent(
       }
     },
 
-    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() {
@@ -13602,15 +13585,15 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     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) {
@@ -13704,6 +13687,30 @@ var popover_header_footer_component = normalizeComponent(
         // 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();
     }
 
   }
@@ -13725,8 +13732,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(532);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_c1b2b9f2_render,
-  popovervue_type_template_id_c1b2b9f2_staticRenderFns,
+  popovervue_type_template_id_47e76c3e_render,
+  popovervue_type_template_id_47e76c3e_staticRenderFns,
   false,
   null,
   null,
@@ -13741,8 +13748,8 @@ var popover_component = normalizeComponent(
 ;// 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-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=script&lang=js&
 //
@@ -18266,9 +18273,9 @@ var checkbox_group_component = normalizeComponent(
 /* harmony default export */ const checkbox_group = (checkbox_group_component.exports);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=template&id=128cc6e8&
-var chipvue_type_template_id_128cc6e8_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:['d-chip', _vm.parentClass]},[_c(_vm.interactive ? 'button' : 'span',_vm._g({tag:"component",class:_vm.chipClasses(),attrs:{"id":_vm.id,"type":_vm.interactive && 'button',"data-qa":"dt-chip","aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel}},_vm.chipListeners),[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', 'd-chip__text', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e()]),(!_vm.hideClose)?_c('dt-button',_vm._b({class:_vm.chipCloseButtonClasses(),attrs:{"data-qa":"dt-chip-close","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":_vm.closeButtonIconSize}})]},proxy:true}],null,false,1192647893)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)}
-var chipvue_type_template_id_128cc6e8_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=template&id=9f4db318&
+var chipvue_type_template_id_9f4db318_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"d-chip"},[_c(_vm.interactive ? 'button' : 'span',_vm._g({tag:"component",class:_vm.chipClasses(),attrs:{"id":_vm.id,"type":_vm.interactive && 'button',"data-qa":"dt-chip","aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel}},_vm.chipListeners),[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', 'd-chip__text', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e()]),(!_vm.hideClose)?_c('dt-button',_vm._b({class:_vm.chipCloseButtonClasses(),attrs:{"data-qa":"dt-chip-close","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":_vm.closeButtonIconSize}})]},proxy:true}],null,false,1192647893)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)}
+var chipvue_type_template_id_9f4db318_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
@@ -18284,8 +18291,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,
@@ -18524,8 +18531,8 @@ const CHIP_ICON_SIZES = {
 ;
 var chip_component = normalizeComponent(
   chip_chipvue_type_script_lang_js_,
-  chipvue_type_template_id_128cc6e8_render,
-  chipvue_type_template_id_128cc6e8_staticRenderFns,
+  chipvue_type_template_id_9f4db318_render,
+  chipvue_type_template_id_9f4db318_staticRenderFns,
   false,
   null,
   null,
@@ -19246,9 +19253,9 @@ var toast_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/toast/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/toggle/toggle.vue?vue&type=template&id=5a3c3595&
-var togglevue_type_template_id_5a3c3595_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-d-flex d-ai-center"},[(_vm.$slots.default)?_c('label',_vm._b({class:_vm.labelClass,attrs:{"for":_vm.id,"data-qa":"toggle-label"}},'label',_vm.labelChildProps,false),[_vm._t("default")],2):_vm._e(),_c('button',_vm._g(_vm._b({class:_vm.toggleClasses,attrs:{"id":_vm.id,"role":_vm.toggleRole,"type":"button","aria-checked":_vm.internalChecked.toString(),"disabled":_vm.disabled,"aria-disabled":_vm.disabled.toString()}},'button',_vm.$attrs,false),_vm.inputListeners),[(_vm.showIcon)?_c('span',{staticClass:"d-toggle__inner"}):_vm._e()])])}
-var togglevue_type_template_id_5a3c3595_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/toggle/toggle.vue?vue&type=template&id=084d5176&
+var togglevue_type_template_id_084d5176_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-d-flex d-ai-center"},[(_vm.$slots.default)?_c('label',_vm._b({class:_vm.labelClass,attrs:{"for":_vm.id,"data-qa":"toggle-label"}},'label',_vm.labelChildProps,false),[_vm._t("default")],2):_vm._e(),_c('button',_vm._g(_vm._b({class:_vm.toggleClasses,attrs:{"id":_vm.id,"role":_vm.toggleRole,"type":"button","aria-checked":_vm.internalChecked.toString(),"disabled":_vm.disabled,"aria-disabled":_vm.disabled.toString()}},'button',_vm.$attrs,false),_vm.inputListeners),[(_vm.showIcon)?_c('span',{staticClass:"d-toggle__inner"}):_vm._e()])])}
+var togglevue_type_template_id_084d5176_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/toggle/toggle_constants.js
@@ -19340,6 +19347,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
@@ -19428,8 +19445,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() {
@@ -19460,8 +19480,8 @@ const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];
 ;
 var toggle_component = normalizeComponent(
   toggle_togglevue_type_script_lang_js_,
-  togglevue_type_template_id_5a3c3595_render,
-  togglevue_type_template_id_5a3c3595_staticRenderFns,
+  togglevue_type_template_id_084d5176_render,
+  togglevue_type_template_id_084d5176_staticRenderFns,
   false,
   null,
   null,
@@ -20408,15 +20428,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=7d75f1f4&
-var combobox_with_popovervue_type_template_id_7d75f1f4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=ad3e7dce&
+var combobox_with_popovervue_type_template_id_ad3e7dce_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
-return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
+return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
-return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_7d75f1f4_staticRenderFns = []
+return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":false,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":clearHighlightIndex}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
+var combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -20523,9 +20543,6 @@ var combobox_with_popovervue_type_template_id_7d75f1f4_staticRenderFns = []
 //
 //
 //
-//
-//
-//
 
 
 
@@ -20785,6 +20802,12 @@ var combobox_with_popovervue_type_template_id_7d75f1f4_staticRenderFns = []
     },
 
     isListShown(val) {
+      if (val) {
+        window.addEventListener('mousedown', this.onFocusOut);
+      } else {
+        window.removeEventListener('mousedown', this.onFocusOut);
+      }
+
       this.onOpened(val);
     }
 
@@ -20849,17 +20872,14 @@ var combobox_with_popovervue_type_template_id_7d75f1f4_staticRenderFns = []
     },
 
     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() {
@@ -20884,8 +20904,8 @@ var combobox_with_popovervue_type_template_id_7d75f1f4_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_7d75f1f4_render,
-  combobox_with_popovervue_type_template_id_7d75f1f4_staticRenderFns,
+  combobox_with_popovervue_type_template_id_ad3e7dce_render,
+  combobox_with_popovervue_type_template_id_ad3e7dce_staticRenderFns,
   false,
   null,
   null,