@dialpad/dialtone 9.101.2 → 9.102.0

package/dist/vue3/components/tab/tab_group.vue.js

@@ -7,7 +7,6 @@ const _sfc_main = {
   provide() {
     return {
       groupContext: this.provideObj,
-      changeContentPanel: this.changeContentPanel,
       setFocus: this.setFocus
     };
   },
@@ -83,7 +82,14 @@ const _sfc_main = {
      * @event change
      * @type {Object}
      */
-    "change"
+    "change",
+    /**
+     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.
+     *
+     * @event before-change
+     * @type {Event}
+     */
+    "before-change"
   ],
   data() {
     return {
@@ -137,7 +143,7 @@ const _sfc_main = {
         return {
           context: el,
           panelId: (_a = el.getAttribute("aria-controls")) == null ? void 0 : _a.replace("dt-panel-", ""),
-          id: (_b = el.getAttribute("id")) == null ? void 0 : _b.replace("dt-tab-", ""),
+          tabId: (_b = el.getAttribute("id")) == null ? void 0 : _b.replace("dt-tab-", ""),
           isSelected: el.getAttribute("aria-selected") === "true"
         };
       });
@@ -145,43 +151,37 @@ const _sfc_main = {
     onChange() {
       this.$emit("change", { ...this.provideObj });
     },
-    changeContentPanel({ selected, selectOverride }) {
-      this.provideObj.selected = selected;
-      if (!selectOverride) {
-        this.onChange();
-      }
-    },
     tabLeft() {
-      const { index, tabs } = this.getIndexAndTabs();
+      const index = this.getFocusedTabIndex();
       if (index === -1) return;
-      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;
-      this.selectFocusOnTab(indexElement, tabs);
+      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;
+      this.selectFocusOnTab(indexElement);
     },
     tabRight() {
-      const { index, tabs } = this.getIndexAndTabs();
+      const index = this.getFocusedTabIndex();
       if (index === -1) return;
-      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;
-      this.selectFocusOnTab(indexElement, tabs);
+      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;
+      this.selectFocusOnTab(indexElement);
     },
-    selectFocusOnTab(index, tabs) {
-      const { context } = tabs[index];
+    selectFocusOnTab(index) {
+      const { context } = this.tabs[index];
       context.focus();
     },
-    selectTab() {
-      const { tabs, index } = this.getIndexAndTabs();
-      this.selectTabByIndex(index, tabs);
+    selectTab(event) {
+      if (this.isSameTabClicked()) return;
+      this.$emit("before-change", event);
+      if (event.defaultPrevented) return;
+      const index = this.getFocusedTabIndex();
+      this.selectTabByIndex(index);
+      this.onChange();
     },
-    selectTabByIndex(index, tabs) {
-      const { context, panelId } = tabs[index];
+    selectTabByIndex(index) {
+      const { context, panelId } = this.tabs[index];
       this.provideObj.selected = panelId;
       context.focus();
     },
-    getIndexAndTabs() {
-      const index = this.tabs.findIndex((context) => this.focusId ? context.id === `${this.focusId}` : context.isSelected);
-      return {
-        tabs: this.tabs,
-        index
-      };
+    getFocusedTabIndex() {
+      return this.tabs.findIndex((context) => this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);
     },
     onHomeButton() {
       var _a, _b;
@@ -192,6 +192,10 @@ const _sfc_main = {
       var _a, _b;
       if (this.tabs.length === 0) return;
       (_b = (_a = this.tabs[this.tabs.length - 1]) == null ? void 0 : _a.context) == null ? void 0 : _b.focus();
+    },
+    isSameTabClicked() {
+      const tab = this.tabs[this.getFocusedTabIndex()];
+      return this.provideObj.selected === tab.panelId;
     }
   }
 };
@@ -219,9 +223,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _cache[2] || (_cache[2] = withKeys((...args) => $options.selectTab && $options.selectTab(...args), ["enter"])),
         _cache[3] || (_cache[3] = withKeys((...args) => $options.selectTab && $options.selectTab(...args), ["space"]))
       ],
+      onClick: _cache[4] || (_cache[4] = (...args) => $options.selectTab && $options.selectTab(...args)),
       onKeydown: [
-        _cache[4] || (_cache[4] = withKeys((...args) => $options.onHomeButton && $options.onHomeButton(...args), ["home"])),
-        _cache[5] || (_cache[5] = withKeys((...args) => $options.onEndButton && $options.onEndButton(...args), ["end"]))
+        _cache[5] || (_cache[5] = withKeys((...args) => $options.onHomeButton && $options.onHomeButton(...args), ["home"])),
+        _cache[6] || (_cache[6] = withKeys((...args) => $options.onEndButton && $options.onEndButton(...args), ["end"]))
       ]
     }), [
       renderSlot(_ctx.$slots, "tabs")

package/dist/vue3/components/tab/tab_group.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab_group.vue.js","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      changeContentPanel: this.changeContentPanel,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  beforeUpdate () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            id: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    changeContentPanel ({ selected, selectOverride }) {\n      this.provideObj.selected = selected;\n      if (!selectOverride) {\n        this.onChange();\n      }\n    },\n\n    tabLeft () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n      const indexElement = index - 1 < 0 ? tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    tabRight () {\n      const { index, tabs } = this.getIndexAndTabs();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement, tabs);\n    },\n\n    selectFocusOnTab (index, tabs) {\n      const { context } = tabs[index];\n      context.focus();\n    },\n\n    selectTab () {\n      const { tabs, index } = this.getIndexAndTabs();\n      this.selectTabByIndex(index, tabs);\n    },\n\n    selectTabByIndex (index, tabs) {\n      const { context, panelId } = tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getIndexAndTabs () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.id === `${this.focusId}` : context.isSelected);\n      return {\n        tabs: this.tabs,\n        index,\n      };\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_mergeProps","_withKeys","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"tab_group.vue.js","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  beforeUpdate () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      return this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_mergeProps","_withKeys","_renderSlot"],"mappings":"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"}

package/dist/vue3/components/tab/tab_panel.vue.cjs

@@ -83,7 +83,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass($props.tabPanelClass),
     "data-qa": "dt-tab-panel"
   }, [
-    vue.renderSlot(_ctx.$slots, "default")
+    vue.withDirectives(vue.createElementVNode("div", null, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ], 512), [
+      [vue.vShow, !$props.hidden]
+    ])
   ], 10, _hoisted_1)), [
     [vue.vShow, !$options.hidePanel]
   ]);

