@dialpad/dialtone-vue 3.42.3 → 3.44.0

package/dist/dialtone-vue.umd.js

@@ -1291,31 +1291,40 @@ 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=3cb27068
+;// 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=4cb798be
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
-  key: 1
+  ref: "canvas",
+  class: "d-avatar__canvas"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "d-avatar__count",
+  "data-qa": "dt-avatar-count"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_presence = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-presence");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     id: $props.id,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-avatar', $data.AVATAR_KIND_MODIFIERS[$data.kind], $data.AVATAR_SIZE_MODIFIERS[$props.size], $props.avatarClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.avatarClasses),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.initialKindStyle),
     "data-qa": "dt-avatar"
-  }, [$options.showDefaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_2, [$options.showDefaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
     key: 0
-  }) : $options.showInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.formattedInitials), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.presence ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    key: 2,
+  }) : $options.showInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    key: 1,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($data.AVATAR_KIND_MODIFIERS.initials)
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.formattedInitials), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 512), $options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_3, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedGroup), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.presence && !$options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    key: 1,
     presence: $props.presence,
     class: ['d-avatar__presence', $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]
   }, $props.presenceProps, {
     "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=3cb27068
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=4cb798be
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1526,6 +1535,13 @@ const kebabCaseToPascalCase = string => {
 const pascalCaseToKebabCase = string => {
   return string.replace(/\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase()).replace(/^-/, '');
 };
+const extractVueListeners = attrs => {
+  const listeners = Object.entries(attrs).filter(_ref => {
+    let [key] = _ref;
+    return key.startsWith('on');
+  });
+  return Object.fromEntries(listeners);
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   getRandomElement,
@@ -1535,7 +1551,8 @@ const pascalCaseToKebabCase = string => {
   getValidationState,
   htmlFragment,
   flushPromises,
-  kebabCaseToPascalCase
+  kebabCaseToPascalCase,
+  extractVueListeners
 });
 ;// 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/presence/presence.vue?vue&type=template&id=85037b42
 
@@ -1623,11 +1640,6 @@ const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(presencevue_typ
 var node_modules_seedrandom = __webpack_require__(377);
 var seedrandom_default = /*#__PURE__*/__webpack_require__.n(node_modules_seedrandom);
 ;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
-const AVATAR_KIND_MODIFIERS = {
-  default: '',
-  icon: 'd-avatar--icon',
-  initials: 'd-avatar--initials'
-};
 const AVATAR_SIZE_MODIFIERS = {
   xs: 'd-avatar--xs',
   sm: 'd-avatar--sm',
@@ -1635,6 +1647,11 @@ const AVATAR_SIZE_MODIFIERS = {
   lg: 'd-avatar--lg',
   xl: 'd-avatar--xl'
 };
+const AVATAR_KIND_MODIFIERS = {
+  default: '',
+  icon: 'd-avatar__icon',
+  initials: 'd-avatar__initials'
+};
 const AVATAR_PRESENCE_SIZE_MODIFIERS = {
   md: 'd-avatar__presence--md',
   lg: 'd-avatar__presence--lg'
@@ -1653,11 +1670,13 @@ const GRADIENT_COLORS = {
 };
 const MAX_GRADIENT_COLORS = 3;
 const MAX_GRADIENT_COLORS_100 = 2;
+const AVATAR_GROUP_VALIDATOR = group => group > 1;
 /* harmony default export */ const avatar_constants = ({
   AVATAR_KIND_MODIFIERS,
   AVATAR_SIZE_MODIFIERS,
   AVATAR_ICON_SIZES,
-  AVATAR_ANGLES
+  AVATAR_ANGLES,
+  AVATAR_GROUP_VALIDATOR
 });
 ;// 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/avatar/avatar.vue?vue&type=script&lang=js
 
@@ -1740,6 +1759,25 @@ const MAX_GRADIENT_COLORS_100 = 2;
     initials: {
       type: String,
       default: ''
+    },
+
+    /**
+     * Determines whether to show a gradient background for the avatar.
+     */
+    gradient: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Determines whether to show a group avatar.
+     * Limit to 2 digits max, more than 99 will be rendered as “99+”.
+     * if the number is 1 or less it would just show the regular avatar as if group had not been set.
+     */
+    group: {
+      type: Number,
+      default: undefined,
+      validator: group => AVATAR_GROUP_VALIDATOR(group)
     }
   },
 
@@ -1757,6 +1795,13 @@ const MAX_GRADIENT_COLORS_100 = 2;
   },
 
   computed: {
+    avatarClasses() {
+      return ['d-avatar', AVATAR_SIZE_MODIFIERS[this.size], this.avatarClass, {
+        'd-avatar--no-gradient': !this.gradient,
+        'd-avatar--group': this.showGroup
+      }];
+    },
+
     showDefaultSlot() {
       return this.kind !== 'initials' && this.imageLoadedSuccessfully !== false;
     },
@@ -1765,6 +1810,10 @@ const MAX_GRADIENT_COLORS_100 = 2;
       return this.kind === 'initials' || this.initials;
     },
 
+    showGroup() {
+      return AVATAR_GROUP_VALIDATOR(this.group);
+    },
+
     initialKindStyle() {
       const randomGradientColorStops = this.randomizeGradientColorStops();
       return {
@@ -1773,6 +1822,10 @@ const MAX_GRADIENT_COLORS_100 = 2;
         '--avatar-gradient-stop-2': `var(--${randomGradientColorStops[1]})`,
         '--avatar-gradient-stop-3': `var(--${randomGradientColorStops[2]})`
       };
+    },
+
+    formattedGroup() {
+      return this.group > 99 ? '99+' : this.group;
     }
 
   },
@@ -1790,31 +1843,46 @@ const MAX_GRADIENT_COLORS_100 = 2;
 
   methods: {
     init() {
-      const firstChild = this.$el.children[0] || this.$el;
+      const firstChild = this.$refs.canvas.children[0] || this.$refs.canvas;
+
+      if (!firstChild) {
+        return;
+      }
 
-      if (firstChild) {
-        this.setKind(firstChild);
+      this.setKind(firstChild);
+      this.kindHandler(firstChild);
+    },
 
-        if (this.kind === 'image') {
-          firstChild.classList.add('d-avatar__image');
+    kindHandler(el) {
+      switch (this.kind) {
+        case 'image':
+          el.classList.add('d-avatar__image');
           this.validateImageAttrsPresence();
-          firstChild.addEventListener('error', () => {
-            this.formatInitials(this.initials);
-            this.imageLoadedSuccessfully = false;
-          });
-          firstChild.addEventListener('load', () => {
-            firstChild.classList.add('d-avatar--image-loaded');
-            this.imageLoadedSuccessfully = true;
-          });
-        }
+          this.setImageListeners(el);
+          break;
+
+        case 'icon':
+          el.classList.add(AVATAR_KIND_MODIFIERS.icon);
+          break;
 
-        if (this.kind === 'initials') {
-          this.slottedInitials = firstChild.textContent;
+        case 'initials':
+          this.slottedInitials = el.textContent;
           this.formatInitials(this.slottedInitials);
-        }
+          break;
       }
     },
 
+    setImageListeners(el) {
+      el.addEventListener('error', () => {
+        this.formatInitials(this.initials);
+        this.imageLoadedSuccessfully = false;
+      });
+      el.addEventListener('load', () => {
+        el.classList.add('d-avatar--image-loaded');
+        this.imageLoadedSuccessfully = true;
+      });
+    },
+
     formatInitials(initials) {
       if (!initials) return;
 
@@ -1881,8 +1949,8 @@ const MAX_GRADIENT_COLORS_100 = 2;
     },
 
     validateImageAttrsPresence() {
-      const isSrcMissing = !this.$el.children[0].getAttribute('src');
-      const isAltMissing = !this.$el.children[0].getAttribute('alt');
+      const isSrcMissing = !this.$refs.canvas.children[0].getAttribute('src');
+      const isAltMissing = !this.$refs.canvas.children[0].getAttribute('alt');
 
       if (isSrcMissing || isAltMissing) {
         (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.warn)('src and alt attributes are required for image avatars', this);
@@ -1893,10 +1961,10 @@ const MAX_GRADIENT_COLORS_100 = 2;
 });
 ;// 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=3cb27068&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=4cb798be&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=3cb27068&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=4cb798be&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -1921,7 +1989,7 @@ const badgevue_type_template_id_741d001d_hoisted_1 = {
 const badgevue_type_template_id_741d001d_hoisted_2 = {
   class: "d-badge__label"
 };
-const _hoisted_3 = {
+const badgevue_type_template_id_741d001d_hoisted_3 = {
   key: 1,
   class: "d-badge__icon-right"
 };
@@ -1934,7 +2002,7 @@ function badgevue_type_template_id_741d001d_render(_ctx, _cache, $props, $setup,
   }, [$props.iconLeft || $props.type === 'ai' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_741d001d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
     name: $props.iconLeft || 'dialpad-ai',
     size: "200"
-  }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", badgevue_type_template_id_741d001d_hoisted_2, [(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.text), 1)])]), $props.iconRight ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+  }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", badgevue_type_template_id_741d001d_hoisted_2, [(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.text), 1)])]), $props.iconRight ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_741d001d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
     name: $props.iconRight,
     size: "200"
   }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
