@dialpad/dialtone-vue 3.42.0-beta.1 → 3.42.0

package/dist/dialtone-vue.common.js

@@ -3655,19 +3655,19 @@ const card_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(cardvue_type_
 /* harmony default export */ const card = (card_exports_);
 ;// CONCATENATED MODULE: ./components/card/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/combobox/combobox.vue?vue&type=template&id=5b8afaf4
+;// 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/combobox/combobox.vue?vue&type=template&id=3595da7e
 
-const comboboxvue_type_template_id_5b8afaf4_hoisted_1 = {
+const comboboxvue_type_template_id_3595da7e_hoisted_1 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_5b8afaf4_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_3595da7e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_5b8afaf4_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_3595da7e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
@@ -3699,7 +3699,7 @@ function comboboxvue_type_template_id_5b8afaf4_render(_ctx, _cache, $props, $set
     clearHighlightIndex: $options.clearHighlightIndex
   })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 32);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=5b8afaf4
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=3595da7e
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -4017,7 +4017,6 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
       },
 
       setHighlightIndex(num) {
-        console.log('setting highlight index to ' + num);
         this[indexKey] = num;
         this[idKey] = this._getItemId(num);
 
@@ -4027,7 +4026,6 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
       },
 
       setHighlightId(id) {
-        console.log('setting highlight id to ' + id);
         this[idKey] = id;
         this[indexKey] = this._getItemIndex(id);
 
@@ -5651,7 +5649,6 @@ const LABEL_SIZES = {
       var _this$outsideRendered2;
 
       this.outsideRenderedListRef = contentRef;
-      console.log(this.outsideRenderedListRef);
       (_this$outsideRendered2 = this.outsideRenderedListRef) === null || _this$outsideRendered2 === void 0 ? void 0 : _this$outsideRendered2.addEventListener('mousemove', this.onMouseHighlight);
       this.$emit('opened', open);
 
@@ -5695,7 +5692,7 @@ const LABEL_SIZES = {
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_5b8afaf4_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_3595da7e_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
@@ -6350,11 +6347,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=3aa43aea
+;// 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=f88515aa
 
-const popovervue_type_template_id_3aa43aea_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_3aa43aea_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_3aa43aea_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_f88515aa_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_f88515aa_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_f88515aa_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");
@@ -6368,7 +6365,7 @@ function popovervue_type_template_id_3aa43aea_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_3aa43aea_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_f88515aa_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
@@ -6400,7 +6397,7 @@ function popovervue_type_template_id_3aa43aea_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_3aa43aea_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_f88515aa_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,
@@ -6463,7 +6460,7 @@ function popovervue_type_template_id_3aa43aea_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=3aa43aea
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=f88515aa
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11011,15 +11008,15 @@ const getContentWrapper = content => {
 
 const POPOVER_PADDING_CLASSES = {
   none: undefined,
-  small: 'd-p8',
-  medium: 'd-p16',
-  large: 'd-p24'
+  small: 'd-p4',
+  medium: 'd-p8',
+  large: 'd-p16'
 };
 const POPOVER_HEADER_FOOTER_PADDING_CLASSES = {
   none: undefined,
-  small: 'd-pl8',
-  medium: 'd-pl16',
-  large: 'd-pl24'
+  small: 'd-pl4',
+  medium: 'd-pl8',
+  large: 'd-pl16'
 };
 const POPOVER_ROLES = ['dialog', 'menu', 'listbox', 'tree', 'grid'];
 const POPOVER_CONTENT_WIDTHS = [null, 'anchor'];
@@ -11567,23 +11564,23 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       });
     },
 
-    appendTo(appendTo) {
-      var _this$tip3, _this$anchorEl, _this$anchorEl$getRoo;
+    sticky(sticky) {
+      var _this$tip3;
 
       (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
-        appendTo: this.appendTo === document.body ? (_this$anchorEl = this.anchorEl) === null || _this$anchorEl === void 0 ? void 0 : (_this$anchorEl$getRoo = _this$anchorEl.getRootNode()) === null || _this$anchorEl$getRoo === void 0 ? void 0 : _this$anchorEl$getRoo.querySelector('body') : this.appendTo
+        sticky
       });
     },
 
-    sticky(sticky) {
+    fallbackPlacements() {
       var _this$tip4;
 
       (_this$tip4 = this.tip) === null || _this$tip4 === void 0 ? void 0 : _this$tip4.setProps({
-        sticky
+        popperOptions: this.popperOptions()
       });
     },
 
-    fallbackPlacements() {
+    tether() {
       var _this$tip5;
 
       (_this$tip5 = this.tip) === null || _this$tip5 === void 0 ? void 0 : _this$tip5.setProps({
@@ -11591,18 +11588,10 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       });
     },
 
-    tether() {
+    placement(placement) {
       var _this$tip6;
 
       (_this$tip6 = this.tip) === null || _this$tip6 === void 0 ? void 0 : _this$tip6.setProps({
-        popperOptions: this.popperOptions()
-      });
-    },
-
-    placement(placement) {
-      var _this$tip7;
-
-      (_this$tip7 = this.tip) === null || _this$tip7 === void 0 ? void 0 : _this$tip7.setProps({
         placement
       });
     },
@@ -11641,7 +11630,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   },
 
   mounted() {
-    const externalAnchorEl = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
+    const externalAnchorEl = document.getElementById(this.externalAnchor);
     this.anchorEl = externalAnchorEl !== null && externalAnchorEl !== void 0 ? externalAnchorEl : this.$refs.anchor.children[0];
     this.popoverContentEl = this.$refs.content.$el;
 
@@ -11651,9 +11640,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   },
 
   beforeUnmount() {
-    var _this$tip8;
+    var _this$tip7;
 
-    (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.destroy();
+    (_this$tip7 = this.tip) === null || _this$tip7 === void 0 ? void 0 : _this$tip7.destroy();
     this.removeReferences();
     this.removeEventListeners();
   },
@@ -11678,7 +11667,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     calculateAnchorZindex() {
       // if a modal is currently active render at modal-element z-index, otherwise at popover z-index
-      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || this.anchorEl.closest('.d-zi-drawer')) {
+      if (document.querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')) {
         return 650;
       } else {
         return 300;
@@ -11693,9 +11682,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
 
       if (this.open === null || this.open === undefined) {
-        var _this$anchorEl2;
+        var _this$anchorEl;
 
-        if (!this.anchorEl.contains(e.target) && !this.anchorEl.isEqualNode(e.target) || (_this$anchorEl2 = this.anchorEl) !== null && _this$anchorEl2 !== void 0 && _this$anchorEl2.disabled) {
+        if (!this.anchorEl.contains(e.target) && !this.anchorEl.isEqualNode(e.target) || (_this$anchorEl = this.anchorEl) !== null && _this$anchorEl !== void 0 && _this$anchorEl.disabled) {
           return;
         }
 
@@ -11816,7 +11805,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     async onLeaveTransitionComplete() {
-      var _this$tip9;
+      var _this$tip8;
 
       if (this.modal) {
         await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
@@ -11824,7 +11813,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         await this.$nextTick();
       }
 
-      (_this$tip9 = this.tip) === null || _this$tip9 === void 0 ? void 0 : _this$tip9.unmount();
+      (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -11923,15 +11912,13 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     initTippyInstance() {
-      var _this$anchorEl3, _this$anchorEl3$getRo;
-
       this.tip = tippy_utils_createTippy(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
         offset: this.offset,
         sticky: this.sticky,
-        appendTo: this.appendTo === document.body ? (_this$anchorEl3 = this.anchorEl) === null || _this$anchorEl3 === void 0 ? void 0 : (_this$anchorEl3$getRo = _this$anchorEl3.getRootNode()) === null || _this$anchorEl3$getRo === void 0 ? void 0 : _this$anchorEl3$getRo.querySelector('body') : this.appendTo,
+        appendTo: this.appendTo,
         interactive: true,
         trigger: 'manual',
         // We have to manage hideOnClick functionality manually to handle
@@ -11952,10 +11939,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=3aa43aea&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=f88515aa&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=3aa43aea&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=f88515aa&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -11965,7 +11952,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_3aa43aea_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_f88515aa_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -15734,10 +15721,10 @@ function tabvue_type_template_id_af343bac_render(_ctx, _cache, $props, $setup, $
 const tab_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tabvue_type_script_lang_js, [['render',tabvue_type_template_id_af343bac_render]])
 
 /* harmony default export */ const tab = (tab_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/tabs/tab_panel.vue?vue&type=template&id=2cfdc9e8
+;// 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/tabs/tab_panel.vue?vue&type=template&id=2e95e984
 
-const tab_panelvue_type_template_id_2cfdc9e8_hoisted_1 = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
-function tab_panelvue_type_template_id_2cfdc9e8_render(_ctx, _cache, $props, $setup, $data, $options) {
+const tab_panelvue_type_template_id_2e95e984_hoisted_1 = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
+function tab_panelvue_type_template_id_2e95e984_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)(((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     id: `dt-panel-${$props.id}`,
     role: "tabpanel",
@@ -15748,9 +15735,9 @@ function tab_panelvue_type_template_id_2cfdc9e8_render(_ctx, _cache, $props, $se
       'd-d-none': $options.hidePanel
     }, $props.tabPanelClass]),
     "data-qa": "dt-tab-panel"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, tab_panelvue_type_template_id_2cfdc9e8_hoisted_1)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$props.hidden]]);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, tab_panelvue_type_template_id_2e95e984_hoisted_1)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$props.hidden]]);
 }
-;// CONCATENATED MODULE: ./components/tabs/tab_panel.vue?vue&type=template&id=2cfdc9e8
+;// CONCATENATED MODULE: ./components/tabs/tab_panel.vue?vue&type=template&id=2e95e984
 
 ;// 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/tabs/tab_panel.vue?vue&type=script&lang=js
 
@@ -15812,9 +15799,36 @@ function tab_panelvue_type_template_id_2cfdc9e8_render(_ctx, _cache, $props, $se
   },
 
   async mounted() {
-    this.isFirstElementFocusable = !!(await this.getFirstFocusableElement(this.$el));
-  }
+    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);
+
+    if (!firstFocusableElement) {
+      this.isFirstElementFocusable = false;
+    } else {
+      // If the first focusable element isn't the first element in the panel,
+      // then we need to set the panel tabindex to 0.
+      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
+      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);
+    }
+  },
+
+  methods: {
+    isFirstElementOfPanel(element) {
+      let current = element;
+      let isFirstElement = true;
+
+      while (current) {
+        if (current.previousElementSibling !== null) {
+          isFirstElement = false;
+          break;
+        }
+
+        current = current.parentNode !== this.$el ? current.parentNode : null;
+      }
+
+      return isFirstElement;
+    }
 
+  }
 });
 ;// CONCATENATED MODULE: ./components/tabs/tab_panel.vue?vue&type=script&lang=js
  