package/dist/vue3/components/tab/tab_panel.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab_panel.vue.cjs","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["Modal","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;AAuBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,QAAQ,CAACA,MAAAA,OAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAM,wBAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,QAAI,CAAC,uBAAuB;AAC1B,WAAK,0BAA0B;AAAA,WAC1B;AAIL,WAAK,0BAA0B,KAAK,sBAAsB,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,sBAAuB,SAAS;AAC9B,UAAI,UAAU;AACd,UAAI,iBAAiB;AAErB,aAAO,SAAS;AACd,YAAI,QAAQ,2BAA2B,MAAM;AAC3C,2BAAiB;AACjB;AAAA,QACF;AACA,kBAAU,QAAQ,eAAe,KAAK,MAAM,QAAQ,aAAa;AAAA,MACnE;AAEA,aAAO;AAAA,IACR;AAAA,EACF;AACH;AA3GA,MAAA,aAAA,CAAA,MAAA,YAAA,mBAAA,aAAA;;8CACEC,IAAAA,mBAYM,OAAA;AAAA,IAVH,gBAAgB,OAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAU,MAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2B,OAAK,KAAA;AAAA,IAChC,kBAAgB,SAAS,SAAA;AAAA,IACzB,OARLC,IAAAA,eAQY,OAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;IAGRC,eAAQ,KAAA,QAAA,SAAA;AAAA,EAZZ,GAAA,IAAA,UAAA,IAAA;AAAA,iBAEa,SAAS,SAAA;AAAA;;;;"}
+{"version":3,"file":"tab_panel.vue.cjs","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <div v-show=\"!hidden\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["Modal","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;;;AAyBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,QAAQ,CAACA,MAAAA,OAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAM,wBAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,QAAI,CAAC,uBAAuB;AAC1B,WAAK,0BAA0B;AAAA,WAC1B;AAIL,WAAK,0BAA0B,KAAK,sBAAsB,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,sBAAuB,SAAS;AAC9B,UAAI,UAAU;AACd,UAAI,iBAAiB;AAErB,aAAO,SAAS;AACd,YAAI,QAAQ,2BAA2B,MAAM;AAC3C,2BAAiB;AACjB;AAAA,QACF;AACA,kBAAU,QAAQ,eAAe,KAAK,MAAM,QAAQ,aAAa;AAAA,MACnE;AAEA,aAAO;AAAA,IACR;AAAA,EACF;AACH;AA7GA,MAAA,aAAA,CAAA,MAAA,YAAA,mBAAA,aAAA;;8CACEC,IAAAA,mBAcM,OAAA;AAAA,IAZH,gBAAgB,OAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAU,MAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2B,OAAK,KAAA;AAAA,IAChC,kBAAgB,SAAS,SAAA;AAAA,IACzB,OARLC,IAAAA,eAQY,OAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;uBAGRC,IAAAA,mBAEM,OAAA,MAAA;AAAA,MADJC,eAAQ,KAAA,QAAA,SAAA;AAAA;mBADI,OAAM,MAAA;AAAA;EAZxB,GAAA,IAAA,UAAA,IAAA;AAAA,iBAEa,SAAS,SAAA;AAAA;;;;"}

package/dist/vue3/components/tab/tab_panel.vue.js

@@ -1,5 +1,5 @@
 import Modal from "../../common/mixins/modal.js";
-import { withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, vShow } from "vue";
+import { withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, vShow } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   compatConfig: { MODE: 3 },
@@ -81,7 +81,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass($props.tabPanelClass),
     "data-qa": "dt-tab-panel"
   }, [
-    renderSlot(_ctx.$slots, "default")
+    withDirectives(createElementVNode("div", null, [
+      renderSlot(_ctx.$slots, "default")
+    ], 512), [
+      [vShow, !$props.hidden]
+    ])
   ], 10, _hoisted_1)), [
     [vShow, !$options.hidePanel]
   ]);