@@ -4154,9 +4222,11 @@ function combobox_loading_listvue_type_template_id_07d9971d_render(_ctx, _cache,
 }
 ;// CONCATENATED MODULE: ./components/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d
 
-;// 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/list_item/list_item.vue?vue&type=template&id=65cb4fdd
+;// 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/list_item/list_item.vue?vue&type=template&id=28a5ebfc
+
+function list_itemvue_type_template_id_28a5ebfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
-function list_itemvue_type_template_id_65cb4fdd_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)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     class: ['dt-list-item d-ls-none', {
@@ -4177,13 +4247,21 @@ function list_itemvue_type_template_id_65cb4fdd_render(_ctx, _cache, $props, $se
         name: slotName,
         fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, slotName)])
       };
-    })]), 1024)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+    }), $props.selected ? {
+      name: "selected",
+      fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: "check",
+        size: "400",
+        class: "d-ml8"
+      })]),
+      key: "0"
+    } : undefined]), 1024)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
       key: 1
     })]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=65cb4fdd
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=28a5ebfc
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
 const LIST_ITEM_TYPES = {
@@ -4199,17 +4277,17 @@ const LIST_ITEM_NAVIGATION_TYPES = {
   LIST_ITEM_TYPES,
   LIST_ITEM_NAVIGATION_TYPES
 });
