@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    :class=\"[rootClass, 'd-split-btn']\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"$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=\"$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=\"$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';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\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     * HTML button disabled attribute for alpha button only\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    alphaDisabled: {\n      type: Boolean,\n      default: false,\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 for both buttons.\n     * Use alphaDisabled or omegaDisabled to disable buttons individually.\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     * HTML button disabled attribute for omega button only\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    omegaDisabled: {\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    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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\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 || this.alphaDisabled,\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        style: this.$attrs.style,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled || this.omegaDisabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  mounted () {\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if (hasSlotContent(this.$slots.alphaIcon) && !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 (hasSlotContent(this.$slots.omega)) 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","SplitButtonOmega","DtDropdown","SplitButtonAlpha","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","$props","_createVNode","_component_split_button_alpha","_mergeProps","$options","_ctx","_withCtx","iconSize","_renderSlot","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_omega","close"],"mappings":"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"}
+{"version":3,"file":"split-button.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    :class=\"[rootClass, 'd-split-btn']\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"onStartClick\"\n    >\n      <!-- Dual-icon path: when startEndIcon is provided, use DtButton's startIcon/endIcon -->\n      <template\n        v-if=\"$slots.startEndIcon\"\n        #startIcon=\"{ size: iconSize }\"\n      >\n        <!-- @slot Start (left) button icon slot -->\n        <slot\n          v-if=\"$slots.startIcon\"\n          name=\"startIcon\"\n          :size=\"iconSize\"\n        />\n        <!-- @slot @deprecated Use startIcon -->\n        <slot\n          v-else\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <template\n        v-if=\"$slots.startEndIcon\"\n        #endIcon=\"{ size: iconSize }\"\n      >\n        <!-- @slot End-positioned icon within the start button (enables dual icons on the start button) -->\n        <slot\n          name=\"startEndIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- Legacy single-icon path: uses DtButton's icon slot with iconPosition -->\n      <template\n        v-if=\"!$slots.startEndIcon\"\n        #icon=\"{ size: iconSize }\"\n      >\n        <!-- @slot Start (left) button icon slot -->\n        <slot\n          v-if=\"$slots.startIcon\"\n          name=\"startIcon\"\n          :size=\"iconSize\"\n        />\n        <!-- @slot @deprecated Use startIcon -->\n        <slot\n          v-else\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <template\n        v-if=\"$slots.leading\"\n        #leading\n      >\n        <!-- @slot Leading slot, forwarded to the alpha button's leading slot -->\n        <slot name=\"leading\" />\n      </template>\n      <template\n        v-if=\"$slots.trailing\"\n        #trailing\n      >\n        <!-- @slot Trailing slot, forwarded to the alpha button's trailing slot -->\n        <slot name=\"trailing\" />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot End (right) content slot, overrides end button styling and functionality completely -->\n    <template v-if=\"$slots.end\">\n      <slot name=\"end\" />\n    </template>\n    <!-- @slot @deprecated Use end -->\n    <template v-else-if=\"$slots.omega\">\n      <slot name=\"omega\" />\n    </template>\n    <template v-else>\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=\"onEndClick\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot End (right) button icon slot -->\n              <slot\n                v-if=\"$slots.endIcon\"\n                name=\"endIcon\"\n                :size=\"iconSize\"\n              />\n              <!-- @slot @deprecated Use endIcon -->\n              <slot\n                v-else\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=\"onEndClick\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot End (right) button icon slot -->\n          <slot\n            v-if=\"$slots.endIcon\"\n            name=\"endIcon\"\n            :size=\"iconSize\"\n          />\n          <!-- @slot @deprecated Use endIcon -->\n          <slot\n            v-else\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </template>\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';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\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 start button should have active styling\n     * @values true, false\n     */\n    startActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use startActive\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the start button\n     */\n    startAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * @deprecated Use startAriaLabel\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The position of the icon slot within the start button.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    startIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * @deprecated Use startIconPosition\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: undefined,\n      validator: (position) => position === undefined || Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the start label container\n     */\n    startLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start button leading container\n     */\n    startLeadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * @deprecated Use startLeadingClass\n     */\n    alphaLeadingClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * Used to customize the start button trailing container\n     */\n    startTrailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * @deprecated Use startTrailingClass\n     */\n    alphaTrailingClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * @deprecated Use startLabelClass\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * HTML button disabled attribute for start button only\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    startDisabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use startDisabled\n     * @values true, false\n     */\n    alphaDisabled: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Whether the start button should display a loading animation or not.\n     * @values true, false\n     */\n    startLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use startLoading\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the start button,\n     * required if no content is passed to default slot\n     */\n    startTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * @deprecated Use startTooltipText\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 for both buttons.\n     * Use startDisabled or endDisabled to disable buttons individually.\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\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 end button should have active styling\n     * @values true, false\n     */\n    endActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use endActive\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the end button\n     */\n    endAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * @deprecated Use endAriaLabel\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * HTML button disabled attribute for end button only\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    endDisabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use endDisabled\n     * @values true, false\n     */\n    omegaDisabled: {\n      type: Boolean,\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    endId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * @deprecated Use endId\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the end button,\n     * required as it is an icon only button\n     */\n    endTooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * @deprecated Use endTooltipText\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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native start button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'start-clicked',\n\n    /**\n     * @deprecated Use start-clicked\n     */\n    'alpha-clicked',\n\n    /**\n     * Native end button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'end-clicked',\n\n    /**\n     * @deprecated Use end-clicked\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 ?? this.startActive,\n        ariaLabel: this.alphaAriaLabel ?? this.startAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled || (this.alphaDisabled ?? this.startDisabled),\n        iconPosition: this.alphaIconPosition ?? this.startIconPosition,\n        labelClass: this.alphaLabelClass ?? this.startLabelClass,\n        leadingClass: this.alphaLeadingClass ?? this.startLeadingClass,\n        trailingClass: this.alphaTrailingClass ?? this.startTrailingClass,\n        loading: this.alphaLoading ?? this.startLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText ?? this.startTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId ?? this.endId,\n        active: this.omegaActive ?? this.endActive,\n        ariaLabel: this.omegaAriaLabel ?? this.endAriaLabel,\n        disabled: this.disabled || (this.omegaDisabled ?? this.endDisabled),\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText ?? this.endTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  mounted () {\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  methods: {\n    onStartClick () {\n      this.$emit('start-clicked');\n      this.$emit('alpha-clicked');\n    },\n\n    onEndClick () {\n      this.$emit('end-clicked');\n      this.$emit('omega-clicked');\n    },\n\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if ((hasSlotContent(this.$slots.startIcon) || hasSlotContent(this.$slots.alphaIcon)) &&\n        !(this.alphaTooltipText ?? this.startTooltipText)) {\n        console.warn('start-tooltip-text prop must be set if start button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (hasSlotContent(this.$slots.end) || hasSlotContent(this.$slots.omega)) return;\n\n      if (!(this.omegaTooltipText ?? this.endTooltipText)) {\n        console.warn('end-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SplitButtonOmega","DtDropdown","SplitButtonAlpha","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","$props","_createVNode","_component_split_button_alpha","_mergeProps","$options","_renderSlot","_ctx","_withCtx","iconSize","_Fragment","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_omega","close","_openBlock"],"mappings":"6aA4JA,MAAKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,gBAEN,WAAY,CACV,iBAAAC,EAAAA,mBACAC,EAAAA,QACA,iBAAAC,EAAAA,SAGF,aAAc,GAEd,MAAO,CAKL,YAAa,CACX,KAAM,QACN,QAAS,IAOX,YAAa,CACX,KAAM,QACN,QAAS,MAMX,eAAgB,CACd,KAAM,OACN,QAAS,MAMX,eAAgB,CACd,KAAM,OACN,QAAS,QAOX,kBAAmB,CACjB,KAAM,OACN,QAAS,OACT,UAAYC,GAAa,OAAO,KAAKC,yBAAuB,EAAE,SAASD,CAAQ,GAOjF,kBAAmB,CACjB,KAAM,OACN,QAAS,OACT,UAAYA,GAAaA,IAAa,QAAa,OAAO,KAAKC,EAAAA,uBAAuB,EAAE,SAASD,CAAQ,GAM3G,gBAAiB,CACf,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,kBAAmB,CACjB,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,kBAAmB,CACjB,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,QAMX,mBAAoB,CAClB,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAMX,mBAAoB,CAClB,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,QAMX,gBAAiB,CACf,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,QAUX,cAAe,CACb,KAAM,QACN,QAAS,IAOX,cAAe,CACb,KAAM,QACN,QAAS,MAOX,aAAc,CACZ,KAAM,QACN,QAAS,IAOX,aAAc,CACZ,KAAM,QACN,QAAS,MAOX,iBAAkB,CAChB,KAAM,OACN,QAAS,QAMX,iBAAkB,CAChB,KAAM,OACN,QAAS,QASX,iBAAkB,CAChB,KAAM,QACN,QAAS,IAWX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,kBAAmB,CACjB,KAAM,OACN,QAAS,cAOX,WAAY,CACV,KAAM,OACN,QAAS,UACT,UAAYE,GAAM,OAAO,KAAKC,6BAA2B,EAAE,SAASD,CAAC,GAOvE,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAM,OAAO,KAAKC,uBAAqB,EAAE,SAASD,CAAC,GAOjE,UAAW,CACT,KAAM,QACN,QAAS,IAOX,YAAa,CACX,KAAM,QACN,QAAS,MAMX,aAAc,CACZ,KAAM,OACN,QAAS,MAMX,eAAgB,CACd,KAAM,OACN,QAAS,QAUX,YAAa,CACX,KAAM,QACN,QAAS,IAOX,cAAe,CACb,KAAM,QACN,QAAS,MAOX,MAAO,CACL,KAAM,OACN,QAAS,QAMX,QAAS,CACP,KAAM,OACN,QAAS,QAOX,eAAgB,CACd,KAAM,OACN,QAAS,QAMX,iBAAkB,CAChB,KAAM,OACN,QAAS,QAOX,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAYE,GAAM,OAAO,KAAKC,uBAAqB,EAAE,SAASD,CAAC,GAUjE,MAAO,CACL,KAAM,OACN,QAAS,MAQX,UAAW,CACT,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAO,CAOL,gBAKA,gBAQA,cAKA,iBAGF,MAAQ,CACN,MAAO,CACL,eAAgB,GAEpB,EAEA,SAAU,CACR,kBAAoB,CAClB,MAAO,CACL,OAAQ,KAAK,aAAe,KAAK,YACjC,UAAW,KAAK,gBAAkB,KAAK,eACvC,iBAAkB,KAAK,iBACvB,SAAU,KAAK,WAAa,KAAK,eAAiB,KAAK,eACvD,aAAc,KAAK,mBAAqB,KAAK,kBAC7C,WAAY,KAAK,iBAAmB,KAAK,gBACzC,aAAc,KAAK,mBAAqB,KAAK,kBAC7C,cAAe,KAAK,oBAAsB,KAAK,mBAC/C,QAAS,KAAK,cAAgB,KAAK,aACnC,WAAY,KAAK,WACjB,KAAM,KAAK,KACX,KAAM,KAAK,KACX,YAAa,KAAK,kBAAoB,KAAK,iBAC3C,MAAO,KAAK,OAAO,MACnB,MAAO,KAAK,OAAO,MAEvB,EAEA,kBAAoB,CAClB,MAAO,CACL,GAAI,KAAK,SAAW,KAAK,MACzB,OAAQ,KAAK,aAAe,KAAK,UACjC,UAAW,KAAK,gBAAkB,KAAK,aACvC,SAAU,KAAK,WAAa,KAAK,eAAiB,KAAK,aACvD,WAAY,KAAK,WACjB,KAAM,KAAK,KACX,KAAM,KAAK,KACX,YAAa,KAAK,kBAAoB,KAAK,eAC3C,MAAO,KAAK,OAAO,MACnB,MAAO,KAAK,OAAO,MAEvB,GAGF,SAAW,CACT,KAAK,cAAa,CACpB,EAEA,SAAW,CACT,KAAK,cAAa,CACpB,EAEA,SAAW,CACTE,EAAAA,gBAAgBC,EAAAA,cAAc,KAAK,GAAG,EAAG,KAAK,SAAS,IAAI,CAC7D,EAEA,QAAS,CACP,cAAgB,CACd,KAAK,MAAM,eAAe,EAC1B,KAAK,MAAM,eAAe,CAC5B,EAEA,YAAc,CACZ,KAAK,MAAM,aAAa,EACxB,KAAK,MAAM,eAAe,CAC5B,EAEA,eAAiB,CACf,KAAK,yBAAwB,EAC7B,KAAK,yBAAwB,CAC/B,EAEA,0BAA4B,CACtBC,iBAAe,KAAK,OAAO,OAAO,IAEjCA,EAAAA,eAAe,KAAK,OAAO,SAAS,GAAKA,iBAAe,KAAK,OAAO,SAAS,IAChF,EAAE,KAAK,kBAAoB,KAAK,mBAChC,QAAQ,KAAK,sEAAsE,CAEvF,EAEA,0BAA4B,CACtBA,EAAAA,eAAe,KAAK,OAAO,GAAG,GAAKA,EAAAA,eAAe,KAAK,OAAO,KAAK,IAEjE,KAAK,kBAAoB,KAAK,iBAClC,QAAQ,KAAK,gEAAgE,CAEjF,EAEJ,+KAzmBEC,EAAAA,mBA4IO,OAAA,CA3IL,UAAQ,kBACP,wBAAQC,EAAA,UAAS,aAAA,CAAA,EACjB,8BAASA,EAAA,KAAK,CAAA,IAEfC,EAAAA,YAmEqBC,EAnErBC,aACUC,EAAA,iBAAgB,CACxB,IAAI,cACH,QAAOA,EAAA,gDA+DR,IAAuB,CAAvBC,aAAuBC,EAAA,OAAA,SAAA,UA3DfA,EAAA,OAAO,mBACZ,YAGD,GAAAC,EAAAA,QAAA,CAIE,MAPkBC,CAAQ,IAAA,CAIpBF,EAAA,OAAO,UADfD,aAIEC,EAAA,OAAA,YAAA,OADC,KAAME,IAGTH,aAIEC,EAAA,OAAA,YAAA,OADC,KAAME,sBAIHF,EAAA,OAAO,mBACZ,UAGD,GAAAC,EAAAA,QAAA,CAGE,MANgBC,CAAQ,IAAA,CAG1BH,EAAAA,WAGEC,EAAA,OAAA,eAAA,CADC,KAAME,CAAQ,CAAA,oBAKVF,EAAA,OAAO,0BACb,OAGD,GAAAC,EAAAA,QAAA,CAIE,MAPaC,CAAQ,IAAA,CAIfF,EAAA,OAAO,UADfD,aAIEC,EAAA,OAAA,YAAA,OADC,KAAME,IAGTH,aAIEC,EAAA,OAAA,YAAA,OADC,KAAME,eAIHF,EAAA,OAAO,cACZ,uBAGD,IAAuB,CAAvBD,aAAuBC,EAAA,OAAA,SAAA,oBAGjBA,EAAA,OAAO,eACZ,wBAGD,IAAwB,CAAxBD,aAAwBC,EAAA,OAAA,UAAA,wCAMZA,EAAA,OAAO,IACrBD,EAAAA,WAAmBC,EAAA,OAAA,MAAA,CAAA,IAAA,CAAA,CAAA,EAGAA,EAAA,OAAO,MAC1BD,EAAAA,WAAqBC,EAAA,OAAA,QAAA,CAAA,IAAA,CAAA,CAAA,iBAEvBP,EAAAA,mBA0DWU,EAAAA,SAAA,CAAA,IAAA,CAAA,EAAA,CAxDDH,EAAA,OAAO,4BADfI,EAAAA,YAmCcC,EAAA,OAjCX,UAAWX,EAAA,kBACX,uBAAOY,EAAA,eAAc,IACrB,SAAMC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAEC,GAAQF,EAAA,eAAiBE,KAEvB,OAAMP,EAAAA,QAAEQ,GAAK,CACtBd,EAAAA,YAmBqBe,EAnBrBb,aAmBqB,CAAA,GAlBNY,KAAUX,EAAA,kBAAgB,CACtC,OAAQQ,EAAA,eACR,QAAOR,EAAA,cAEG,KAAIG,EAAAA,QAEb,CAIE,CAAA,KANqBC,CAAQ,IAAA,CAGvBF,EAAA,OAAO,QADfD,aAIEC,EAAA,OAAA,UAAA,OADC,KAAME,IAGTH,aAIEC,EAAA,OAAA,YAAA,OADC,KAAME,sCAKJ,KAAID,EAAAA,QAEb,CAGE,CALe,MAAAU,KAAK,CAEtBZ,EAAAA,WAGEC,EAAA,OAAA,eAAA,CADC,MAAOW,CAAK,CAAA,4BAKnBC,EAAAA,UAAA,EAAAR,EAAAA,YAmBqBM,EAnBrBb,EAAAA,WAmBqB,CAAA,IAAA,CAAA,EAjBXC,mBAAgB,CACvB,QAAOA,EAAA,UAAU,CAAA,EAAA,CAEP,KAAIG,EAAAA,QAEb,CAIE,CAAA,KANqBC,CAAQ,IAAA,CAGvBF,EAAA,OAAO,QADfD,aAIEC,EAAA,OAAA,UAAA,OADC,KAAME,IAGTH,aAIEC,EAAA,OAAA,YAAA,OADC,KAAME"}