package/dist/vue3/components/tab/tab_panel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab_panel.vue.js","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;AAuBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,QAAQ,CAAC,KAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAM,wBAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,QAAI,CAAC,uBAAuB;AAC1B,WAAK,0BAA0B;AAAA,WAC1B;AAIL,WAAK,0BAA0B,KAAK,sBAAsB,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,sBAAuB,SAAS;AAC9B,UAAI,UAAU;AACd,UAAI,iBAAiB;AAErB,aAAO,SAAS;AACd,YAAI,QAAQ,2BAA2B,MAAM;AAC3C,2BAAiB;AACjB;AAAA,QACF;AACA,kBAAU,QAAQ,eAAe,KAAK,MAAM,QAAQ,aAAa;AAAA,MACnE;AAEA,aAAO;AAAA,IACR;AAAA,EACF;AACH;AA3GA,MAAA,aAAA,CAAA,MAAA,YAAA,mBAAA,aAAA;;sCACEA,mBAYM,OAAA;AAAA,IAVH,gBAAgB,OAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAU,MAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2B,OAAK,KAAA;AAAA,IAChC,kBAAgB,SAAS,SAAA;AAAA,IACzB,OARLC,eAQY,OAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;IAGRC,WAAQ,KAAA,QAAA,SAAA;AAAA,EAZZ,GAAA,IAAA,UAAA,IAAA;AAAA,aAEa,SAAS,SAAA;AAAA;;;"}
+{"version":3,"file":"tab_panel.vue.js","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <div v-show=\"!hidden\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;AAyBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,QAAQ,CAAC,KAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAM,wBAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,QAAI,CAAC,uBAAuB;AAC1B,WAAK,0BAA0B;AAAA,WAC1B;AAIL,WAAK,0BAA0B,KAAK,sBAAsB,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,sBAAuB,SAAS;AAC9B,UAAI,UAAU;AACd,UAAI,iBAAiB;AAErB,aAAO,SAAS;AACd,YAAI,QAAQ,2BAA2B,MAAM;AAC3C,2BAAiB;AACjB;AAAA,QACF;AACA,kBAAU,QAAQ,eAAe,KAAK,MAAM,QAAQ,aAAa;AAAA,MACnE;AAEA,aAAO;AAAA,IACR;AAAA,EACF;AACH;AA7GA,MAAA,aAAA,CAAA,MAAA,YAAA,mBAAA,aAAA;;sCACEA,mBAcM,OAAA;AAAA,IAZH,gBAAgB,OAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAU,MAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2B,OAAK,KAAA;AAAA,IAChC,kBAAgB,SAAS,SAAA;AAAA,IACzB,OARLC,eAQY,OAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;mBAGRC,mBAEM,OAAA,MAAA;AAAA,MADJC,WAAQ,KAAA,QAAA,SAAA;AAAA;eADI,OAAM,MAAA;AAAA;EAZxB,GAAA,IAAA,UAAA,IAAA;AAAA,aAEa,SAAS,SAAA;AAAA;;;"}