-;// 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/list_item/default_list_item.vue?vue&type=template&id=6b1db142
+;// 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/list_item/default_list_item.vue?vue&type=template&id=43d1433f
 
-const default_list_itemvue_type_template_id_6b1db142_hoisted_1 = {
+const default_list_itemvue_type_template_id_43d1433f_hoisted_1 = {
   class: "dt-default-list-item d-fs-200 d-lh-300 d-py4 d-px8 d-d-flex d-ai-center"
 };
-const default_list_itemvue_type_template_id_6b1db142_hoisted_2 = {
+const default_list_itemvue_type_template_id_43d1433f_hoisted_2 = {
   key: 0,
   class: "dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8",
   "data-qa": "dt-default-list-item-left-wrapper"
 };
-const default_list_itemvue_type_template_id_6b1db142_hoisted_3 = {
+const default_list_itemvue_type_template_id_43d1433f_hoisted_3 = {
   class: "d-fl-grow1 d-of-hidden"
 };
 const _hoisted_4 = {
@@ -4225,16 +4303,16 @@ const _hoisted_6 = {
   class: "dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",
   "data-qa": "dt-default-list-item-right-wrapper"
 };
-function default_list_itemvue_type_template_id_6b1db142_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", default_list_itemvue_type_template_id_6b1db142_hoisted_1, [$data.hasSlotContent(_ctx.$slots.left) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", default_list_itemvue_type_template_id_6b1db142_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("section", default_list_itemvue_type_template_id_6b1db142_hoisted_3, [$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)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.subtitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+function default_list_itemvue_type_template_id_43d1433f_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", default_list_itemvue_type_template_id_43d1433f_hoisted_1, [$data.hasSlotContent(_ctx.$slots.left) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", default_list_itemvue_type_template_id_43d1433f_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("section", default_list_itemvue_type_template_id_43d1433f_hoisted_3, [$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)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.subtitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 1,
     "data-qa": "dt-default-list-item-subtitle-wrapper",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-fs-100 d-fc-black-600', {
       'd-mtn2': _ctx.$slots.default
     }])
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.bottom) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), $data.hasSlotContent(_ctx.$slots.right) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", _hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.bottom) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), $data.hasSlotContent(_ctx.$slots.right) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", _hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "selected")]);
 }
