@dialpad/dialtone-vue 3.42.3 → 3.44.0

package/dist/dialtone-vue.common.js

@@ -1281,31 +1281,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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
@@ -1516,6 +1525,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,
@@ -1525,7 +1541,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/presence/presence.vue?vue&type=template&id=85037b42
 
@@ -1613,11 +1630,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',
@@ -1625,6 +1637,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'
@@ -1643,11 +1660,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-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=script&lang=js
 
@@ -1730,6 +1749,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)
     }
   },
 
@@ -1747,6 +1785,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;
     },
@@ -1755,6 +1800,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 {
@@ -1763,6 +1812,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;
     }
 
   },
@@ -1780,31 +1833,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;
 
@@ -1871,8 +1939,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);
@@ -1883,10 +1951,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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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
 
@@ -1911,7 +1979,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"
 };
@@ -1924,7 +1992,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);
@@ -4144,9 +4212,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/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', {
@@ -4167,13 +4237,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 = {
@@ -4189,17 +4267,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/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 = {
@@ -4215,16 +4293,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-40.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
 
@@ -4240,10 +4318,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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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
 
@@ -4253,13 +4331,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-40.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
@@ -4268,7 +4347,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
   },
 
   /**
@@ -4329,6 +4409,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: [
@@ -4442,10 +4530,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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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
 
@@ -4455,7 +4543,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
@@ -5733,22 +5821,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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",
@@ -5769,18 +5855,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}`,
@@ -5795,7 +5878,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
     }), {
@@ -5803,18 +5886,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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,
@@ -5829,9 +5913,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-40.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 = ({
@@ -5876,6 +5960,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     *
    ******************/
@@ -5950,10 +6050,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-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.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-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.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
 
@@ -5963,23 +6063,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/lazy_show/lazy_show.vue?vue&type=script&lang=js
 /**
@@ -6030,6 +6132,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     *
    ******************/
@@ -6048,74 +6163,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-40.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
@@ -6127,10 +6185,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.
@@ -6257,6 +6313,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);
     }
 
   },
@@ -6318,7 +6378,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
@@ -6383,11 +6443,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=4654097b
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=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");
@@ -6401,7 +6461,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
@@ -6433,7 +6493,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,
@@ -6496,7 +6556,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) {
@@ -11664,11 +11724,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();
       }
     }
 
@@ -11859,6 +11917,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) {
@@ -11867,7 +11926,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);
@@ -11984,10 +12044,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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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
 
@@ -11997,7 +12057,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
@@ -17931,33 +17991,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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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 = {
@@ -18057,21 +18128,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;
     }
 
   },
@@ -18105,10 +18174,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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.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
 
@@ -18118,7 +18187,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-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=script&lang=js