@dialpad/dialtone-vue 2.153.0 → 2.154.1

package/dist/lib/split-button.cjs

@@ -4,21 +4,21 @@ const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4
 const lib_button = require("./button.cjs");
 const vue2 = require("@dialpad/dialtone-icons/vue2");
 const common_utils = require("../common/utils.cjs");
-const dropdown = require("../chunks/dropdown-mjrYu_mK.js");
+const dropdown = require("../chunks/dropdown-pHxnQPzT.js");
 require("vue");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("../common/constants.cjs");
-require("../chunks/keyboard_list_navigation-x3D6RcC7.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
 require("../chunks/dropdown_constants-2pGCXy7m.js");
-require("../chunks/sr_only_close_button-2Q9Ny1Nc.js");
+require("../chunks/sr_only_close_button-ZaGdAHz7.js");
 require("./icon.cjs");
-require("../chunks/icon_constants-VEA0wI5C.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./popover.cjs");
-require("../chunks/popover_constants-h9MD6WUt.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 require("@linusborg/vue-simple-portal");
-require("../chunks/modal-OaWxzqNt.js");
+require("../chunks/modal-VgxXAQFP.js");
 require("./lazy-show.cjs");
 require("../chunks/list_item_constants-EiqkqZvP.js");
 const _sfc_main$2 = {
@@ -114,40 +114,21 @@ const _sfc_main$2 = {
 };
 var _sfc_render$2 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-button", {
-    directives: [{
-      name: "dt-tooltip",
-      rawName: "v-dt-tooltip",
-      value: _vm.tooltipText,
-      expression: "tooltipText"
-    }],
-    class: `d-split-btn__alpha d-split-btn__alpha--${_vm.size}`,
-    attrs: {
-      "data-qa": "dt-split-button-alpha",
-      "active": _vm.active,
-      "aria-label": _vm.ariaLabel,
-      "assertive-on-focus": _vm.assertiveOnFocus,
-      "disabled": _vm.disabled,
-      "icon-position": _vm.iconPosition,
-      "importance": _vm.importance,
-      "kind": _vm.kind,
-      "label-class": _vm.labelClass,
-      "loading": _vm.loading,
-      "size": _vm.size
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function() {
-        return [_vm._t("icon", null, {
-          "size": _vm.BUTTON_ICON_SIZES[_vm.size]
-        })];
-      },
-      proxy: true
-    }], null, true)
-  }, [_vm._t("default")], 2);
+  return _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.tooltipText, expression: "tooltipText" }], class: `d-split-btn__alpha d-split-btn__alpha--${_vm.size}`, attrs: { "data-qa": "dt-split-button-alpha", "active": _vm.active, "aria-label": _vm.ariaLabel, "assertive-on-focus": _vm.assertiveOnFocus, "disabled": _vm.disabled, "icon-position": _vm.iconPosition, "importance": _vm.importance, "kind": _vm.kind, "label-class": _vm.labelClass, "loading": _vm.loading, "size": _vm.size }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("icon", null, { "size": _vm.BUTTON_ICON_SIZES[_vm.size] })];
+  }, proxy: true }], null, true) }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const SplitButtonAlpha = __component__$2.exports;
 const SPLIT_BUTTON_ICON_SIZES = {
   xs: "100",
@@ -229,43 +210,23 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-button", {
-    directives: [{
-      name: "dt-tooltip",
-      rawName: "v-dt-tooltip",
-      value: _vm.tooltipText,
-      expression: "tooltipText"
-    }],
-    class: `d-split-btn__omega d-split-btn__omega--${_vm.size}`,
-    attrs: {
-      "id": _vm.id,
-      "data-qa": "dt-split-button-omega",
-      "active": _vm.active,
-      "aria-label": _vm.ariaLabel,
-      "disabled": _vm.disabled,
-      "importance": _vm.importance,
-      "kind": _vm.kind,
-      "size": _vm.size
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function() {
-        return [_vm._t("icon", function() {
-          return [_c("dt-icon-chevron-down", {
-            attrs: {
-              "size": _vm.SPLIT_BUTTON_ICON_SIZES[_vm.size]
-            }
-          })];
-        }, {
-          "size": _vm.SPLIT_BUTTON_ICON_SIZES[_vm.size]
-        })];
-      },
-      proxy: true
-    }], null, true)
-  });
+  return _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.tooltipText, expression: "tooltipText" }], class: `d-split-btn__omega d-split-btn__omega--${_vm.size}`, attrs: { "id": _vm.id, "data-qa": "dt-split-button-omega", "active": _vm.active, "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "importance": _vm.importance, "kind": _vm.kind, "size": _vm.size }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("icon", function() {
+      return [_c("dt-icon-chevron-down", { attrs: { "size": _vm.SPLIT_BUTTON_ICON_SIZES[_vm.size] } })];
+    }, { "size": _vm.SPLIT_BUTTON_ICON_SIZES[_vm.size] })];
+  }, proxy: true }], null, true) });
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const SplitButtonOmega = __component__$1.exports;
 const _sfc_main = {
   name: "DtSplitButton",
@@ -512,100 +473,39 @@ const _sfc_main = {
 };
 var _sfc_render = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", {
-    staticClass: "d-split-btn",
-    style: {
-      width: _vm.width
-    },
-    attrs: {
-      "data-qa": "dt-split-button"
-    }
-  }, [_c("split-button-alpha", _vm._b({
-    ref: "alphaButton",
-    nativeOn: {
-      "click": function($event) {
-        return _vm.$emit("alpha-clicked");
-      }
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function({
-        size: iconSize
-      }) {
-        return [_vm._t("alphaIcon", null, {
-          "size": iconSize
-        })];
-      }
-    }], null, true)
-  }, "split-button-alpha", _vm.alphaButtonProps, false), [_vm._t("default")], 2), _vm._t("omega", function() {
-    return [_vm.$slots.dropdownList ? _c("dt-dropdown", {
-      attrs: {
-        "placement": _vm.dropdownPlacement
-      },
-      on: {
-        "click": function($event) {
-          _vm.isDropdownOpen = true;
-        },
-        "opened": (open) => _vm.isDropdownOpen = open
-      },
-      scopedSlots: _vm._u([{
-        key: "anchor",
-        fn: function(attrs) {
-          return [_c("split-button-omega", _vm._b({
-            attrs: {
-              "active": _vm.isDropdownOpen
-            },
-            nativeOn: {
-              "click": function($event) {
-                return _vm.$emit("omega-clicked");
-              }
-            },
-            scopedSlots: _vm._u([{
-              key: "icon",
-              fn: function({
-                size: iconSize
-              }) {
-                return [_vm._t("omegaIcon", null, {
-                  "size": iconSize
-                })];
-              }
-            }], null, true)
-          }, "split-button-omega", {
-            ...attrs,
-            ..._vm.omegaButtonProps
-          }, false))];
-        }
-      }, {
-        key: "list",
-        fn: function({
-          close
-        }) {
-          return [_vm._t("dropdownList", null, {
-            "close": close
-          })];
-        }
-      }], null, true)
-    }) : _c("split-button-omega", _vm._b({
-      nativeOn: {
-        "click": function($event) {
-          return _vm.$emit("omega-clicked");
-        }
-      },
-      scopedSlots: _vm._u([{
-        key: "icon",
-        fn: function({
-          size: iconSize
-        }) {
-          return [_vm._t("omegaIcon", null, {
-            "size": iconSize
-          })];
-        }
-      }], null, true)
-    }, "split-button-omega", _vm.omegaButtonProps, false))];
+  return _c("span", { staticClass: "d-split-btn", style: { width: _vm.width }, attrs: { "data-qa": "dt-split-button" } }, [_c("split-button-alpha", _vm._b({ ref: "alphaButton", nativeOn: { "click": function($event) {
+    return _vm.$emit("alpha-clicked");
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
+    return [_vm._t("alphaIcon", null, { "size": iconSize })];
+  } }], null, true) }, "split-button-alpha", _vm.alphaButtonProps, false), [_vm._t("default")], 2), _vm._t("omega", function() {
+    return [_vm.$slots.dropdownList ? _c("dt-dropdown", { attrs: { "placement": _vm.dropdownPlacement }, on: { "click": function($event) {
+      _vm.isDropdownOpen = true;
+    }, "opened": (open) => _vm.isDropdownOpen = open }, scopedSlots: _vm._u([{ key: "anchor", fn: function(attrs) {
+      return [_c("split-button-omega", _vm._b({ attrs: { "active": _vm.isDropdownOpen }, nativeOn: { "click": function($event) {
+        return _vm.$emit("omega-clicked");
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
+        return [_vm._t("omegaIcon", null, { "size": iconSize })];
+      } }], null, true) }, "split-button-omega", { ...attrs, ..._vm.omegaButtonProps }, false))];
+    } }, { key: "list", fn: function({ close }) {
+      return [_vm._t("dropdownList", null, { "close": close })];
+    } }], null, true) }) : _c("split-button-omega", _vm._b({ nativeOn: { "click": function($event) {
+      return _vm.$emit("omega-clicked");
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
+      return [_vm._t("omegaIcon", null, { "size": iconSize })];
+    } }], null, true) }, "split-button-omega", _vm.omegaButtonProps, false))];
   })], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const split_button = __component__.exports;
 exports.DtSplitButton = split_button;
 exports.SPLIT_BUTTON_ICON_SIZES = SPLIT_BUTTON_ICON_SIZES;