package/dist/lib/split-button/split-button.js

@@ -1,75 +1,157 @@
-import b from "./split-button-alpha.js";
-import O from "./split-button-omega.js";
-import { hasSlotContent as p, warnIfUnmounted as v, returnFirstEl as B } from "../../common/utils/index.js";
-import { resolveComponent as r, openBlock as d, createElementBlock as S, normalizeStyle as k, normalizeClass as I, createVNode as c, mergeProps as m, withCtx as a, renderSlot as i, createBlock as f } from "vue";
-import { _ as T } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import P from "../dropdown/dropdown.js";
-import { BUTTON_SIZE_MODIFIERS as w, BUTTON_KIND_MODIFIERS as $, BUTTON_IMPORTANCE_MODIFIERS as D, ICON_POSITION_MODIFIERS as C } from "../button/button-constants.js";
+import I from "./split-button-alpha.js";
+import T from "./split-button-omega.js";
+import { hasSlotContent as l, warnIfUnmounted as C, returnFirstEl as O } from "../../common/utils/index.js";
+import { resolveComponent as p, openBlock as o, createElementBlock as f, normalizeStyle as S, normalizeClass as $, createVNode as m, mergeProps as u, createSlots as B, withCtx as s, renderSlot as a, Fragment as v, createBlock as y } from "vue";
+import { _ as A } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import L from "../dropdown/dropdown.js";
+import { BUTTON_SIZE_MODIFIERS as P, BUTTON_KIND_MODIFIERS as D, BUTTON_IMPORTANCE_MODIFIERS as w, ICON_POSITION_MODIFIERS as g } from "../button/button-constants.js";
 import "./split-button-constants.js";