-;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=template&id=6b1db142
+;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=template&id=43d1433f
 
 ;// 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/list_item/default_list_item.vue?vue&type=script&lang=js
 
@@ -4250,10 +4328,10 @@ function default_list_itemvue_type_template_id_6b1db142_render(_ctx, _cache, $pr
 });
 ;// CONCATENATED MODULE: ./components/list_item/default_list_item.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/list_item/default_list_item.vue?vue&type=style&index=0&id=6b1db142&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/list_item/default_list_item.vue?vue&type=style&index=0&id=43d1433f&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=style&index=0&id=6b1db142&lang=less
+;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=style&index=0&id=43d1433f&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue
 
@@ -4263,13 +4341,14 @@ function default_list_itemvue_type_template_id_6b1db142_render(_ctx, _cache, $pr
 ;
 
 
-const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(default_list_itemvue_type_script_lang_js, [['render',default_list_itemvue_type_template_id_6b1db142_render]])
+const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(default_list_itemvue_type_script_lang_js, [['render',default_list_itemvue_type_template_id_43d1433f_render]])
 
 /* harmony default export */ const default_list_item = (default_list_item_exports_);
 ;// 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/list_item/list_item.vue?vue&type=script&lang=js
 
 
 
+
 /**
  * A list item is an element that can be used to represent individual items in a list.
  * @see https://dialpad.design/components/list_item.html
@@ -4278,7 +4357,8 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 /* harmony default export */ const list_itemvue_type_script_lang_js = ({
   name: 'ListItem',
   components: {
-    DtDefaultListItem: default_list_item
+    DtDefaultListItem: default_list_item,
+    DtIcon: icon
   },
 
   /**
@@ -4339,6 +4419,14 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       type: String,
       default: LIST_ITEM_NAVIGATION_TYPES.NONE,
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
+    },
+
+    /**
+     * Applies selected styles to the list item
+     */
+    selected: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -4452,10 +4540,10 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 });
 ;// CONCATENATED MODULE: ./components/list_item/list_item.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/list_item/list_item.vue?vue&type=style&index=0&id=65cb4fdd&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/list_item/list_item.vue?vue&type=style&index=0&id=28a5ebfc&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=65cb4fdd&lang=less
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=28a5ebfc&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -4465,7 +4553,7 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 ;
 
 
-const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_65cb4fdd_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_28a5ebfc_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -5743,22 +5831,20 @@ const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxv
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/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/collapsible/collapsible.vue?vue&type=template&id=48280c45
+;// 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/collapsible/collapsible.vue?vue&type=template&id=74cfa30e
 
-const collapsiblevue_type_template_id_48280c45_hoisted_1 = ["id"];
-const collapsiblevue_type_template_id_48280c45_hoisted_2 = ["title"];
-function collapsiblevue_type_template_id_48280c45_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_arrow_accordion_open = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-arrow-accordion-open");
-
-  const _component_icon_arrow_accordion_closed = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-arrow-accordion-closed");
+const collapsiblevue_type_template_id_74cfa30e_hoisted_1 = ["id"];
+const collapsiblevue_type_template_id_74cfa30e_hoisted_2 = ["title"];
+function collapsiblevue_type_template_id_74cfa30e_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");
 
   const _component_dt_collapsible_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-collapsible-lazy-show");
 
-  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)($props.elementType), {
+  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)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     ref: "collapsible"
-  }, {
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.collapsibleListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
       id: !$props.ariaLabelledBy && $options.labelledBy,
       ref: "anchor",
@@ -5779,18 +5865,15 @@ function collapsiblevue_type_template_id_48280c45_render(_ctx, _cache, $props, $
       }),
       onClick: $options.defaultToggleOpen
     }, {
-      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.isOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_icon_arrow_accordion_open, {
-        key: 0,
-        class: "d-svg--size18 d-mr8 d-fl-shrink0"
-      })) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_icon_arrow_accordion_closed, {
-        key: 1,
-        class: "d-svg--size18 d-mr8 d-fl-shrink0"
-      })), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: $data.isOpen ? 'chevron-down' : 'chevron-right',
+        class: "d-icon d-icon--size-300 d-mr8 d-fl-shrink0"
+      }, null, 8, ["name"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
         class: "d-mr-auto d-truncate",
         title: $props.anchorText
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.anchorText), 9, collapsiblevue_type_template_id_48280c45_hoisted_2)]),
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.anchorText), 9, collapsiblevue_type_template_id_74cfa30e_hoisted_2)]),
       _: 1