@@ -15824,7 +15838,7 @@ function tab_panelvue_type_template_id_2cfdc9e8_render(_ctx, _cache, $props, $se
 
 
 ;
-const tab_panel_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tab_panelvue_type_script_lang_js, [['render',tab_panelvue_type_template_id_2cfdc9e8_render]])
+const tab_panel_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tab_panelvue_type_script_lang_js, [['render',tab_panelvue_type_template_id_2e95e984_render]])
 
 /* harmony default export */ const tab_panel = (tab_panel_exports_);
 ;// CONCATENATED MODULE: ./components/tabs/index.js
@@ -17258,16 +17272,17 @@ 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-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/tooltip/tooltip.vue?vue&type=template&id=fe437016
+;// 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/tooltip/tooltip.vue?vue&type=template&id=2fe4ef96
 
-const tooltipvue_type_template_id_fe437016_hoisted_1 = {
+const tooltipvue_type_template_id_2fe4ef96_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_fe437016_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_2fe4ef96_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_fe437016_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_2fe4ef96_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("a", {
     ref: "anchor",
+    role: "presentation",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
       return $options.onEnterAnchor && $options.onEnterAnchor(...arguments);
@@ -17301,7 +17316,7 @@ function tooltipvue_type_template_id_fe437016_render(_ctx, _cache, $props, $setu
     _: 3
   }, 16, ["id", "show", "appear", "transition", "class"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=fe437016
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=2fe4ef96
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -17493,10 +17508,10 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
   computed: {
     tooltipListeners() {
       return {
-        'after-leave': event => {
+        'after-leave': () => {
           this.onLeaveTransitionComplete();
         },
-        'after-enter': event => {
+        'after-enter': () => {
           this.onEnterTransitionComplete();
         }
       };
@@ -17533,7 +17548,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       immediate: true
     },
 
-    isShown(isShown, isPrev) {
+    isShown(isShown) {
       if (isShown) {
         this.setProps();
         this.tip.show();
@@ -17598,7 +17613,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       }
     },
 
-    onLeaveAnchor(e) {
+    onLeaveAnchor() {
       if (this.show === null) this.isShown = false;
     },
 
@@ -17651,10 +17666,10 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.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/tooltip/tooltip.vue?vue&type=style&index=0&id=fe437016&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/tooltip/tooltip.vue?vue&type=style&index=0&id=2fe4ef96&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=fe437016&lang=less
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=2fe4ef96&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -17664,7 +17679,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_fe437016_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_2fe4ef96_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -17806,15 +17821,15 @@ const keyboard_shortcut_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/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/root_layout/root_layout.vue?vue&type=template&id=d9103e80
+;// 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.vue?vue&type=template&id=1f5c28de
 
-const root_layoutvue_type_template_id_d9103e80_hoisted_1 = {
-  class: "root-layout d-d-flex d-fd-column d-h100vh"
+const root_layoutvue_type_template_id_1f5c28de_hoisted_1 = {
+  class: "root-layout d-root-layout"
 };
-function root_layoutvue_type_template_id_d9103e80_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layoutvue_type_template_id_1f5c28de_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_root_layout_body = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-root-layout-body");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_d9103e80_hoisted_1, [$data.hasSlotContent(_ctx.$slots.header) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_1f5c28de_hoisted_1, [$data.hasSlotContent(_ctx.$slots.header) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__header', $props.headerClass, {
       'root-layout__header--sticky': $props.headerSticky
@@ -17849,7 +17864,7 @@ function root_layoutvue_type_template_id_d9103e80_render(_ctx, _cache, $props, $
     "data-qa": "root-layout-footer"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=d9103e80
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=1f5c28de
 
 ;// 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=d9a91220
 
@@ -18090,10 +18105,10 @@ const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(r
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.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.vue?vue&type=style&index=0&id=d9103e80&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.vue?vue&type=style&index=0&id=1f5c28de&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=d9103e80&lang=less
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=1f5c28de&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue
 
@@ -18103,23 +18118,23 @@ const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(r
 ;
 
 
-const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_d9103e80_render]])
+const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_1f5c28de_render]])
 
 /* harmony default export */ const root_layout = (root_layout_exports_);
 ;// CONCATENATED MODULE: ./components/root_layout/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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=27b9863b
+;// 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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6b1072ea
 
-const combobox_with_popovervue_type_template_id_27b9863b_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_27b9863b_hoisted_2 = {
+const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_2 = {
   ref: "header"
 };
-const combobox_with_popovervue_type_template_id_27b9863b_hoisted_3 = ["onMouseleave", "onFocusout"];
-const combobox_with_popovervue_type_template_id_27b9863b_hoisted_4 = {
+const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_3 = ["onMouseleave", "onFocusout"];
+const combobox_with_popovervue_type_template_id_6b1072ea_hoisted_4 = {
   ref: "footer"
 };
-function combobox_with_popovervue_type_template_id_27b9863b_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_with_popovervue_type_template_id_6b1072ea_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -18142,7 +18157,6 @@ function combobox_with_popovervue_type_template_id_27b9863b_render(_ctx, _cache,
     "on-end-of-list": $props.onEndOfList,
     "list-rendered-outside": true,
     "list-id": $props.listId,
-    "append-to": $props.appendTo,
     "data-qa": "dt-combobox"
   }, $options.comboboxListeners), {
     input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
@@ -18159,7 +18173,7 @@ function combobox_with_popovervue_type_template_id_27b9863b_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_27b9863b_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_6b1072ea_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
@@ -18204,22 +18218,22 @@ function combobox_with_popovervue_type_template_id_27b9863b_render(_ctx, _cache,
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
           key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_27b9863b_hoisted_3)]),
+        })], 42, combobox_with_popovervue_type_template_id_6b1072ea_hoisted_3)]),
         _: 2
       }, [_ctx.$slots.header ? {
         name: "headerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_27b9863b_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_6b1072ea_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
         key: "0"
       } : undefined, _ctx.$slots.footer ? {
         name: "footerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_27b9863b_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_6b1072ea_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
         key: "1"
       } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
     }),
     _: 3
