@dialpad/dialtone-vue 2.54.2 → 2.55.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.55.1](https://github.com/dialpad/dialtone-vue/compare/v2.55.0...v2.55.1) (2023-02-02)
+
+# [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___);
 
@@ -1728,7 +1728,7 @@ var update = add("5017a4ff", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 213:
+/***/ 1:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
@@ -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;
     },
 
@@ -19933,7 +19961,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js&
  /* harmony default export */ const tooltip_tooltipvue_type_script_lang_js_ = (tooltipvue_type_script_lang_js_); 
 // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/tooltip/tooltip.vue?vue&type=style&index=0&lang=less&
-var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(213);
+var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(1);
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&lang=less&
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
@@ -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,
@@ -20961,11 +20989,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=1ad6269f&
-var combobox_multi_selectvue_type_template_id_1ad6269f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// 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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=954b65b2&
+var combobox_multi_selectvue_type_template_id_954b65b2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative d-d-block"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.CHIP_SIZES[_vm.size]},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_1ad6269f_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_954b65b2_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -21070,10 +21098,10 @@ const CHIP_SIZES = {
   sm: 'xs',
   md: 'sm'
 };
-const CHIP_BOTTOM_POSITION = {
-  xs: 4,
-  sm: 5,
-  md: 5
+const CHIP_TOP_POSITION = {
+  xs: 11.1,
+  sm: 10.1,
+  md: 10.1
 };
 ;// 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!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js&
 //
@@ -21585,8 +21613,9 @@ const CHIP_BOTTOM_POSITION = {
     },
 
     setChipsPosition() {
+      const input = this.getInput().getBoundingClientRect();
       const chipsWrapper = this.$refs.chipsWrapper;
-      chipsWrapper.style.bottom = `${CHIP_BOTTOM_POSITION[this.size]}px`;
+      chipsWrapper.style.top = input.top - CHIP_TOP_POSITION[this.size] + 'px';
     },
 
     setInputPadding() {
@@ -21661,8 +21690,8 @@ const CHIP_BOTTOM_POSITION = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_1ad6269f_render,
-  combobox_multi_selectvue_type_template_id_1ad6269f_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_954b65b2_render,
+  combobox_multi_selectvue_type_template_id_954b65b2_staticRenderFns,
   false,
   null,
   null,
@@ -22346,9 +22375,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 +22424,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 +22457,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,