-    }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])])], 10, collapsiblevue_type_template_id_48280c45_hoisted_1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_collapsible_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])])], 10, collapsiblevue_type_template_id_74cfa30e_hoisted_1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_collapsible_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "contentWrapper",
       "aria-hidden": `${!$data.isOpen}`,
@@ -5805,7 +5888,7 @@ function collapsiblevue_type_template_id_48280c45_render(_ctx, _cache, $props, $
       },
       tabindex: "-1",
       appear: ""
-    }, _ctx.$attrs, {
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.collapsibleListeners), {
       onAfterLeave: $options.onLeaveTransitionComplete,
       onAfterEnter: $options.onEnterTransitionComplete
     }), {
@@ -5813,18 +5896,19 @@ function collapsiblevue_type_template_id_48280c45_render(_ctx, _cache, $props, $
       _: 3
     }, 16, ["id", "aria-hidden", "aria-labelledby", "aria-label", "show", "element-type", "class", "style", "onAfterLeave", "onAfterEnter"])]),
     _: 3
-  }, 512);
+  }, 16);
 }
-;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue?vue&type=template&id=48280c45
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue?vue&type=template&id=74cfa30e
 
-;// 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/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2d7320ae
+;// 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/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2cca40bc
 
-function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache, $props, $setup, $data, $options) {
+function collapsible_lazy_showvue_type_template_id_2cca40bc_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)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     appear: $props.appear,
     "enter-active-class": "enter-active",
     "leave-active-class": "leave-active"
   }, _ctx.$attrs, {
+    css: $options.isCSSEnabled,
     onBeforeEnter: $options.beforeEnter,
     onEnter: $options.enter,
     onAfterEnter: $options.afterEnter,
@@ -5839,9 +5923,9 @@ function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache,
       _: 3
     }, 16)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
     _: 3
-  }, 16, ["appear", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
+  }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
 }
-;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2d7320ae
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2cca40bc
 
 ;// 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/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js
 /* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js = ({
@@ -5886,6 +5970,22 @@ function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache,
     };
   },
 
+  /******************
+   *    COMPUTED    *
+   ******************/
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return "production" !== 'test';
+    }
+
+  },
+
   /******************
    *      WATCH     *
    ******************/
@@ -5960,10 +6060,10 @@ function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache,
 });
 ;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=2d7320ae&lang=css
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=2cca40bc&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=2d7320ae&lang=css
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=2cca40bc&lang=css
 
 ;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue
 
@@ -5973,23 +6073,25 @@ function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache,
 ;
 
 
-const collapsible_lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsible_lazy_showvue_type_script_lang_js, [['render',collapsible_lazy_showvue_type_template_id_2d7320ae_render]])
+const collapsible_lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsible_lazy_showvue_type_script_lang_js, [['render',collapsible_lazy_showvue_type_template_id_2cca40bc_render]])
 
 /* harmony default export */ const collapsible_lazy_show = (collapsible_lazy_show_exports_);
-;// 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/lazy_show/lazy_show.vue?vue&type=template&id=bca72c4e
+;// 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/lazy_show/lazy_show.vue?vue&type=template&id=2bc88a98
 
-function lazy_showvue_type_template_id_bca72c4e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function lazy_showvue_type_template_id_2bc88a98_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)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     name: $props.transition,
     appear: $props.appear
-  }, _ctx.$attrs), {
+  }, _ctx.$attrs, {
+    css: $options.isCSSEnabled
+  }), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(_ctx.$attrs)), [$data.initialized ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
       key: 0
     }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
     _: 3
-  }, 16, ["name", "appear"]);
+  }, 16, ["name", "appear", "css"]);
 }
-;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=template&id=bca72c4e
+;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=template&id=2bc88a98
 
 ;// 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/lazy_show/lazy_show.vue?vue&type=script&lang=js
 /**
@@ -6040,6 +6142,19 @@ function lazy_showvue_type_template_id_bca72c4e_render(_ctx, _cache, $props, $se
     };
   },
 
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return "production" !== 'test';
+    }
+
+  },
+
   /******************
    *      WATCH     *
    ******************/
