@dialpad/dialtone-vue 2.9.1 → 2.12.0

package/dist/dialtone-vue.common.js

@@ -119,6 +119,54 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-pop
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 826:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+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, ".root-layout__header--sticky{position:-webkit-sticky;position:sticky;top:0}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 350:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+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, ".root-layout__body{display:flex;flex-wrap:wrap;gap:0}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1}.root-layout__content{flex-basis:0;flex-grow:999}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 803:
@@ -405,6 +453,38 @@ var update = add("cdce4a0a", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 426:
+/***/ ((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__(826);
+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("75f44c3d", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 125:
+/***/ ((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__(350);
+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("51ac788f", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 315:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -1038,6 +1118,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRecipeComboboxWithPopover": () => (/* reexport */ combobox_with_popover),
   "DtRecipeContactInfo": () => (/* reexport */ contact_info),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
+  "DtRootLayout": () => (/* reexport */ root_layout),
   "DtSelectMenu": () => (/* reexport */ select_menu),
   "DtSkeleton": () => (/* reexport */ skeleton_skeleton),
   "DtSkeletonListItem": () => (/* reexport */ skeleton_list_item),
@@ -1064,6 +1145,7 @@ __webpack_require__.d(__webpack_exports__, {
   "POPOVER_INITIAL_FOCUS_STRINGS": () => (/* reexport */ POPOVER_INITIAL_FOCUS_STRINGS),
   "POPOVER_PADDING_CLASSES": () => (/* reexport */ POPOVER_PADDING_CLASSES),
   "POPOVER_ROLES": () => (/* reexport */ POPOVER_ROLES),
+  "ROOT_LAYOUT_SIDEBAR_POSITIONS": () => (/* reexport */ ROOT_LAYOUT_SIDEBAR_POSITIONS),
   "SELECT_SIZE_MODIFIERS": () => (/* reexport */ SELECT_SIZE_MODIFIERS),
   "SELECT_STATE_MODIFIERS": () => (/* reexport */ SELECT_STATE_MODIFIERS),
   "SHORTCUTS_ALIASES": () => (/* reexport */ SHORTCUTS_ALIASES),
@@ -3293,6 +3375,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
  * the root element of the component.
  */
 
+const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced ' + 'element doesn\'t exist. Received listElement: ';
 /* harmony default export */ const keyboard_list_navigation = (function () {
   let {
     // Role of the list items in the component. This is used to identify the list items
@@ -3316,7 +3399,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
     endOfListMethod = null,
     // Scroll the active element into view when highlighted by a keyboard event.
     scrollToOnHighlight = true,
-    // Focus the active element on keyboard navigation
+    // Focus the active element on keyboard navigation.
     focusOnKeyboardNavigation = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
@@ -3326,8 +3409,8 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
       return {
         [indexKey]: -1,
         [idKey]: '',
-        scrollToOnHighlight: scrollToOnHighlight,
-        focusOnKeyboardNavigation: focusOnKeyboardNavigation
+        scrollToOnHighlight,
+        focusOnKeyboardNavigation
       };
     },
 
@@ -3350,14 +3433,25 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
       // Gets the length of all the items in the list, uses the listItemRole param to determine
       // whether an element is a list item.
       _itemsLength() {
+        const listItems = this._getListItemNodes();
+
+        if (listItems === null) {
+          return 0;
+        }
+
+        return listItems.length;
+      },
+
+      // Gets all the list item nodes within the list element
+      _getListItemNodes() {
         const listElement = this._getListElement();
 
         if (!listElement) {
-          console.error("listElementKey is required or the referenced element doesn't exist. Received\n          listElement: ", listElement);
-          return 0;
+          console.error(ERROR_INVALID_LIST_ELEMENT, listElement);
+          return null;
         }
 
-        return listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")).length;
+        return Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
       },
 
       onUpKey() {
@@ -3402,6 +3496,31 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
         this.focusActiveItemIfNeeded();
       },
 
+      onNavigationKey(key) {
+        const listItems = this._getListItemNodes();
+
+        const matchingItems = listItems.filter(item => {
+          const content = item.textContent.trim().toLowerCase();
+          return content.startsWith(key.toLowerCase());
+        });
+
+        if (matchingItems.length <= 0) {
+          return;
+        }
+
+        const highlightedMatchingItemIndex = matchingItems.findIndex(item => {
+          return this[indexKey] === listItems.indexOf(item);
+        });
+        const nextHighlightedItemIndex = listItems.indexOf(highlightedMatchingItemIndex < matchingItems.length - 1 ? matchingItems[highlightedMatchingItemIndex + 1] : matchingItems[0]);
+        this.setHighlightIndex(nextHighlightedItemIndex);
+        this.scrollActiveItemIntoViewIfNeeded();
+        this.focusActiveItemIfNeeded();
+      },
+
+      isValidCharacter(key) {
+        return key.length === 1;
+      },
+
       jumpToBeginning() {
         this.setHighlightIndex(0);
       },
@@ -3438,8 +3557,7 @@ var comboboxvue_type_template_id_f944df30_staticRenderFns = []
         }
 
         const listItems = Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
-        const index = listItems.indexOf(listElement.querySelector("#".concat(id)));
-        return index;
+        return listItems.indexOf(listElement.querySelector("#".concat(id)));
       },
 
       _getItemId(index) {
@@ -3748,13 +3866,13 @@ 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/dropdown/dropdown.vue?vue&type=template&id=1eb414fd&
-var dropdownvue_type_template_id_1eb414fd_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":"first","fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=e689f0c4&
+var dropdownvue_type_template_id_e689f0c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":"first","fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:['d-ps-relative', 'd-px0', _vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close})],2)]}}],null,true)},_vm.$listeners))}
-var dropdownvue_type_template_id_1eb414fd_staticRenderFns = []
+var dropdownvue_type_template_id_e689f0c4_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=97535496&
@@ -9452,6 +9570,7 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
+//
 
 
 
