@dialpad/dialtone-vue 2.10.0 → 2.12.1

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,
@@ -9881,7 +10010,7 @@ async function codeToEmojiData(code) {
 // @returns {string[]}
 
 function findShortCodes(textContent) {
-  const shortCodes = textContent.match(/:[^:]+:/g);
+  const shortCodes = textContent.match(/:\w+:/g);
   const filtered = shortCodes ? shortCodes.filter(code => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 } // Finds every emoji in slot text
@@ -13956,9 +14085,9 @@ var tab_panel_component = normalizeComponent(
 
 
 
-;// 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/checkbox/checkbox.vue?vue&type=template&id=2412baa0&
-var checkboxvue_type_template_id_2412baa0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',[_c('div',{class:['d-checkbox-group', { 'd-checkbox-group--disabled': _vm.internalDisabled }]},[_c('div',{staticClass:"d-checkbox__input"},[_c('input',_vm._g(_vm._b({class:['d-checkbox', _vm.inputValidationClass, _vm.inputClass],attrs:{"type":"checkbox","name":_vm.internalName,"disabled":_vm.internalDisabled},domProps:{"checked":_vm.internalChecked,"value":_vm.value,"indeterminate":_vm.internalIndeterminate}},'input',_vm.$attrs,false),_vm.inputListeners))]),(_vm.hasLabelOrDescription)?_c('div',{staticClass:"d-checkbox__copy d-checkbox__label",attrs:{"data-qa":"checkbox-label-description-container"}},[(_vm.hasLabel)?_c('div',_vm._b({class:_vm.labelClass,attrs:{"data-qa":"checkbox-label"}},'div',_vm.labelChildProps,false),[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.label))]})],2):_vm._e(),(_vm.hasDescription)?_c('div',_vm._b({class:['d-description', _vm.descriptionClass],attrs:{"data-qa":"checkbox-description"}},'div',_vm.descriptionChildProps,false),[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-checkbox-validation-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1):_vm._e()])])}
-var checkboxvue_type_template_id_2412baa0_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/checkbox/checkbox.vue?vue&type=template&id=1d19c963&
+var checkboxvue_type_template_id_1d19c963_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',[_c('div',{class:['d-checkbox-group', { 'd-checkbox-group--disabled': _vm.internalDisabled }]},[_c('div',{staticClass:"d-checkbox__input"},[_c('input',_vm._g(_vm._b({class:['d-checkbox', _vm.inputValidationClass, _vm.inputClass],attrs:{"type":"checkbox","name":_vm.internalName,"disabled":_vm.internalDisabled},domProps:{"checked":_vm.internalChecked,"value":_vm.value,"indeterminate":_vm.internalIndeterminate}},'input',_vm.$attrs,false),_vm.inputListeners))]),(_vm.hasLabelOrDescription)?_c('div',{staticClass:"d-checkbox__copy d-checkbox__label",attrs:{"data-qa":"checkbox-label-description-container"}},[(_vm.hasLabel)?_c('div',_vm._b({class:_vm.labelClass,attrs:{"data-qa":"checkbox-label"}},'div',_vm.labelChildProps,false),[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.label))]})],2):_vm._e(),(_vm.hasDescription)?_c('div',_vm._b({class:['d-description', _vm.descriptionClass],attrs:{"data-qa":"checkbox-description"}},'div',_vm.descriptionChildProps,false),[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-checkbox-validation-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1):_vm._e()])])}
+var checkboxvue_type_template_id_1d19c963_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/checkbox/checkbox_constants.js
@@ -14063,7 +14192,6 @@ const CHECKBOX_INPUT_VALIDATION_CLASSES = {
             Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
             and migration prior to upgrading to Vue 3.x
         */
-        // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api
         ...this.$listeners,
 
         /*
@@ -14133,8 +14261,8 @@ const CHECKBOX_INPUT_VALIDATION_CLASSES = {
 ;
 var checkbox_component = normalizeComponent(
   checkbox_checkboxvue_type_script_lang_js_,
-  checkboxvue_type_template_id_2412baa0_render,
-  checkboxvue_type_template_id_2412baa0_staticRenderFns,
+  checkboxvue_type_template_id_1d19c963_render,
+  checkboxvue_type_template_id_1d19c963_staticRenderFns,
   false,
   null,
   null,
@@ -14278,15 +14406,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 +14478,6 @@ const CHIP_SIZE_MODIFIERS = {
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 
 
 
@@ -14433,7 +14555,7 @@ const CHIP_SIZE_MODIFIERS = {
       default: ''
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'keyup'],
 
   data() {
     return {
@@ -14442,37 +14564,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 +14611,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,
@@ -14502,8 +14624,8 @@ var chip_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/chip/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/select_menu/select_menu.vue?vue&type=template&id=ea91f650&
-var select_menuvue_type_template_id_ea91f650_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('label',[(_vm.$slots.label || _vm.label)?_c('div',_vm._b({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/select_menu/select_menu.vue?vue&type=template&id=4b8efc1f&
+var select_menuvue_type_template_id_4b8efc1f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('label',[(_vm.$slots.label || _vm.label)?_c('div',_vm._b({class:[
         'd-label',
         _vm.LABEL_SIZE_MODIFIERS[_vm.size],
         _vm.labelClass ],attrs:{"aria-details":_vm.labelAriaDetails,"data-qa":"dt-select-label"}},'div',_vm.labelChildProps,false),[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2):_vm._e(),(_vm.$slots.description || _vm.description)?_c('div',_vm._b({class:[
@@ -14516,7 +14638,7 @@ var select_menuvue_type_template_id_ea91f650_render = function () {var _vm=this;
         { 'd-select--disabled': _vm.disabled } ],attrs:{"data-qa":"dt-select-wrapper"}},[_c('select',_vm._g(_vm._b({class:[
           'd-select__input',
           _vm.SELECT_STATE_MODIFIERS[_vm.state] ],attrs:{"data-qa":"dt-select","disabled":_vm.disabled}},'select',_vm.$attrs,false),_vm.selectListeners),[_vm._t("default",function(){return _vm._l((_vm.options),function(option){return _c('option',_vm._b({key:_vm.getOptionKey(option.value),class:_vm.optionClass,domProps:{"value":option.value}},'option',_vm.optionChildProps,false),[_vm._v(" "+_vm._s(option.label)+" ")])})})],2)])]),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-select-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)}
-var select_menuvue_type_template_id_ea91f650_staticRenderFns = []
+var select_menuvue_type_template_id_4b8efc1f_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/select_menu/select_menu_constants.js
@@ -14789,7 +14911,6 @@ const optionsValidator = options => {
             Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
             and migration prior to upgrading to Vue 3.x
         */
-        // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api
         ...this.$listeners,
 
         /*
@@ -14864,8 +14985,8 @@ const optionsValidator = options => {
 ;
 var select_menu_component = normalizeComponent(
   select_menu_select_menuvue_type_script_lang_js_,
-  select_menuvue_type_template_id_ea91f650_render,
-  select_menuvue_type_template_id_ea91f650_staticRenderFns,
+  select_menuvue_type_template_id_4b8efc1f_render,
+  select_menuvue_type_template_id_4b8efc1f_staticRenderFns,
   false,
   null,
   null,
@@ -14877,12 +14998,12 @@ 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=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:[
+;// 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=7e87e800&
+var toastvue_type_template_id_7e87e800_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.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 = []
+var toastvue_type_template_id_7e87e800_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
@@ -15090,8 +15211,7 @@ const TOAST_MIN_DURATION = 6000;
     },
 
     noticeActionListeners() {
-      return { // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api
-        ...this.$listeners,
+      return { ...this.$listeners,
         close: event => {
           this.isShown = false;
           this.$emit('update:show', false);
@@ -15120,7 +15240,6 @@ const TOAST_MIN_DURATION = 6000;
     }
   },
 
-  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
   destroyed() {
     if (this.shouldSetTimeout) {
       clearTimeout(this.displayTimer);
@@ -15151,8 +15270,8 @@ const TOAST_MIN_DURATION = 6000;
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_7c8c2d2a_render,
-  toastvue_type_template_id_7c8c2d2a_staticRenderFns,
+  toastvue_type_template_id_7e87e800_render,
+  toastvue_type_template_id_7e87e800_staticRenderFns,
   false,
   null,
   null,
@@ -15164,12 +15283,12 @@ 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=0e335f34&
-var togglevue_type_template_id_0e335f34_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:['d-toggle', {
+;// 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=45337be5&
+var togglevue_type_template_id_45337be5_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:['d-toggle', {
       'd-toggle--checked': _vm.internalChecked,
       'd-toggle--disabled': _vm.disabled,
     }],attrs:{"id":_vm.id,"role":"switch","type":"button","aria-checked":_vm.internalChecked.toString(),"disabled":_vm.disabled,"aria-disabled":_vm.disabled.toString()}},'button',_vm.$attrs,false),_vm.inputListeners),[_c('span',{staticClass:"d-toggle__inner"})])])}
-var togglevue_type_template_id_0e335f34_staticRenderFns = []
+var togglevue_type_template_id_45337be5_staticRenderFns = []
 
 
 ;// 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/toggle/toggle.vue?vue&type=script&lang=js&
@@ -15248,8 +15367,7 @@ var togglevue_type_template_id_0e335f34_staticRenderFns = []
 
   computed: {
     inputListeners() {
-      return { // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api
-        ...this.$listeners,
+      return { ...this.$listeners,
         click: _ => this.toggleCheckedValue()
       };
     }
@@ -15300,8 +15418,8 @@ var togglevue_type_template_id_0e335f34_staticRenderFns = []
 ;
 var toggle_component = normalizeComponent(
   toggle_togglevue_type_script_lang_js_,
-  togglevue_type_template_id_0e335f34_render,
-  togglevue_type_template_id_0e335f34_staticRenderFns,
+  togglevue_type_template_id_45337be5_render,
+  togglevue_type_template_id_45337be5_staticRenderFns,
   false,
   null,
   null,
@@ -15312,15 +15430,15 @@ var toggle_component = normalizeComponent(
 /* harmony default export */ const toggle = (toggle_component.exports);
 ;// CONCATENATED MODULE: ./components/toggle/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/tooltip/tooltip.vue?vue&type=template&id=3be31b48&
-var tooltipvue_type_template_id_3be31b48_render = function () {
+;// 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/tooltip/tooltip.vue?vue&type=template&id=06e65b4f&
+var tooltipvue_type_template_id_06e65b4f_render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-qa":"dt-tooltip-container"}},[_c('div',{ref:"anchor",attrs:{"data-qa":"dt-tooltip-anchor"},on:{"focusin":_vm.onEnterAnchor,"focusout":_vm.onLeaveAnchor,"mouseenter":_vm.onEnterAnchor,"mouseleave":_vm.onLeaveAnchor,"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.onLeaveAnchor.apply(null, arguments)}}},[_vm._t("anchor")],2),_c('dt-lazy-show',{ref:"content",class:[
       'd-tooltip',
       ("d-tooltip__arrow-tippy--" + _vm.currentPlacement),
       ( _obj = {}, _obj[ _vm.TOOLTIP_KIND_MODIFIERS.inverted ] = _vm.inverted, _obj ),
       _vm.contentClass ],attrs:{"id":_vm.id,"show":_vm.isShown && (!!_vm.message.trim() || !!_vm.$slots.default),"role":"tooltip","aria-hidden":"false","data-qa":"dt-tooltip","appear":"","transition":_vm.transition},on:{"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2)],1)}
-var tooltipvue_type_template_id_3be31b48_staticRenderFns = []
+var tooltipvue_type_template_id_06e65b4f_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
@@ -15428,7 +15546,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
      */
     offset: {
       type: Array,
-      default: () => [0, 0]
+      default: () => [0, -4]
     },
 
     /**
@@ -15655,8 +15773,8 @@ var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(213);
 
 var tooltip_component = normalizeComponent(
   tooltip_tooltipvue_type_script_lang_js_,
-  tooltipvue_type_template_id_3be31b48_render,
-  tooltipvue_type_template_id_3be31b48_staticRenderFns,
+  tooltipvue_type_template_id_06e65b4f_render,
+  tooltipvue_type_template_id_06e65b4f_staticRenderFns,
   false,
   null,
   null,
@@ -16000,15 +16118,306 @@ 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!./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){
+;// 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=886e49e0&
+var combobox_with_popovervue_type_template_id_886e49e0_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;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.showComboboxList,"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})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
 return [_c('dt-popover',{attrs:{"open":_vm.isListShown,"hide-on-click":true,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},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._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_01303da8_staticRenderFns = []
+var combobox_with_popovervue_type_template_id_886e49e0_staticRenderFns = []
 
 
 ;// 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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -16095,7 +16504,6 @@ var combobox_with_popovervue_type_template_id_01303da8_staticRenderFns = []
 //
 //
 //
-//
 
 
 
@@ -16316,8 +16724,8 @@ var combobox_with_popovervue_type_template_id_01303da8_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_01303da8_render,
-  combobox_with_popovervue_type_template_id_01303da8_staticRenderFns,
+  combobox_with_popovervue_type_template_id_886e49e0_render,
+  combobox_with_popovervue_type_template_id_886e49e0_staticRenderFns,
   false,
   null,
   null,
@@ -16672,6 +17080,7 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes