@dialpad/dialtone-vue 3.56.1 → 3.57.0

package/dist/dialtone-vue.umd.js

@@ -1211,6 +1211,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRecipeGroupedChip": () => (/* reexport */ grouped_chip),
   "DtRecipeIvrNode": () => (/* reexport */ ivr_node),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
+  "DtRecipeUnreadChip": () => (/* reexport */ unread_chip),
   "DtRootLayout": () => (/* reexport */ root_layout),
   "DtScroller": () => (/* reexport */ DtScroller),
   "DtSelectMenu": () => (/* reexport */ select_menu),
@@ -1277,6 +1278,8 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
   "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
+  "UNREAD_BADGE_DIRECTIONS": () => (/* reexport */ UNREAD_BADGE_DIRECTIONS),
+  "UNREAD_BADGE_KINDS": () => (/* reexport */ UNREAD_BADGE_KINDS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "VALID_WIDTH_SIZE": () => (/* reexport */ VALID_WIDTH_SIZE),
   "filterFormattedMessages": () => (/* reexport */ filterFormattedMessages),
@@ -1305,7 +1308,7 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/avatar/avatar.vue?vue&type=template&id=284ea17a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/avatar/avatar.vue?vue&type=template&id=0694ee28
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
@@ -1337,7 +1340,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-presence"
   }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 14, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=284ea17a
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=0694ee28
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1912,13 +1915,19 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 
   methods: {
     async init() {
+      var _this$$refs$canvas;
+
       if (this.initializing) return;
       this.kind = null;
       await this.$nextTick();
-      const firstChild = this.$refs.canvas.children[0] || this.$refs.canvas;
+      const firstChild = ((_this$$refs$canvas = this.$refs.canvas) === null || _this$$refs$canvas === void 0 ? void 0 : _this$$refs$canvas.children[0]) || this.$refs.canvas;
       this.formatInitials(this.initials);
-      this.setKind(firstChild);
-      this.kindHandler(firstChild);
+
+      if (firstChild) {
+        this.setKind(firstChild);
+        this.kindHandler(firstChild);
+      }
+
       this.initializing = true;
       await this.$nextTick();
       this.initializing = false;
@@ -2049,10 +2058,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=284ea17a&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=0694ee28&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=284ea17a&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=0694ee28&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -12772,18 +12781,18 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/image_viewer/image_viewer.vue?vue&type=template&id=9b4c7502
 
-const image_viewervue_type_template_id_2229fad0_hoisted_1 = ["src", "alt"];
-const image_viewervue_type_template_id_2229fad0_hoisted_2 = ["aria-hidden"];
-const image_viewervue_type_template_id_2229fad0_hoisted_3 = {
+const image_viewervue_type_template_id_9b4c7502_hoisted_1 = ["src", "alt"];
+const image_viewervue_type_template_id_9b4c7502_hoisted_2 = ["aria-hidden"];
+const image_viewervue_type_template_id_9b4c7502_hoisted_3 = {
   "data-qa": "dt-image-viewer-full",
   class: "d-p0 d-bar0 d-wmx80p d-hmx80p",
   role: "dialog",
   "aria-modal": "true"
 };
-const image_viewervue_type_template_id_2229fad0_hoisted_4 = ["src", "alt"];
-function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props, $setup, $data, $options) {
+const image_viewervue_type_template_id_9b4c7502_hoisted_4 = ["src", "alt"];
+function image_viewervue_type_template_id_9b4c7502_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_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
@@ -12792,19 +12801,19 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     "data-qa": "dt-image-viewer-preview",
     "aria-label": $props.ariaLabel,
     importance: "clear",
-    onClick: $options.open
+    onClick: $options.openModal
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($props.imageButtonClass),
       src: $props.imageSrc,
       alt: $props.imageAlt
-    }, null, 10, image_viewervue_type_template_id_2229fad0_hoisted_1)]),
+    }, null, 10, image_viewervue_type_template_id_9b4c7502_hoisted_1)]),
     _: 1
-  }, 8, ["aria-label", "onClick"]), $data.show ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
+  }, 8, ["aria-label", "onClick"]), $data.isOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
     key: 0,
     to: "body"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    "aria-hidden": $options.isOpen,
+    "aria-hidden": !$data.isOpen ? 'true' : 'false',
     class: "d-modal",
     "data-qa": "dt-modal"
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners, true), {
@@ -12812,11 +12821,11 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     onMouseleave: _cache[1] || (_cache[1] = $event => $data.showCloseButton = false),
     onFocusin: _cache[2] || (_cache[2] = $event => $data.showCloseButton = true),
     onFocusout: _cache[3] || (_cache[3] = $event => $data.showCloseButton = false)
-  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_2229fad0_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_9b4c7502_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
     class: "d-wmx100p d-hmx100p",
     src: $props.imageSrc,
     alt: $props.imageAlt
-  }, null, 8, image_viewervue_type_template_id_2229fad0_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
+  }, null, 8, image_viewervue_type_template_id_9b4c7502_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
     name: "fade"
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
@@ -12838,9 +12847,9 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
       _: 1
     }, 8, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 1
-  })], 16, image_viewervue_type_template_id_2229fad0_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+  })], 16, image_viewervue_type_template_id_9b4c7502_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=9b4c7502
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
 
@@ -12855,6 +12864,18 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
   },
   mixins: [modal],
   props: {
+    /**
+     * Controls whether the image modal is shown. Leaving this null will have the image modal
+     * trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+
     /**
      * URL of the image to be shown
      */
@@ -12896,19 +12917,28 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
       required: true
     }
   },
+  emits: [
+  /**
+   * Emitted when popover is shown or hidden
+   *
+   * @event opened
+   * @type {Boolean}
+   */
+  'opened',
+  /**
+   * Event fired to sync the open prop with the parent component
+   * @event update:open
+   */
+  'update:open'],
 
   data() {
     return {
-      show: false,
-      showCloseButton: true
+      showCloseButton: true,
+      isOpen: false
     };
   },
 
   computed: {
-    isOpen() {
-      return `${!this.show}`;
-    },
-
     modalListeners() {
       return {
         click: event => {
@@ -12931,7 +12961,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
 
   },
   watch: {
-    show: {
+    isOpen: {
       immediate: true,
 
       handler(isShowing) {
@@ -12947,19 +12977,38 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
         }
       }
 
+    },
+    open: {
+      handler: function (open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
     }
   },
   methods: {
-    open() {
-      this.show = true;
+    openModal() {
+      // Has custom control passed in
+      if (this.open !== null) {
+        return;
+      }
+
+      this.isOpen = true;
       this.showCloseButton = true;
+      this.$emit('opened', true);
       setTimeout(() => {
         this.focusAfterOpen();
       });
     },
 
     close() {
-      this.show = false;
+      this.isOpen = false;
+      this.$emit('opened', false);
+
+      if (this.open !== null) {
+        this.$emit('update:open', false);
+      }
     },
 
     focusAfterOpen() {
@@ -12969,7 +13018,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     },
 
     trapFocus(e) {
-      if (this.show) {
+      if (this.isOpen) {
         this.focusTrappedTabPress(e);
       }
     }
@@ -12984,7 +13033,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
 
 
 ;
-const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_2229fad0_render]])
+const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_9b4c7502_render]])
 
 /* harmony default export */ const image_viewer = (image_viewer_exports_);
 ;// CONCATENATED MODULE: ./components/image_viewer/index.js
@@ -16730,27 +16779,27 @@ const checkbox_group_exports_ = checkbox_groupvue_type_script_lang_js;
 /* harmony default export */ const checkbox_group = (checkbox_group_exports_);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/chip/chip.vue?vue&type=template&id=42f677c2
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/chip/chip.vue?vue&type=template&id=790baeaf
 
-const chipvue_type_template_id_42f677c2_hoisted_1 = {
+const chipvue_type_template_id_790baeaf_hoisted_1 = {
   class: "d-chip"
 };
-const chipvue_type_template_id_42f677c2_hoisted_2 = {
+const chipvue_type_template_id_790baeaf_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_42f677c2_hoisted_3 = {
+const chipvue_type_template_id_790baeaf_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_42f677c2_hoisted_4 = ["id"];
-function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup, $data, $options) {
+const chipvue_type_template_id_790baeaf_hoisted_4 = ["id"];
+function chipvue_type_template_id_790baeaf_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   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.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_1, [((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.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_1, [((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.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     type: $props.interactive && 'button',
     class: $options.chipClasses(),
@@ -16758,12 +16807,12 @@ function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup,
     "aria-labelledby": $props.ariaLabel ? undefined : `${$props.id}-content`,
     "aria-label": $props.ariaLabel
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners)), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.hasSlotContent(_ctx.$slots.icon) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.hasSlotContent(_ctx.$slots.icon) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 2,
       id: `${$props.id}-content`,
       "data-qa": "dt-chip-label",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_42f677c2_hoisted_4)) : (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, chipvue_type_template_id_790baeaf_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 3
   }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$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: 0
@@ -16780,7 +16829,7 @@ function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup,
     _: 1
   }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=42f677c2
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=790baeaf
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
@@ -16954,7 +17003,7 @@ const CHIP_ICON_SIZES = {
   },
   methods: {
     chipClasses() {
-      return [this.$attrs['grouped-chip'] ? ['d-chip', ...this.labelClass] : 'd-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+      return [this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label', CHIP_SIZE_MODIFIERS[this.size], this.labelClass];
     },
 
     chipCloseButtonClasses() {
@@ -16977,7 +17026,7 @@ const CHIP_ICON_SIZES = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_42f677c2_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_790baeaf_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -21504,9 +21553,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-82.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=a276c32c
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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=b3920b20
 
-function callbar_buttonvue_type_template_id_a276c32c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_b3920b20_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");
@@ -21536,7 +21585,7 @@ function callbar_buttonvue_type_template_id_a276c32c_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=a276c32c
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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
 
@@ -21648,7 +21697,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
         'd-btn--icon-only': this.circle,
         'dt-recipe-callbar-button--active': this.active,
         'dt-recipe-callbar-button--danger': this.danger,
-        'd-btn--disabled': this.disabled,
+        'd-btn--disabled d-bgc-transparent': this.disabled,
         'd-fc-primary': !this.disabled
       }];
     },
@@ -21674,10 +21723,10 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=a276c32c&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=a276c32c&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -21687,7 +21736,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_a276c32c_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_b3920b20_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
@@ -24000,6 +24049,107 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 /* harmony default export */ const contact_row = (contact_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/index.js
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/leftbar/unread_chip/unread_chip.vue?vue&type=template&id=46efd8e7
+
+const unread_chipvue_type_template_id_46efd8e7_hoisted_1 = {
+  "data-qa": "dt-leftbar-unread-chip__label"
+};
+function unread_chipvue_type_template_id_46efd8e7_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
+
+  const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    class: ['dt-leftbar-unread-chip', `dt-leftbar-unread-chip__${$props.kind}`],
+    "data-qa": "dt-leftbar-unread-chip",
+    "hide-close": true
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.unreadChipListeners)), {
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: `arrow-${$props.direction}`,
+      size: "300"
+    }, null, 8, ["name"])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", unread_chipvue_type_template_id_46efd8e7_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])]),
+    _: 3
+  }, 16, ["class"]);
+}
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=template&id=46efd8e7
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip_constants.js
+const UNREAD_BADGE_DIRECTIONS = ['up', 'down'];
+const UNREAD_BADGE_KINDS = ['mentions', 'messages'];
+/* harmony default export */ const unread_chip_constants = ({
+  UNREAD_BADGE_DIRECTIONS,
+  UNREAD_BADGE_KINDS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ const unread_chipvue_type_script_lang_js = ({
+  name: 'DtRecipeUnreadChip',
+  components: {
+    DtIcon: icon,
+    DtChip: chip
+  },
+  props: {
+    /**
+     * The kind of unread chip which determines the styling
+     * @values 'mentions', 'messages'
+     **/
+    kind: {
+      type: String,
+      required: true,
+      validator: kind => UNREAD_BADGE_KINDS.includes(kind)
+    },
+
+    /**
+     * The direction of the arrow icon
+     * @values 'up', 'down'
+     **/
+    direction: {
+      type: String,
+      required: true,
+      validator: dir => UNREAD_BADGE_DIRECTIONS.includes(dir)
+    }
+  },
+  emits: [
+  /**
+   * Native click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
+  computed: {
+    unreadChipListeners() {
+      return {
+        click: event => this.$emit('click', event)
+      };
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=style&index=0&id=46efd8e7&lang=less
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=style&index=0&id=46efd8e7&lang=less
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue
+
+
+
+
+;
+
+
+const unread_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(unread_chipvue_type_script_lang_js, [['render',unread_chipvue_type_template_id_46efd8e7_render]])
+
+/* harmony default export */ const unread_chip = (unread_chip_exports_);
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/index.js
+
+
 ;// CONCATENATED MODULE: ./common/mixins/index.js
 
 
@@ -24058,6 +24208,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
  // Mixins
 
  // Constants