@dialpad/dialtone-vue 2.37.2 → 2.39.0

package/dist/dialtone-vue.common.js

@@ -23,6 +23,30 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 690:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--su4) var(--su12)}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 804:
@@ -282,7 +306,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){letter-spacing:-.011rem;line-height:1.6rem}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--active{--button--fc:var(--muted-color-hover);--button--bgc:hsla(var(--muted-color-hsl)/15%)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active{--button--bgc:hsla(var(--error-color-hsl)/10%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active:hover{--button--bgc:hsla(var(--error-color-hsl)/20%);--button--fc:var(--error-color-hover)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){letter-spacing:-.011rem;line-height:1.6rem}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active{--button--bgc:hsla(var(--error-color-hsl)/10%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active:hover{--button--bgc:hsla(var(--error-color-hsl)/20%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -498,6 +522,22 @@ var update = add("056a7866", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 969:
+/***/ ((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__(690);
+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("7aa1a0f9", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 782:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -1208,60 +1248,18 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ const setPublicPath = (null);
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=template&id=2820dd63&
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=template&id=2ccfaa37&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-avatar',
     _vm.AVATAR_KIND_MODIFIERS[_vm.kind],
     _vm.AVATAR_SIZE_MODIFIERS[_vm.size],
     _vm.AVATAR_COLOR_MODIFIERS[_vm.color],
-    _vm.avatarClass ],attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_vm._t("default")],2)}
+    _vm.avatarClass ],attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_vm._t("default"),(_vm.presence)?_c('dt-presence',_vm._b({class:[
+      'd-avatar__presence',
+      _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],2)}
 var staticRenderFns = []
 
 
-;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
-const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject);
-;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
-const AVATAR_KIND_MODIFIERS = {
-  default: '',
-  icon: 'd-avatar--icon',
-  initials: 'd-avatar--initials'
-};
-const AVATAR_SIZE_MODIFIERS = {
-  sm: 'd-avatar--sm',
-  md: 'd-avatar--md',
-  lg: 'd-avatar--lg'
-};
-const AVATAR_COLOR_MODIFIERS = {
-  base: '',
-  'orange-200': 'd-avatar--orange-200',
-  'orange-300': 'd-avatar--orange-300',
-  'orange-400': 'd-avatar--orange-400',
-  'orange-500': 'd-avatar--orange-500',
-  'magenta-100': 'd-avatar--magenta-100',
-  'magenta-200': 'd-avatar--magenta-200',
-  'magenta-300': 'd-avatar--magenta-300',
-  'magenta-400': 'd-avatar--magenta-400',
-  'purple-200': 'd-avatar--purple-200',
-  'purple-300': 'd-avatar--purple-300',
-  'purple-400': 'd-avatar--purple-400',
-  'purple-500': 'd-avatar--purple-500',
-  'gold-100': 'd-avatar--gold-100',
-  'gold-200': 'd-avatar--gold-200',
-  'gold-300': 'd-avatar--gold-300',
-  'gold-500': 'd-avatar--gold-500'
-};
-const AVATAR_ICON_SIZES = {
-  sm: '200',
-  md: '400',
-  lg: '500'
-};
-/* harmony default export */ const avatar_constants = ({
-  AVATAR_KIND_MODIFIERS,
-  AVATAR_SIZE_MODIFIERS,
-  AVATAR_COLOR_MODIFIERS,
-  AVATAR_ICON_SIZES
-});
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
 
@@ -1330,6 +1328,9 @@ const DEFAULT_PREFIX = 'dt';
   DEFAULT_VALIDATION_MESSAGE_TYPE,
   DEFAULT_PREFIX
 });
+;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
+var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject);
 ;// CONCATENATED MODULE: ./common/utils.js
 
 
@@ -1464,6 +1465,251 @@ const pascalCaseToKebabCase = string => {
   flushPromises,
   kebabCaseToPascalCase
 });
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/presence/presence.vue?vue&type=template&id=30834c22&
+var presencevue_type_template_id_30834c22_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-presence",attrs:{"data-qa":"dt-presence","role":"status","aria-live":_vm.$attrs.ariaLive || 'off'}},[(_vm.srText)?_c('span',{staticClass:"sr-only",attrs:{"data-qa":"dt-presence-sr-text"}},[_vm._v(_vm._s(_vm.srText)+" ")]):_vm._e(),_c('div',{staticClass:"d-presence__inner",class:{
+      'd-presence__inner--active': _vm.presence === 'active',
+      'd-presence__inner--away': _vm.presence === 'away',
+      'd-presence__inner--busy': _vm.presence === 'busy',
+      'd-presence__inner--offline': _vm.presence === 'offline',
+    }})])}
+var presencevue_type_template_id_30834c22_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/presence/presence_constants.js
+const PRESENCE_STATES = {
+  BUSY: 'busy',
+  AWAY: 'away',
+  OFFLINE: 'offline',
+  ACTIVE: 'active'
+};
+const PRESENCE_STATES_LIST = [PRESENCE_STATES.BUSY, PRESENCE_STATES.AWAY, PRESENCE_STATES.OFFLINE, PRESENCE_STATES.ACTIVE];
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/presence/presence.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/**
+ * Presence is a user status visual indicator element.
+ * @see https://dialpad.design/components/presence.html
+ */
+
+/* harmony default export */ const presencevue_type_script_lang_js_ = ({
+  name: 'Presence',
+  props: {
+    /**
+     * Determines the color of the inner presence circle, indicating status.
+     * Accepts one of 4 values: 'busy', 'away', 'active', 'offline'
+     */
+    presence: {
+      type: String,
+      default: PRESENCE_STATES.ACTIVE,
+      validator: role => {
+        return PRESENCE_STATES_LIST.includes(role);
+      }
+    },
+
+    /**
+     * Since Presence is a visual element, we need SRs to read out any state changes
+     * that occur.
+     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     */
+    srText: {
+      type: String,
+      default: null
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/presence/presence.vue?vue&type=script&lang=js&
+ /* harmony default export */ const presence_presencevue_type_script_lang_js_ = (presencevue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+function normalizeComponent (
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier, /* server only */
+  shadowMode /* vue-cli only */
+) {
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = 'data-v-' + scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) { // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+        injectStyles.call(
+          this,
+          (options.functional ? this.parent : this).$root.$options.shadowRoot
+        )
+      }
+      : injectStyles
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functional component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection (h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing
+        ? [].concat(existing, hook)
+        : [hook]
+    }
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}
+
+;// CONCATENATED MODULE: ./components/presence/presence.vue
+
+
+
+
+
+/* normalize component */
+;
+var component = normalizeComponent(
+  presence_presencevue_type_script_lang_js_,
+  presencevue_type_template_id_30834c22_render,
+  presencevue_type_template_id_30834c22_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const presence = (component.exports);
+;// CONCATENATED MODULE: ./components/presence/index.js
+
+
+;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
+const AVATAR_KIND_MODIFIERS = {
+  default: '',
+  icon: 'd-avatar--icon',
+  initials: 'd-avatar--initials'
+};
+const AVATAR_SIZE_MODIFIERS = {
+  sm: 'd-avatar--sm',
+  md: 'd-avatar--md',
+  lg: 'd-avatar--lg'
+};
+const AVATAR_PRESENCE_SIZE_MODIFIERS = {
+  md: 'd-avatar__presence--md',
+  lg: 'd-avatar__presence--lg'
+};
+const AVATAR_COLOR_MODIFIERS = {
+  base: '',
+  'orange-200': 'd-avatar--orange-200',
+  'orange-300': 'd-avatar--orange-300',
+  'orange-400': 'd-avatar--orange-400',
+  'orange-500': 'd-avatar--orange-500',
+  'magenta-100': 'd-avatar--magenta-100',
+  'magenta-200': 'd-avatar--magenta-200',
+  'magenta-300': 'd-avatar--magenta-300',
+  'magenta-400': 'd-avatar--magenta-400',
+  'purple-200': 'd-avatar--purple-200',
+  'purple-300': 'd-avatar--purple-300',
+  'purple-400': 'd-avatar--purple-400',
+  'purple-500': 'd-avatar--purple-500',
+  'gold-100': 'd-avatar--gold-100',
+  'gold-200': 'd-avatar--gold-200',
+  'gold-300': 'd-avatar--gold-300',
+  'gold-500': 'd-avatar--gold-500'
+};
+const AVATAR_ICON_SIZES = {
+  sm: '200',
+  md: '400',
+  lg: '500'
+};
+/* harmony default export */ const avatar_constants = ({
+  AVATAR_KIND_MODIFIERS,
+  AVATAR_SIZE_MODIFIERS,
+  AVATAR_COLOR_MODIFIERS,
+  AVATAR_ICON_SIZES
+});
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=script&lang=js&
 //
 //
@@ -1482,6 +1728,17 @@ const pascalCaseToKebabCase = string => {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 
 
 
@@ -1492,6 +1749,9 @@ const pascalCaseToKebabCase = string => {
 
 /* harmony default export */ const avatarvue_type_script_lang_js_ = ({
   name: 'DtAvatar',
+  components: {
+    DtPresence: presence
+  },
   inheritAttrs: false,
   props: {
     /**
@@ -1536,6 +1796,24 @@ const pascalCaseToKebabCase = string => {
     avatarClass: {
       type: [String, Array, Object],
       default: ''
+    },
+
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     */
+    presence: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * A set of props to be passed into the presence component.
+     */
+    presenceProps: {
+      type: Object,
+      default: () => ({})
     }
   },
 
@@ -1545,7 +1823,8 @@ const pascalCaseToKebabCase = string => {
       kind: 'initials',
       AVATAR_SIZE_MODIFIERS: AVATAR_SIZE_MODIFIERS,
       AVATAR_COLOR_MODIFIERS: AVATAR_COLOR_MODIFIERS,
-      AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS
+      AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: AVATAR_PRESENCE_SIZE_MODIFIERS
     };
   },
 
@@ -1606,106 +1885,6 @@ const pascalCaseToKebabCase = string => {
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js&
  /* harmony default export */ const avatar_avatarvue_type_script_lang_js_ = (avatarvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
-/* globals __VUE_SSR_CONTEXT__ */
-
-// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
-// This module is a runtime utility for cleaner component module output and will
-// be included in the final webpack user bundle.
-
-function normalizeComponent (
-  scriptExports,
-  render,
-  staticRenderFns,
-  functionalTemplate,
-  injectStyles,
-  scopeId,
-  moduleIdentifier, /* server only */
-  shadowMode /* vue-cli only */
-) {
-  // Vue.extend constructor export interop
-  var options = typeof scriptExports === 'function'
-    ? scriptExports.options
-    : scriptExports
-
-  // render functions
-  if (render) {
-    options.render = render
-    options.staticRenderFns = staticRenderFns
-    options._compiled = true
-  }
-
-  // functional template
-  if (functionalTemplate) {
-    options.functional = true
-  }
-
-  // scopedId
-  if (scopeId) {
-    options._scopeId = 'data-v-' + scopeId
-  }
-
-  var hook
-  if (moduleIdentifier) { // server build
-    hook = function (context) {
-      // 2.3 injection
-      context =
-        context || // cached call
-        (this.$vnode && this.$vnode.ssrContext) || // stateful
-        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
-      // 2.2 with runInNewContext: true
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__
-      }
-      // inject component styles
-      if (injectStyles) {
-        injectStyles.call(this, context)
-      }
-      // register component module identifier for async chunk inferrence
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier)
-      }
-    }
-    // used by ssr in case component is cached and beforeCreate
-    // never gets called
-    options._ssrRegister = hook
-  } else if (injectStyles) {
-    hook = shadowMode
-      ? function () {
-        injectStyles.call(
-          this,
-          (options.functional ? this.parent : this).$root.$options.shadowRoot
-        )
-      }
-      : injectStyles
-  }
-
-  if (hook) {
-    if (options.functional) {
-      // for template-only hot-reload because in that case the render fn doesn't
-      // go through the normalizer
-      options._injectStyles = hook
-      // register for functional component in vue file
-      var originalRender = options.render
-      options.render = function renderWithStyleInjection (h, context) {
-        hook.call(context)
-        return originalRender(h, context)
-      }
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate
-      options.beforeCreate = existing
-        ? [].concat(existing, hook)
-        : [hook]
-    }
-  }
-
-  return {
-    exports: scriptExports,
-    options: options
-  }
-}
-
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
 
@@ -1714,7 +1893,7 @@ function normalizeComponent (
 
 /* normalize component */
 ;
-var component = normalizeComponent(
+var avatar_component = normalizeComponent(
   avatar_avatarvue_type_script_lang_js_,
   render,
   staticRenderFns,
@@ -1725,7 +1904,7 @@ var component = normalizeComponent(
   
 )
 
-/* harmony default export */ const avatar = (component.exports);
+/* harmony default export */ const avatar = (avatar_component.exports);
 ;// CONCATENATED MODULE: ./components/avatar/index.js
 
 
@@ -3732,9 +3911,9 @@ var card_component = normalizeComponent(
 /* harmony default export */ const card = (card_component.exports);
 ;// CONCATENATED MODULE: ./components/card/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=397ad57a&
-var comboboxvue_type_template_id_397ad57a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
-var comboboxvue_type_template_id_397ad57a_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=ff49fc2c&
+var comboboxvue_type_template_id_ff49fc2c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && (_vm.emptyStateMessage || _vm.$slots.emptyListItem) && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage,"item-class":_vm.emptyStateClass}},'combobox-empty-list',_vm.listProps,false),[_vm._t("emptyListItem")],2):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
+var comboboxvue_type_template_id_ff49fc2c_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -5439,9 +5618,9 @@ var combobox_loading_list_component = normalizeComponent(
 )
 
 /* harmony default export */ const combobox_loading_list = (combobox_loading_list_component.exports);
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox_empty-list.vue?vue&type=template&id=ee5abe2c&
-var combobox_empty_listvue_type_template_id_ee5abe2c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ol',{staticClass:"d-p0",attrs:{"data-qa":"dt-combobox-empty-list"}},[_c('dt-list-item',{staticClass:"d-d-flex d-jc-center",attrs:{"role":"option","navigation-type":"none"}},[_c('span',[_vm._v(_vm._s(_vm.message))])])],1)}
-var combobox_empty_listvue_type_template_id_ee5abe2c_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox_empty-list.vue?vue&type=template&id=53681200&
+var combobox_empty_listvue_type_template_id_53681200_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ol',{staticClass:"d-p0",attrs:{"data-qa":"dt-combobox-empty-list"}},[_vm._t("default",function(){return [_c('dt-list-item',{class:['dt-empty-list-item', _vm.itemClass],attrs:{"role":"option","navigation-type":"none","type":"custom"}},[_c('span',[_vm._v(_vm._s(_vm.message))])])]})],2)}
+var combobox_empty_listvue_type_template_id_53681200_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js&
@@ -5460,6 +5639,9 @@ var combobox_empty_listvue_type_template_id_ee5abe2c_staticRenderFns = []
 //
 //
 //
+//
+//
+//
 
 /* harmony default export */ const combobox_empty_listvue_type_script_lang_js_ = ({
   name: 'ComboboxEmptyList',
@@ -5473,23 +5655,38 @@ var combobox_empty_listvue_type_template_id_ee5abe2c_staticRenderFns = []
     message: {
       type: String,
       required: true
+    },
+
+    /**
+     * Additional class name for the empty list element.
+     * Can accept all of String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    itemClass: {
+      type: [String, Object, Array],
+      default: ''
     }
   }
 });
 ;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js&
  /* harmony default export */ const combobox_combobox_empty_listvue_type_script_lang_js_ = (combobox_empty_listvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox_empty-list.vue?vue&type=style&index=0&lang=less&
+var combobox_empty_listvue_type_style_index_0_lang_less_ = __webpack_require__(969);
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=style&index=0&lang=less&
+
 ;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue
 
 
 
+;
 
 
 /* normalize component */
-;
+
 var combobox_empty_list_component = normalizeComponent(
   combobox_combobox_empty_listvue_type_script_lang_js_,
-  combobox_empty_listvue_type_template_id_ee5abe2c_render,
-  combobox_empty_listvue_type_template_id_ee5abe2c_staticRenderFns,
+  combobox_empty_listvue_type_template_id_53681200_render,
+  combobox_empty_listvue_type_template_id_53681200_staticRenderFns,
   false,
   null,
   null,
@@ -5544,6 +5741,9 @@ var combobox_empty_list_component = normalizeComponent(
 //
 //
 //
+//
+//
+//
 
 
 
@@ -5649,6 +5849,16 @@ var combobox_empty_list_component = normalizeComponent(
     emptyStateMessage: {
       type: String,
       default: ''
+    },
+
+    /**
+     * Additional class name for the empty list element.
+     * Can accept all of String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    emptyStateClass: {
+      type: [String, Object, Array],
+      default: ''
     }
   },
   emits: [
@@ -5835,6 +6045,10 @@ var combobox_empty_list_component = normalizeComponent(
     },
 
     validateEmptyListProps() {
+      if (this.$slots.emptyListItem) {
+        return;
+      }
+
       if (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) {
         console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
       empty message.`);
@@ -5855,8 +6069,8 @@ var combobox_empty_list_component = normalizeComponent(
 ;
 var combobox_component = normalizeComponent(
   combobox_comboboxvue_type_script_lang_js_,
-  comboboxvue_type_template_id_397ad57a_render,
-  comboboxvue_type_template_id_397ad57a_staticRenderFns,
+  comboboxvue_type_template_id_ff49fc2c_render,
+  comboboxvue_type_template_id_ff49fc2c_staticRenderFns,
   false,
   null,
   null,
@@ -19931,9 +20145,9 @@ var combobox_multi_select_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=7983be04&
-var callbar_buttonvue_type_template_id_7983be04_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs-100","width":"8.4rem"}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
-var callbar_buttonvue_type_template_id_7983be04_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=739cffb4&
+var callbar_buttonvue_type_template_id_739cffb4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs-100","width":"8.4rem"}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
+var callbar_buttonvue_type_template_id_739cffb4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js&
@@ -20085,8 +20299,8 @@ var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(759);
 
 var callbar_button_component = normalizeComponent(
   callbar_button_callbar_buttonvue_type_script_lang_js_,
-  callbar_buttonvue_type_template_id_7983be04_render,
-  callbar_buttonvue_type_template_id_7983be04_staticRenderFns,
+  callbar_buttonvue_type_template_id_739cffb4_render,
+  callbar_buttonvue_type_template_id_739cffb4_staticRenderFns,
   false,
   null,
   null,