-  }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id", "append-to"]);
+  }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=27b9863b
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6b1072ea
 
 ;// 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/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
 
@@ -18230,7 +18244,6 @@ function combobox_with_popovervue_type_template_id_27b9863b_render(_ctx, _cache,
 
 
 
-
 /* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
   name: 'DtRecipeComboboxWithPopover',
   components: {
@@ -18389,18 +18402,6 @@ function combobox_with_popovervue_type_template_id_27b9863b_render(_ctx, _cache,
       default: false
     },
 
-    /**
-     * Sets the element to which the popover is going to append to.
-     * @values 'parent', HTMLElement,
-     */
-    appendTo: {
-      type: [HTMLElement, String],
-      default: () => document.body,
-      validator: appendTo => {
-        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
-      }
-    },
-
     /**
      * 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.
@@ -18592,32 +18593,32 @@ function combobox_with_popovervue_type_template_id_27b9863b_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_27b9863b_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_6b1072ea_render]])
 
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=e2856cc6
+;// 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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=5e05b863
 
-const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative d-d-block"
 };
-const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_5e05b863_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_e2856cc6_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_5e05b863_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
 
   const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-input");
@@ -18635,7 +18636,6 @@ function combobox_multi_selectvue_type_template_id_e2856cc6_render(_ctx, _cache,
     "has-suggestion-list": $props.hasSuggestionList,
     "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
     "visually-hidden-close": _ctx.visuallyHiddenClose,
-    "append-to": $props.appendTo,
     "content-width": "anchor",
     onSelect: $options.onComboboxSelect
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
@@ -18643,7 +18643,7 @@ function combobox_multi_selectvue_type_template_id_e2856cc6_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_5e05b863_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_5e05b863_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           ref_for: true,
           ref: "chips",
@@ -18685,19 +18685,19 @@ function combobox_multi_selectvue_type_template_id_e2856cc6_render(_ctx, _cache,
       onMousedown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent"]))
     }, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
       key: 0
-    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_5e05b863_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [_ctx.$slots.header ? {
     name: "header",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_5e05b863_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
     key: "0"
   } : undefined, _ctx.$slots.footer ? {
     name: "footer",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_e2856cc6_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_5e05b863_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
     key: "1"
-  } : undefined]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "append-to", "onSelect"]);
+  } : undefined]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "onSelect"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=e2856cc6
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=5e05b863
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -18814,7 +18814,6 @@ const CHIP_BOTTOM_POSITION = {
 
 
 
-
 /* harmony default export */ const combobox_multi_selectvue_type_script_lang_js = ({
   name: 'DtRecipeComboboxMultiSelect',
   components: {
@@ -18869,18 +18868,6 @@ const CHIP_BOTTOM_POSITION = {
       }
     },
 
-    /**
-     * Sets the element to which the popover is going to append to.
-     * @values 'parent', HTMLElement,
-     */
-    appendTo: {
-      type: [HTMLElement, String],
-      default: () => document.body,
-      validator: appendTo => {
-        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
-      }
-    },
-
     /**
      * Show input validation message
      */
@@ -19302,7 +19289,7 @@ const CHIP_BOTTOM_POSITION = {
 
 
 ;
-const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_e2856cc6_render]])
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_5e05b863_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
@@ -19912,24 +19899,24 @@ const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(conta
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/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/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=1996f46e
+;// 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/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=ca4ec176
 
-const top_banner_infovue_type_template_id_1996f46e_hoisted_1 = {
+const top_banner_infovue_type_template_id_ca4ec176_hoisted_1 = {
   class: "d-top-banner-info__left"
 };
-const top_banner_infovue_type_template_id_1996f46e_hoisted_2 = {
+const top_banner_infovue_type_template_id_ca4ec176_hoisted_2 = {
   class: "d-top-banner-info__middle d-my4"
 };
-const top_banner_infovue_type_template_id_1996f46e_hoisted_3 = {
+const top_banner_infovue_type_template_id_ca4ec176_hoisted_3 = {
   class: "d-top-banner-info__right d-ta-right"
 };
-function top_banner_infovue_type_template_id_1996f46e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function top_banner_infovue_type_template_id_ca4ec176_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", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-fs-100 d-d-flex d-top-banner-info d-jc-space-between d-ai-center", $options.bannerInfoClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-fs-100 d-d-flex d-top-banner-info d-jc-space-between d-ai-center d-fc-primary", $options.bannerInfoClass]),
     "data-qa": "banner-info"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", top_banner_infovue_type_template_id_1996f46e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", top_banner_infovue_type_template_id_1996f46e_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", top_banner_infovue_type_template_id_1996f46e_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])], 2);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", top_banner_infovue_type_template_id_ca4ec176_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", top_banner_infovue_type_template_id_ca4ec176_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", top_banner_infovue_type_template_id_ca4ec176_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])], 2);
 }
