@dialpad/dialtone-vue 3.41.0 → 3.42.0

package/dist/dialtone-vue.common.js

@@ -6347,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=31e5c1c0
+;// 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_31e5c1c0_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_31e5c1c0_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_31e5c1c0_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");
@@ -6365,7 +6365,7 @@ function popovervue_type_template_id_31e5c1c0_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_31e5c1c0_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
@@ -6397,7 +6397,7 @@ function popovervue_type_template_id_31e5c1c0_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_31e5c1c0_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,
@@ -6460,7 +6460,7 @@ function popovervue_type_template_id_31e5c1c0_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=31e5c1c0
+;// 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) {
@@ -11008,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'];
@@ -11619,9 +11619,11 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.preventScrolling();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
+        this.enableScrolling();
       }
     }
 
@@ -11730,10 +11732,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     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);
@@ -11742,9 +11741,6 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     removeEventListeners() {
       window.removeEventListener('dt-popover-close', this.closePopover);
-      window.removeEventListener('wheel', this.preventScrolling, {
-        passive: false
-      });
 
       if (this.contentWidth === 'anchor') {
         window.removeEventListener('resize', this.onResize);
@@ -11756,11 +11752,40 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     /*
-    * 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() {
@@ -11914,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=31e5c1c0&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=31e5c1c0&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=f88515aa&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -11927,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_31e5c1c0_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
@@ -15696,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",
@@ -15710,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
 
@@ -15774,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
  
@@ -15786,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
@@ -17220,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);
@@ -17263,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
 /*
@@ -17455,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();
         }
       };
@@ -17495,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();
@@ -17560,7 +17613,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       }
     },
 
-    onLeaveAnchor(e) {
+    onLeaveAnchor() {
       if (this.show === null) this.isShown = false;
     },
 
@@ -17613,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
 
@@ -17626,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
@@ -17768,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
@@ -17811,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
 
@@ -18052,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
 
@@ -18065,7 +18118,7 @@ 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
@@ -19846,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'];
@@ -19889,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]];
     }
@@ -19905,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
 
@@ -19918,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

package/dist/dialtone-vue.css

@@ -1 +1 @@
-.d-avatar--image-loaded{background-color:initial;background-image:unset}.dt-default-list-item,.dt-default-list-item--left,.dt-default-list-item--right{min-height:28px}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-900-h),var(--black-900-s),var(--black-900-l),.05)}.dt-list-item--highlighted:active{background-color:hsla(var(--black-900-h),var(--black-900-s),var(--black-900-l),.1)}.dt-list-item:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--su2) var(--focus-ring)}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}50%{fill:var(--placeholder-to-color,var(--black-100));background:var(--placeholder-to-color,var(--black-100))}90%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--su4) var(--su12)}.enter-active,.leave-active{overflow:hidden;transition:height .3s cubic-bezier(.25,1,.5,1)}.tippy-box[data-popper-escaped] .d-popover__dialog,.tippy-box[data-popper-reference-hidden] .d-popover__dialog{visibility:hidden;pointer-events:none}.d-context-menu-list{width:calc(var(--size-300)*48)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{height:var(--size-100);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.tippy-box[data-popper-escaped] .d-tooltip,.tippy-box[data-popper-reference-hidden] .d-tooltip{visibility:hidden;pointer-events:none}.root-layout__body{display:flex;flex-wrap:wrap;gap:0}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1}.root-layout__content{flex-basis:0;flex-grow:999}.root-layout__header--sticky{position:sticky;top:0}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--button{position:relative;display:inline-block}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{position:absolute;top:2rem;right:0;width:var(--su16);height:var(--su16);padding:var(--su8);border-radius:var(--su4)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--black-025)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--black-900);color:var(--white)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--white)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc:var(--black-900)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.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%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}
+.d-avatar--image-loaded{background-color:initial;background-image:unset}.dt-default-list-item,.dt-default-list-item--left,.dt-default-list-item--right{min-height:28px}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-900-h),var(--black-900-s),var(--black-900-l),.05)}.dt-list-item--highlighted:active{background-color:hsla(var(--black-900-h),var(--black-900-s),var(--black-900-l),.1)}.dt-list-item:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--su2) var(--focus-ring)}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}50%{fill:var(--placeholder-to-color,var(--black-100));background:var(--placeholder-to-color,var(--black-100))}90%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--su4) var(--su12)}.enter-active,.leave-active{overflow:hidden;transition:height .3s cubic-bezier(.25,1,.5,1)}.tippy-box[data-popper-escaped] .d-popover__dialog,.tippy-box[data-popper-reference-hidden] .d-popover__dialog{visibility:hidden;pointer-events:none}.d-context-menu-list{width:calc(var(--size-300)*48)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{height:var(--size-100);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.tippy-box[data-popper-escaped] .d-tooltip,.tippy-box[data-popper-reference-hidden] .d-tooltip{visibility:hidden;pointer-events:none}.root-layout__body{display:flex;flex-wrap:wrap;gap:0}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1}.root-layout__content{flex-basis:0;flex-grow:999}.root-layout__header--sticky{position:sticky;top:0}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--button{position:relative;display:inline-block}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{position:absolute;top:2rem;right:0;width:var(--su16);height:var(--su16);padding:var(--su8);border-radius:var(--su4)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--black-025)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--black-900);color:var(--white)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--white)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc:var(--black-900)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-400);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%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}