@@ -9621,6 +9740,10 @@ const DROPDOWN_PADDING_CLASSES = {
 
     activeItemEl() {
       return this.getListElement().querySelector('#' + this.highlightId);
+    },
+
+    isArrowKeyNav() {
+      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;
     }
 
   },
@@ -9680,7 +9803,7 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onUpKey();
       }
     },
@@ -9691,29 +9814,35 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onDownKey();
       }
     },
 
     onHomeKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onHomeKey();
-      }
+      return this.onHomeKey();
     },
 
     onEndKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onEndKey();
+      return this.onEndKey();
+    },
+
+    onKeyPress(e) {
+      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidCharacter(e.key)) {
+        return;
       }
+
+      e.stopPropagation();
+      e.preventDefault();
+      return this.onNavigationKey(e.key);
     },
 
     onKeyValidation(e, eventHandler) {
@@ -9738,8 +9867,8 @@ const DROPDOWN_PADDING_CLASSES = {
 ;
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_1eb414fd_render,
-  dropdownvue_type_template_id_1eb414fd_staticRenderFns,
+  dropdownvue_type_template_id_e689f0c4_render,
+  dropdownvue_type_template_id_e689f0c4_staticRenderFns,
   false,
   null,
   null,
@@ -14278,15 +14407,20 @@ 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=4d7bb584&
-var chipvue_type_template_id_4d7bb584_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:_vm.chipClasses(),attrs:{"id":_vm.id,"data-qa":"dt-chip","tabindex":_vm.tabIndex,"aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel},on:{"mousedown":_vm.onClick,"mouseup":_vm.onClick,"mouseleave":function($event){_vm.isActive = false},"focusout":function($event){_vm.isActive = false},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.onClose.apply(null, arguments)}]}},[(_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', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e(),(!_vm.hideClose)?_c('span',{staticClass:"d-chip-btn-holder"}):_vm._e(),_c('span',{ref:"closeBtnContainer",staticClass:"d-chip-btn-container"},[(!_vm.hideClose)?_c('dt-button',_vm._b({attrs:{"data-qa":"dt-chip-close","circle":"","importance":"clear","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}}},'dt-button',_vm.closeButtonProps,false),[_c('icon-close')],1):_vm._e()],1)])}
-var chipvue_type_template_id_4d7bb584_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=81827eb4&
+var chipvue_type_template_id_81827eb4_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('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)}
+var chipvue_type_template_id_81827eb4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
-  xs: 'd-chip--xs',
-  sm: 'd-chip--sm',
+  xs: 'd-chip__label--xs',
+  sm: 'd-chip__label--sm',
+  md: ''
+};
+const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
+  xs: 'd-chip__close--xs',
+  sm: 'd-chip__close--sm',
   md: ''
 };
 /* harmony default export */ const chip_constants = ({
@@ -14345,17 +14479,6 @@ const CHIP_SIZE_MODIFIERS = {
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 
 
 
@@ -14433,7 +14556,7 @@ const CHIP_SIZE_MODIFIERS = {
       default: ''
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'keyup'],
 
   data() {
     return {
@@ -14442,37 +14565,37 @@ const CHIP_SIZE_MODIFIERS = {
   },
 
   computed: {
-    tabIndex() {
-      return this.interactive ? 0 : -1;
+    chipListeners() {
+      return { ...this.$listeners,
+        click: event => {
+          if (this.interactive) this.$emit('click', event);
+        },
+        keyup: event => {
+          var _event$code;
+
+          if (((_event$code = event.code) === null || _event$code === void 0 ? void 0 : _event$code.toLowerCase()) === 'delete') {
+            this.onClose();
+          } else {
+            this.$emit('keyup', event);
+          }
+        }
+      };
     }
 
   },
   methods: {
     chipClasses() {
-      return ['d-chip', CHIP_SIZE_MODIFIERS[this.size], {
-        'd-chip--interactive': this.interactive,
-        'd-chip--active': this.isActive
-      }];
+      return ['d-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+    },
+
+    chipCloseButtonClasses() {
+      return ['d-chip__close', CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]];
     },
 
     onClose() {
       if (!this.hideClose) {
         this.$emit('close');
       }
-    },
-
-    onClick(event) {
-      // Clicking on the button should not update value of isActive.
-      if (!this.interactive || this.$refs.closeBtnContainer.contains(event.target)) {
-        return;
-      }
-
-      if (event.type === 'mousedown' || event.type === 'keydown') {
-        this.isActive = true;
-      } else {
-        this.isActive = false;
-        this.$emit('click');
-      }
     }
 
   }
@@ -14489,8 +14612,8 @@ const CHIP_SIZE_MODIFIERS = {
 ;
 var chip_component = normalizeComponent(
   chip_chipvue_type_script_lang_js_,
-  chipvue_type_template_id_4d7bb584_render,
-  chipvue_type_template_id_4d7bb584_staticRenderFns,
+  chipvue_type_template_id_81827eb4_render,
+  chipvue_type_template_id_81827eb4_staticRenderFns,
   false,
   null,
   null,
@@ -14877,18 +15000,20 @@ var select_menu_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/select_menu/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/toast/toast.vue?vue&type=template&id=6db045bb&
-var toastvue_type_template_id_6db045bb_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.hidden)?_c('div',{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/toast/toast.vue?vue&type=template&id=7c8c2d2a&
+var toastvue_type_template_id_7c8c2d2a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isShown)?_c('div',{class:[
     'd-toast',
     _vm.kindClass,
-    { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":_vm.hidden.toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.$listeners),[_vm._t("action")],2)],1)]):_vm._e()}
-var toastvue_type_template_id_6db045bb_staticRenderFns = []
+    { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":(!_vm.isShown).toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.noticeActionListeners),[_vm._t("action")],2)],1)]):_vm._e()}
+var toastvue_type_template_id_7c8c2d2a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
 const TOAST_ROLES = ['status', 'alert'];
+const TOAST_MIN_DURATION = 6000;
 /* harmony default export */ const toast_constants = ({
-  TOAST_ROLES
+  TOAST_ROLES,
+  TOAST_MIN_DURATION
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/toast/toast.vue?vue&type=script&lang=js&
 //
@@ -15026,6 +15151,17 @@ const TOAST_ROLES = ['status', 'alert'];
       default: false
     },
 
+    /**
+     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
+     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update
+     * the data in your component.
+     * Supports .sync modifier
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Props for the toast close button.
      */
@@ -15044,13 +15180,14 @@ const TOAST_ROLES = ['status', 'alert'];
 
     /**
      * The duration in ms the toast will display before disappearing.
-     * Defaults to 6000 ms and the prop validation is that provided duration is equal to or greater than 6000.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
      */
     duration: {
       type: Number,
-      default: 6000,
+      default: null,
       validator: duration => {
-        return duration >= 6000;
+        return duration >= TOAST_MIN_DURATION;
       }
     }
   },
@@ -15058,7 +15195,8 @@ const TOAST_ROLES = ['status', 'alert'];
 
   data() {
     return {
-      hidden: true
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
 
@@ -15072,29 +15210,54 @@ const TOAST_ROLES = ['status', 'alert'];
         base: 'd-toast--base'
       };
       return kindClasses[this.kind];
+    },
+
+    noticeActionListeners() {
+      return { // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api
+        ...this.$listeners,
+        close: event => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+          this.$emit('close', event);
+        }
+      };
+    },
+
+    shouldSetTimeout() {
+      return !!this.duration && this.duration >= this.minDuration;
     }
 
   },
+  watch: {
+    show: {
+      handler: function (show) {
+        this.isShown = show;
+
+        if (show) {
+          this.setTimeout();
+        } else {
+          clearTimeout(this.displayTimer);
+        }
+      },
+      immediate: true
+    }
+  },
 
-  /* TODO Vue 3 Migration
-   * destroyed() should be updated to unmounted() when migrating to Vue 3.
-   */
   // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
   destroyed() {
-    clearTimeout(this.displayTimer);
+    if (this.shouldSetTimeout) {
+      clearTimeout(this.displayTimer);
+    }
   },
 
   methods: {
-    show() {
-      this.hidden = false;
-      this.displayTimer = setTimeout(() => {
-        this.hidden = true;
-      }, this.duration);
-    },
-
-    close() {
-      this.hidden = true;
-      clearTimeout(this.displayTimer);
+    setTimeout() {
+      if (this.shouldSetTimeout) {
+        this.displayTimer = setTimeout(() => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+        }, this.duration);
+      }
     }
 
   }
@@ -15111,8 +15274,8 @@ const TOAST_ROLES = ['status', 'alert'];
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_6db045bb_render,
-  toastvue_type_template_id_6db045bb_staticRenderFns,
+  toastvue_type_template_id_7c8c2d2a_render,
+  toastvue_type_template_id_7c8c2d2a_staticRenderFns,
   false,
   null,
   null,
@@ -15960,6 +16123,297 @@ var keyboard_shortcut_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/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/root_layout/root_layout.vue?vue&type=template&id=2e5fe0a4&
+var root_layoutvue_type_template_id_2e5fe0a4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition},scopedSlots:_vm._u([{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true},{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
+var root_layoutvue_type_template_id_2e5fe0a4_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/root_layout/root_layout_body.vue?vue&type=template&id=dfb53770&
+var root_layout_bodyvue_type_template_id_dfb53770_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['root-layout__body', _vm.bodyClass],attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{class:['root-layout__sidebar', _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{class:['root-layout__content', _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent }),attrs:{"data-qa":"root-layout-content"}},[_vm._t("content")],2):_vm._e()])}
+var root_layout_bodyvue_type_template_id_dfb53770_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
+const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+/* harmony default export */ const root_layout_constants = ({
+  ROOT_LAYOUT_SIDEBAR_POSITIONS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout_body.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ const root_layout_bodyvue_type_script_lang_js_ = ({
+  name: 'DtRootLayoutBody',
+  props: {
+    /**
+     * Additional class name for the content element
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: undefined
+    },
+
+    /**
+     * Additional class name for the sidebar element
+     */
+    sidebarClass: {
+      type: [String, Array, Object],
+      default: undefined
+    },
+
+    /**
+     * The width of the sidebar
+     * Possible units rem|px|%|em
+     */
+    sidebarWidth: {
+      type: String,
+      default: undefined
+    },
+
+    /**
+     * Whether the sidebar is on the left or right side
+     * Possible options: 'left', 'right'
+     */
+    sidebarPosition: {
+      type: String,
+      default: undefined
+    },
+
+    /**
+     * For responsive layouts. When the main content is at the specified width percentage,
+     * the sidebar will display above the content rather than beside it. Please enter a percentage string value
+     *
+     * ex: '50%', '30%'
+     */
+    contentWrapWidthPercent: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    bodyClass() {
+      return {
+        'root-layout__body--invert': this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT
+      };
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=script&lang=js&
+ /* harmony default export */ const root_layout_root_layout_bodyvue_type_script_lang_js_ = (root_layout_bodyvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&lang=less&
+var root_layout_bodyvue_type_style_index_0_lang_less_ = __webpack_require__(125);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&lang=less&
+
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var root_layout_body_component = normalizeComponent(
+  root_layout_root_layout_bodyvue_type_script_lang_js_,
+  root_layout_bodyvue_type_template_id_dfb53770_render,
+  root_layout_bodyvue_type_template_id_dfb53770_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const root_layout_body = (root_layout_body_component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/* harmony default export */ const root_layoutvue_type_script_lang_js_ = ({
+  name: 'DtRootLayout',
+  components: {
+    DtRootLayoutBody: root_layout_body
+  },
+  props: {
+    /**
+     * Additional class name for the header element
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * The height of the header
+     * Possible units rem|px|%|em
+     */
+    headerHeight: {
+      type: String,
+      default: '64px'
+    },
+
+    /**
+     * Scroll the header with the page
+     */
+    headerSticky: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Additional class name for the content element
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * For responsive layouts. When the main content is at the specified width percentage,
+     * the sidebar will display above the content rather than beside it. Please enter a percentage string value
+     *
+     * ex: '50%', '30%'
+     */
+    contentWrapWidthPercent: {
+      type: String,
+      default: '50%'
+    },
+
+    /**
+     * Additional class name for the sidebar element
+     */
+    sidebarClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * The width of the sidebar
+     * Possible units rem|px|%|em
+     */
+    sidebarWidth: {
+      type: String,
+      default: '256px'
+    },
+
+    /**
+     * Whether the sidebar is on the left or right side
+     * Possible options: 'left', 'right'
+     */
+    sidebarPosition: {
+      type: String,
+      default: 'left',
+      validator: s => Object.values(ROOT_LAYOUT_SIDEBAR_POSITIONS).includes(s)
+    },
+
+    /**
+     * Additional class name for the footer element
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * The height of the footer
+     * Possible units rem|px|%|em
+     */
+    footerHeight: {
+      type: String,
+      default: '64px'
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=script&lang=js&
+ /* harmony default export */ const root_layout_root_layoutvue_type_script_lang_js_ = (root_layoutvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout.vue?vue&type=style&index=0&lang=less&
+var root_layoutvue_type_style_index_0_lang_less_ = __webpack_require__(426);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&lang=less&
+
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var root_layout_component = normalizeComponent(
+  root_layout_root_layoutvue_type_script_lang_js_,
+  root_layoutvue_type_template_id_2e5fe0a4_render,
+  root_layoutvue_type_template_id_2e5fe0a4_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const root_layout = (root_layout_component.exports);
+;// 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=01303da8&
 var combobox_with_popovervue_type_template_id_01303da8_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
@@ -16632,6 +17086,7 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes