@dialpad/dialtone-vue 3.21.0 → 3.22.1-beta.1

package/dist/dialtone-vue.common.js

@@ -25,7 +25,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 
 /***/ }),
 
-/***/ 78:
+/***/ 280:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -49,7 +49,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".d-context-menu-list{width:24rem}", ""
 
 /***/ }),
 
-/***/ 826:
+/***/ 640:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -169,7 +169,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 674:
+/***/ 971:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -265,7 +265,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;str
 
 /***/ }),
 
-/***/ 878:
+/***/ 234:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -289,7 +289,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-too
 
 /***/ }),
 
-/***/ 20:
+/***/ 844:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -542,35 +542,35 @@ var update = add("79334d9e", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 438:
+/***/ 8:
 /***/ ((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__(78);
+var content = __webpack_require__(280);
 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("06fe8c46", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("7cc44206", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 633:
+/***/ 412:
 /***/ ((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);
+var content = __webpack_require__(640);
 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("e7bd0444", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("1c8d62da", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -638,19 +638,19 @@ var update = add("4d925410", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 925:
+/***/ 284:
 /***/ ((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__(674);
+var content = __webpack_require__(971);
 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("a4b9582c", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("d8b627ea", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -702,35 +702,35 @@ var update = add("3230f382", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 504:
+/***/ 27:
 /***/ ((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__(878);
+var content = __webpack_require__(234);
 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("7a6863ba", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("da834e14", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 170:
+/***/ 476:
 /***/ ((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__(20);
+var content = __webpack_require__(844);
 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("5dfba78e", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("15451cd3", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1159,6 +1159,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtDropdownList": () => (/* reexport */ dropdown_list),
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
+  "DtIcon": () => (/* reexport */ icon),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
   "DtInputGroupMixin": () => (/* reexport */ InputGroupMixin),
@@ -1168,6 +1169,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtLazyShow": () => (/* reexport */ lazy_show),
   "DtLink": () => (/* reexport */ link_link),
   "DtListItem": () => (/* reexport */ list_item),
+  "DtListItemGroup": () => (/* reexport */ list_item_group),
   "DtListSection": () => (/* reexport */ list_section),
   "DtModal": () => (/* reexport */ modal_modal),
   "DtNotice": () => (/* reexport */ notice),
@@ -1352,6 +1354,24 @@ const LABEL_SIZE_MODIFIERS = {
   lg: 'd-label--lg',
   xl: 'd-label--xl'
 };
+const EVENT_KEYNAMES = {
+  esc: 'Esc',
+  escape: 'Escape',
+  tab: 'Tab',
+  enter: 'Enter',
+  space: 'Space',
+  spacebar: 'Spacebar',
+  up: 'Up',
+  arrowup: 'ArrowUp',
+  left: 'Left',
+  arrowleft: 'ArrowLeft',
+  right: 'Right',
+  arrowright: 'ArrowRight',
+  down: 'Down',
+  arrowdown: 'ArrowDown',
+  home: 'Home',
+  end: 'End'
+};
 /*
  * Any string message or message object in the messages prop that do not specify
  * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.
@@ -1458,6 +1478,24 @@ const flushPromises = () => {
     scheduler(resolve);
   });
 };
+/**
+ * Transform a string from kebab-case to PascalCase
+ * @param string
+ * @returns {string}
+ */
+
+const kebabCaseToPascalCase = string => {
+  return string.toLowerCase().split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+};
+/**
+ * Transform a string from PascalCase to kebab-case
+ * @param string
+ * @returns {string}
+ */
+
+const pascalCaseToKebabCase = string => {
+  return string.replace(/\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase()).replace(/^-/, '');
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   formatMessages,
@@ -1465,7 +1503,8 @@ const flushPromises = () => {
   hasFormattedMessageOfType,
   getValidationState,
   htmlFragment,
-  flushPromises
+  flushPromises,
+  kebabCaseToPascalCase
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=script&lang=js
 
@@ -2072,10 +2111,10 @@ const IconClose_script = {}
 const IconClose_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconClose_script, [['render',IconClosevue_type_template_id_4ef5457b_render]])
 
 /* harmony default export */ const IconClose = (IconClose_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/button/button.vue?vue&type=template&id=6d10e472
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/button/button.vue?vue&type=template&id=6629834d
 
-const buttonvue_type_template_id_6d10e472_hoisted_1 = ["type", "disabled", "aria-live", "aria-label"];
-function buttonvue_type_template_id_6d10e472_render(_ctx, _cache, $props, $setup, $data, $options) {
+const buttonvue_type_template_id_6629834d_hoisted_1 = ["type", "disabled", "aria-live", "aria-label"];
+function buttonvue_type_template_id_6629834d_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     class: ['base-button__button', $options.buttonClasses()],
     "data-qa": "dt-button",
@@ -2094,9 +2133,9 @@ function buttonvue_type_template_id_6d10e472_render(_ctx, _cache, $props, $setup
     key: 1,
     "data-qa": "dt-button-label",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-w100p', 'd-btn__label', 'base-button__label', $props.labelClass])
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16, buttonvue_type_template_id_6d10e472_hoisted_1);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16, buttonvue_type_template_id_6629834d_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/button/button.vue?vue&type=template&id=6d10e472
+;// CONCATENATED MODULE: ./components/button/button.vue?vue&type=template&id=6629834d
 
 ;// CONCATENATED MODULE: ./components/button/button_constants.js
 const BUTTON_SIZE_MODIFIERS = {
@@ -2338,13 +2377,6 @@ const LINK_KIND_MODIFIERS = {
     }
   },
   emits: [
-  /**
-   * Native button click event
-   *
-   * @event click
-   * @type {PointerEvent | KeyboardEvent}
-   */
-  'click',
   /**
    * Native button focus in event
    *
@@ -2371,7 +2403,6 @@ const LINK_KIND_MODIFIERS = {
   computed: {
     buttonListeners() {
       return {
-        click: e => this.$emit('click', e),
         focusin: e => {
           this.isInFocus = this.assertiveOnFocus;
           this.$emit('focusin', e);
@@ -2453,7 +2484,7 @@ const LINK_KIND_MODIFIERS = {
 
 
 ;
-const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_type_script_lang_js, [['render',buttonvue_type_template_id_6d10e472_render]])
+const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_type_script_lang_js, [['render',buttonvue_type_template_id_6629834d_render]])
 
 /* harmony default export */ const button_button = (button_exports_);
 ;// CONCATENATED MODULE: ./common/mixins/sr_only_close_button.js
@@ -5911,10 +5942,10 @@ const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collap
 /* harmony default export */ const collapsible = (collapsible_exports_);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=2021ac9d
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=6b8ca270
 
-const dropdownvue_type_template_id_2021ac9d_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_2021ac9d_render(_ctx, _cache, $props, $setup, $data, $options) {
+const dropdownvue_type_template_id_6b8ca270_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_6b8ca270_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
@@ -5928,15 +5959,12 @@ function dropdownvue_type_template_id_2021ac9d_render(_ctx, _cache, $props, $set
     "fallback-placements": $props.fallbackPlacements,
     padding: "none",
     role: "menu",
-    modal: $props.modal
-  }, _ctx.$attrs, {
+    modal: $props.modal,
     "max-height": $props.maxHeight,
     "max-width": $props.maxWidth,
     "open-with-arrow-keys": true,
-    "open-on-context": $props.openOnContext,
-    onOpened: $options.updateInitialHighlightIndex,
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"])), _cache[6] || (_cache[6] = $event => $options.onKeyValidation($event, 'onKeyPress'))]
-  }), {
+    "open-on-context": $props.openOnContext
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.dropdownListeners)), {
     anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
       let {
         attrs
@@ -5967,18 +5995,18 @@ function dropdownvue_type_template_id_2021ac9d_render(_ctx, _cache, $props, $set
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         tabindex: $options.isArrowKeyNav ? -1 : 0,
         onClose: close
-      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_2021ac9d_hoisted_1)];
+      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_6b8ca270_hoisted_1)];
     }),
     _: 3
-  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-on-context", "onOpened", "onKeydown"]);
+  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-on-context"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=2021ac9d
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=6b8ca270
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=90818940
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=245d490f
 
-const popovervue_type_template_id_90818940_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_90818940_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_245d490f_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_245d490f_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_245d490f_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
@@ -5992,7 +6020,7 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_90818940_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_245d490f_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--opened': $data.isOpen
@@ -6007,14 +6035,14 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
       onClickCapture: _cache[1] || (_cache[1] = function () {
         return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
       }),
-      onContextmenu: _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
+      onContextmenu: _cache[2] || (_cache[2] = function () {
         return $options.onContext && $options.onContext(...arguments);
-      }, ["prevent"])),
+      }),
       onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
       }, ["prevent"]), ["up"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
-      }, ["prevent"]), ["down"]))],
+      }, ["prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => _ctx.$emit('keydown', $event), ["enter"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => _ctx.$emit('keydown', $event), ["space"]))],
       onWheel: _cache[5] || (_cache[5] = e => $data.isOpen && $props.modal && e.preventDefault()),
       onKeydownCapture: _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
         return $options.closePopover && $options.closePopover(...arguments);
@@ -6025,7 +6053,7 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_90818940_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
+    })], 40, popovervue_type_template_id_245d490f_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -6037,19 +6065,16 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
       transition: $props.transition,
       show: $data.isOpen,
       appear: "",
-      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover__dialog', {
+      class: ['d-popover__dialog', {
         'd-popover__dialog--modal': $props.modal
-      }, $props.dialogClass]),
-      style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      }, $props.dialogClass],
+      style: {
         'max-height': $props.maxHeight,
         'max-width': $props.maxWidth
-      }),
+      },
       css: _ctx.$attrs.css,
-      tabindex: $props.contentTabindex,
-      onKeydownCapture: $options.onKeydown,
-      onAfterLeave: $options.onLeaveTransitionComplete,
-      onAfterEnter: $options.onEnterTransitionComplete
-    }, {
+      tabindex: $props.contentTabindex
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.popoverListeners)), {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.headerContent || $props.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_popover_header_footer, {
         key: 0,
         ref: "popover__header",
@@ -6087,11 +6112,11 @@ function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setu
         onClose: $options.closePopover
       }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
       _: 3
-    }, 8, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "class", "style", "css", "tabindex", "onKeydownCapture", "onAfterLeave", "onAfterEnter"])]),
+    }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "class", "style", "css", "tabindex"])]),
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=90818940
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=245d490f
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11093,6 +11118,13 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     }
   },
   emits: [
+  /**
+   * Native keydown event
+   *
+   * @event keydown
+   * @type {KeyboardEvent}
+   */
+  'keydown',
   /**
    * Event fired to sync the open prop with the parent component
    * @event update:open
@@ -11117,6 +11149,20 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   },
 
   computed: {
+    popoverListeners() {
+      return {
+        keydown: event => {
+          this.onKeydown(event);
+        },
+        'after-leave': event => {
+          this.onLeaveTransitionComplete();
+        },
+        'after-enter': event => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+
     labelledBy() {
       // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if
       // there is no aria-label and the labelledby should point to the anchor.
@@ -11178,8 +11224,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         if (open !== null) {
           this.isOpen = open;
         }
-      },
-      immediate: true
+      }
     },
 
     isOpen(isOpen, isPrev) {
@@ -11222,11 +11267,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
       onClickOutside: this.onClickOutside,
       onShow: this.onShow
-    }); // immediate watcher fires before mounted, so have this here in case
-    // show prop was initially set to true.
+    }); // Set internal open state on mounted since the watcher is not fired initially.
 
-    if (this.isOpen) {
-      this.tip.show();
+    if (this.open !== null) {
+      this.isOpen = this.open;
     }
   },
 
@@ -11291,6 +11335,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         return;
       }
 
+      event.preventDefault();
       (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
         placement: 'right-start'
       });
@@ -11321,6 +11366,8 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
           this.isOpen = true;
         }
       }
+
+      this.$emit('keydown', e);
     },
 
     addClosePopoverEventListener() {
@@ -11434,6 +11481,8 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       if (e.key === 'Escape') {
         this.closePopover();
       }
+
+      this.$emit('keydown', e);
     },
 
     async setPopoverContentAnchorWidth() {
@@ -11460,9 +11509,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=90818940&lang=less
-var popovervue_type_style_index_0_id_90818940_lang_less = __webpack_require__(925);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=90818940&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=245d490f&lang=less
+var popovervue_type_style_index_0_id_245d490f_lang_less = __webpack_require__(284);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=245d490f&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -11472,7 +11521,7 @@ var popovervue_type_style_index_0_id_90818940_lang_less = __webpack_require__(92
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_90818940_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_245d490f_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -11492,6 +11541,7 @@ const DROPDOWN_PADDING_CLASSES = {
 
 
 
+
 /* harmony default export */ const dropdownvue_type_script_lang_js = ({
   name: 'DtDropdown',
   components: {
@@ -11646,6 +11696,13 @@ const DROPDOWN_PADDING_CLASSES = {
     }
   },
   emits: [
+  /**
+   * Native keydown event
+   *
+   * @event keydown
+   * @type {KeyboardEvent}
+   */
+  'keydown',
   /**
    * Event fired when the highlight changes
    *
@@ -11681,6 +11738,60 @@ const DROPDOWN_PADDING_CLASSES = {
   },
 
   computed: {
+    dropdownListeners() {
+      return {
+        opened: isPopoverOpen => {
+          this.updateInitialHighlightIndex(isPopoverOpen);
+        },
+        keydown: event => {
+          const eventCode = event.code;
+
+          switch (eventCode) {
+            case EVENT_KEYNAMES.up:
+            case EVENT_KEYNAMES.arrowup:
+              this.onKeyValidation(event, 'onUpKeyPress');
+              event.stopPropagation();
+              event.preventDefault();
+              break;
+
+            case EVENT_KEYNAMES.down:
+            case EVENT_KEYNAMES.arrowdown:
+              this.onKeyValidation(event, 'onDownKeyPress');
+              event.stopPropagation();
+              event.preventDefault();
+              break;
+
+            case EVENT_KEYNAMES.space:
+            case EVENT_KEYNAMES.spacebar:
+              this.onSpaceKey();
+              break;
+
+            case EVENT_KEYNAMES.enter:
+              this.onEnterKey();
+              break;
+
+            case EVENT_KEYNAMES.home:
+              this.onKeyValidation(event, 'onHomeKeyPress');
+              event.stopPropagation();
+              event.preventDefault();
+              break;
+
+            case EVENT_KEYNAMES.end:
+              this.onKeyValidation(event, 'onEndKeyPress');
+              event.stopPropagation();
+              event.preventDefault();
+              break;
+
+            default:
+              this.onKeyValidation(event, 'onKeyPress');
+              break;
+          }
+
+          this.$emit('keydown', event);
+        }
+      };
+    },
+
     beginningOfListMethod() {
       return this.onBeginningOfList || this.jumpToEnd;
     },
@@ -11818,9 +11929,9 @@ const DROPDOWN_PADDING_CLASSES = {
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=2021ac9d&lang=less
-var dropdownvue_type_style_index_0_id_2021ac9d_lang_less = __webpack_require__(438);
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=2021ac9d&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=6b8ca270&lang=less
+var dropdownvue_type_style_index_0_id_6b8ca270_lang_less = __webpack_require__(8);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=6b8ca270&lang=less
 
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue
 
@@ -11830,7 +11941,7 @@ var dropdownvue_type_style_index_0_id_2021ac9d_lang_less = __webpack_require__(4
 ;
 
 
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_2021ac9d_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_6b8ca270_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_list.vue?vue&type=template&id=eefb7378
@@ -11879,16 +11990,16 @@ function dropdown_listvue_type_template_id_eefb7378_render(_ctx, _cache, $props,
 const dropdown_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_listvue_type_script_lang_js, [['render',dropdown_listvue_type_template_id_eefb7378_render]])
 
 /* harmony default export */ const dropdown_list = (dropdown_list_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_separator.vue?vue&type=template&id=6a948a17
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_separator.vue?vue&type=template&id=703ad17c
 
-const dropdown_separatorvue_type_template_id_6a948a17_hoisted_1 = {
+const dropdown_separatorvue_type_template_id_703ad17c_hoisted_1 = {
   "aria-hidden": "true",
-  class: "dt-list-separator d-bgc-black-075 d-my8"
+  class: "dt-list-separator d-bgc-black-300 d-my8"
 };
-function dropdown_separatorvue_type_template_id_6a948a17_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("li", dropdown_separatorvue_type_template_id_6a948a17_hoisted_1);
+function dropdown_separatorvue_type_template_id_703ad17c_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("li", dropdown_separatorvue_type_template_id_703ad17c_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=template&id=6a948a17
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=template&id=703ad17c
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_separator.vue?vue&type=script&lang=js
 /* harmony default export */ const dropdown_separatorvue_type_script_lang_js = ({
@@ -11896,9 +12007,9 @@ function dropdown_separatorvue_type_template_id_6a948a17_render(_ctx, _cache, $p
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=6a948a17&lang=less
-var dropdown_separatorvue_type_style_index_0_id_6a948a17_lang_less = __webpack_require__(633);
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=6a948a17&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=703ad17c&lang=less
+var dropdown_separatorvue_type_style_index_0_id_703ad17c_lang_less = __webpack_require__(412);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=703ad17c&lang=less
 
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue
 
@@ -11908,7 +12019,7 @@ var dropdown_separatorvue_type_style_index_0_id_6a948a17_lang_less = __webpack_r
 ;
 
 
-const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_separatorvue_type_script_lang_js, [['render',dropdown_separatorvue_type_template_id_6a948a17_render]])
+const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_separatorvue_type_script_lang_js, [['render',dropdown_separatorvue_type_template_id_703ad17c_render]])
 
 /* harmony default export */ const dropdown_separator = (dropdown_separator_exports_);
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
@@ -13309,26 +13420,26 @@ const input_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(input_
 /* harmony default export */ const input_group_input_group = (input_group_exports_);
 ;// CONCATENATED MODULE: ./components/input_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=template&id=21785ac6
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=template&id=7bbbda2b
 
-const modalvue_type_template_id_21785ac6_hoisted_1 = ["aria-describedby", "aria-labelledby"];
-const modalvue_type_template_id_21785ac6_hoisted_2 = ["id"];
-const modalvue_type_template_id_21785ac6_hoisted_3 = ["id"];
-const modalvue_type_template_id_21785ac6_hoisted_4 = {
+const modalvue_type_template_id_7bbbda2b_hoisted_1 = ["aria-describedby", "aria-labelledby"];
+const modalvue_type_template_id_7bbbda2b_hoisted_2 = ["id"];
+const modalvue_type_template_id_7bbbda2b_hoisted_3 = ["id"];
+const modalvue_type_template_id_7bbbda2b_hoisted_4 = {
   key: 2,
   class: "d-modal__content",
   "data-qa": "dt-modal-copy"
 };
-const modalvue_type_template_id_21785ac6_hoisted_5 = {
+const modalvue_type_template_id_7bbbda2b_hoisted_5 = {
   key: 3,
   class: "d-modal__content",
   "data-qa": "dt-modal-copy"
 };
-const modalvue_type_template_id_21785ac6_hoisted_6 = {
+const modalvue_type_template_id_7bbbda2b_hoisted_6 = {
   key: 4,
   class: "d-modal__footer"
 };
-function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup, $data, $options) {
+function modalvue_type_template_id_7bbbda2b_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
@@ -13337,16 +13448,13 @@ function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup,
 
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_lazy_show, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     transition: "d-zoom",
     show: $props.show,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-modal', $data.MODAL_KIND_MODIFIERS[$props.kind], $data.MODAL_SIZE_MODIFIERS[$props.size], $props.modalClass]),
+    class: ['d-modal', $data.MODAL_KIND_MODIFIERS[$props.kind], $data.MODAL_SIZE_MODIFIERS[$props.size], $props.modalClass],
     "data-qa": "dt-modal",
-    "aria-hidden": $options.open,
-    onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($options.close, ["self"]),
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.close, ["esc"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.trapFocus, ["tab"])],
-    onAfterEnter: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($options.setFocusAfterTransition, ["self"])
-  }, {
+    "aria-hidden": $options.open
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$props.show && (_ctx.$slots.banner || $props.bannerTitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
       key: 0,
       "data-qa": "dt-modal-banner",
@@ -13368,12 +13476,12 @@ function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_21785ac6_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_7bbbda2b_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
         key: 1,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_21785ac6_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_21785ac6_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_21785ac6_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_21785ac6_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_7bbbda2b_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_7bbbda2b_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_7bbbda2b_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_7bbbda2b_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         key: 5,
         class: "d-modal__close",
         circle: "",
@@ -13390,13 +13498,13 @@ function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup,
         key: 6,
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         onClose: $options.close
-      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_21785ac6_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
+      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_7bbbda2b_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
       _: 3
     })]),
     _: 3
-  }, 8, ["show", "class", "aria-hidden", "onClick", "onKeydown", "onAfterEnter"]);
+  }, 16, ["show", "class", "aria-hidden"]);
 }
-;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=21785ac6
+;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=7bbbda2b
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
 // Modal style modifiers
@@ -13418,6 +13526,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 
+
 /**
  * Modals focus the user’s attention exclusively on one task or piece of information
  * via a window that sits on top of the page content.
@@ -13569,6 +13678,20 @@ const MODAL_SIZE_MODIFIERS = {
     }
   },
   emits: [
+  /**
+   * Native button click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click',
+  /**
+   * Native keydown event
+   *
+   * @event keydown
+   * @type {KeyboardEvent}
+   */
+  'keydown',
   /**
    * The modal will emit a "false" boolean value for this event when the user performs a modal-closing action.
    * Parent components can sync on this value to create a 2-way binding to control modal visibility.
@@ -13586,6 +13709,32 @@ const MODAL_SIZE_MODIFIERS = {
   },
 
   computed: {
+    modalListeners() {
+      return {
+        click: event => {
+          event.target === event.currentTarget && this.close();
+          this.$emit('click', event);
+        },
+        keydown: event => {
+          switch (event.code) {
+            case EVENT_KEYNAMES.esc:
+            case EVENT_KEYNAMES.escape:
+              this.close();
+              break;
+
+            case EVENT_KEYNAMES.tab:
+              this.trapFocus(event);
+              break;
+          }
+
+          this.$emit('keydown', event);
+        },
+        'after-enter': event => {
+          event.target === event.currentTarget && this.setFocusAfterTransition();
+        }
+      };
+    },
+
     open() {
       return `${!this.show}`;
     },
@@ -13655,7 +13804,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 ;
-const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_21785ac6_render]])
+const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_7bbbda2b_render]])
 
 /* harmony default export */ const modal_modal = (modal_exports_);
 ;// CONCATENATED MODULE: ./components/modal/index.js
@@ -13832,6 +13981,89 @@ const list_section_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_
 /* harmony default export */ const list_section = (list_section_exports_);
 ;// CONCATENATED MODULE: ./components/list_section/index.js
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item_group/list_item_group.vue?vue&type=template&id=f5aed6e8
+
+const list_item_groupvue_type_template_id_f5aed6e8_hoisted_1 = ["id", "aria-labelledby"];
+const list_item_groupvue_type_template_id_f5aed6e8_hoisted_2 = ["id"];
+function list_item_groupvue_type_template_id_f5aed6e8_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ul", {
+    id: $props.id,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ps-relative', 'd-px0', $props.listClass]),
+    role: "group",
+    "data-qa": "dt-dropdown-list-wrapper",
+    "aria-labelledby": `${$props.id}-heading`
+  }, [$props.heading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("li", {
+    key: 0,
+    id: `${$props.id}-heading`,
+    role: "presentation",
+    "data-qa": "dt-dropdown-list-heading",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-dropdown-list--header', $props.headingClass])
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "headingSlot", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.heading), 1)])], 10, list_item_groupvue_type_template_id_f5aed6e8_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, list_item_groupvue_type_template_id_f5aed6e8_hoisted_1);
+}
+;// CONCATENATED MODULE: ./components/list_item_group/list_item_group.vue?vue&type=template&id=f5aed6e8
+
+;// CONCATENATED MODULE: ./components/list_item_group/list_item_group_constants.js
+const DEFAULT_CONSTANTS = null;
+/* harmony default export */ const list_item_group_constants = ({
+  DEFAULT_CONSTANTS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item_group/list_item_group.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ const list_item_groupvue_type_script_lang_js = ({
+  name: 'DtListItemGroup',
+  props: {
+    /**
+     * Id of the List Item Group
+     */
+    id: {
+      type: String,
+
+      default() {
+        return getUniqueString();
+      }
+
+    },
+
+    /**
+     * List's heading.
+     */
+    heading: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Additional class to style the heading
+     */
+    headingClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ''
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/list_item_group/list_item_group.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/list_item_group/list_item_group.vue
+
+
+
+
+;
+const list_item_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_item_groupvue_type_script_lang_js, [['render',list_item_groupvue_type_template_id_f5aed6e8_render]])
+
+/* harmony default export */ const list_item_group = (list_item_group_exports_);
+;// CONCATENATED MODULE: ./components/list_item_group/index.js
+
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice.vue?vue&type=template&id=28b8ab50
 
 function noticevue_type_template_id_28b8ab50_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -14894,9 +15126,9 @@ const TAB_IMPORTANCE_MODIFIERS = {
 const tab_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tab_groupvue_type_script_lang_js, [['render',tab_groupvue_type_template_id_617fd84e_render]])
 
 /* harmony default export */ const tab_group = (tab_group_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab.vue?vue&type=template&id=91977b48
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab.vue?vue&type=template&id=af343bac
 
-function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tabvue_type_template_id_af343bac_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
@@ -14911,15 +15143,12 @@ function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $
     "data-qa": "dt-tab",
     tabindex: $options.isSelected ? '0' : '-1',
     disabled: $options.groupContext.disabled || $props.disabled
-  }, _ctx.$attrs, {
-    onClick: _cache[0] || (_cache[0] = $event => $options.selectPanel()),
-    onFocus: _cache[1] || (_cache[1] = $event => $options.setFocus($props.id))
-  }), {
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.tabListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
     _: 3
   }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
 }
-;// CONCATENATED MODULE: ./components/tabs/tab.vue?vue&type=template&id=91977b48
+;// CONCATENATED MODULE: ./components/tabs/tab.vue?vue&type=template&id=af343bac
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab.vue?vue&type=script&lang=js
 
@@ -14987,6 +15216,21 @@ function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $
       default: ''
     }
   },
+  emits: [
+  /**
+   * Native button focus in event
+   *
+   * @event focus
+   * @type {FocusEvent}
+   */
+  'focus',
+  /**
+   * Native button click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
 
   data() {
     return {
@@ -14995,6 +15239,19 @@ function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $
   },
 
   computed: {
+    tabListeners() {
+      return {
+        click: event => {
+          this.selectPanel();
+          this.$emit('click', event);
+        },
+        focus: event => {
+          this.setFocus(this.id);
+          this.$emit('focus', event);
+        }
+      };
+    },
+
     isSelected() {
       return this.groupContext.selected === this.panelId;
     }
@@ -15030,7 +15287,7 @@ function tabvue_type_template_id_91977b48_render(_ctx, _cache, $props, $setup, $
 
 
 ;
-const tab_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tabvue_type_script_lang_js, [['render',tabvue_type_template_id_91977b48_render]])
+const tab_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tabvue_type_script_lang_js, [['render',tabvue_type_template_id_af343bac_render]])
 
 /* harmony default export */ const tab = (tab_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tabs/tab_panel.vue?vue&type=template&id=572b0140
@@ -16300,44 +16557,49 @@ const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_typ
 ;// CONCATENATED MODULE: ./components/toast/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toggle/toggle.vue?vue&type=template&id=5692f89a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toggle/toggle.vue?vue&type=template&id=54ed4aa0
 
-const togglevue_type_template_id_5692f89a_hoisted_1 = {
+const togglevue_type_template_id_54ed4aa0_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-const togglevue_type_template_id_5692f89a_hoisted_2 = ["for"];
-const togglevue_type_template_id_5692f89a_hoisted_3 = ["id", "aria-checked", "disabled", "aria-disabled"];
-
-const togglevue_type_template_id_5692f89a_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+const togglevue_type_template_id_54ed4aa0_hoisted_2 = ["for"];
+const togglevue_type_template_id_54ed4aa0_hoisted_3 = ["id", "role", "aria-checked", "disabled", "aria-disabled"];
+const togglevue_type_template_id_54ed4aa0_hoisted_4 = {
+  key: 0,
   class: "d-toggle__inner"
-}, null, -1);
-
-const togglevue_type_template_id_5692f89a_hoisted_5 = [togglevue_type_template_id_5692f89a_hoisted_4];
-function togglevue_type_template_id_5692f89a_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", togglevue_type_template_id_5692f89a_hoisted_1, [_ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+};
+function togglevue_type_template_id_54ed4aa0_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", togglevue_type_template_id_54ed4aa0_hoisted_1, [_ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     class: $props.labelClass,
     for: $props.id
   }, $props.labelChildProps, {
     "data-qa": "toggle-label"
-  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 16, togglevue_type_template_id_5692f89a_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 16, togglevue_type_template_id_54ed4aa0_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
-    role: "switch",
+    role: $options.toggleRole,
     type: "button",
     "aria-checked": $data.internalChecked.toString(),
     disabled: $props.disabled,
     "aria-disabled": $props.disabled.toString(),
-    class: ['d-toggle', {
-      'd-toggle--checked': $data.internalChecked,
-      'd-toggle--disabled': $props.disabled
-    }]
-  }, $options.inputListeners), togglevue_type_template_id_5692f89a_hoisted_5, 16, togglevue_type_template_id_5692f89a_hoisted_3)]);
+    class: $options.toggleClasses
+  }, $options.inputListeners), [$props.showIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", togglevue_type_template_id_54ed4aa0_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16, togglevue_type_template_id_54ed4aa0_hoisted_3)]);
 }
