@dialpad/dialtone-vue 3.8.0 → 3.9.0

package/dist/dialtone-vue.umd.js

@@ -11,7 +11,7 @@
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 403:
+/***/ 881:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -107,7 +107,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 559:
+/***/ 500:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -203,7 +203,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;str
 
 /***/ }),
 
-/***/ 791:
+/***/ 775:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -409,7 +409,7 @@ exports.Z = (sfc, props) => {
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(403);
+var content = __webpack_require__(881);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
@@ -467,19 +467,19 @@ var update = add("06b601f1", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 790:
+/***/ 403:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(559);
+var content = __webpack_require__(500);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("fc300706", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("0dcf6c93", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -531,19 +531,19 @@ var update = add("537a95a4", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 273:
+/***/ 831:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(791);
+var content = __webpack_require__(775);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("72197f1c", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("1a0736ac", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1206,6 +1206,7 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_DIRECTIONS": () => (/* reexport */ TOOLTIP_DIRECTIONS),
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
+  "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
   "USER_STATUS_COLOR_MODIFIERS": () => (/* reexport */ USER_STATUS_COLOR_MODIFIERS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "codeToEmojiData": () => (/* reexport */ codeToEmojiData),
@@ -2941,13 +2942,13 @@ const button_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(butto
 ;// CONCATENATED MODULE: ./components/button_group/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=1cf89689
+;// 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/combobox/combobox.vue?vue&type=template&id=d0659498
 
-const comboboxvue_type_template_id_1cf89689_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_1cf89689_hoisted_2 = {
+const comboboxvue_type_template_id_d0659498_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
+const comboboxvue_type_template_id_d0659498_hoisted_2 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_1cf89689_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_d0659498_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("combobox-loading-list");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
@@ -2957,7 +2958,7 @@ function comboboxvue_type_template_id_1cf89689_render(_ctx, _cache, $props, $set
     "aria-owns": $props.listId,
     "aria-haspopup": "listbox",
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", comboboxvue_type_template_id_1cf89689_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", comboboxvue_type_template_id_d0659498_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
     key: 0,
@@ -2979,9 +2980,9 @@ function comboboxvue_type_template_id_1cf89689_render(_ctx, _cache, $props, $set
     listProps: $options.listProps,
     opened: $options.onOpen,
     clearHighlightIndex: $options.clearHighlightIndex
-  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_1cf89689_hoisted_1);
+  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_d0659498_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=1cf89689
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=d0659498
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -3358,14 +3359,18 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
     }
   };
 });
-;// 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/combobox/combobox_loading-list.vue?vue&type=template&id=49c938eb
+;// 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/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d
 
-function combobox_loading_listvue_type_template_id_49c938eb_render(_ctx, _cache, $props, $setup, $data, $options) {
+const combobox_loading_listvue_type_template_id_07d9971d_hoisted_1 = {
+  class: "d-p0 d-mt8 d-hmx332 d-of-y-auto",
+  "aria-busy": "true"
+};
+function combobox_loading_listvue_type_template_id_07d9971d_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_skeleton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-skeleton");
 
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-list-item");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", null, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)(7, index => {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("ol", combobox_loading_listvue_type_template_id_07d9971d_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)(7, index => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_list_item, {
       key: index,
       role: "option",
@@ -3381,7 +3386,7 @@ function combobox_loading_listvue_type_template_id_49c938eb_render(_ctx, _cache,
     }, 1024);
   }), 64))]);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox_loading-list.vue?vue&type=template&id=49c938eb
+;// CONCATENATED MODULE: ./components/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=237d2c10
 
@@ -4275,7 +4280,7 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
 
 
 ;
-const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_loading_listvue_type_script_lang_js, [['render',combobox_loading_listvue_type_template_id_49c938eb_render]])
+const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_loading_listvue_type_script_lang_js, [['render',combobox_loading_listvue_type_template_id_07d9971d_render]])
 
 /* harmony default export */ const combobox_loading_list = (combobox_loading_list_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=script&lang=js
@@ -4432,6 +4437,7 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   },
   methods: {
     onMouseHighlight(e) {
+      if (this.loading) return;
       const liElement = e.target.closest('li');
 
       if (liElement && this.highlightId !== liElement.id) {
@@ -4452,10 +4458,13 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     afterHighlight() {
+      if (this.loading) return;
       this.$emit('highlight', this.highlightIndex);
     },
 
     onEnterKey() {
+      if (this.loading) return;
+
       if (this.highlightIndex >= 0) {
         this.$emit('select', this.highlightIndex);
       }
@@ -4478,7 +4487,7 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     onKeyValidation(e, eventHandler) {
-      if (!this.showList || !this.getListElement() || this.loading) {
+      if (!this.showList || !this.getListElement()) {
         return;
       }
 
@@ -4488,7 +4497,7 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     setInitialHighlightIndex() {
       if (this.showList) {
         // When the list's is shown, reset the highlight index.
-        // If the list is in loading state, set to -1
+        // If the list is loading, set to -1
         this.setHighlightIndex(this.loading ? -1 : 0);
       }
     }
@@ -4503,7 +4512,7 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_1cf89689_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_d0659498_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
@@ -4563,11 +4572,11 @@ function dropdownvue_type_template_id_b0e1f8ba_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=b0e1f8ba
 
-;// 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=0656612f
+;// 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=582f9c98
 
-const popovervue_type_template_id_0656612f_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_0656612f_hoisted_2 = ["id"];
-function popovervue_type_template_id_0656612f_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_582f9c98_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_582f9c98_hoisted_2 = ["id"];
+function popovervue_type_template_id_582f9c98_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("popover-header-footer");
 
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-lazy-show");
@@ -4579,7 +4588,7 @@ function popovervue_type_template_id_0656612f_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_.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_0656612f_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+  }, null, 8, popovervue_type_template_id_582f9c98_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     ref: "popover",
     class: ['d-popover', {
       'd-popover__anchor--modal-opened': $props.modal && $data.isOpen
@@ -4608,7 +4617,7 @@ function popovervue_type_template_id_0656612f_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_0656612f_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+    })], 40, popovervue_type_template_id_582f9c98_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -4670,7 +4679,7 @@ function popovervue_type_template_id_0656612f_render(_ctx, _cache, $props, $setu
     _: 3
   }, 16, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=0656612f
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=582f9c98
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -9122,6 +9131,7 @@ const getArrowDetected = fn => ({
 
 
 const BASE_TIPPY_DIRECTIONS = ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'];
+const TIPPY_STICKY_VALUES = [true, false, 'reference', 'popper'];
 const tippy_utils_createTippy = (anchorElement, options) => {
   const {
     contentElement
@@ -9129,6 +9139,7 @@ const tippy_utils_createTippy = (anchorElement, options) => {
   };
   delete options.contentElement;
   return tippy_esm(anchorElement, { ...options,
+    plugins: [sticky],
     render: () => getContentWrapper(contentElement)
   });
 };
@@ -9204,6 +9215,7 @@ const POPOVER_HEADER_FOOTER_PADDING_CLASSES = {
 const POPOVER_ROLES = ['dialog', 'menu', 'listbox', 'tree', 'grid'];
 const POPOVER_CONTENT_WIDTHS = [null, 'anchor'];
 const POPOVER_INITIAL_FOCUS_STRINGS = ['none', 'dialog', 'first'];
+const POPOVER_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const POPOVER_DIRECTIONS = [...BASE_TIPPY_DIRECTIONS];
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/lazy_show/lazy_show.vue?vue&type=template&id=7659d16a
 
@@ -9572,6 +9584,21 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       default: 'bottom-end'
     },
 
+    /**
+     * If the popover sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: false,
+      validator: sticky => {
+        return POPOVER_STICKY_VALUES.includes(sticky);
+      }
+    },
+
     /**
      * Determines maximum height for the popover before overflow.
      * Possible units rem|px|em
@@ -9685,14 +9712,20 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     offset(offset) {
       this.tip.setProps({
-        offset: offset
+        offset
+      });
+    },
+
+    sticky(sticky) {
+      this.tip.setProps({
+        sticky
       });
     },
 
     fallbackPlacements(fallbackPlacements) {
       this.tip.setProps({
         popperOptions: getPopperOptions({
-          fallbackPlacements: fallbackPlacements,
+          fallbackPlacements,
           hasHideModifierEnabled: true
         })
       });
@@ -9745,6 +9778,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       contentElement: this.popoverContentEl,
       placement: this.placement,
       offset: this.offset,
+      sticky: this.sticky,
       appendTo: document.body,
       interactive: true,
       trigger: 'manual',
@@ -9957,9 +9991,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=0656612f&lang=less
-var popovervue_type_style_index_0_id_0656612f_lang_less = __webpack_require__(790);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=0656612f&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=582f9c98&lang=less
+var popovervue_type_style_index_0_id_582f9c98_lang_less = __webpack_require__(403);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=582f9c98&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -9969,7 +10003,7 @@ var popovervue_type_style_index_0_id_0656612f_lang_less = __webpack_require__(79
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_0656612f_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_582f9c98_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -14596,15 +14630,15 @@ const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_t
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=044c8b20
+;// 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/tooltip/tooltip.vue?vue&type=template&id=46955932
 
-const tooltipvue_type_template_id_044c8b20_hoisted_1 = {
+const tooltipvue_type_template_id_46955932_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_044c8b20_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_46955932_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", tooltipvue_type_template_id_044c8b20_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", tooltipvue_type_template_id_46955932_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
     ref: "anchor",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -14641,7 +14675,7 @@ function tooltipvue_type_template_id_044c8b20_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["id", "show", "transition", "class", "onAfterLeave", "onAfterEnter"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=044c8b20
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=46955932
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -14655,6 +14689,7 @@ const TOOLTIP_KIND_MODIFIERS = {
   inverted: "d-tooltip--inverted",
   hide: "d-tooltip--hide"
 };
+const TOOLTIP_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=script&lang=js
 
@@ -14721,6 +14756,21 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 
     },
 
+    /**
+     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: false,
+      validator: sticky => {
+        return TOOLTIP_STICKY_VALUES.includes(sticky);
+      }
+    },
+
     /**
      * Additional css classes for the tooltip content element.
      * Can accept all of String, Object, and Array, i.e. has the
@@ -14782,6 +14832,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
         interactive: false,
         trigger: 'manual',
         placement: this.placement,
+        sticky: this.sticky,
         popperOptions: getPopperOptions({
           fallbackPlacements: this.fallbackPlacements,
           hasHideModifierEnabled: true,
@@ -14812,6 +14863,12 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       } else {
         this.tip.hide();
       }
+    },
+
+    sticky(sticky) {
+      this.tip.setProps({
+        sticky
+      });
     }
 
   },
@@ -14917,9 +14974,9 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
-var tooltipvue_type_style_index_0_id_044c8b20_lang_less = __webpack_require__(273);
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=46955932&lang=less
+var tooltipvue_type_style_index_0_id_46955932_lang_less = __webpack_require__(831);
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=46955932&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -14929,7 +14986,7 @@ var tooltipvue_type_style_index_0_id_044c8b20_lang_less = __webpack_require__(27
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_044c8b20_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_46955932_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -15494,11 +15551,11 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=250cf6fe
+;// 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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=b000d074
 
-const combobox_with_popovervue_type_template_id_250cf6fe_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_250cf6fe_hoisted_2 = ["onMouseleave", "onFocusout"];
-function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache, $props, $setup, $data, $options) {
+const combobox_with_popovervue_type_template_id_b000d074_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_b000d074_hoisted_2 = ["onMouseleave", "onFocusout"];
+function combobox_with_popovervue_type_template_id_b000d074_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("combobox-loading-list");
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-popover");
@@ -15532,7 +15589,7 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_250cf6fe_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_b000d074_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(_ref2 => {
       let {
@@ -15548,6 +15605,7 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
         "max-height": $props.maxHeight,
         "max-width": $props.maxWidth,
         offset: $props.popoverOffset,
+        sticky: $props.popoverSticky,
         placement: "bottom-start",
         padding: "none",
         role: "listbox",
@@ -15558,12 +15616,7 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
         "auto-focus": false,
         onOpened: opened
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createSlots)({
-        content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
-          key: 0
-        }, listProps, {
-          class: [$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]
-        }), null, 16, ["class"])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-          key: 1,
+        content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
           ref: "listWrapper",
           class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
           onMouseleave: clearHighlightIndex,
@@ -15571,9 +15624,14 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
             clearHighlightIndex;
             $options.onFocusOut;
           }
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
+        }, [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+          key: 0
+        }, listProps, {
+          class: [$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]
+        }), null, 16, ["class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
+          key: 1,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_250cf6fe_hoisted_2))]),
+        })], 42, combobox_with_popovervue_type_template_id_b000d074_hoisted_2)]),
         _: 2
       }, [_ctx.$slots.header ? {
         name: "headerContent",
@@ -15591,12 +15649,12 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
             return $options.onFocusOut && $options.onFocusOut(...arguments);
           })
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "footer")], 544)])
-      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "external-anchor", "content-width", "onOpened"])];
+      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "onOpened"])];
     }),
     _: 3
   }, 16, ["show-list", "on-beginning-of-list", "on-end-of-list", "list-aria-label", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=250cf6fe
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=b000d074
 
 ;// 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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
 
@@ -15724,6 +15782,14 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
       default: () => [0, 4]
     },
 
+    /**
+     * If the popover sticks to the input.
+     */
+    popoverSticky: {
+      type: [Boolean, String],
+      default: false
+    },
+
     /**
      * Displays the list when the combobox is focused, before the user has typed anything.
      * When this is enabled the list will not close after selection.
@@ -15875,7 +15941,7 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_250cf6fe_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_b000d074_render]])
 
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js