@dialpad/dialtone-vue 2.54.2 → 2.55.0

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+# [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)
 
 

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___);
 
@@ -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'];
@@ -17834,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&
@@ -17923,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_); 
@@ -17939,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,
@@ -19537,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
@@ -19608,6 +19635,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 //
 //
 //
+//
 
 
 
@@ -19774,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();
         }
       };
@@ -19814,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();
@@ -19879,7 +19907,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       }
     },
 
-    onLeaveAnchor(e) {
+    onLeaveAnchor() {
       if (this.show === null) this.isShown = false;
     },
 
@@ -19947,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,
@@ -20147,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&
@@ -20460,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,
@@ -22346,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
@@ -22395,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]];
     }
@@ -22426,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,

package/dist/dialtone-vue.umd.js

@@ -412,7 +412,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___);
 
@@ -12495,15 +12495,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'];
@@ -17844,13 +17844,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-80[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&
@@ -17933,9 +17933,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_); 
@@ -17949,8 +17976,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,
@@ -19547,15 +19574,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
@@ -19618,6 +19645,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 //
 //
 //
+//
 
 
 
@@ -19784,10 +19812,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();
         }
       };
@@ -19824,7 +19852,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       immediate: true
     },
 
-    isShown(isShown, isPrev) {
+    isShown(isShown) {
       if (isShown) {
         this.setProps();
         this.tip.show();
@@ -19889,7 +19917,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       }
     },
 
-    onLeaveAnchor(e) {
+    onLeaveAnchor() {
       if (this.show === null) this.isShown = false;
     },
 
@@ -19957,8 +19985,8 @@ var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(228);
 
 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,
@@ -20157,9 +20185,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&
@@ -20470,8 +20498,8 @@ var root_layoutvue_type_style_index_0_lang_less_ = __webpack_require__(253);
 
 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,
@@ -22356,9 +22384,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
@@ -22405,14 +22433,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]];
     }
@@ -22436,8 +22466,8 @@ var top_banner_infovue_type_style_index_0_lang_less_ = __webpack_require__(814);
 
 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,