-;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=1996f46e
+;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=ca4ec176
 
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info_constants.js
 const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100', 'gold200', 'black100', 'white'];
@@ -19955,14 +19942,16 @@ const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100', 'gol
   computed: {
     bannerInfoClass() {
       const bgColors = {
-        green300: 'd-bgc-green-300',
-        green100: 'd-bgc-green-100',
-        red200: 'd-bgc-red-200',
-        red100: 'd-bgc-red-100',
-        gold200: 'd-bgc-gold-200',
-        gold100: 'd-bgc-gold-100',
-        black100: 'd-bgc-black-400',
-        white: 'd-bgc-white'
+        // these are too specific, so for now I'm at least updating the resultant semantic value
+        // TODO: breaking change: update to be more abstract
+        green300: 'd-bgc-success',
+        green100: 'd-bgc-success',
+        red200: 'd-bgc-critical',
+        red100: 'd-bgc-critical',
+        gold200: 'd-bgc-warning',
+        gold100: 'd-bgc-warning',
+        black100: 'd-bgc-info',
+        white: 'd-bgc-primary'
       };
       return [bgColors[this.colorCode]];
     }
@@ -19971,10 +19960,10 @@ const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100', 'gol
 });
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.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/notices/top_banner_info/top_banner_info.vue?vue&type=style&index=0&id=1996f46e&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/notices/top_banner_info/top_banner_info.vue?vue&type=style&index=0&id=ca4ec176&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=style&index=0&id=1996f46e&lang=less
+;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=style&index=0&id=ca4ec176&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info.vue
 
@@ -19984,7 +19973,7 @@ const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100', 'gol
 ;
 
 
-const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(top_banner_infovue_type_script_lang_js, [['render',top_banner_infovue_type_template_id_1996f46e_render]])
+const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(top_banner_infovue_type_script_lang_js, [['render',top_banner_infovue_type_template_id_ca4ec176_render]])
 
 /* harmony default export */ const top_banner_info = (top_banner_info_exports_);
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/index.js