@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/tab/tab-group.js

@@ -1,7 +1,7 @@
-import { TAB_LIST_IMPORTANCE_MODIFIERS as b, TAB_LIST_KIND_MODIFIERS as o, TAB_LIST_SIZE_MODIFIERS as u, TAB_LIST_SIZES as c } from "./tabs-constants.js";
-import { openBlock as h, createElementBlock as f, createElementVNode as I, mergeProps as T, withKeys as i, renderSlot as r } from "vue";
-import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const m = {
+import { TAB_SPREAD_MODIFIERS as u, TAB_ORIENTATION_MODIFIERS as b, TAB_LIST_IMPORTANCE_MODIFIERS as h, TAB_LIST_KIND_MODIFIERS as c, TAB_LIST_SIZE_MODIFIERS as f, TAB_ACTIVATION_MODES as I, TAB_GROUP_KINDS as T, TAB_LIST_SIZES as S, TAB_ORIENTATIONS as g, TAB_SPREADS as v } from "./tabs-constants.js";
+import { openBlock as O, createElementBlock as m, normalizeClass as p, createElementVNode as A, mergeProps as B, withKeys as n, withModifiers as l, renderSlot as o } from "vue";
+import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const D = {
   compatConfig: { MODE: 3 },
   name: "DtTabGroup",
   provide() {
@@ -35,6 +35,7 @@ const m = {
     },
     /**
      * If true, applies inverted styles to the tab group
+     * @deprecated Use v-dt-mode directive instead.
      * @values true, false
      */
     inverted: {
@@ -49,15 +50,37 @@ const m = {
       type: Boolean,
       default: !1
     },
+    /**
+     * Controls how tabs distribute available space within the tab list.
+     * @values none, grow, equal
+     */
+    spread: {
+      type: String,
+      default: "none",
+      validator(t) {
+        return v.includes(t);
+      }
+    },
+    /**
+     * The orientation of the tab list
+     * @values horizontal, vertical
+     */
+    orientation: {
+      type: String,
+      default: "horizontal",
+      validator(t) {
+        return g.includes(t);
+      }
+    },
     /**
      * If provided, applies size styles to the tab group
-     * @values default, sm
+     * @values 100, 200, 300, 400, 500
      */
     size: {
-      type: String,
-      default: "default",
-      validate(t) {
-        return c.includes(t);
+      type: [String, Number],
+      default: 300,
+      validator(t) {
+        return S.includes(String(t));
       }
     },
     /**
@@ -73,6 +96,37 @@ const m = {
     tabListChildProps: {
       type: Object,
       default: () => ({})
+    },
+    /**
+     * The visual style kind applied to tabs within this group.
+     * Maps to specific DtButton kind/importance combinations for selected/unselected states.
+     * @values default, muted
+     */
+    kind: {
+      type: String,
+      default: "default",
+      validator(t) {
+        return T.includes(t);
+      }
+    },
+    /**
+     * If true, the selected tab renders with outlined importance instead of clear.
+     * @values true, false
+     */
+    outlined: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)
+     * @values auto, manual
+     */
+    activationMode: {
+      type: String,
+      default: "manual",
+      validator(t) {
+        return I.includes(t);
+      }
     }
   },
   emits: [
@@ -96,14 +150,21 @@ const m = {
       provideObj: {
         selected: "",
         // the currently displayed tab id
-        disabled: !1
+        disabled: !1,
         // disable group
+        size: 300,
+        kind: "default",
+        outlined: !1,
+        orientation: "horizontal",
+        spread: "none"
       },
       focusId: null,
       tabs: [],
-      TAB_LIST_SIZE_MODIFIERS: u,
-      TAB_LIST_KIND_MODIFIERS: o,
-      TAB_LIST_IMPORTANCE_MODIFIERS: b
+      TAB_LIST_SIZE_MODIFIERS: f,
+      TAB_LIST_KIND_MODIFIERS: c,
+      TAB_LIST_IMPORTANCE_MODIFIERS: h,
+      TAB_ORIENTATION_MODIFIERS: b,
+      TAB_SPREAD_MODIFIERS: u
     };
   },
   watch: {
@@ -118,6 +179,36 @@ const m = {
       handler() {
         this.provideObj.selected = this.selected;
       }
+    },
+    size: {
+      immediate: !0,
+      handler() {
+        this.provideObj.size = this.size;
+      }
+    },
+    kind: {
+      immediate: !0,
+      handler() {
+        this.provideObj.kind = this.kind;
+      }
+    },
+    outlined: {
+      immediate: !0,
+      handler() {
+        this.provideObj.outlined = this.outlined;
+      }
+    },
+    orientation: {
+      immediate: !0,
+      handler() {
+        this.provideObj.orientation = this.orientation;
+      }
+    },
+    spread: {
+      immediate: !0,
+      handler() {
+        this.provideObj.spread = this.spread;
+      }
     }
   },
   mounted() {
@@ -134,13 +225,14 @@ const m = {
       this.focusId = t;
     },
     getTabChildren() {
-      return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => {
-        var d, n;
+      return Array.from(this.$refs.tabs.querySelectorAll('[role="tab"]')).map((e) => {
+        var i, r;
         return {
           context: e,
-          panelId: (d = e.getAttribute("aria-controls")) == null ? void 0 : d.replace("dt-panel-", ""),
-          tabId: (n = e.getAttribute("id")) == null ? void 0 : n.replace("dt-tab-", ""),
-          isSelected: e.getAttribute("aria-selected") === "true"
+          panelId: (i = e.getAttribute("aria-controls")) == null ? void 0 : i.replace("dt-panel-", ""),
+          tabId: (r = e.getAttribute("id")) == null ? void 0 : r.replace("dt-tab-", ""),
+          isSelected: e.getAttribute("aria-selected") === "true",
+          isDisabled: e.getAttribute("aria-disabled") === "true"
         };
       });
     },
@@ -148,29 +240,46 @@ const m = {
       this.$emit("change", { ...this.provideObj });
     },
     tabLeft() {
+      this.orientation === "horizontal" && this.navigatePrevious();
+    },
+    tabRight() {
+      this.orientation === "horizontal" && this.navigateNext();
+    },
+    tabUp(t) {
+      this.orientation === "vertical" && (t.preventDefault(), this.navigatePrevious());
+    },
+    tabDown(t) {
+      this.orientation === "vertical" && (t.preventDefault(), this.navigateNext());
+    },
+    navigatePrevious() {
       const t = this.getFocusedTabIndex();
       if (t === -1) return;
-      const e = t - 1 < 0 ? this.tabs.length - 1 : t - 1;
+      const e = this.findNextTab(t, -1);
       this.selectFocusOnTab(e);
     },
-    tabRight() {
+    navigateNext() {
       const t = this.getFocusedTabIndex();
       if (t === -1) return;
-      const e = t + 1 > this.tabs.length - 1 ? 0 : t + 1;
+      const e = this.findNextTab(t, 1);
       this.selectFocusOnTab(e);
     },
+    findNextTab(t, e) {
+      const i = this.tabs.length;
+      return (t + e + i) % i;
+    },
     selectFocusOnTab(t) {
-      const { context: e } = this.tabs[t];
-      e.focus();
+      const { context: e, panelId: i, isDisabled: r } = this.tabs[t];
+      e.focus(), this.activationMode === "auto" && !r && (this.provideObj.selected = i, this.onChange());
     },
     selectTab(t) {
-      if (this.isSameTabClicked() || (this.$emit("before-change", t), t.defaultPrevented)) return;
+      var i;
+      if (this.isSameTabClicked()) return;
       const e = this.getFocusedTabIndex();
-      this.selectTabByIndex(e), this.onChange();
+      (i = this.tabs[e]) != null && i.isDisabled || (this.$emit("before-change", t), !t.defaultPrevented && (this.selectTabByIndex(e), this.onChange()));
     },
     selectTabByIndex(t) {
-      const { context: e, panelId: d } = this.tabs[t];
-      this.provideObj.selected = d, e.focus();
+      const { context: e, panelId: i } = this.tabs[t];
+      this.provideObj.selected = i, e.focus();
     },
     getFocusedTabIndex() {
       const t = this.tabs.findIndex(
@@ -179,54 +288,60 @@ const m = {
       return t === -1 ? 0 : t;
     },
     onHomeButton() {
-      var t, e;
-      this.tabs.length !== 0 && ((e = (t = this.tabs[0]) == null ? void 0 : t.context) == null || e.focus());
+      this.tabs.length && this.selectFocusOnTab(0);
     },
     onEndButton() {
-      var t, e;
-      this.tabs.length !== 0 && ((e = (t = this.tabs[this.tabs.length - 1]) == null ? void 0 : t.context) == null || e.focus());
+      this.tabs.length && this.selectFocusOnTab(this.tabs.length - 1);
     },
     isSameTabClicked() {
       const t = this.tabs[this.getFocusedTabIndex()];
       return this.provideObj.selected === t.panelId;
     }
   }
-}, S = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
-function O(t, e, d, n, l, s) {
-  return h(), f("div", S, [
-    I("div", T({
+}, E = ["aria-label", "aria-orientation"];
+function _(t, e, i, r, d, a) {
+  return O(), m("div", {
+    "data-qa": "dt-tab-group",
+    class: p(["d-tab-neux", { "d-tab-neux--vertical": i.orientation === "vertical" }])
+  }, [
+    A("div", B({
       ref: "tabs",
       class: [
         "d-tablist",
-        l.TAB_LIST_SIZE_MODIFIERS[d.size],
+        d.TAB_LIST_SIZE_MODIFIERS[String(i.size)],
+        d.TAB_ORIENTATION_MODIFIERS[i.orientation],
+        i.orientation !== "vertical" && d.TAB_SPREAD_MODIFIERS[i.spread],
         {
-          [l.TAB_LIST_KIND_MODIFIERS.inverted]: d.inverted,
-          [l.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: d.borderless
+          [d.TAB_LIST_KIND_MODIFIERS.inverted]: i.inverted,
+          [d.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: i.borderless
         },
-        d.tabListClass
+        i.tabListClass
       ]
-    }, d.tabListChildProps, {
+    }, i.tabListChildProps, {
       role: "tablist",
-      "aria-label": d.label,
+      "aria-label": i.label,
+      "aria-orientation": i.orientation,
+      onKeydown: [
+        e[0] || (e[0] = n((...s) => a.tabLeft && a.tabLeft(...s), ["left"])),
+        e[1] || (e[1] = n((...s) => a.tabRight && a.tabRight(...s), ["right"])),
+        e[2] || (e[2] = n((...s) => a.tabUp && a.tabUp(...s), ["up"])),
+        e[3] || (e[3] = n((...s) => a.tabDown && a.tabDown(...s), ["down"])),
+        e[7] || (e[7] = n(l((...s) => a.onHomeButton && a.onHomeButton(...s), ["prevent"]), ["home"])),
+        e[8] || (e[8] = n(l((...s) => a.onEndButton && a.onEndButton(...s), ["prevent"]), ["end"]))
+      ],
       onKeyup: [
-        e[0] || (e[0] = i((...a) => s.tabLeft && s.tabLeft(...a), ["left"])),
-        e[1] || (e[1] = i((...a) => s.tabRight && s.tabRight(...a), ["right"])),
-        e[2] || (e[2] = i((...a) => s.selectTab && s.selectTab(...a), ["enter"])),
-        e[3] || (e[3] = i((...a) => s.selectTab && s.selectTab(...a), ["space"]))
+        e[4] || (e[4] = n((...s) => a.selectTab && a.selectTab(...s), ["enter"])),
+        e[5] || (e[5] = n((...s) => a.selectTab && a.selectTab(...s), ["space"]))
       ],
-      onClick: e[4] || (e[4] = (...a) => s.selectTab && s.selectTab(...a)),
-      onKeydown: [
-        e[5] || (e[5] = i((...a) => s.onHomeButton && s.onHomeButton(...a), ["home"])),
-        e[6] || (e[6] = i((...a) => s.onEndButton && s.onEndButton(...a), ["end"]))
-      ]
+      onClick: e[6] || (e[6] = (...s) => a.selectTab && a.selectTab(...s))
     }), [
-      r(t.$slots, "tabs")
-    ], 16, p),
-    r(t.$slots, "default")
-  ]);
+      o(t.$slots, "tabs")
+    ], 16, E),
+    o(t.$slots, "default")
+  ], 2);
 }
-const F = /* @__PURE__ */ g(m, [["render", O]]);
+const N = /* @__PURE__ */ x(D, [["render", _]]);
 export {
-  F as default
+  N as default
 };
 //# sourceMappingURL=tab-group.js.map

package/dist/lib/tab/tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.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  updated () {\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      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\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":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","$options","args","_renderSlot","_ctx"],"mappings":"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"}
+{"version":3,"file":"tab-group.js","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n    :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\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[String(size)],\n        TAB_ORIENTATION_MODIFIERS[orientation],\n        orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\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      :aria-orientation=\"orientation\"\n      @keydown.left=\"tabLeft\"\n      @keydown.right=\"tabRight\"\n      @keydown.up=\"tabUp\"\n      @keydown.down=\"tabDown\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home.prevent=\"onHomeButton\"\n      @keydown.end.prevent=\"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  TAB_ORIENTATIONS,\n  TAB_ORIENTATION_MODIFIERS,\n  TAB_ACTIVATION_MODES,\n  TAB_GROUP_KINDS,\n  TAB_SPREADS,\n  TAB_SPREAD_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     * @deprecated Use v-dt-mode directive instead.\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     * Controls how tabs distribute available space within the tab list.\n     * @values none, grow, equal\n     */\n    spread: {\n      type: String,\n      default: 'none',\n      validator (value) {\n        return TAB_SPREADS.includes(value);\n      },\n    },\n\n    /**\n     * The orientation of the tab list\n     * @values horizontal, vertical\n     */\n    orientation: {\n      type: String,\n      default: 'horizontal',\n      validator (value) {\n        return TAB_ORIENTATIONS.includes(value);\n      },\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator (size) {\n        return TAB_LIST_SIZES.includes(String(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     * The visual style kind applied to tabs within this group.\n     * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n     * @values default, muted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator (value) {\n        return TAB_GROUP_KINDS.includes(value);\n      },\n    },\n\n    /**\n     * If true, the selected tab renders with outlined importance instead of clear.\n     * @values true, false\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n     * @values auto, manual\n     */\n    activationMode: {\n      type: String,\n      default: 'manual',\n      validator (value) {\n        return TAB_ACTIVATION_MODES.includes(value);\n      },\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        size: 300,\n        kind: 'default',\n        outlined: false,\n        orientation: 'horizontal',\n        spread: 'none',\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n      TAB_ORIENTATION_MODIFIERS,\n      TAB_SPREAD_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    size: {\n      immediate: true,\n      handler () {\n        this.provideObj.size = this.size;\n      },\n    },\n\n    kind: {\n      immediate: true,\n      handler () {\n        this.provideObj.kind = this.kind;\n      },\n    },\n\n    outlined: {\n      immediate: true,\n      handler () {\n        this.provideObj.outlined = this.outlined;\n      },\n    },\n\n    orientation: {\n      immediate: true,\n      handler () {\n        this.provideObj.orientation = this.orientation;\n      },\n    },\n\n    spread: {\n      immediate: true,\n      handler () {\n        this.provideObj.spread = this.spread;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\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('[role=\"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            isDisabled: el.getAttribute('aria-disabled') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      if (this.orientation !== 'horizontal') return;\n      this.navigatePrevious();\n    },\n\n    tabRight () {\n      if (this.orientation !== 'horizontal') return;\n      this.navigateNext();\n    },\n\n    tabUp (event) {\n      if (this.orientation !== 'vertical') return;\n      event.preventDefault();\n      this.navigatePrevious();\n    },\n\n    tabDown (event) {\n      if (this.orientation !== 'vertical') return;\n      event.preventDefault();\n      this.navigateNext();\n    },\n\n    navigatePrevious () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const nextIndex = this.findNextTab(index, -1);\n      this.selectFocusOnTab(nextIndex);\n    },\n\n    navigateNext () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const nextIndex = this.findNextTab(index, 1);\n      this.selectFocusOnTab(nextIndex);\n    },\n\n    findNextTab (fromIndex, direction) {\n      const len = this.tabs.length;\n      return (fromIndex + direction + len) % len;\n    },\n\n    selectFocusOnTab (index) {\n      const { context, panelId, isDisabled } = this.tabs[index];\n      context.focus();\n      if (this.activationMode === 'auto' && !isDisabled) {\n        this.provideObj.selected = panelId;\n        this.onChange();\n      }\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      const index = this.getFocusedTabIndex();\n      if (this.tabs[index]?.isDisabled) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\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      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length) this.selectFocusOnTab(0);\n    },\n\n    onEndButton () {\n      if (this.tabs.length) this.selectFocusOnTab(this.tabs.length - 1);\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":["_sfc_main","value","TAB_SPREADS","TAB_ORIENTATIONS","size","TAB_LIST_SIZES","TAB_GROUP_KINDS","TAB_ACTIVATION_MODES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","TAB_ORIENTATION_MODIFIERS","TAB_SPREAD_MODIFIERS","focusId","el","_a","_b","event","index","nextIndex","fromIndex","direction","len","context","panelId","isDisabled","tab","_createElementBlock","$props","_createElementVNode","_mergeProps","$data","$options","args","_renderSlot","_ctx"],"mappings":"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"}

package/dist/lib/tab/tab.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./tabs-constants.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),n=require("../button/button.cjs"),o={compatConfig:{MODE:3},name:"DtTab",components:{DtButton:n.default},inject:["groupContext","setFocus"],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:""},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:""}},emits:["focus","click"],data(){return{TAB_IMPORTANCE_MODIFIERS:i.TAB_IMPORTANCE_MODIFIERS}},computed:{tabListeners(){return{click:t=>{this.$emit("click",t)},focus:t=>{this.setFocus(this.id),this.$emit("focus",t)}}},isSelected(){return this.groupContext.selected===this.panelId}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)}};function c(t,b,a,_,l,s){const r=e.resolveComponent("dt-button");return e.openBlock(),e.createBlock(r,e.mergeProps({id:`dt-tab-${a.id}`,class:["d-tab",{[l.TAB_IMPORTANCE_MODIFIERS.selected]:s.isSelected},a.tabClass],role:"tab","aria-selected":`${s.isSelected}`,"aria-controls":`dt-panel-${a.panelId}`,"aria-label":a.label,"data-qa":"dt-tab",tabindex:s.isSelected?"0":"-1",disabled:s.groupContext.disabled||a.disabled},t.$attrs,e.toHandlers(s.tabListeners)),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["id","class","aria-selected","aria-controls","aria-label","tabindex","disabled"])}const u=d._(o,[["render",c]]);exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),s=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),r=require("../button/button.cjs"),d={compatConfig:{MODE:3},name:"DtTab",components:{DtButton:r.default},inject:["groupContext","setFocus"],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:""},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:""},labelClass:{type:[String,Array,Object],default:""},leadingClass:{type:[String,Array,Object],default:""},trailingClass:{type:[String,Array,Object],default:""}},emits:["focus","click"],computed:{tabListeners(){return{click:e=>{this.$emit("click",e)},focus:e=>{this.setFocus(this.id),this.$emit("focus",e)}}},isDisabled(){return this.groupContext.disabled||this.disabled},buttonSize(){const e=this.groupContext.size;return e==="default"?void 0:e},isSelected(){return this.groupContext.selected===this.panelId},buttonKind(){return this.groupContext.outlined?this.groupContext.kind==="muted"?"muted":"default":this.groupContext.kind==="muted"?"muted":this.isSelected?"default":"muted"},buttonImportance(){return this.groupContext.outlined&&this.isSelected?"outlined":"clear"},buttonActive(){return this.groupContext.outlined?!1:this.groupContext.kind==="muted"?this.isSelected:!1}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)},methods:{}};function o(e,c,n,b,f,i){const l=t.resolveComponent("dt-button");return t.openBlock(),t.createBlock(l,t.mergeProps({id:`dt-tab-${n.id}`,class:["d-tablist__item",n.tabClass,{"d-tablist__item--vertical":i.groupContext.orientation==="vertical"},{"d-btn--disabled":i.isDisabled},{"d-tab--is-selected":!i.groupContext.outlined&&i.groupContext.kind!=="muted"&&i.isSelected}],importance:i.buttonImportance,kind:i.buttonKind,active:i.buttonActive,size:i.buttonSize,role:"tab","aria-selected":`${i.isSelected}`,"aria-controls":`dt-panel-${n.panelId}`,"aria-label":n.label,"aria-disabled":i.isDisabled?"true":void 0,"label-class":n.labelClass,"leading-class":n.leadingClass,"trailing-class":n.trailingClass,"data-qa":"dt-tab",tabindex:i.isSelected?"0":"-1"},e.$attrs,t.toHandlers(i.tabListeners)),t.createSlots({default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:2},[e.$slots.startIcon?{name:"startIcon",fn:t.withCtx(({iconSize:a})=>[t.renderSlot(e.$slots,"startIcon",{iconSize:a})]),key:"0"}:e.$slots.icon?{name:"startIcon",fn:t.withCtx(({iconSize:a})=>[t.renderSlot(e.$slots,"icon",{iconSize:a})]),key:"1"}:void 0,e.$slots.endIcon?{name:"endIcon",fn:t.withCtx(({iconSize:a})=>[t.renderSlot(e.$slots,"endIcon",{iconSize:a})]),key:"2"}:void 0,e.$slots.leading?{name:"leading",fn:t.withCtx(()=>[t.renderSlot(e.$slots,"leading")]),key:"3"}:void 0,e.$slots.trailing?{name:"trailing",fn:t.withCtx(()=>[t.renderSlot(e.$slots,"trailing")]),key:"4"}:void 0]),1040,["id","class","importance","kind","active","size","aria-selected","aria-controls","aria-label","aria-disabled","label-class","leading-class","trailing-class","tabindex"])}const u=s._(d,[["render",o]]);exports.default=u;
 //# sourceMappingURL=tab.cjs.map

