@dialpad/dialtone-vue 2.54.1 → 2.55.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [2.55.0](https://github.com/dialpad/dialtone-vue/compare/v2.54.2...v2.55.0) (2023-02-01)
+
+## [2.54.2](https://github.com/dialpad/dialtone-vue/compare/v2.54.1...v2.54.2) (2023-01-26)
+
+
+### Bug Fixes
+
+* **Popover:** fix prevent scroll logic ([#722](https://github.com/dialpad/dialtone-vue/issues/722)) ([7a1ed16](https://github.com/dialpad/dialtone-vue/commit/7a1ed16d0008a3f2c3a640fe5ac3c68b285d8ab5))
+
 ## [2.54.1](https://github.com/dialpad/dialtone-vue/compare/v2.54.0...v2.54.1) (2023-01-26)
 
 

package/dist/dialtone-vue.common.js

@@ -402,7 +402,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".d-top-banner-info__left{margin:var(--su4) 0 var(--su4) var(--su8);min-width:20%}.d-top-banner-info__right{margin:var(--su4) var(--su12) var(--su4) 0;min-width:20%}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-500);min-width:20%}.d-top-banner-info__middle{display:flex;align-items:center;gap:var(--size-300)}.d-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--size-300);margin:var(--space-300) var(--space-500) var(--space-300) 0;min-width:20%}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -7990,8 +7990,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_5944f754_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=64e7122e&
-var popovervue_type_template_id_64e7122e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=fec53cb4&
+var popovervue_type_template_id_fec53cb4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8002,7 +8002,7 @@ var popovervue_type_template_id_64e7122e_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_64e7122e_staticRenderFns = []
+var popovervue_type_template_id_fec53cb4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -12485,15 +12485,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'];
@@ -13413,9 +13413,11 @@ var popover_header_footer_component = normalizeComponent(
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.preventScrolling();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
+        this.enableScrolling();
       }
     }
 
@@ -13516,10 +13518,7 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     addEventListeners() {
-      window.addEventListener('dt-popover-close', this.closePopover);
-      window.addEventListener('wheel', this.preventScrolling, {
-        passive: false
-      }); // align popover content width when contentWidth is 'anchor'
+      window.addEventListener('dt-popover-close', this.closePopover); // align popover content width when contentWidth is 'anchor'
 
       if (this.contentWidth === 'anchor') {
         window.addEventListener('resize', this.onResize);
@@ -13528,9 +13527,6 @@ var popover_header_footer_component = normalizeComponent(
 
     removeEventListeners() {
       window.removeEventListener('dt-popover-close', this.closePopover);
-      window.removeEventListener('wheel', this.preventScrolling, {
-        passive: false
-      });
 
       if (this.contentWidth === 'anchor') {
         window.removeEventListener('resize', this.onResize);
@@ -13542,11 +13538,40 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     /*
-    * Prevents scrolling only when the popover is set to modal
+    * Prevents scrolling outside of the currently opened modal popover by:
+    *   - when anchor is not within another popover: setting the body to overflow: hidden
+    *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
+    *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
     **/
-    preventScrolling(e) {
-      if (!this.modal || this.$refs.content.$el.contains(e.target)) return;
-      e.preventDefault();
+    async preventScrolling() {
+      await this.$nextTick();
+
+      if (this.modal) {
+        const element = this.anchorEl.closest('body, .tippy-box');
+
+        if (element.tagName.toLowerCase() === 'body') {
+          element.classList.add('d-of-hidden');
+        } else {
+          element.classList.add('d-zi-popover');
+        }
+      }
+    },
+
+    /*
+    * Resets the prevent scrolling properties set in preventScrolling() back to normal.
+    **/
+    async enableScrolling() {
+      await this.$nextTick();
+
+      if (this.modal) {
+        const element = this.anchorEl.closest('body, .tippy-box');
+
+        if (element.tagName.toLowerCase() === 'body') {
+          element.classList.remove('d-of-hidden');
+        } else {
+          element.classList.remove('d-zi-popover');
+        }
+      }
     },
 
     removeReferences() {
@@ -13713,8 +13738,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_64e7122e_render,
-  popovervue_type_template_id_64e7122e_staticRenderFns,
+  popovervue_type_template_id_fec53cb4_render,
+  popovervue_type_template_id_fec53cb4_staticRenderFns,
   false,
   null,
   null,
@@ -17809,13 +17834,13 @@ var tab_component = normalizeComponent(
 )
 
 /* harmony default export */ const tab = (tab_component.exports);
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tabs/tab_panel.vue?vue&type=template&id=660b90ba&
-var tab_panelvue_type_template_id_660b90ba_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tabs/tab_panel.vue?vue&type=template&id=82faf854&
+var tab_panelvue_type_template_id_82faf854_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     {
       'd-d-none': _vm.hidePanel,
     },
     _vm.tabPanelClass ],attrs:{"id":("dt-panel-" + _vm.id),"role":"tabpanel","tabindex":_vm.isFirstElementFocusable ? -1 : 0,"aria-labelledby":("dt-tab-" + _vm.tabId),"aria-hidden":("" + _vm.hidePanel),"data-qa":"dt-tab-panel"}},[_vm._t("default")],2)}
-var tab_panelvue_type_template_id_660b90ba_staticRenderFns = []
+var tab_panelvue_type_template_id_82faf854_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tabs/tab_panel.vue?vue&type=script&lang=js&
@@ -17898,9 +17923,36 @@ var tab_panelvue_type_template_id_660b90ba_staticRenderFns = []
   },
 
   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&
  /* harmony default export */ const tabs_tab_panelvue_type_script_lang_js_ = (tab_panelvue_type_script_lang_js_); 
@@ -17914,8 +17966,8 @@ var tab_panelvue_type_template_id_660b90ba_staticRenderFns = []
 ;
 var tab_panel_component = normalizeComponent(
   tabs_tab_panelvue_type_script_lang_js_,
-  tab_panelvue_type_template_id_660b90ba_render,
-  tab_panelvue_type_template_id_660b90ba_staticRenderFns,
+  tab_panelvue_type_template_id_82faf854_render,
+  tab_panelvue_type_template_id_82faf854_staticRenderFns,
   false,
   null,
   null,
@@ -19512,15 +19564,15 @@ var toggle_component = normalizeComponent(
 /* harmony default export */ const toggle = (toggle_component.exports);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tooltip/tooltip.vue?vue&type=template&id=b048cd5e&
-var tooltipvue_type_template_id_b048cd5e_render = function () {
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tooltip/tooltip.vue?vue&type=template&id=4f441454&
+var tooltipvue_type_template_id_4f441454_render = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-qa":"dt-tooltip-container"}},[_c('div',{ref:"anchor",attrs:{"data-qa":"dt-tooltip-anchor"},on:{"focusin":_vm.onEnterAnchor,"focusout":_vm.onLeaveAnchor,"mouseenter":_vm.onEnterAnchor,"mouseleave":_vm.onLeaveAnchor,"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.onLeaveAnchor.apply(null, arguments)}}},[_vm._t("anchor")],2),_c('dt-lazy-show',_vm._g({ref:"content",class:[
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-qa":"dt-tooltip-container"}},[_c('a',{ref:"anchor",attrs:{"role":"presentation","data-qa":"dt-tooltip-anchor"},on:{"focusin":_vm.onEnterAnchor,"focusout":_vm.onLeaveAnchor,"mouseenter":_vm.onEnterAnchor,"mouseleave":_vm.onLeaveAnchor,"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.onLeaveAnchor.apply(null, arguments)}}},[_vm._t("anchor")],2),_c('dt-lazy-show',_vm._g({ref:"content",class:[
       'd-tooltip',
       ("d-tooltip__arrow-tippy--" + _vm.currentPlacement),
       ( _obj = {}, _obj[ _vm.TOOLTIP_KIND_MODIFIERS.inverted ] = _vm.inverted, _obj ),
       _vm.contentClass ],attrs:{"id":_vm.id,"show":_vm.isShown && (!!_vm.message.trim() || !!_vm.$slots.default),"role":"tooltip","aria-hidden":"false","data-qa":"dt-tooltip","appear":"","transition":_vm.transition}},_vm.tooltipListeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2)],1)}
-var tooltipvue_type_template_id_b048cd5e_staticRenderFns = []
+var tooltipvue_type_template_id_4f441454_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
@@ -19583,6 +19635,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 //
 //
 //
+//
 
 
 
@@ -19749,10 +19802,10 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
   computed: {
     tooltipListeners() {
       return { ...this.$listeners,
-        'after-leave': event => {
+        'after-leave': () => {
           this.onLeaveTransitionComplete();
         },
-        'after-enter': event => {
+        'after-enter': () => {
           this.onEnterTransitionComplete();
         }
       };
@@ -19789,7 +19842,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       immediate: true
     },
 
-    isShown(isShown, isPrev) {
+    isShown(isShown) {
       if (isShown) {
         this.setProps();
         this.tip.show();
@@ -19854,7 +19907,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       }
     },
 
-    onLeaveAnchor(e) {
+    onLeaveAnchor() {
       if (this.show === null) this.isShown = false;
     },
 
@@ -19922,8 +19975,8 @@ var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(213);
 
 var tooltip_component = normalizeComponent(
   tooltip_tooltipvue_type_script_lang_js_,
-  tooltipvue_type_template_id_b048cd5e_render,
-  tooltipvue_type_template_id_b048cd5e_staticRenderFns,
+  tooltipvue_type_template_id_4f441454_render,
+  tooltipvue_type_template_id_4f441454_staticRenderFns,
   false,
   null,
   null,
@@ -20122,9 +20175,9 @@ var keyboard_shortcut_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout.vue?vue&type=template&id=9bd6a578&
-var root_layoutvue_type_template_id_9bd6a578_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout d-d-flex d-fd-column d-h100vh"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"body-class":_vm.bodyClass,"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition},scopedSlots:_vm._u([(_vm.$slots.sidebar)?{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true}:null,(_vm.$slots.default)?{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}:null],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
-var root_layoutvue_type_template_id_9bd6a578_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout.vue?vue&type=template&id=0bf64ed3&
+var root_layoutvue_type_template_id_0bf64ed3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout d-root-layout"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"body-class":_vm.bodyClass,"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition},scopedSlots:_vm._u([(_vm.$slots.sidebar)?{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true}:null,(_vm.$slots.default)?{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}:null],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
+var root_layoutvue_type_template_id_0bf64ed3_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout_body.vue?vue&type=template&id=a07ea7ec&
@@ -20435,8 +20488,8 @@ var root_layoutvue_type_style_index_0_lang_less_ = __webpack_require__(426);
 
 var root_layout_component = normalizeComponent(
   root_layout_root_layoutvue_type_script_lang_js_,
-  root_layoutvue_type_template_id_9bd6a578_render,
-  root_layoutvue_type_template_id_9bd6a578_staticRenderFns,
+  root_layoutvue_type_template_id_0bf64ed3_render,
+  root_layoutvue_type_template_id_0bf64ed3_staticRenderFns,
   false,
   null,
   null,
@@ -22321,9 +22374,9 @@ var contact_info_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=1996f46e&
-var top_banner_infovue_type_template_id_1996f46e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-fs-100 d-d-flex d-top-banner-info d-jc-space-between d-ai-center",class:_vm.bannerInfoClass,attrs:{"data-qa":"banner-info"}},[_c('div',{staticClass:"d-top-banner-info__left"},[_vm._t("left")],2),_c('div',{staticClass:"d-top-banner-info__middle d-my4"},[_vm._t("default")],2),_c('div',{staticClass:"d-top-banner-info__right d-ta-right"},[_vm._t("right")],2)])}
-var top_banner_infovue_type_template_id_1996f46e_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=69be4446&
+var top_banner_infovue_type_template_id_69be4446_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-fs-100 d-d-flex d-top-banner-info d-jc-space-between d-ai-center d-fc-primary",class:_vm.bannerInfoClass,attrs:{"data-qa":"banner-info"}},[_c('div',{staticClass:"d-top-banner-info__left"},[_vm._t("left")],2),_c('div',{staticClass:"d-top-banner-info__middle d-my4"},[_vm._t("default")],2),_c('div',{staticClass:"d-top-banner-info__right d-ta-right"},[_vm._t("right")],2)])}
+var top_banner_infovue_type_template_id_69be4446_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info_constants.js
@@ -22370,14 +22423,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]];
     }
@@ -22401,8 +22456,8 @@ var top_banner_infovue_type_style_index_0_lang_less_ = __webpack_require__(9);
 
 var top_banner_info_component = normalizeComponent(
   top_banner_info_top_banner_infovue_type_script_lang_js_,
-  top_banner_infovue_type_template_id_1996f46e_render,
-  top_banner_infovue_type_template_id_1996f46e_staticRenderFns,
+  top_banner_infovue_type_template_id_69be4446_render,
+  top_banner_infovue_type_template_id_69be4446_staticRenderFns,
   false,
   null,
   null,