@dialpad/dialtone-vue 3.58.0 → 3.59.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [3.59.1](https://github.com/dialpad/dialtone-vue/compare/v3.59.0...v3.59.1) (2023-04-06)
+
+
+### Bug Fixes
+
+* **Popover:** losing focus - vue3 ([#897](https://github.com/dialpad/dialtone-vue/issues/897)) ([0315100](https://github.com/dialpad/dialtone-vue/commit/031510009fd9740ad67d3d44fcee3832fcee6d95))
+
+# [3.59.0](https://github.com/dialpad/dialtone-vue/compare/v3.58.0...v3.59.0) (2023-04-06)
+
+
+### Features
+
+* **Callbar Button:** add importance prop ([#887](https://github.com/dialpad/dialtone-vue/issues/887)) ([eb052e1](https://github.com/dialpad/dialtone-vue/commit/eb052e14642f886283a256fa58ae37a16af10330))
+* **Feed Items:** create feed item time pill (vue3) ([#895](https://github.com/dialpad/dialtone-vue/issues/895)) ([7b0558e](https://github.com/dialpad/dialtone-vue/commit/7b0558ee8403183e0c1d7cdc0d8bc3559e8b803c))
+
 # [3.58.0](https://github.com/dialpad/dialtone-vue/compare/v3.57.1...v3.58.0) (2023-04-04)
 
 

package/dist/dialtone-vue.common.js

@@ -6638,11 +6638,11 @@ function dropdownvue_type_template_id_505a060a_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=505a060a
 
-;// 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=230a23f4
+;// 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=2900cc6f
 
-const popovervue_type_template_id_230a23f4_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_230a23f4_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_230a23f4_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_2900cc6f_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_2900cc6f_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_2900cc6f_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");
@@ -6656,7 +6656,7 @@ function popovervue_type_template_id_230a23f4_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_230a23f4_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_2900cc6f_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
@@ -6688,7 +6688,7 @@ function popovervue_type_template_id_230a23f4_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_230a23f4_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_2900cc6f_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,
@@ -6751,7 +6751,7 @@ function popovervue_type_template_id_230a23f4_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=230a23f4
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=2900cc6f
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -12079,9 +12079,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
     *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
-    async preventScrolling() {
-      await this.$nextTick();
-
+    preventScrolling() {
       if (this.modal) {
         const element = this.anchorEl.closest('body, .tippy-box');
 
@@ -12099,23 +12097,19 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     /*
     * Resets the prevent scrolling properties set in preventScrolling() back to normal.
     **/
-    async enableScrolling() {
-      await this.$nextTick();
-
-      if (this.modal) {
-        var _element$tagName;
+    enableScrolling() {
+      var _element$tagName;
 
-        const element = this.anchorEl.closest('body, .tippy-box');
-        if (!element) return;
+      const element = this.anchorEl.closest('body, .tippy-box');
+      if (!element) return;
 
-        if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
-          element.classList.remove('d-of-hidden');
-          this.tip.setProps({
-            offset: this.offset
-          });
-        } else {
-          element.classList.remove('d-zi-popover');
-        }
+      if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
+        element.classList.remove('d-of-hidden');
+        this.tip.setProps({
+          offset: this.offset
+        });
+      } else {
+        element.classList.remove('d-zi-popover');
       }
     },
 
@@ -12144,10 +12138,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
 
         await this.$nextTick();
+        this.enableScrolling();
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -12156,10 +12150,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     async onEnterTransitionComplete() {
-      this.focusInitialElement();
-      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      this.focusInitialElement(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
+      this.preventScrolling();
       this.$emit('opened', true, this.$refs.popover__content);
 
       if (this.open !== null) {
@@ -12273,10 +12267,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=230a23f4&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=2900cc6f&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=230a23f4&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=2900cc6f&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -12286,7 +12280,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_230a23f4_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_2900cc6f_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -21559,9 +21553,9 @@ const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=3c417651
 
-function callbar_buttonvue_type_template_id_b3920b20_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_3c417651_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -21575,7 +21569,7 @@ function callbar_buttonvue_type_template_id_b3920b20_render(_ctx, _cache, $props
         'd-c-not-allowed': $props.disabled
       })
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
-      importance: $props.circle ? 'outlined' : 'clear',
+      importance: $options.buttonImportance,
       kind: "muted",
       "icon-position": "top",
       "aria-disabled": $props.disabled,
@@ -21591,7 +21585,7 @@ function callbar_buttonvue_type_template_id_b3920b20_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=3c417651
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
@@ -21694,6 +21688,15 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       type: String,
       default: 'xl',
       validator: size => VALID_WIDTH_SIZE.includes(size)
+    },
+
+    /**
+     * The fill and outline of the button associated with its visual importance.
+     * @values clear, outlined, primary
+     */
+    importance: {
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -21723,16 +21726,24 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
         default:
           return '8.4rem';
       }
+    },
+
+    buttonImportance() {
+      if (this.importance) {
+        return this.importance;
+      }
+
+      return this.circle ? 'outlined' : 'clear';
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-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]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&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]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=3c417651&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=3c417651&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -21742,7 +21753,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_b3920b20_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_3c417651_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js

package/dist/dialtone-vue.umd.js

@@ -6648,11 +6648,11 @@ function dropdownvue_type_template_id_505a060a_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=505a060a
 
-;// 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=230a23f4
+;// 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=2900cc6f
 
-const popovervue_type_template_id_230a23f4_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_230a23f4_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_230a23f4_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_2900cc6f_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_2900cc6f_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_2900cc6f_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");
@@ -6666,7 +6666,7 @@ function popovervue_type_template_id_230a23f4_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_230a23f4_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_2900cc6f_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
@@ -6698,7 +6698,7 @@ function popovervue_type_template_id_230a23f4_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_230a23f4_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_2900cc6f_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,
@@ -6761,7 +6761,7 @@ function popovervue_type_template_id_230a23f4_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=230a23f4
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=2900cc6f
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -12089,9 +12089,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
     *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
-    async preventScrolling() {
-      await this.$nextTick();
-
+    preventScrolling() {
       if (this.modal) {
         const element = this.anchorEl.closest('body, .tippy-box');
 
@@ -12109,23 +12107,19 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     /*
     * Resets the prevent scrolling properties set in preventScrolling() back to normal.
     **/
-    async enableScrolling() {
-      await this.$nextTick();
-
-      if (this.modal) {
-        var _element$tagName;
+    enableScrolling() {
+      var _element$tagName;
 
-        const element = this.anchorEl.closest('body, .tippy-box');
-        if (!element) return;
+      const element = this.anchorEl.closest('body, .tippy-box');
+      if (!element) return;
 
-        if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
-          element.classList.remove('d-of-hidden');
-          this.tip.setProps({
-            offset: this.offset
-          });
-        } else {
-          element.classList.remove('d-zi-popover');
-        }
+      if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
+        element.classList.remove('d-of-hidden');
+        this.tip.setProps({
+          offset: this.offset
+        });
+      } else {
+        element.classList.remove('d-zi-popover');
       }
     },
 
@@ -12154,10 +12148,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
 
         await this.$nextTick();
+        this.enableScrolling();
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -12166,10 +12160,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     async onEnterTransitionComplete() {
-      this.focusInitialElement();
-      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      this.focusInitialElement(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
+      this.preventScrolling();
       this.$emit('opened', true, this.$refs.popover__content);
 
       if (this.open !== null) {
@@ -12283,10 +12277,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=230a23f4&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=2900cc6f&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=230a23f4&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=2900cc6f&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -12296,7 +12290,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_230a23f4_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_2900cc6f_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -21569,9 +21563,9 @@ const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=3c417651
 
-function callbar_buttonvue_type_template_id_b3920b20_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_3c417651_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -21585,7 +21579,7 @@ function callbar_buttonvue_type_template_id_b3920b20_render(_ctx, _cache, $props
         'd-c-not-allowed': $props.disabled
       })
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
-      importance: $props.circle ? 'outlined' : 'clear',
+      importance: $options.buttonImportance,
       kind: "muted",
       "icon-position": "top",
       "aria-disabled": $props.disabled,
@@ -21601,7 +21595,7 @@ function callbar_buttonvue_type_template_id_b3920b20_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=3c417651
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
@@ -21704,6 +21698,15 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       type: String,
       default: 'xl',
       validator: size => VALID_WIDTH_SIZE.includes(size)
+    },
+
+    /**
+     * The fill and outline of the button associated with its visual importance.
+     * @values clear, outlined, primary
+     */
+    importance: {
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -21733,16 +21736,24 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
         default:
           return '8.4rem';
       }
+    },
+
+    buttonImportance() {
+      if (this.importance) {
+        return this.importance;
+      }
+
+      return this.circle ? 'outlined' : 'clear';
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=3c417651&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=3c417651&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -21752,7 +21763,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_b3920b20_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_3c417651_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js