@@ -6058,74 +6173,17 @@ function lazy_showvue_type_template_id_bca72c4e_render(_ctx, _cache, $props, $se
 
 
 ;
-const lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(lazy_showvue_type_script_lang_js, [['render',lazy_showvue_type_template_id_bca72c4e_render]])
+const lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(lazy_showvue_type_script_lang_js, [['render',lazy_showvue_type_template_id_2bc88a98_render]])
 
 /* harmony default export */ const lazy_show = (lazy_show_exports_);
 ;// CONCATENATED MODULE: ./components/lazy_show/index.js
 
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue?vue&type=template&id=67591df8
-
-
-const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Accordion Open",
-  class: "d-svg d-svg--system d-svg__arrowAccordionOpen",
-  viewBox: "0 0 24 24"
-}
-const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M8.738 8a1 1 0 0 0-.865 1.502l3.262 5.614a1 1 0 0 0 1.73 0l3.262-5.614A1 1 0 0 0 15.262 8H8.738Z" }, null, -1)
-const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_3 = [
-  IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_2
-]
-
-function IconArrowAccordionOpenvue_type_template_id_67591df8_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_1, IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue?vue&type=template&id=67591df8
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue
-
-const script = {}
-
-;
-const IconArrowAccordionOpen_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(script, [['render',IconArrowAccordionOpenvue_type_template_id_67591df8_render]])
-
-/* harmony default export */ const IconArrowAccordionOpen = (IconArrowAccordionOpen_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue?vue&type=template&id=5e7762fe
-
-
-const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Accordion Closed",
-  class: "d-svg d-svg--system d-svg__arrowAccordionClosed",
-  viewBox: "0 0 24 24"
-}
-const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M8 15.262a1 1 0 0 0 1.502.865l5.614-3.262a1 1 0 0 0 0-1.73L9.502 7.873A1 1 0 0 0 8 8.738v6.524Z" }, null, -1)
-const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_3 = [
-  IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_2
-]
-
-function IconArrowAccordionClosedvue_type_template_id_5e7762fe_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_1, IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue?vue&type=template&id=5e7762fe
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue
-
-const IconArrowAccordionClosed_script = {}
-
-;
-const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowAccordionClosed_script, [['render',IconArrowAccordionClosedvue_type_template_id_5e7762fe_render]])
-
-/* harmony default export */ const IconArrowAccordionClosed = (IconArrowAccordionClosed_exports_);
 ;// 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/collapsible/collapsible.vue?vue&type=script&lang=js
 
 
 
 
 
-
 /**
  * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.
  * @see https://dialpad.design/components/collapsible.html
@@ -6137,10 +6195,8 @@ const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default
     DtButton: button_button,
     DtCollapsibleLazyShow: collapsible_lazy_show,
     DtLazyShow: lazy_show,
-    IconArrowAccordionOpen: IconArrowAccordionOpen,
-    IconArrowAccordionClosed: IconArrowAccordionClosed
+    DtIcon: icon
   },
-  inheritAttrs: false,
   props: {
     /**
      * Text that is displayed on the anchor if nothing is passed in the slot.
@@ -6267,6 +6323,10 @@ const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default
       // 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
       return this.ariaLabelledBy || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
+    },
+
+    collapsibleListeners() {
+      return extractVueListeners(this.$attrs);
     }
 
   },
@@ -6328,7 +6388,7 @@ const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default
 
 
 ;
-const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsiblevue_type_script_lang_js, [['render',collapsiblevue_type_template_id_48280c45_render]])
+const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsiblevue_type_script_lang_js, [['render',collapsiblevue_type_template_id_74cfa30e_render]])
 
 /* harmony default export */ const collapsible = (collapsible_exports_);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
@@ -6393,11 +6453,11 @@ function dropdownvue_type_template_id_878a8588_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=878a8588
 
-;// 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/popover/popover.vue?vue&type=template&id=4654097b
+;// 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/popover/popover.vue?vue&type=template&id=6557f2d6
 
-const popovervue_type_template_id_4654097b_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_4654097b_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_4654097b_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_6557f2d6_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_6557f2d6_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_6557f2d6_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");
@@ -6411,7 +6471,7 @@ function popovervue_type_template_id_4654097b_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_4654097b_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_6557f2d6_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
@@ -6443,7 +6503,7 @@ function popovervue_type_template_id_4654097b_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_4654097b_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)({
+    })], 40, popovervue_type_template_id_6557f2d6_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,
@@ -6506,7 +6566,7 @@ function popovervue_type_template_id_4654097b_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=4654097b
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=6557f2d6
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11674,11 +11734,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
-        this.preventScrolling();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
-        this.enableScrolling();
       }
     }
 