package/dist/vue3/types/components/dropdown/dropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue.d.ts","sourceRoot":"","sources":["../../../../components/dropdown/dropdown.vue"],"names":[],"mappings":"AAwDA;"}
+{"version":3,"file":"dropdown.vue.d.ts","sourceRoot":"","sources":["../../../../components/dropdown/dropdown.vue"],"names":[],"mappings":"AA+DA;"}

package/dist/vue3/types/components/tab/tab.vue.d.ts

@@ -33,10 +33,7 @@ declare const _default: import('vue').DefineComponent<{
         focus: (event: any) => void;
     };
     isSelected(): boolean;
-}, {
-    setSelectedPanelByDefault(): void;
-    selectPanel(selectOverride?: boolean): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "focus")[], "click" | "focus", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click" | "focus")[], "click" | "focus", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     id: {
         type: StringConstructor;
         required: true;

package/dist/vue3/types/components/tab/tab_group.vue.d.ts

@@ -54,26 +54,20 @@ declare const _default: import('vue').DefineComponent<{
     getTabChildren(): {
         context: any;
         panelId: any;
-        id: any;
+        tabId: any;
         isSelected: boolean;
     }[];
     onChange(): void;
-    changeContentPanel({ selected, selectOverride }: {
-        selected: any;
-        selectOverride: any;
-    }): void;
     tabLeft(): void;
     tabRight(): void;
-    selectFocusOnTab(index: any, tabs: any): void;
-    selectTab(): void;
-    selectTabByIndex(index: any, tabs: any): void;
-    getIndexAndTabs(): {
-        tabs: never[];
-        index: number;
-    };
+    selectFocusOnTab(index: any): void;
+    selectTab(event: any): void;
+    selectTabByIndex(index: any): void;
+    getFocusedTabIndex(): number;
     onHomeButton(): void;
     onEndButton(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "change"[], "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isSameTabClicked(): boolean;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "before-change")[], "change" | "before-change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     label: {
         type: StringConstructor;
         default: string;
@@ -109,6 +103,7 @@ declare const _default: import('vue').DefineComponent<{
     };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    "onBefore-change"?: ((...args: any[]) => any) | undefined;
 }, {
     label: string;
     disabled: boolean;

package/dist/vue3/types/components/tab/tab_group.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab_group.vue.d.ts","sourceRoot":"","sources":["../../../../components/tab/tab_group.vue"],"names":[],"mappings":"AAiCA;"}
+{"version":3,"file":"tab_group.vue.d.ts","sourceRoot":"","sources":["../../../../components/tab/tab_group.vue"],"names":[],"mappings":"AAkCA;"}

package/dist/vue3/types/components/tab/tab_panel.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab_panel.vue.d.ts","sourceRoot":"","sources":["../../../../components/tab/tab_panel.vue"],"names":[],"mappings":"AAeA;"}
+{"version":3,"file":"tab_panel.vue.d.ts","sourceRoot":"","sources":["../../../../components/tab/tab_panel.vue"],"names":[],"mappings":"AAiBA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone",
-  "version": "9.101.2",
+  "version": "9.102.0",
   "description": "Dialpad's Dialtone design system monorepo",
   "files": [
     "dist"
@@ -77,8 +77,8 @@
     "regex-combined-emojis": "1.6.0",
     "tippy.js": "6.3.7",
     "@dialpad/dialtone-emojis": "1.1.0",
-    "@dialpad/dialtone-tokens": "1.41.1",
-    "@dialpad/dialtone-icons": "4.34.0"
+    "@dialpad/dialtone-icons": "4.34.0",
+    "@dialpad/dialtone-tokens": "1.41.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",