package/dist/lib/split-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.cjs","sources":["../../components/split_button/split_button-alpha.vue","../../components/split_button/split_button_constants.js","../../components/split_button/split_button-omega.vue","../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n","<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue2';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click.native=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click.native=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click.native=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    defaultSlotHasContent () {\n      return this.$scopedSlots.default && this.$scopedSlots.default() && this.$scopedSlots.default()[0]?.text?.trim();\n    },\n\n    omegaSlotIsSet () {\n      return this.$scopedSlots.omega && this.$scopedSlots.omega();\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (this.defaultSlotHasContent) return;\n\n      // This can't be a computed prop due to reactivity issues.\n      const isAlphaIconSet = this.$refs.alphaButton?.$scopedSlots.icon && this.$refs.alphaButton.$scopedSlots.icon();\n\n      if (isAlphaIconSet && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (this.omegaSlotIsSet) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtButton","props","active","type","Boolean","default","ariaLabel","String","iconPosition","labelClass","Array","Object","loading","tooltipText","assertiveOnFocus","disabled","importance","kind","size","data","BUTTON_ICON_SIZES","SPLIT_BUTTON_ICON_SIZES","xs","sm","md","lg","xl","DtIconChevronDown","id","getUniqueString","SplitButtonOmega","DtDropdown","SplitButtonAlpha","inheritAttrs","alphaActive","alphaAriaLabel","alphaIconPosition","validator","position","keys","ICON_POSITION_MODIFIERS","includes","alphaLabelClass","alphaLoading","alphaTooltipText","undefined","dropdownPlacement","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","omegaActive","omegaAriaLabel","omegaId","omegaTooltipText","s","BUTTON_SIZE_MODIFIERS","width","emits","isDropdownOpen","computed","alphaButtonProps","class","$attrs","omegaButtonProps","defaultSlotHasContent","$scopedSlots","text","trim","omegaSlotIsSet","omega","created","validateProps","updated","methods","validateAlphaButtonProps","validateOmegaButtonProps","isAlphaIconSet","$refs","alphaButton","icon","console","warn"],"mappings":"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"}
+{"version":3,"file":"split-button.cjs","sources":["../../components/split_button/split_button-alpha.vue","../../components/split_button/split_button_constants.js","../../components/split_button/split_button-omega.vue","../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-alpha\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__alpha d-split-btn__alpha--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/button';\n\nexport default {\n  name: 'SplitButtonAlpha',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n","<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"tooltipText\"\n    data-qa=\"dt-split-button-omega\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__omega d-split-btn__omega--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[size]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[size]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './split_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue2';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'SplitButtonOmega',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n","<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"d-split-btn\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click.native=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click.native=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click.native=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n      };\n    },\n\n    defaultSlotHasContent () {\n      return this.$scopedSlots.default && this.$scopedSlots.default() && this.$scopedSlots.default()[0]?.text?.trim();\n    },\n\n    omegaSlotIsSet () {\n      return this.$scopedSlots.omega && this.$scopedSlots.omega();\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (this.defaultSlotHasContent) return;\n\n      // This can't be a computed prop due to reactivity issues.\n      const isAlphaIconSet = this.$refs.alphaButton?.$scopedSlots.icon && this.$refs.alphaButton.$scopedSlots.icon();\n\n      if (isAlphaIconSet && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (this.omegaSlotIsSet) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","BUTTON_ICON_SIZES","DtIconChevronDown","getUniqueString","DtDropdown","ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_SIZE_MODIFIERS"],"mappings":"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"}

package/dist/lib/split-button.js

@@ -2,21 +2,21 @@ import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.j
 import { DtButton, BUTTON_ICON_SIZES, ICON_POSITION_MODIFIERS, BUTTON_IMPORTANCE_MODIFIERS, BUTTON_KIND_MODIFIERS, BUTTON_SIZE_MODIFIERS } from "./button.js";
 import { DtIconChevronDown } from "@dialpad/dialtone-icons/vue2";
 import { getUniqueString } from "../common/utils.js";
-import { DtDropdown } from "../chunks/dropdown-YdCyJ5Dq.js";
+import { DtDropdown } from "../chunks/dropdown-6UoczdUY.js";
 import "vue";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "../common/constants.js";
-import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
 import "../chunks/dropdown_constants-w1MXGC3Z.js";
-import "../chunks/sr_only_close_button-IjMVfBDE.js";
+import "../chunks/sr_only_close_button-81bHIpPu.js";
 import "./icon.js";
-import "../chunks/icon_constants-TdxqLsS2.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./popover.js";
-import "../chunks/popover_constants-6YkPPbnk.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-8X6poIZW.js";
+import "../chunks/modal-XOr4kiNZ.js";
 import "./lazy-show.js";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 const _sfc_main$2 = {
@@ -112,40 +112,21 @@ const _sfc_main$2 = {
 };
 var _sfc_render$2 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-button", {
-    directives: [{
-      name: "dt-tooltip",
-      rawName: "v-dt-tooltip",
-      value: _vm.tooltipText,
-      expression: "tooltipText"
-    }],
-    class: `d-split-btn__alpha d-split-btn__alpha--${_vm.size}`,
-    attrs: {
-      "data-qa": "dt-split-button-alpha",
-      "active": _vm.active,
-      "aria-label": _vm.ariaLabel,
-      "assertive-on-focus": _vm.assertiveOnFocus,
-      "disabled": _vm.disabled,
-      "icon-position": _vm.iconPosition,
-      "importance": _vm.importance,
-      "kind": _vm.kind,
-      "label-class": _vm.labelClass,
-      "loading": _vm.loading,
-      "size": _vm.size
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function() {
-        return [_vm._t("icon", null, {
-          "size": _vm.BUTTON_ICON_SIZES[_vm.size]
-        })];
-      },
-      proxy: true
-    }], null, true)
-  }, [_vm._t("default")], 2);
+  return _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.tooltipText, expression: "tooltipText" }], class: `d-split-btn__alpha d-split-btn__alpha--${_vm.size}`, attrs: { "data-qa": "dt-split-button-alpha", "active": _vm.active, "aria-label": _vm.ariaLabel, "assertive-on-focus": _vm.assertiveOnFocus, "disabled": _vm.disabled, "icon-position": _vm.iconPosition, "importance": _vm.importance, "kind": _vm.kind, "label-class": _vm.labelClass, "loading": _vm.loading, "size": _vm.size }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("icon", null, { "size": _vm.BUTTON_ICON_SIZES[_vm.size] })];
+  }, proxy: true }], null, true) }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const SplitButtonAlpha = __component__$2.exports;
 const SPLIT_BUTTON_ICON_SIZES = {
   xs: "100",
@@ -227,43 +208,23 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-button", {
-    directives: [{
-      name: "dt-tooltip",
-      rawName: "v-dt-tooltip",
-      value: _vm.tooltipText,
-      expression: "tooltipText"
-    }],
-    class: `d-split-btn__omega d-split-btn__omega--${_vm.size}`,
-    attrs: {
-      "id": _vm.id,
-      "data-qa": "dt-split-button-omega",
-      "active": _vm.active,
-      "aria-label": _vm.ariaLabel,
-      "disabled": _vm.disabled,
-      "importance": _vm.importance,
-      "kind": _vm.kind,
-      "size": _vm.size
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function() {
-        return [_vm._t("icon", function() {
-          return [_c("dt-icon-chevron-down", {
-            attrs: {
-              "size": _vm.SPLIT_BUTTON_ICON_SIZES[_vm.size]
-            }
-          })];
-        }, {
-          "size": _vm.SPLIT_BUTTON_ICON_SIZES[_vm.size]
-        })];
-      },
-      proxy: true
-    }], null, true)
-  });
+  return _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.tooltipText, expression: "tooltipText" }], class: `d-split-btn__omega d-split-btn__omega--${_vm.size}`, attrs: { "id": _vm.id, "data-qa": "dt-split-button-omega", "active": _vm.active, "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "importance": _vm.importance, "kind": _vm.kind, "size": _vm.size }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("icon", function() {
+      return [_c("dt-icon-chevron-down", { attrs: { "size": _vm.SPLIT_BUTTON_ICON_SIZES[_vm.size] } })];
+    }, { "size": _vm.SPLIT_BUTTON_ICON_SIZES[_vm.size] })];
+  }, proxy: true }], null, true) });
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const SplitButtonOmega = __component__$1.exports;
 const _sfc_main = {
   name: "DtSplitButton",
@@ -510,100 +471,39 @@ const _sfc_main = {
 };
 var _sfc_render = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", {
-    staticClass: "d-split-btn",
-    style: {
-      width: _vm.width
-    },
-    attrs: {
-      "data-qa": "dt-split-button"
-    }
-  }, [_c("split-button-alpha", _vm._b({
-    ref: "alphaButton",
-    nativeOn: {
-      "click": function($event) {
-        return _vm.$emit("alpha-clicked");
-      }
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function({
-        size: iconSize
-      }) {
-        return [_vm._t("alphaIcon", null, {
-          "size": iconSize
-        })];
-      }
-    }], null, true)
-  }, "split-button-alpha", _vm.alphaButtonProps, false), [_vm._t("default")], 2), _vm._t("omega", function() {
-    return [_vm.$slots.dropdownList ? _c("dt-dropdown", {
-      attrs: {
-        "placement": _vm.dropdownPlacement
-      },
-      on: {
-        "click": function($event) {
-          _vm.isDropdownOpen = true;
-        },
-        "opened": (open) => _vm.isDropdownOpen = open
-      },
-      scopedSlots: _vm._u([{
-        key: "anchor",
-        fn: function(attrs) {
-          return [_c("split-button-omega", _vm._b({
-            attrs: {
-              "active": _vm.isDropdownOpen
-            },
-            nativeOn: {
-              "click": function($event) {
-                return _vm.$emit("omega-clicked");
-              }
-            },
-            scopedSlots: _vm._u([{
-              key: "icon",
-              fn: function({
-                size: iconSize
-              }) {
-                return [_vm._t("omegaIcon", null, {
-                  "size": iconSize
-                })];
-              }
-            }], null, true)
-          }, "split-button-omega", {
-            ...attrs,
-            ..._vm.omegaButtonProps
-          }, false))];
-        }
-      }, {
-        key: "list",
-        fn: function({
-          close
-        }) {
-          return [_vm._t("dropdownList", null, {
-            "close": close
-          })];
-        }
-      }], null, true)
-    }) : _c("split-button-omega", _vm._b({
-      nativeOn: {
-        "click": function($event) {
-          return _vm.$emit("omega-clicked");
-        }
-      },
-      scopedSlots: _vm._u([{
-        key: "icon",
-        fn: function({
-          size: iconSize
-        }) {
-          return [_vm._t("omegaIcon", null, {
-            "size": iconSize
-          })];
-        }
-      }], null, true)
-    }, "split-button-omega", _vm.omegaButtonProps, false))];
+  return _c("span", { staticClass: "d-split-btn", style: { width: _vm.width }, attrs: { "data-qa": "dt-split-button" } }, [_c("split-button-alpha", _vm._b({ ref: "alphaButton", nativeOn: { "click": function($event) {
+    return _vm.$emit("alpha-clicked");
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
+    return [_vm._t("alphaIcon", null, { "size": iconSize })];
+  } }], null, true) }, "split-button-alpha", _vm.alphaButtonProps, false), [_vm._t("default")], 2), _vm._t("omega", function() {
+    return [_vm.$slots.dropdownList ? _c("dt-dropdown", { attrs: { "placement": _vm.dropdownPlacement }, on: { "click": function($event) {
+      _vm.isDropdownOpen = true;
+    }, "opened": (open) => _vm.isDropdownOpen = open }, scopedSlots: _vm._u([{ key: "anchor", fn: function(attrs) {
+      return [_c("split-button-omega", _vm._b({ attrs: { "active": _vm.isDropdownOpen }, nativeOn: { "click": function($event) {
+        return _vm.$emit("omega-clicked");
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
+        return [_vm._t("omegaIcon", null, { "size": iconSize })];
+      } }], null, true) }, "split-button-omega", { ...attrs, ..._vm.omegaButtonProps }, false))];
+    } }, { key: "list", fn: function({ close }) {
+      return [_vm._t("dropdownList", null, { "close": close })];
+    } }], null, true) }) : _c("split-button-omega", _vm._b({ nativeOn: { "click": function($event) {
+      return _vm.$emit("omega-clicked");
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
+      return [_vm._t("omegaIcon", null, { "size": iconSize })];
+    } }], null, true) }, "split-button-omega", _vm.omegaButtonProps, false))];
   })], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const split_button = __component__.exports;
 export {
   split_button as DtSplitButton,