@@ -11869,6 +11927,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
+      this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -11877,7 +11936,8 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     async onEnterTransitionComplete() {
-      this.focusInitialElement(); // await next tick in case the user wants to change focus themselves.
+      this.focusInitialElement();
+      this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
       this.$emit('opened', true, this.$refs.popover__content);
@@ -11994,10 +12054,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.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/popover/popover.vue?vue&type=style&index=0&id=4654097b&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/popover/popover.vue?vue&type=style&index=0&id=6557f2d6&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=4654097b&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=6557f2d6&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -12007,7 +12067,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_4654097b_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_6557f2d6_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -17941,33 +18001,44 @@ function root_layoutvue_type_template_id_115594cd_render(_ctx, _cache, $props, $
 }
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=115594cd
 
-;// 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/root_layout/root_layout_body.vue?vue&type=template&id=e95be78c
+;// 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/root_layout/root_layout_body.vue?vue&type=template&id=2bcc4e0e
 
-function root_layout_bodyvue_type_template_id_e95be78c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layout_bodyvue_type_template_id_2bcc4e0e_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", {
     ref: "root-layout-body",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', 'd-fl-grow1', $options.bodyClasses]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', {
+      'd-of-y-auto': $options.isInMobileMode
+    }, 'd-fl-grow1', $options.bodyClasses]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      'height': $options.isInMobileMode ? $options.mainHeight : null
+    }),
     "data-qa": "root-layout-body"
   }, [$data.hasSlotContent(_ctx.$slots.sidebar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("aside", {
     key: 0,
     ref: "root-layout-sidebar",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__sidebar', $props.sidebarClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__sidebar', {
+      'd-of-y-auto': !$options.isInMobileMode
+    }, $props.sidebarClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
-      'flex-basis': $props.sidebarWidth
+      'flex-basis': $props.sidebarWidth,
+      'height': !$options.isInMobileMode ? $options.mainHeight : null
     }),
     "data-qa": "root-layout-sidebar"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "sidebar")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.content) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("main", {
     key: 1,
     ref: "root-layout-content",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__content', $props.contentClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__content', {
+      'd-of-y-auto': !$options.isInMobileMode
+    }, $props.contentClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
       'min-inline-size': $props.contentWrapWidthPercent,
-      'height': $options.mainHeight
+      'height': !$options.isInMobileMode ? $options.mainHeight : null
     }),
-    "data-qa": "root-layout-content"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+    "data-qa": "root-layout-content",
+    tabindex: "0"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 6);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=e95be78c
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=2bcc4e0e
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
 const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
@@ -18067,21 +18138,19 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 
     mainHeight() {
       if (this.fixed) {
-        return `calc(${this.documentHeight}
-          - (${this.headerHeight} + ${this.extraSidebarHeight} + ${this.footerHeight}))`;
+        return `calc(${this.documentHeight} - (${this.headerHeight} + ${this.footerHeight}))`;
       }
 
       return null;
     },
 
-    // When the sidebar is above the header due to contentWrapWidthPercent, it needs to be excluded
-    // in the main content height calculation. Otherwise it is 0 since it is at equal height with the main content.
-    extraSidebarHeight() {
+    // When the sidebar is above the header due to contentWrapWidthPercent it is considered to be in mobile mode.
+    isInMobileMode() {
       if (this.contentTop > this.sidebarTop) {
-        return this.$refs['root-layout-sidebar'].offsetHeight + 'px';
+        return true;
       }
 
-      return '0px';
+      return false;
     }
 
   },
@@ -18115,10 +18184,10 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.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/root_layout/root_layout_body.vue?vue&type=style&index=0&id=e95be78c&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/root_layout/root_layout_body.vue?vue&type=style&index=0&id=2bcc4e0e&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=e95be78c&lang=less
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=2bcc4e0e&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue
 
@@ -18128,7 +18197,7 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 ;
 
 
-const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_e95be78c_render]])
+const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_2bcc4e0e_render]])
 
 /* harmony default export */ const root_layout_body = (root_layout_body_exports_);
 ;// 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/root_layout/root_layout.vue?vue&type=script&lang=js