-const A = {
+const z = {
   compatConfig: { MODE: 3 },
   name: "DtSplitButton",
   components: {
-    SplitButtonOmega: O,
-    DtDropdown: P,
-    SplitButtonAlpha: b
+    SplitButtonOmega: T,
+    DtDropdown: L,
+    SplitButtonAlpha: I
   },
   inheritAttrs: !1,
   props: {
     /**
-     * Determines whether the alpha button should have active styling
+     * Determines whether the start button should have active styling
      * @values true, false
      */
-    alphaActive: {
+    startActive: {
       type: Boolean,
       default: !1
     },
     /**
-     * Descriptive label for the alpha button
+     * @deprecated Use startActive
+     * @values true, false
      */
-    alphaAriaLabel: {
+    alphaActive: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Descriptive label for the start button
+     */
+    startAriaLabel: {
       type: String,
       default: null
     },
     /**
-     * The position of the icon slot within the alpha button.
-     * @values left, right, top, bottom
+     * @deprecated Use startAriaLabel
      */
-    alphaIconPosition: {
+    alphaAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The position of the icon slot within the start button.
+     * @values start, end, blockStart, blockEnd, left, right, top, bottom
+     */
+    startIconPosition: {
       type: String,
       default: "left",
-      validator: (t) => Object.keys(C).includes(t)
+      validator: (t) => Object.keys(g).includes(t)
     },
     /**
-     * Used to customize the alpha label container
+     * @deprecated Use startIconPosition
+     * @values start, end, blockStart, blockEnd, left, right, top, bottom
      */
-    alphaLabelClass: {
+    alphaIconPosition: {
+      type: String,
+      default: void 0,
+      validator: (t) => t === void 0 || Object.keys(g).includes(t)
+    },
+    /**
+     * Used to customize the start label container
+     */
+    startLabelClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the start button leading container
+     */
+    startLeadingClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * @deprecated Use startLeadingClass
+     */
+    alphaLeadingClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    /**
+     * Used to customize the start button trailing container
+     */
+    startTrailingClass: {
       type: [String, Array, Object],
       default: ""
     },
     /**
-     * HTML button disabled attribute for alpha button only
+     * @deprecated Use startTrailingClass
+     */
+    alphaTrailingClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    /**
+     * @deprecated Use startLabelClass
+     */
+    alphaLabelClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    /**
+     * HTML button disabled attribute for start button only
      * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
      *  (Reference)
      * </a>
      * @values true, false
      */
+    startDisabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @deprecated Use startDisabled
+     * @values true, false
+     */
     alphaDisabled: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Whether the start button should display a loading animation or not.
+     * @values true, false
+     */
+    startLoading: {
       type: Boolean,
       default: !1
     },
     /**
-     * Whether the alpha button should display a loading animation or not.
+     * @deprecated Use startLoading
      * @values true, false
      */
     alphaLoading: {
       type: Boolean,
-      default: !1
+      default: null
     },
     /**
-     * Text shown in tooltip when you hover the alpha button,
+     * Text shown in tooltip when you hover the start button,
      * required if no content is passed to default slot
      */
+    startTooltipText: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @deprecated Use startTooltipText
+     */
     alphaTooltipText: {
       type: String,
       default: void 0
@@ -86,7 +168,7 @@ const A = {
     },
     /**
      * HTML button disabled attribute for both buttons.
-     * Use alphaDisabled or omegaDisabled to disable buttons individually.
+     * Use startDisabled or endDisabled to disable buttons individually.
      * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
      *  (Reference)
      * </a>
@@ -111,55 +193,92 @@ const A = {
     importance: {
       type: String,
       default: "primary",
-      validator: (t) => Object.keys(D).includes(t)
+      validator: (t) => Object.keys(w).includes(t)
     },
     /**
      * The color of the button.
-     * @values default, muted, danger, inverted
+     * @values default, muted, danger
      */
     kind: {
       type: String,
       default: "default",
-      validator: (t) => Object.keys($).includes(t)
+      validator: (t) => Object.keys(D).includes(t)
     },
     /**
-     * Determines whether the omega button should have active styling
+     * Determines whether the end button should have active styling
      * @values true, false
      */
-    omegaActive: {
+    endActive: {
       type: Boolean,
       default: !1
     },
     /**
-     * Descriptive label for the omega button
+     * @deprecated Use endActive
+     * @values true, false
      */
-    omegaAriaLabel: {
+    omegaActive: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Descriptive label for the end button
+     */
+    endAriaLabel: {
       type: String,
       default: null
     },
     /**
-     * HTML button disabled attribute for omega button only
+     * @deprecated Use endAriaLabel
+     */
+    omegaAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * HTML button disabled attribute for end button only
      * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
      *  (Reference)
      * </a>
      * @values true, false
      */
-    omegaDisabled: {
+    endDisabled: {
       type: Boolean,
       default: !1
     },
+    /**
+     * @deprecated Use endDisabled
+     * @values true, false
+     */
+    omegaDisabled: {
+      type: Boolean,
+      default: null
+    },
     /**
      * Element ID, useful in case you need to reference the button
      * as an external anchor for popover.
      */
+    endId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @deprecated Use endId
+     */
     omegaId: {
       type: String,
       default: void 0
     },
     /**
-     * Text shown in tooltip when you hover the omega button,
+     * Text shown in tooltip when you hover the end button,
      * required as it is an icon only button
      */
+    endTooltipText: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * @deprecated Use endTooltipText
+     */
     omegaTooltipText: {
       type: String,
       default: void 0
@@ -171,7 +290,7 @@ const A = {
     size: {
       type: String,
       default: "md",
-      validator: (t) => Object.keys(w).includes(t)
+      validator: (t) => Object.keys(P).includes(t)
     },
     /**
      * Button width, accepts
@@ -196,18 +315,26 @@ const A = {
   },
   emits: [
     /**
-     * Native alpha button click event
+     * Native start button click event
      *
      * @event click
      * @type {PointerEvent | KeyboardEvent}
      */
+    "start-clicked",
+    /**
+     * @deprecated Use start-clicked
+     */
     "alpha-clicked",
     /**
-     * Native omega button click event
+     * Native end button click event
      *
      * @event click
      * @type {PointerEvent | KeyboardEvent}
      */
+    "end-clicked",
+    /**
+     * @deprecated Use end-clicked
+     */
     "omega-clicked"
   ],
   data() {
@@ -218,31 +345,33 @@ const A = {
   computed: {
     alphaButtonProps() {
       return {
-        active: this.alphaActive,
-        ariaLabel: this.alphaAriaLabel,
+        active: this.alphaActive ?? this.startActive,
+        ariaLabel: this.alphaAriaLabel ?? this.startAriaLabel,
         assertiveOnFocus: this.assertiveOnFocus,
-        disabled: this.disabled || this.alphaDisabled,
-        iconPosition: this.alphaIconPosition,
-        labelClass: this.alphaLabelClass,
-        loading: this.alphaLoading,
+        disabled: this.disabled || (this.alphaDisabled ?? this.startDisabled),
+        iconPosition: this.alphaIconPosition ?? this.startIconPosition,
+        labelClass: this.alphaLabelClass ?? this.startLabelClass,
+        leadingClass: this.alphaLeadingClass ?? this.startLeadingClass,
+        trailingClass: this.alphaTrailingClass ?? this.startTrailingClass,
+        loading: this.alphaLoading ?? this.startLoading,
         importance: this.importance,
         kind: this.kind,
         size: this.size,
-        tooltipText: this.alphaTooltipText,
+        tooltipText: this.alphaTooltipText ?? this.startTooltipText,
         class: this.$attrs.class,
         style: this.$attrs.style
       };
     },
     omegaButtonProps() {
       return {
-        id: this.omegaId,
-        active: this.omegaActive,
-        ariaLabel: this.omegaAriaLabel,
-        disabled: this.disabled || this.omegaDisabled,
+        id: this.omegaId ?? this.endId,
+        active: this.omegaActive ?? this.endActive,
+        ariaLabel: this.omegaAriaLabel ?? this.endAriaLabel,
+        disabled: this.disabled || (this.omegaDisabled ?? this.endDisabled),
         importance: this.importance,
         kind: this.kind,
         size: this.size,
-        tooltipText: this.omegaTooltipText,
+        tooltipText: this.omegaTooltipText ?? this.endTooltipText,
         class: this.$attrs.class,
         style: this.$attrs.style
       };
@@ -255,74 +384,135 @@ const A = {
     this.validateProps();
   },
   mounted() {
-    v(B(this.$el), this.$options.name);
+    C(O(this.$el), this.$options.name);
   },
   methods: {
+    onStartClick() {
+      this.$emit("start-clicked"), this.$emit("alpha-clicked");
+    },
+    onEndClick() {
+      this.$emit("end-clicked"), this.$emit("omega-clicked");
+    },
     validateProps() {
       this.validateAlphaButtonProps(), this.validateOmegaButtonProps();
     },
     validateAlphaButtonProps() {
-      p(this.$slots.default) || p(this.$slots.alphaIcon) && !this.alphaTooltipText && console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
+      l(this.$slots.default) || (l(this.$slots.startIcon) || l(this.$slots.alphaIcon)) && !(this.alphaTooltipText ?? this.startTooltipText) && console.warn("start-tooltip-text prop must be set if start button has an icon only");
     },
     validateOmegaButtonProps() {
-      p(this.$slots.omega) || this.omegaTooltipText || console.warn("omega-tooltip-text prop is required as it is an icon-only button");
+      l(this.$slots.end) || l(this.$slots.omega) || (this.omegaTooltipText ?? this.endTooltipText) || console.warn("end-tooltip-text prop is required as it is an icon-only button");
     }
   }
 };
-function z(t, o, l, _, s, n) {
-  const g = r("split-button-alpha"), u = r("split-button-omega"), y = r("dt-dropdown");
-  return d(), S("span", {
+function E(t, n, d, j, r, i) {
+  const b = p("split-button-alpha"), h = p("split-button-omega"), k = p("dt-dropdown");
+  return o(), f("span", {
     "data-qa": "dt-split-button",
-    class: I([l.rootClass, "d-split-btn"]),
-    style: k({ width: l.width })
+    class: $([d.rootClass, "d-split-btn"]),
+    style: S({ width: d.width })
   }, [
-    c(g, m(n.alphaButtonProps, {
+    m(b, u(i.alphaButtonProps, {
       ref: "alphaButton",
-      onClick: o[0] || (o[0] = (e) => t.$emit("alpha-clicked"))
-    }), {
-      icon: a(({ size: e }) => [
-        i(t.$slots, "alphaIcon", { size: e })
-      ]),
-      default: a(() => [
-        i(t.$slots, "default")
+      onClick: i.onStartClick
+    }), B({
+      default: s(() => [
+        a(t.$slots, "default")
       ]),
-      _: 3
-    }, 16),
-    i(t.$slots, "omega", {}, () => [
-      t.$slots.dropdownList ? (d(), f(y, {
+      _: 2
+    }, [
+      t.$slots.startEndIcon ? {
+        name: "startIcon",
+        fn: s(({ size: e }) => [
+          t.$slots.startIcon ? a(t.$slots, "startIcon", {
+            key: 0,
+            size: e
+          }) : a(t.$slots, "alphaIcon", {
+            key: 1,
+            size: e
+          })
+        ]),
+        key: "0"
+      } : void 0,
+      t.$slots.startEndIcon ? {
+        name: "endIcon",
+        fn: s(({ size: e }) => [
+          a(t.$slots, "startEndIcon", { size: e })
+        ]),
+        key: "1"
+      } : void 0,
+      t.$slots.startEndIcon ? void 0 : {
+        name: "icon",
+        fn: s(({ size: e }) => [
+          t.$slots.startIcon ? a(t.$slots, "startIcon", {
+            key: 0,
+            size: e
+          }) : a(t.$slots, "alphaIcon", {
+            key: 1,
+            size: e
+          })
+        ]),
+        key: "2"
+      },
+      t.$slots.leading ? {
+        name: "leading",
+        fn: s(() => [
+          a(t.$slots, "leading")
+        ]),
+        key: "3"
+      } : void 0,
+      t.$slots.trailing ? {
+        name: "trailing",
+        fn: s(() => [
+          a(t.$slots, "trailing")
+        ]),
+        key: "4"
+      } : void 0
+    ]), 1040, ["onClick"]),
+    t.$slots.end ? a(t.$slots, "end", { key: 0 }) : t.$slots.omega ? a(t.$slots, "omega", { key: 1 }) : (o(), f(v, { key: 2 }, [
+      t.$slots.dropdownList ? (o(), y(k, {
         key: 0,
-        placement: l.dropdownPlacement,
-        onClick: o[2] || (o[2] = (e) => s.isDropdownOpen = !0),
-        onOpened: o[3] || (o[3] = (e) => s.isDropdownOpen = e)
+        placement: d.dropdownPlacement,
+        onClick: n[0] || (n[0] = (e) => r.isDropdownOpen = !0),
+        onOpened: n[1] || (n[1] = (e) => r.isDropdownOpen = e)
       }, {
-        anchor: a((e) => [
-          c(u, m({ ...e, ...n.omegaButtonProps }, {
-            active: s.isDropdownOpen,
-            onClick: o[1] || (o[1] = (h) => t.$emit("omega-clicked"))
+        anchor: s((e) => [
+          m(h, u({ ...e, ...i.omegaButtonProps }, {
+            active: r.isDropdownOpen,
+            onClick: i.onEndClick
           }), {
-            icon: a(({ size: h }) => [
-              i(t.$slots, "omegaIcon", { size: h })
+            icon: s(({ size: c }) => [
+              t.$slots.endIcon ? a(t.$slots, "endIcon", {
+                key: 0,
+                size: c
+              }) : a(t.$slots, "omegaIcon", {
+                key: 1,
+                size: c
+              })
             ]),
             _: 3
-          }, 16, ["active"])
+          }, 16, ["active", "onClick"])
         ]),
-        list: a(({ close: e }) => [
-          i(t.$slots, "dropdownList", { close: e })
+        list: s(({ close: e }) => [
+          a(t.$slots, "dropdownList", { close: e })
         ]),
         _: 3
-      }, 8, ["placement"])) : (d(), f(u, m({ key: 1 }, n.omegaButtonProps, {
-        onClick: o[4] || (o[4] = (e) => t.$emit("omega-clicked"))
-      }), {
-        icon: a(({ size: e }) => [
-          i(t.$slots, "omegaIcon", { size: e })
+      }, 8, ["placement"])) : (o(), y(h, u({ key: 1 }, i.omegaButtonProps, { onClick: i.onEndClick }), {
+        icon: s(({ size: e }) => [
+          t.$slots.endIcon ? a(t.$slots, "endIcon", {
+            key: 0,
+            size: e
+          }) : a(t.$slots, "omegaIcon", {
+            key: 1,
+            size: e
+          })
         ]),
         _: 3
-      }, 16))
-    ])
+      }, 16, ["onClick"]))
+    ], 64))
   ], 6);
 }
-const U = /* @__PURE__ */ T(A, [["render", z]]);
+const V = /* @__PURE__ */ A(z, [["render", E]]);
 export {
-  U as default
+  V as default
 };
 //# sourceMappingURL=split-button.js.map