package/dist/lib/tab/tab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab.cjs","sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tab',\n      {\n        [TAB_IMPORTANCE_MODIFIERS.selected]: isSelected,\n      },\n      tabClass,\n    ]\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isSelected ? '0' : '-1'\"\n    :disabled=\"groupContext.disabled || disabled\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { TAB_IMPORTANCE_MODIFIERS } from './tabs_constants';\nimport { DtButton } from '../button';\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: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n  },\n\n  mounted () {\n    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","TAB_IMPORTANCE_MODIFIERS","event","_openBlock","_createBlock","_component_dt_button","_mergeProps","$props","$data","$options","_ctx","_toHandlers","_renderSlot"],"mappings":"iQAiCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,QACN,WAAY,CACV,SAAAC,EAAAA,SAGF,OAAQ,CAAC,eAAgB,UAAU,EAEnC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,IAMZ,QAAS,CACP,KAAM,OACN,SAAU,IAMZ,MAAO,CACL,KAAM,OACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,KAIb,MAAO,CAOL,QAQA,SAGF,MAAQ,CACN,MAAO,0BACLC,EAAAA,yBAEJ,EAEA,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAOC,GAAS,CACd,KAAK,MAAM,QAASA,CAAK,CAC3B,EAEA,MAAOA,GAAS,CACd,KAAK,SAAS,KAAK,EAAE,EACrB,KAAK,MAAM,QAASA,CAAK,CAC3B,EAEJ,EAEA,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,OAC7C,GAGF,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,QAEtC,CACF,kEA/IE,OAAAC,YAAA,EAAAC,cAqBYC,EArBZC,EAAAA,WAqBY,CApBT,aAAcC,EAAA,EAAE,GAChB,MAAK,WAAoCC,EAAA,yBAAyB,QAAQ,EAAGC,EAAA,YAA2BF,EAAA,UAOzG,KAAK,MACJ,mBAAkBE,EAAA,UAAU,GAC5B,4BAA2BF,EAAA,OAAO,GAClC,aAAYA,EAAA,MACb,UAAQ,SACP,SAAUE,EAAA,WAAU,IAAA,KACpB,SAAUA,EAAA,aAAa,UAAYF,EAAA,UAC5BG,EAAA,OACRC,EAAAA,WAAMF,EAAA,YAAY,CAAA,EAAA,mBAGlB,IAAQ,CAARG,aAAQF,EAAA,OAAA,SAAA"}
+{"version":3,"file":"tab.cjs","sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tablist__item',\n      tabClass,\n      { 'd-tablist__item--vertical': groupContext.orientation === 'vertical' },\n      { 'd-btn--disabled': isDisabled },\n      { 'd-tab--is-selected': !groupContext.outlined && groupContext.kind !== 'muted' && isSelected },\n    ]\"\n    :importance=\"buttonImportance\"\n    :kind=\"buttonKind\"\n    :active=\"buttonActive\"\n    :size=\"buttonSize\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :label-class=\"labelClass\"\n    :leading-class=\"leadingClass\"\n    :trailing-class=\"trailingClass\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isSelected ? '0' : '-1'\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot Icon displayed at the start (left in LTR) of the tab -->\n    <template\n      v-if=\"$slots.startIcon\"\n      #startIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <!-- @slot @deprecated Use startIcon -->\n    <template\n      v-else-if=\"$slots.icon\"\n      #startIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <!-- @slot Icon displayed at the end (right in LTR) of the tab -->\n    <template\n      v-if=\"$slots.endIcon\"\n      #endIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <template\n      v-if=\"$slots.leading\"\n      #leading\n    >\n      <slot name=\"leading\" />\n    </template>\n    <template\n      v-if=\"$slots.trailing\"\n      #trailing\n    >\n      <slot name=\"trailing\" />\n    </template>\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { DtButton } from '../button';\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: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isDisabled () {\n      return this.groupContext.disabled || this.disabled;\n    },\n\n    buttonSize () {\n      const size = this.groupContext.size;\n      return size === 'default' ? undefined : size;\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n\n    buttonKind () {\n      if (this.groupContext.outlined) {\n        return this.groupContext.kind === 'muted' ? 'muted' : 'default';\n      }\n      if (this.groupContext.kind === 'muted') {\n        return 'muted';\n      }\n      return this.isSelected ? 'default' : 'muted';\n    },\n\n    buttonImportance () {\n      if (this.groupContext.outlined && this.isSelected) {\n        return 'outlined';\n      }\n      return 'clear';\n    },\n\n    buttonActive () {\n      if (this.groupContext.outlined) {\n        return false;\n      }\n      if (this.groupContext.kind === 'muted') {\n        return this.isSelected;\n      }\n      return false;\n    },\n  },\n\n  mounted () {\n    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n\n  methods: {\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","event","size","_openBlock","_createBlock","_component_dt_button","_mergeProps","$props","$options","_ctx","_toHandlers","_createSlots","_renderSlot","_withCtx","iconSize"],"mappings":"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"}