-;// CONCATENATED MODULE: ./components/toggle/toggle.vue?vue&type=template&id=5692f89a
+;// CONCATENATED MODULE: ./components/toggle/toggle.vue?vue&type=template&id=54ed4aa0
 
+;// CONCATENATED MODULE: ./components/toggle/toggle_constants.js
+const TOGGLE_SIZE_MODIFIERS = {
+  sm: 'd-toggle--small',
+  md: ''
+};
+const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];
+/* harmony default export */ const toggle_constants = ({
+  TOGGLE_SIZE_MODIFIERS
+});
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toggle/toggle.vue?vue&type=script&lang=js
 
 
+
 /**
  * A toggle (or "switch") is a button control element that allows the user to make a binary (on/off) selection.
  * @see https://dialpad.design/components/toggle.html
@@ -16375,11 +16637,31 @@ function togglevue_type_template_id_5692f89a_render(_ctx, _cache, $props, $setup
     /**
      * Value of the toggle
      * @model checked
-     * @values true, false
+     * @values true, false, 'mixed'
      */
     checked: {
+      type: [Boolean, String],
+      default: false,
+      validator: v => TOGGLE_CHECKED_VALUES.includes(v)
+    },
+
+    /**
+     * The size of the toggle.
+     * @values sm, md
+     */
+    size: {
+      type: String,
+      default: 'md',
+      validator: s => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * Shows the icon
+     * @values true, false
+     */
+    showIcon: {
       type: Boolean,
-      default: false
+      default: true
     },
 
     /**
@@ -16419,6 +16701,22 @@ function togglevue_type_template_id_5692f89a_render(_ctx, _cache, $props, $setup
       return { ...this.$attrs,
         onClick: _ => this.toggleCheckedValue()
       };
+    },
+
+    isIndeterminate() {
+      return this.internalChecked === 'mixed';
+    },
+
+    toggleRole() {
+      return this.isIndeterminate ? 'checkbox' : 'switch';
+    },
+
+    toggleClasses() {
+      return ['d-toggle', TOGGLE_SIZE_MODIFIERS[this.size], {
+        'd-toggle--checked': this.internalChecked === true,
+        'd-toggle--disabled': this.disabled,
+        'd-toggle--indeterminate': this.isIndeterminate
+      }];
     }
 
   },
@@ -16463,20 +16761,20 @@ function togglevue_type_template_id_5692f89a_render(_ctx, _cache, $props, $setup
 
 
 ;
-const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_type_script_lang_js, [['render',togglevue_type_template_id_5692f89a_render]])
+const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_type_script_lang_js, [['render',togglevue_type_template_id_54ed4aa0_render]])
 
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=3533d022
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=bacc9698
 
-const tooltipvue_type_template_id_3533d022_hoisted_1 = {
+const tooltipvue_type_template_id_bacc9698_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_3533d022_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_bacc9698_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_3533d022_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_bacc9698_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     ref: "anchor",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -16494,7 +16792,7 @@ function tooltipvue_type_template_id_3533d022_render(_ctx, _cache, $props, $setu
     onKeydown: _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
       return $options.onLeaveAnchor && $options.onLeaveAnchor(...arguments);
     }, ["esc"]))
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "anchor")], 544), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "anchor")], 544), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     ref: "content",
     show: $data.isShown && (!!$props.message.trim() || !$options.defaultSlotIsEmpty),
@@ -16503,17 +16801,15 @@ function tooltipvue_type_template_id_3533d022_render(_ctx, _cache, $props, $setu
     "data-qa": "dt-tooltip",
     appear: "",
     transition: $props.transition,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-tooltip', `d-tooltip__arrow-tippy--${$data.currentPlacement}`, {
+    class: ['d-tooltip', `d-tooltip__arrow-tippy--${$data.currentPlacement}`, {
       [$data.TOOLTIP_KIND_MODIFIERS.inverted]: $props.inverted
-    }, $props.contentClass]),
-    onAfterLeave: $options.onLeaveTransitionComplete,
-    onAfterEnter: $options.onEnterTransitionComplete
-  }, {
+    }, $props.contentClass]
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.tooltipListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.message), 1)])]),
     _: 3
-  }, 8, ["id", "show", "transition", "class", "onAfterLeave", "onAfterEnter"])]);
+  }, 16, ["id", "show", "transition", "class"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=3533d022
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=bacc9698
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -16694,6 +16990,17 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
   },
 
   computed: {
+    tooltipListeners() {
+      return {
+        'after-leave': event => {
+          this.onLeaveTransitionComplete();
+        },
+        'after-enter': event => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+
     tippyProps() {
       return {
         offset: this.offset,
@@ -16852,9 +17159,9 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=3533d022&lang=less
-var tooltipvue_type_style_index_0_id_3533d022_lang_less = __webpack_require__(504);
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=3533d022&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=bacc9698&lang=less
+var tooltipvue_type_style_index_0_id_bacc9698_lang_less = __webpack_require__(27);
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=bacc9698&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -16864,7 +17171,7 @@ var tooltipvue_type_style_index_0_id_3533d022_lang_less = __webpack_require__(50
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_3533d022_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_bacc9698_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -17482,6 +17789,97 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=template&id=1ca37c55
+
+function iconvue_type_template_id_1ca37c55_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($options.currentIcon), {
+    "data-qa": "dt-icon",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.iconSize)
+  }, null, 8, ["class"]);
+}
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=template&id=1ca37c55
+
+;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+const ICON_SIZE_MODIFIERS = {
+  100: 'd-icon--size-100',
+  200: 'd-icon--size-200',
+  300: 'd-icon--size-300',
+  400: 'd-icon--size-400',
+  500: 'd-icon--size-500',
+  600: 'd-icon--size-600',
+  700: 'd-icon--size-700',
+  800: 'd-icon--size-800'
+};
+/* harmony default export */ const icon_constants = ({
+  ICON_SIZE_MODIFIERS
+});
+;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
+const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=script&lang=js
+
+
+
+/**
+ * The Icon component provides a set of glyphs and sizes to provide context your application.
+ * @see https://dialpad.design/components/icon.html
+ */
+
+/* harmony default export */ const iconvue_type_script_lang_js = ({
+  name: 'DtIcon',
+  props: {
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: '500',
+      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * The icon name in kebab-case
+     */
+    name: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      dialtoneIcons: dialtone_icons_namespaceObject
+    };
+  },
+
+  computed: {
+    iconSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
+    },
+
+    iconName() {
+      return kebabCaseToPascalCase(this.name);
+    },
+
+    currentIcon() {
+      return this.dialtoneIcons[this.iconName];
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/icon/icon.vue
+
+
+
+
+;
+const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_script_lang_js, [['render',iconvue_type_template_id_1ca37c55_render]])
+
+/* harmony default export */ const icon = (icon_exports_);
+;// CONCATENATED MODULE: ./components/icon/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=d56f4446
 
 const combobox_with_popovervue_type_template_id_d56f4446_hoisted_1 = ["id"];
@@ -18605,9 +19003,9 @@ const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=20cb5327
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=a7118c92
 
-function callbar_buttonvue_type_template_id_20cb5327_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_a7118c92_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -18634,7 +19032,7 @@ function callbar_buttonvue_type_template_id_20cb5327_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=20cb5327
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=a7118c92
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
@@ -18723,7 +19121,7 @@ function callbar_buttonvue_type_template_id_20cb5327_render(_ctx, _cache, $props
   },
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-stack4', 'd-px0', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-stack4', 'd-px0', 'h:d-bgc-black-200', 'h:d-bgo50', {
         'dt-recipe-callbar-button--circle': this.circle,
         'd-btn--icon-only': this.circle,
         'dt-recipe-callbar-button--active': this.active,
@@ -18735,9 +19133,9 @@ function callbar_buttonvue_type_template_id_20cb5327_render(_ctx, _cache, $props
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=20cb5327&lang=less
-var callbar_buttonvue_type_style_index_0_id_20cb5327_lang_less = __webpack_require__(170);
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=20cb5327&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=a7118c92&lang=less
+var callbar_buttonvue_type_style_index_0_id_a7118c92_lang_less = __webpack_require__(476);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=a7118c92&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -18747,7 +19145,7 @@ var callbar_buttonvue_type_style_index_0_id_20cb5327_lang_less = __webpack_requi
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_20cb5327_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_a7118c92_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
@@ -19071,26 +19469,26 @@ const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* defa
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=466e560c
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=c1f377a8
 
-const contact_infovue_type_template_id_466e560c_hoisted_1 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_1 = {
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
 };
-const contact_infovue_type_template_id_466e560c_hoisted_2 = ["src", "alt"];
-const contact_infovue_type_template_id_466e560c_hoisted_3 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_2 = ["src", "alt"];
+const contact_infovue_type_template_id_c1f377a8_hoisted_3 = {
   "data-qa": "contact-info-header"
 };
-const contact_infovue_type_template_id_466e560c_hoisted_4 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_4 = {
   "data-qa": "contact-info-subtitle"
 };
-const contact_infovue_type_template_id_466e560c_hoisted_5 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_5 = {
   "data-qa": "contact-info-bottom"
 };
-const contact_infovue_type_template_id_466e560c_hoisted_6 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_6 = {
   "data-qa": "contact-info-right"
 };
-function contact_infovue_type_template_id_466e560c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_infovue_type_template_id_c1f377a8_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
 
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
@@ -19101,7 +19499,7 @@ function contact_infovue_type_template_id_466e560c_render(_ctx, _cache, $props,
     "element-type": "div",
     "data-qa": "contact-info"
   }, {
-    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 0,
       size: "lg"
     }, {
@@ -19109,7 +19507,7 @@ function contact_infovue_type_template_id_466e560c_render(_ctx, _cache, $props,
         "data-qa": "dt-contact-avatar",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, contact_infovue_type_template_id_466e560c_hoisted_2)]),
+      }, null, 8, contact_infovue_type_template_id_c1f377a8_hoisted_2)]),
       _: 1
     })) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 1,
@@ -19124,14 +19522,14 @@ function contact_infovue_type_template_id_466e560c_render(_ctx, _cache, $props,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ba', 'd-bc-white', 'd-baw2', 'd-bar2', 'd-ps-absolute', 'd-bn1', 'd-rn1', 'd-w20p', 'd-h20p', $data.USER_STATUS_COLOR_MODIFIERS[$props.userStatusColor]]),
       "data-qa": "contact-info-user-status"
     }, "   ", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
-    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
-    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
-    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
+    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
+    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
+    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
     _: 3
   }, 8, ["id", "role"]);
 }
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=466e560c
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=c1f377a8
 
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
 const USER_STATUS_COLOR_MODIFIERS = {
@@ -19184,6 +19582,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
     /**
      * Optional avatar image url.
+     * if provided, it's also required to provide a value in the `avatarInitials` prop to use
+     * in the alt attribute of the avatar.
      */
     avatarSrc: {
       type: String,
@@ -19238,7 +19638,7 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 ;
-const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_466e560c_render]])
+const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_c1f377a8_render]])
 
 /* harmony default export */ const contact_info = (contact_info_exports_);
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/index.js
@@ -19955,6 +20355,8 @@ const grouped_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group
 
 
 
+
+