@dialpad/dialtone-vue 3.222.0-next.2 → 3.222.1

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

@@ -2,112 +2,48 @@ import { hasSlotContent as e, returnFirstEl as t, warnIfUnmounted as n } from ".
 import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { BUTTON_IMPORTANCE_MODIFIERS as i, BUTTON_KIND_MODIFIERS as a, BUTTON_SIZE_MODIFIERS as o, ICON_POSITION_MODIFIERS as s } from "../button/button-constants.js";
 import c from "../dropdown/dropdown.js";
-import l from "./split-button-start.js";
-import u from "./split-button-end.js";
-import { Fragment as d, createBlock as f, createElementBlock as p, createSlots as m, createVNode as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, openBlock as y, renderSlot as b, resolveComponent as x, withCtx as S } from "vue";
-//#region components/SplitButton/SplitButton.vue
-var C = {
+import l from "./split-button-alpha.js";
+import u from "./split-button-omega.js";
+import { createBlock as d, createElementBlock as f, createVNode as p, mergeProps as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderSlot as v, resolveComponent as y, withCtx as b } from "vue";
+//#region components/split_button/split_button.vue
+var x = {
+	compatConfig: { MODE: 3 },
 	name: "DtSplitButton",
 	components: {
-		SplitButtonEnd: u,
+		SplitButtonOmega: u,
 		DtDropdown: c,
-		SplitButtonStart: l
+		SplitButtonAlpha: l
 	},
 	inheritAttrs: !1,
 	props: {
-		startActive: {
-			type: Boolean,
-			default: !1
-		},
 		alphaActive: {
 			type: Boolean,
-			default: null
-		},
-		startAriaLabel: {
-			type: String,
-			default: null
+			default: !1
 		},
 		alphaAriaLabel: {
 			type: String,
-			default: void 0
+			default: null
 		},
-		startIconPosition: {
+		alphaIconPosition: {
 			type: String,
 			default: "left",
 			validator: (e) => Object.keys(s).includes(e)
 		},
-		alphaIconPosition: {
-			type: String,
-			default: void 0,
-			validator: (e) => e === void 0 || Object.keys(s).includes(e)
-		},
-		startLabelClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		startLeadingClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		alphaLeadingClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: void 0
-		},
-		startTrailingClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		alphaTrailingClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: void 0
-		},
 		alphaLabelClass: {
 			type: [
 				String,
 				Array,
 				Object
 			],
-			default: void 0
-		},
-		startDisabled: {
-			type: Boolean,
-			default: !1
+			default: ""
 		},
 		alphaDisabled: {
-			type: Boolean,
-			default: null
-		},
-		startLoading: {
 			type: Boolean,
 			default: !1
 		},
 		alphaLoading: {
 			type: Boolean,
-			default: null
-		},
-		startTooltipText: {
-			type: String,
-			default: void 0
+			default: !1
 		},
 		alphaTooltipText: {
 			type: String,
@@ -135,124 +71,76 @@ var C = {
 			default: "default",
 			validator: (e) => Object.keys(a).includes(e)
 		},
-		endActive: {
-			type: Boolean,
-			default: !1
-		},
 		omegaActive: {
 			type: Boolean,
-			default: null
-		},
-		endAriaLabel: {
-			type: String,
-			default: null
+			default: !1
 		},
 		omegaAriaLabel: {
 			type: String,
-			default: void 0
-		},
-		endDisabled: {
-			type: Boolean,
-			default: !1
+			default: null
 		},
 		omegaDisabled: {
 			type: Boolean,
-			default: null
-		},
-		endId: {
-			type: String,
-			default: void 0
+			default: !1
 		},
 		omegaId: {
 			type: String,
 			default: void 0
 		},
-		endTooltipText: {
-			type: String,
-			default: void 0
-		},
 		omegaTooltipText: {
 			type: String,
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
-			default: 300,
-			validator: (e) => Object.keys(o).includes(String(e))
-		},
-		width: {
 			type: String,
-			default: null
-		},
-		showDivider: {
-			type: Boolean,
-			default: !0
+			default: "md",
+			validator: (e) => Object.keys(o).includes(e)
 		},
-		startTo: {
-			type: [String, Object],
-			default: null
-		},
-		startReplace: {
-			type: Boolean,
-			default: !1
-		},
-		startHref: {
-			type: String,
-			default: null
-		},
-		startTarget: {
+		width: {
 			type: String,
 			default: null
 		},
-		startRel: {
-			type: String,
-			default: null
+		rootClass: {
+			type: [
+				String,
+				Object,
+				Array
+			],
+			default: ""
 		}
 	},
-	emits: [
-		"start-clicked",
-		"alpha-clicked",
-		"end-clicked",
-		"omega-clicked"
-	],
+	emits: ["alpha-clicked", "omega-clicked"],
 	data() {
 		return { isDropdownOpen: !1 };
 	},
 	computed: {
-		startButtonProps() {
+		alphaButtonProps() {
 			return {
-				active: this.alphaActive ?? this.startActive,
-				ariaLabel: this.alphaAriaLabel ?? this.startAriaLabel,
+				active: this.alphaActive,
+				ariaLabel: this.alphaAriaLabel,
 				assertiveOnFocus: this.assertiveOnFocus,
-				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,
+				disabled: this.disabled || this.alphaDisabled,
+				iconPosition: this.alphaIconPosition,
+				labelClass: this.alphaLabelClass,
+				loading: this.alphaLoading,
 				importance: this.importance,
 				kind: this.kind,
 				size: this.size,
-				tooltipText: this.alphaTooltipText ?? this.startTooltipText,
-				to: this.startTo,
-				replace: this.startReplace,
-				href: this.startHref,
-				target: this.startTarget,
-				rel: this.startRel,
+				tooltipText: this.alphaTooltipText,
 				class: this.$attrs.class,
 				style: this.$attrs.style
 			};
 		},
-		endButtonProps() {
+		omegaButtonProps() {
 			return {
-				id: this.omegaId ?? this.endId,
-				active: this.omegaActive ?? this.endActive,
-				ariaLabel: this.omegaAriaLabel ?? this.endAriaLabel,
-				disabled: this.disabled || (this.omegaDisabled ?? this.endDisabled),
+				id: this.omegaId,
+				active: this.omegaActive,
+				ariaLabel: this.omegaAriaLabel,
+				disabled: this.disabled || this.omegaDisabled,
 				importance: this.importance,
 				kind: this.kind,
 				size: this.size,
-				tooltipText: this.omegaTooltipText ?? this.endTooltipText,
+				tooltipText: this.omegaTooltipText,
 				class: this.$attrs.class,
 				style: this.$attrs.style
 			};
@@ -268,117 +156,55 @@ var C = {
 		n(t(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.validateStartButtonProps(), this.validateEndButtonProps(), this.validateShowDivider();
+			this.validateAlphaButtonProps(), this.validateOmegaButtonProps();
 		},
-		validateStartButtonProps() {
-			e(this.$slots.default) || (e(this.$slots.startIcon) || e(this.$slots.alphaIcon)) && !(this.alphaTooltipText ?? this.startTooltipText) && console.warn("start-tooltip-text prop must be set if start button has an icon only");
+		validateAlphaButtonProps() {
+			e(this.$slots.default) || e(this.$slots.alphaIcon) && !this.alphaTooltipText && console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
 		},
-		validateEndButtonProps() {
-			e(this.$slots.end) || e(this.$slots.omega) || (this.omegaTooltipText ?? this.endTooltipText) || console.warn("end-tooltip-text prop is required as it is an icon-only button");
-		},
-		validateShowDivider() {
-			!this.showDivider && this.importance !== "clear" && console.warn("show-divider prop set to false has no effect when importance is not \"clear\". The divider is always shown for \"outlined\" and \"primary\" importances.");
+		validateOmegaButtonProps() {
+			e(this.$slots.omega) || this.omegaTooltipText || console.warn("omega-tooltip-text prop is required as it is an icon-only button");
 		}
 	}
 };
-function w(e, t, n, r, i, a) {
-	let o = x("split-button-start"), s = x("split-button-end"), c = x("dt-dropdown");
-	return y(), p("span", {
+function S(e, t, n, r, i, a) {
+	let o = y("split-button-alpha"), s = y("split-button-omega"), c = y("dt-dropdown");
+	return _(), f("span", {
 		"data-qa": "dt-split-button",
-		class: _([
-			"d-split-btn",
-			{ "d-split-btn--no-divider": !n.showDivider && n.importance === "clear" },
-			e.$attrs.class
-		]),
-		style: v([e.$attrs.style, { width: n.width }])
-	}, [h(o, g(a.startButtonProps, {
-		ref: "startButton",
-		onClick: a.onStartClick
-	}), m({
-		default: S(() => [b(e.$slots, "default")]),
-		_: 2
-	}, [
-		e.$slots.startEndIcon ? {
-			name: "startIcon",
-			fn: S(({ size: t }) => [e.$slots.startIcon ? b(e.$slots, "startIcon", {
-				key: 0,
-				size: t
-			}) : b(e.$slots, "alphaIcon", {
-				key: 1,
-				size: t
-			})]),
-			key: "0"
-		} : void 0,
-		e.$slots.startEndIcon ? {
-			name: "endIcon",
-			fn: S(({ size: t }) => [b(e.$slots, "startEndIcon", { size: t })]),
-			key: "1"
-		} : void 0,
-		e.$slots.startEndIcon ? void 0 : {
-			name: "icon",
-			fn: S(({ size: t }) => [e.$slots.startIcon ? b(e.$slots, "startIcon", {
-				key: 0,
-				size: t
-			}) : b(e.$slots, "alphaIcon", {
-				key: 1,
-				size: t
-			})]),
-			key: "2"
-		},
-		e.$slots.leading ? {
-			name: "leading",
-			fn: S(() => [b(e.$slots, "leading")]),
-			key: "3"
-		} : void 0,
-		e.$slots.trailing ? {
-			name: "trailing",
-			fn: S(() => [b(e.$slots, "trailing")]),
-			key: "4"
-		} : void 0
-	]), 1040, ["onClick"]), e.$slots.end ? b(e.$slots, "end", { key: 0 }) : e.$slots.omega ? b(e.$slots, "omega", { key: 1 }) : (y(), p(d, { key: 2 }, [e.$slots.dropdownList ? (y(), f(c, {
+		class: h([n.rootClass, "d-split-btn"]),
+		style: g({ width: n.width })
+	}, [p(o, m(a.alphaButtonProps, {
+		ref: "alphaButton",
+		onClick: t[0] || (t[0] = (t) => e.$emit("alpha-clicked"))
+	}), {
+		icon: b(({ size: t }) => [v(e.$slots, "alphaIcon", { size: t })]),
+		default: b(() => [v(e.$slots, "default")]),
+		_: 3
+	}, 16), v(e.$slots, "omega", {}, () => [e.$slots.dropdownList ? (_(), d(c, {
 		key: 0,
 		placement: n.dropdownPlacement,
-		onClick: t[0] || (t[0] = (e) => i.isDropdownOpen = !0),
-		onOpened: t[1] || (t[1] = (e) => i.isDropdownOpen = e)
+		onClick: t[2] || (t[2] = (e) => i.isDropdownOpen = !0),
+		onOpened: t[3] || (t[3] = (e) => i.isDropdownOpen = e)
 	}, {
-		anchor: S((t) => [h(s, g({
-			...t,
-			...a.endButtonProps
+		anchor: b((n) => [p(s, m({
+			...n,
+			...a.omegaButtonProps
 		}, {
 			active: i.isDropdownOpen,
-			onClick: a.onEndClick
+			onClick: t[1] || (t[1] = (t) => e.$emit("omega-clicked"))
 		}), {
-			icon: S(({ size: t }) => [e.$slots.endIcon ? b(e.$slots, "endIcon", {
-				key: 0,
-				size: t
-			}) : b(e.$slots, "omegaIcon", {
-				key: 1,
-				size: t
-			})]),
+			icon: b(({ size: t }) => [v(e.$slots, "omegaIcon", { size: t })]),
 			_: 3
-		}, 16, ["active", "onClick"])]),
-		list: S(({ close: t }) => [b(e.$slots, "dropdownList", { close: t })]),
+		}, 16, ["active"])]),
+		list: b(({ close: t }) => [v(e.$slots, "dropdownList", { close: t })]),
 		_: 3
-	}, 8, ["placement"])) : (y(), f(s, g({ key: 1 }, a.endButtonProps, { onClick: a.onEndClick }), {
-		icon: S(({ size: t }) => [e.$slots.endIcon ? b(e.$slots, "endIcon", {
-			key: 0,
-			size: t
-		}) : b(e.$slots, "omegaIcon", {
-			key: 1,
-			size: t
-		})]),
+	}, 8, ["placement"])) : (_(), d(s, m({ key: 1 }, a.omegaButtonProps, { onClick: t[4] || (t[4] = (t) => e.$emit("omega-clicked")) }), {
+		icon: b(({ size: t }) => [v(e.$slots, "omegaIcon", { size: t })]),
 		_: 3
-	}, 16, ["onClick"]))], 64))], 6);
+	}, 16))])], 6);
 }
-var T = /* @__PURE__ */ r(C, [["render", w]]);
+var C = /* @__PURE__ */ r(x, [["render", S]]);
 //#endregion
-export { T as default };
+export { C as default };
 
 //# sourceMappingURL=split-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../../../components/SplitButton/SplitButton.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    :class=\"['d-split-btn', { 'd-split-btn--no-divider': !showDivider && importance === 'clear' }, $attrs.class]\"\n    :style=\"[$attrs.style, { width }]\"\n  >\n    <split-button-start\n      v-bind=\"startButtonProps\"\n      ref=\"startButton\"\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-start>\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-end\n            v-bind=\"{ ...attrs, ...endButtonProps }\"\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-end>\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-end\n        v-else\n        v-bind=\"endButtonProps\"\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-end>\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 SplitButtonStart from './SplitButtonStart.vue';\nimport SplitButtonEnd from './SplitButtonEnd.vue';\nimport { DtDropdown } from '@/components/Dropdown';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonEnd,\n    DtDropdown,\n    SplitButtonStart,\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, unstyled, muted, critical, positive\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 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(String(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     * Whether to show the vertical divider between the start and end buttons.\n     * Only applies when importance is \"clear\".\n     * @values true, false\n     */\n    showDivider: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Vue router `to` prop for the start button.\n     * When set, renders the start button as a `<router-link>`.\n     */\n    startTo: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * Whether to use `router.replace()` instead of `router.push()`\n     * when navigating via `startTo`.\n     * @values true, false\n     */\n    startReplace: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML href for the start button.\n     * When set, renders the start button as an `<a>` element.\n     */\n    startHref: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML target attribute for the start button link.\n     * Only applies when `startHref` is set.\n     */\n    startTarget: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML rel attribute for the start button link.\n     * Only applies when `startHref` is set.\n     */\n    startRel: {\n      type: String,\n      default: null,\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    startButtonProps () {\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        to: this.startTo,\n        replace: this.startReplace,\n        href: this.startHref,\n        target: this.startTarget,\n        rel: this.startRel,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n\n    endButtonProps () {\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.validateStartButtonProps();\n      this.validateEndButtonProps();\n      this.validateShowDivider();\n    },\n\n    validateStartButtonProps () {\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    validateEndButtonProps () {\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    validateShowDivider () {\n      if (!this.showDivider && this.importance !== 'clear') {\n        console.warn(\n          'show-divider prop set to false has no effect when importance is not \"clear\". ' +\n          'The divider is always shown for \"outlined\" and \"primary\" importances.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;;AA4JA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EACV,gBAAA;EACA,YAAA;EACA,kBAAA;EACD;CAED,cAAc;CAEd,OAAO;EAKL,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,SAAS,KAAA;GACV;EAMD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACT,YAAY,MAAa,OAAO,KAAK,EAAwB,CAAC,SAAS,EAAS;GACjF;EAMD,mBAAmB;GACjB,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAa,MAAa,KAAA,KAAa,OAAO,KAAK,EAAwB,CAAC,SAAS,EAAS;GAC3G;EAKD,iBAAiB;GACf,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS,KAAA;GACV;EAKD,oBAAoB;GAClB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,oBAAoB;GAClB,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS,KAAA;GACV;EAKD,iBAAiB;GACf,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS,KAAA;GACV;EASD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAMD,kBAAkB;GAChB,MAAM;GACN,SAAS,KAAA;GACV;EAKD,kBAAkB;GAChB,MAAM;GACN,SAAS,KAAA;GACV;EAQD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EAUD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAA4B,CAAC,SAAS,EAAE;GACvE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,EAAE;GACjE;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,SAAS,KAAA;GACV;EASD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,OAAO;GACL,MAAM;GACN,SAAS,KAAA;GACV;EAKD,SAAS;GACP,MAAM;GACN,SAAS,KAAA;GACV;EAMD,gBAAgB;GACd,MAAM;GACN,SAAS,KAAA;GACV;EAKD,kBAAkB;GAChB,MAAM;GACN,SAAS,KAAA;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,OAAO,EAAE,CAAC;GACzE;EASD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAOD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACV;EAOD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO;EAOL;EAKA;EAQA;EAKA;EACD;CAED,OAAQ;AACN,SAAO,EACL,gBAAgB,IACjB;;CAGH,UAAU;EACR,mBAAoB;AAClB,UAAO;IACL,QAAQ,KAAK,eAAe,KAAK;IACjC,WAAW,KAAK,kBAAkB,KAAK;IACvC,kBAAkB,KAAK;IACvB,UAAU,KAAK,aAAa,KAAK,iBAAiB,KAAK;IACvD,cAAc,KAAK,qBAAqB,KAAK;IAC7C,YAAY,KAAK,mBAAmB,KAAK;IACzC,cAAc,KAAK,qBAAqB,KAAK;IAC7C,eAAe,KAAK,sBAAsB,KAAK;IAC/C,SAAS,KAAK,gBAAgB,KAAK;IACnC,YAAY,KAAK;IACjB,MAAM,KAAK;IACX,MAAM,KAAK;IACX,aAAa,KAAK,oBAAoB,KAAK;IAC3C,IAAI,KAAK;IACT,SAAS,KAAK;IACd,MAAM,KAAK;IACX,QAAQ,KAAK;IACb,KAAK,KAAK;IACV,OAAO,KAAK,OAAO;IACnB,OAAO,KAAK,OAAO;IACpB;;EAGH,iBAAkB;AAChB,UAAO;IACL,IAAI,KAAK,WAAW,KAAK;IACzB,QAAQ,KAAK,eAAe,KAAK;IACjC,WAAW,KAAK,kBAAkB,KAAK;IACvC,UAAU,KAAK,aAAa,KAAK,iBAAiB,KAAK;IACvD,YAAY,KAAK;IACjB,MAAM,KAAK;IACX,MAAM,KAAK;IACX,aAAa,KAAK,oBAAoB,KAAK;IAC3C,OAAO,KAAK,OAAO;IACnB,OAAO,KAAK,OAAO;IACpB;;EAEJ;CAED,UAAW;AACT,OAAK,eAAe;;CAGtB,UAAW;AACT,OAAK,eAAe;;CAGtB,UAAW;AACT,IAAgB,EAAc,KAAK,IAAI,EAAE,KAAK,SAAS,KAAK;;CAG9D,SAAS;EACP,eAAgB;AAEd,GADA,KAAK,MAAM,gBAAgB,EAC3B,KAAK,MAAM,gBAAgB;;EAG7B,aAAc;AAEZ,GADA,KAAK,MAAM,cAAc,EACzB,KAAK,MAAM,gBAAgB;;EAG7B,gBAAiB;AAGf,GAFA,KAAK,0BAA0B,EAC/B,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB;;EAG5B,2BAA4B;AACtB,KAAe,KAAK,OAAO,QAAQ,KAElC,EAAe,KAAK,OAAO,UAAS,IAAK,EAAe,KAAK,OAAO,UAAU,KACjF,EAAE,KAAK,oBAAoB,KAAK,qBAChC,QAAQ,KAAK,uEAAuE;;EAIxF,yBAA0B;AACpB,KAAe,KAAK,OAAO,IAAG,IAAK,EAAe,KAAK,OAAO,MAAM,KAElE,KAAK,oBAAoB,KAAK,mBAClC,QAAQ,KAAK,iEAAiE;;EAIlF,sBAAuB;AACrB,GAAI,CAAC,KAAK,eAAe,KAAK,eAAe,WAC3C,QAAQ,KACN,2JAED;;EAGN;CACF;;;aArqBC,EA4IO,QAAA;EA3IL,WAAQ;EACP,OAAK,EAAA;GAAA;GAAA,EAAA,2BAAA,CAAgD,EAAA,eAAe,EAAA,eAAU,SAAA;GAAgB,EAAA,OAAO;GAAK,CAAA;EAC1G,OAAK,EAAA,CAAG,EAAA,OAAO,OAAK,EAAA,OAAI,EAAA,OAAK,CAAA,CAAA;KAE9B,EAmEqB,GAnErB,EAmEqB,EAlEX,kBAAgB;EACxB,KAAI;EACH,SAAO,EAAA;;mBA+De,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;EA3Df,EAAA,OAAO,eAAA;SACZ;UAOC,EAAA,MAPkB,QAAQ,CAIpB,EAAA,OAAO,YADf,EAIE,EAAA,QAAA,aAAA;;IADC,MAAM;QAGT,EAIE,EAAA,QAAA,aAAA;;IADC,MAAM;;;;EAIH,EAAA,OAAO,eAAA;SACZ;UAMC,EAAA,MANgB,QAAQ,CAG1B,EAGE,EAAA,QAAA,gBAAA,EADC,MAAM,GAAQ,CAAA,CAAA,CAAA;;;EAKV,EAAA,OAAO,wBAAA;SACb;UAOC,EAAA,MAPa,QAAQ,CAIf,EAAA,OAAO,YADf,EAIE,EAAA,QAAA,aAAA;;IADC,MAAM;QAGT,EAIE,EAAA,QAAA,aAAA;;IADC,MAAM;;;;EAIH,EAAA,OAAO,UAAA;SACZ;eAGsB,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;EAGjB,EAAA,OAAO,WAAA;SACZ;eAGuB,CAAxB,EAAwB,EAAA,QAAA,WAAA,CAAA,CAAA;;;yBAMZ,EAAA,OAAO,MACrB,EAAmB,EAAA,QAAA,OAAA,EAAA,KAAA,GAAA,CAAA,GAGA,EAAA,OAAO,QAC1B,EAAqB,EAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,IAAA,GAAA,EAEvB,EA0DW,GAAA,EAAA,KAAA,GAAA,EAAA,CAxDD,EAAA,OAAO,gBAAA,GAAA,EADf,EAmCc,GAAA;;EAjCX,WAAW,EAAA;EACX,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,iBAAc;EACrB,UAAM,EAAA,OAAA,EAAA,MAAE,MAAQ,EAAA,iBAAiB;;EAEvB,QAAM,GAoBI,MApBG,CACtB,EAmBmB,GAnBnB,EAmBmB;GAAA,GAlBJ;GAAK,GAAK,EAAA;GAAc,EAAA;GACpC,QAAQ,EAAA;GACR,SAAO,EAAA;;GAEG,MAAI,GAMX,EAAA,MANqB,QAAQ,CAGvB,EAAA,OAAO,UADf,EAIE,EAAA,QAAA,WAAA;;IADC,MAAM;QAGT,EAIE,EAAA,QAAA,aAAA;;IADC,MAAM;;;;EAKJ,MAAI,GAKX,EALe,eAAK,CAEtB,EAGE,EAAA,QAAA,gBAAA,EADQ,UAAK,CAAA,CAAA,CAAA;;+BAKnB,EAmBmB,GAnBnB,EAmBmB,EAAA,KAAA,GAAA,EAjBT,EAAA,gBAAc,EACrB,SAAO,EAAA,YAAU,CAAA,EAAA;EAEP,MAAI,GAMX,EAAA,MANqB,QAAQ,CAGvB,EAAA,OAAO,UADf,EAIE,EAAA,QAAA,WAAA;;GADC,MAAM;OAGT,EAIE,EAAA,QAAA,aAAA;;GADC,MAAM"}
+{"version":3,"file":"split-button.js","names":[],"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"],"mappings":"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"}

package/dist/lib/stack/stack-constants.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={default:`column`,column:`column`,row:`row`,"row-reverse":`row-reverse`,"column-reverse":`column-reverse`},t=[`sm`,`md`,`lg`,`xl`],n=[`0`,`1`,`25`,`50`,`75`,`100`,`125`,`150`,`175`,`200`,`250`,`300`,`350`,`400`,`450`,`500`,`525`,`550`,`600`,`650`,`700`,`750`,`800`],r=[`start`,`center`,`end`,`stretch`,`baseline`],i=[`start`,`center`,`end`,`space-around`,`space-between`,`space-evenly`,`around`,`between`,`evenly`],a={DT_STACK_DIRECTION:e,DT_STACK_RESPONSIVE_BREAKPOINTS:t,DT_STACK_GAP:n,DT_STACK_ALIGN:r,DT_STACK_JUSTIFY:i};exports.DT_STACK_ALIGN=r,exports.DT_STACK_DIRECTION=e,exports.DT_STACK_GAP=n,exports.DT_STACK_JUSTIFY=i,exports.DT_STACK_RESPONSIVE_BREAKPOINTS=t,exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={default:`column`,column:`column`,row:`row`,"row-reverse":`row-reverse`,"column-reverse":`column-reverse`},t=[`sm`,`md`,`lg`,`xl`],n=[`0`,`50`,`100`,`200`,`300`,`350`,`400`,`450`,`500`,`525`,`550`,`600`,`625`,`650`,`700`],r=[`start`,`center`,`end`,`stretch`,`baseline`],i=[`start`,`center`,`end`,`space-around`,`space-between`,`space-evenly`,`around`,`between`,`evenly`],a={DT_STACK_DIRECTION:e,DT_STACK_RESPONSIVE_BREAKPOINTS:t,DT_STACK_GAP:n,DT_STACK_ALIGN:r,DT_STACK_JUSTIFY:i};exports.DT_STACK_ALIGN=r,exports.DT_STACK_DIRECTION=e,exports.DT_STACK_GAP=n,exports.DT_STACK_JUSTIFY=i,exports.DT_STACK_RESPONSIVE_BREAKPOINTS=t,exports.default=a;
 //# sourceMappingURL=stack-constants.cjs.map

package/dist/lib/stack/stack-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack-constants.cjs","names":[],"sources":["../../../components/Stack/StackConstants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '1', '25', '50', '75', '100', '125', '150', '175', '200', '250', '300', '350', '400', '450', '500', '525', '550', '600', '650', '700', '750', '800'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * Primary values align with CSS justify-content values.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"mappings":"+FAMA,IAAa,EAAqB,CAChC,QAAS,SACT,OAAQ,SACR,IAAK,MACL,cAAe,cACf,iBAAkB,iBACnB,CAMY,EAAkC,CAAC,KAAM,KAAM,KAAM,KAAK,CAO1D,EAAe,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAM,CAOzK,EAAiB,CAAC,QAAS,SAAU,MAAO,UAAW,WAAW,CAQlE,EAAmB,CAAC,QAAS,SAAU,MAAO,eAAgB,gBAAiB,eAAgB,SAAU,UAAW,SAAS,CAE1I,EAAe,CACb,qBACA,kCACA,eACA,iBACA,mBACD"}
+{"version":3,"file":"stack-constants.cjs","names":[],"sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * Primary values align with CSS justify-content values.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"mappings":"+FAMA,IAAa,EAAqB,CAChC,QAAS,SACT,OAAQ,SACR,IAAK,MACL,cAAe,cACf,iBAAkB,iBACnB,CAMY,EAAkC,CAAC,KAAM,KAAM,KAAM,KAAK,CAO1D,EAAe,CAAC,IAAK,KAAM,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAM,CAOrH,EAAiB,CAAC,QAAS,SAAU,MAAO,UAAW,WAAW,CAQlE,EAAmB,CAAC,QAAS,SAAU,MAAO,eAAgB,gBAAiB,eAAgB,SAAU,UAAW,SAAS,CAE1I,EAAe,CACb,qBACA,kCACA,eACA,iBACA,mBACD"}

package/dist/lib/stack/stack-constants.js

@@ -1,4 +1,4 @@
-//#region components/Stack/StackConstants.js
+//#region components/stack/stack_constants.js
 var e = {
 	default: "column",
 	column: "column",
@@ -12,16 +12,9 @@ var e = {
 	"xl"
 ], n = [
 	"0",
-	"1",
-	"25",
 	"50",
-	"75",
 	"100",
-	"125",
-	"150",
-	"175",
 	"200",
-	"250",
 	"300",
 	"350",
 	"400",
@@ -30,10 +23,9 @@ var e = {
 	"525",
 	"550",
 	"600",
+	"625",
 	"650",
-	"700",
-	"750",
-	"800"
+	"700"
 ], r = [
 	"start",
 	"center",

package/dist/lib/stack/stack-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack-constants.js","names":[],"sources":["../../../components/Stack/StackConstants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '1', '25', '50', '75', '100', '125', '150', '175', '200', '250', '300', '350', '400', '450', '500', '525', '550', '600', '650', '700', '750', '800'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * Primary values align with CSS justify-content values.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"mappings":";AAMA,IAAa,IAAqB;CAChC,SAAS;CACT,QAAQ;CACR,KAAK;CACL,eAAe;CACf,kBAAkB;CACnB,EAMY,IAAkC;CAAC;CAAM;CAAM;CAAM;CAAK,EAO1D,IAAe;CAAC;CAAK;CAAK;CAAM;CAAM;CAAM;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM,EAOzK,IAAiB;CAAC;CAAS;CAAU;CAAO;CAAW;CAAW,EAQlE,IAAmB;CAAC;CAAS;CAAU;CAAO;CAAgB;CAAiB;CAAgB;CAAU;CAAW;CAAS,EAE1I,IAAe;CACb;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"stack-constants.js","names":[],"sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * Primary values align with CSS justify-content values.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"mappings":";AAMA,IAAa,IAAqB;CAChC,SAAS;CACT,QAAQ;CACR,KAAK;CACL,eAAe;CACf,kBAAkB;CACnB,EAMY,IAAkC;CAAC;CAAM;CAAM;CAAM;CAAK,EAO1D,IAAe;CAAC;CAAK;CAAM;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM,EAOrH,IAAiB;CAAC;CAAS;CAAU;CAAO;CAAW;CAAW,EAQlE,IAAmB;CAAC;CAAS;CAAU;CAAO;CAAgB;CAAiB;CAAgB;CAAU;CAAW;CAAS,EAE1I,IAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/lib/stack/stack.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./stack-constants.cjs`),n=require(`./validators.cjs`),r=require(`./utils.cjs`);let i=require(`vue`);var a={name:`DtStack`,props:{direction:{type:[String,Object],default:`column`,validator:e=>n.directionValidator(e)},as:{type:String,default:`div`},gap:{type:[String,Object],default:`0`,validator:e=>n.gapValidator(e)},align:{type:[String,Object],validator:e=>n.alignValidator(e)},justify:{type:[String,Object],default:`start`,validator:e=>n.justifyValidator(e)}},data(){return{DT_STACK_DIRECTION:t.DT_STACK_DIRECTION,DT_STACK_GAP:t.DT_STACK_GAP,DT_STACK_RESPONSIVE_BREAKPOINTS:t.DT_STACK_RESPONSIVE_BREAKPOINTS,DT_STACK_ALIGN:t.DT_STACK_ALIGN,DT_STACK_JUSTIFY:t.DT_STACK_JUSTIFY}},computed:{defaultGap(){return r.getDefaultGapClass(this.gap)},defaultDirection(){return r.getDefaultDirectionClass(this.direction)},defaultAlign(){return r.getDefaultAlignClass(this.align)},defaultJustify(){return r.getDefaultJustifyClass(this.justify)},stackResponsive(){return r.getResponsiveClasses(this.direction,this.gap,this.align,this.justify)}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{"data-qa":`dt-stack`,class:(0,i.normalizeClass)([`d-stack`,o.defaultDirection,o.defaultGap,o.defaultAlign,o.defaultJustify,o.stackResponsive])},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./stack-constants.cjs`),n=require(`./validators.cjs`),r=require(`./utils.cjs`);let i=require(`vue`);var a={compatConfig:{MODE:3},name:`DtStack`,props:{direction:{type:[String,Object],default:`column`,validator:e=>n.directionValidator(e)},as:{type:String,default:`div`},gap:{type:[String,Object],default:`0`,validator:e=>n.gapValidator(e)},align:{type:[String,Object],validator:e=>n.alignValidator(e)},justify:{type:[String,Object],default:`start`,validator:e=>n.justifyValidator(e)}},data(){return{DT_STACK_DIRECTION:t.DT_STACK_DIRECTION,DT_STACK_GAP:t.DT_STACK_GAP,DT_STACK_RESPONSIVE_BREAKPOINTS:t.DT_STACK_RESPONSIVE_BREAKPOINTS,DT_STACK_ALIGN:t.DT_STACK_ALIGN,DT_STACK_JUSTIFY:t.DT_STACK_JUSTIFY}},computed:{defaultGap(){return r.getDefaultGapClass(this.gap)},defaultDirection(){return r.getDefaultDirectionClass(this.direction)},defaultAlign(){return r.getDefaultAlignClass(this.align)},defaultJustify(){return r.getDefaultJustifyClass(this.justify)},stackResponsive(){return r.getResponsiveClasses(this.direction,this.gap,this.align,this.justify)}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{"data-qa":`dt-stack`,class:(0,i.normalizeClass)([`d-stack`,o.defaultDirection,o.defaultGap,o.defaultAlign,o.defaultJustify,o.stackResponsive])},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=stack.cjs.map

package/dist/lib/stack/stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack.cjs","names":[],"sources":["../../../components/Stack/Stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './StackConstants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './Validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './Utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     *\n     * @values column, row, row-reverse, column-reverse\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * @values 0, 50, 100, 200, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * @values start, center, end, stretch, baseline\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * @values start, center, end, space-around, space-between, space-evenly\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"mappings":"kTAuBA,IAAK,EAAU,CACb,KAAM,UAEN,MAAO,CAWL,UAAW,CACT,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,SACT,UAAY,GAAc,EAAA,mBAAmB,EAAU,CACxD,CAKD,GAAI,CACF,KAAM,OACN,QAAS,MACV,CAUD,IAAK,CACH,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAQ,EAAA,aAAa,EAAI,CACtC,CAYD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAO,CACtB,UAAY,GAAU,EAAA,eAAe,EAAM,CAC5C,CAUD,QAAS,CACP,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,QACT,UAAY,GAAY,EAAA,iBAAiB,EAAQ,CAClD,CACF,CAED,MAAQ,CACN,MAAO,CACL,mBAAA,EAAA,mBACA,aAAA,EAAA,aACA,gCAAA,EAAA,gCACA,eAAA,EAAA,eACA,iBAAA,EAAA,iBACD,EAGH,SAAU,CACR,YAAc,CACZ,OAAO,EAAA,mBAAmB,KAAK,IAAI,EAGrC,kBAAoB,CAClB,OAAO,EAAA,yBAAyB,KAAK,UAAU,EAGjD,cAAgB,CACd,OAAO,EAAA,qBAAqB,KAAK,MAAM,EAGzC,gBAAkB,CAChB,OAAO,EAAA,uBAAuB,KAAK,QAAQ,EAG7C,iBAAmB,CACjB,OAAO,EAAA,qBAAqB,KAAK,UAAW,KAAK,IAAK,KAAK,MAAO,KAAK,QAAQ,EAElF,CACF,iGA5HQ,EAAA,GAAE,CAAA,CACP,UAAQ,WACP,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,iBAAwB,EAAA,WAAkB,EAAA,aAAoB,EAAA,eAAsB,EAAA,8CAU7G,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"stack.cjs","names":[],"sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"mappings":"kTAuBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,UAEN,MAAO,CASL,UAAW,CACT,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,SACT,UAAY,GAAc,EAAA,mBAAmB,EAAU,CACxD,CAKD,GAAI,CACF,KAAM,OACN,QAAS,MACV,CAUD,IAAK,CACH,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAQ,EAAA,aAAa,EAAI,CACtC,CAYD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAO,CACtB,UAAY,GAAU,EAAA,eAAe,EAAM,CAC5C,CAUD,QAAS,CACP,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,QACT,UAAY,GAAY,EAAA,iBAAiB,EAAQ,CAClD,CACF,CAED,MAAQ,CACN,MAAO,CACL,mBAAA,EAAA,mBACA,aAAA,EAAA,aACA,gCAAA,EAAA,gCACA,eAAA,EAAA,eACA,iBAAA,EAAA,iBACD,EAGH,SAAU,CACR,YAAc,CACZ,OAAO,EAAA,mBAAmB,KAAK,IAAI,EAGrC,kBAAoB,CAClB,OAAO,EAAA,yBAAyB,KAAK,UAAU,EAGjD,cAAgB,CACd,OAAO,EAAA,qBAAqB,KAAK,MAAM,EAGzC,gBAAkB,CAChB,OAAO,EAAA,uBAAuB,KAAK,QAAQ,EAG7C,iBAAmB,CACjB,OAAO,EAAA,qBAAqB,KAAK,UAAW,KAAK,IAAK,KAAK,MAAO,KAAK,QAAQ,EAElF,CACF,iGA3HQ,EAAA,GAAE,CAAA,CACP,UAAQ,WACP,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,iBAAwB,EAAA,WAAkB,EAAA,aAAoB,EAAA,eAAsB,EAAA,8CAU7G,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}

package/dist/lib/stack/stack.js

@@ -3,8 +3,9 @@ import { DT_STACK_ALIGN as t, DT_STACK_DIRECTION as n, DT_STACK_GAP as r, DT_STA
 import { alignValidator as o, directionValidator as s, gapValidator as c, justifyValidator as l } from "./validators.js";
 import { getDefaultAlignClass as u, getDefaultDirectionClass as d, getDefaultGapClass as f, getDefaultJustifyClass as p, getResponsiveClasses as m } from "./utils.js";
 import { createBlock as h, normalizeClass as g, openBlock as _, renderSlot as v, resolveDynamicComponent as y, withCtx as b } from "vue";
-//#region components/Stack/Stack.vue
+//#region components/stack/stack.vue
 var x = {
+	compatConfig: { MODE: 3 },
 	name: "DtStack",
 	props: {
 		direction: {