package/dist/lib/tab/tab.js

@@ -1,12 +1,11 @@
-import { TAB_IMPORTANCE_MODIFIERS as r } from "./tabs-constants.js";
-import { resolveComponent as d, openBlock as i, createBlock as n, mergeProps as o, toHandlers as c, withCtx as u, renderSlot as b } from "vue";
+import { resolveComponent as d, openBlock as r, createBlock as o, mergeProps as u, toHandlers as c, createSlots as b, withCtx as a, renderSlot as n } from "vue";
 import { _ as f } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import m from "../button/button.js";
-const p = {
+import g from "../button/button.js";
+const m = {
   compatConfig: { MODE: 3 },
   name: "DtTab",
   components: {
-    DtButton: m
+    DtButton: g
   },
   inject: ["groupContext", "setFocus"],
   inheritAttrs: !1,
@@ -54,6 +53,27 @@ const p = {
     tabClass: {
       type: [String, Array, Object],
       default: ""
+    },
+    /**
+     * Used to customize the label container
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the leading container
+     */
+    leadingClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the trailing container
+     */
+    trailingClass: {
+      type: [String, Array, Object],
+      default: ""
     }
   },
   emits: [
@@ -72,11 +92,6 @@ const p = {
      */
     "click"
   ],
-  data() {
-    return {
-      TAB_IMPORTANCE_MODIFIERS: r
-    };
-  },
   computed: {
     tabListeners() {
       return {
@@ -88,41 +103,100 @@ const p = {
         }
       };
     },
+    isDisabled() {
+      return this.groupContext.disabled || this.disabled;
+    },
+    buttonSize() {
+      const e = this.groupContext.size;
+      return e === "default" ? void 0 : e;
+    },
     isSelected() {
       return this.groupContext.selected === this.panelId;
+    },
+    buttonKind() {
+      return this.groupContext.outlined ? this.groupContext.kind === "muted" ? "muted" : "default" : this.groupContext.kind === "muted" ? "muted" : this.isSelected ? "default" : "muted";
+    },
+    buttonImportance() {
+      return this.groupContext.outlined && this.isSelected ? "outlined" : "clear";
+    },
+    buttonActive() {
+      return this.groupContext.outlined ? !1 : this.groupContext.kind === "muted" ? this.isSelected : !1;
     }
   },
   mounted() {
     this.selected && (this.groupContext.selected = this.panelId);
-  }
+  },
+  methods: {}
 };
-function _(e, h, t, C, s, a) {
+function h(e, C, i, p, S, t) {
   const l = d("dt-button");
-  return i(), n(l, o({
-    id: `dt-tab-${t.id}`,
+  return r(), o(l, u({
+    id: `dt-tab-${i.id}`,
     class: [
-      "d-tab",
-      {
-        [s.TAB_IMPORTANCE_MODIFIERS.selected]: a.isSelected
-      },
-      t.tabClass
+      "d-tablist__item",
+      i.tabClass,
+      { "d-tablist__item--vertical": t.groupContext.orientation === "vertical" },
+      { "d-btn--disabled": t.isDisabled },
+      { "d-tab--is-selected": !t.groupContext.outlined && t.groupContext.kind !== "muted" && t.isSelected }
     ],
+    importance: t.buttonImportance,
+    kind: t.buttonKind,
+    active: t.buttonActive,
+    size: t.buttonSize,
     role: "tab",
-    "aria-selected": `${a.isSelected}`,
-    "aria-controls": `dt-panel-${t.panelId}`,
-    "aria-label": t.label,
+    "aria-selected": `${t.isSelected}`,
+    "aria-controls": `dt-panel-${i.panelId}`,
+    "aria-label": i.label,
+    "aria-disabled": t.isDisabled ? "true" : void 0,
+    "label-class": i.labelClass,
+    "leading-class": i.leadingClass,
+    "trailing-class": i.trailingClass,
     "data-qa": "dt-tab",
-    tabindex: a.isSelected ? "0" : "-1",
-    disabled: a.groupContext.disabled || t.disabled
-  }, e.$attrs, c(a.tabListeners)), {
-    default: u(() => [
-      b(e.$slots, "default")
+    tabindex: t.isSelected ? "0" : "-1"
+  }, e.$attrs, c(t.tabListeners)), b({
+    default: a(() => [
+      n(e.$slots, "default")
     ]),
-    _: 3
-  }, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
+    _: 2
+  }, [
+    e.$slots.startIcon ? {
+      name: "startIcon",
+      fn: a(({ iconSize: s }) => [
+        n(e.$slots, "startIcon", { iconSize: s })
+      ]),
+      key: "0"
+    } : e.$slots.icon ? {
+      name: "startIcon",
+      fn: a(({ iconSize: s }) => [
+        n(e.$slots, "icon", { iconSize: s })
+      ]),
+      key: "1"
+    } : void 0,
+    e.$slots.endIcon ? {
+      name: "endIcon",
+      fn: a(({ iconSize: s }) => [
+        n(e.$slots, "endIcon", { iconSize: s })
+      ]),
+      key: "2"
+    } : void 0,
+    e.$slots.leading ? {
+      name: "leading",
+      fn: a(() => [
+        n(e.$slots, "leading")
+      ]),
+      key: "3"
+    } : void 0,
+    e.$slots.trailing ? {
+      name: "trailing",
+      fn: a(() => [
+        n(e.$slots, "trailing")
+      ]),
+      key: "4"
+    } : void 0
+  ]), 1040, ["id", "class", "importance", "kind", "active", "size", "aria-selected", "aria-controls", "aria-label", "aria-disabled", "label-class", "leading-class", "trailing-class", "tabindex"]);
 }
-const y = /* @__PURE__ */ f(p, [["render", _]]);
+const z = /* @__PURE__ */ f(m, [["render", h]]);
 export {
-  y as default
+  z as default
 };
 //# sourceMappingURL=tab.js.map