@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/STabs/STabs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,133 @@
+import { EButtonAppearance, EButtonSize, EButtonVariant } from "../SButton/SButton.types.js";
+import { ESelectionMode, ESelectionOrientation, isSingleSelectionValue, useSelectionGroup } from "../../composables/useSelectionGroup.js";
+import SButton_default from "../SButton/SButton.vue.js";
+import { useAriaAttrs } from "../../composables/useAriaAttrs.js";
+import { sTabsInjectionKey } from "./utils/context.js";
+import { ESTabAppearance, ESTabSize } from "../STab/STab.types.js";
+import { useTabsIndicator } from "./utils/useTabsIndicator.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, unref, useModel, useTemplateRef } from "vue";
+import { useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+import { useScroll } from "@vueuse/core";
+//#region src/components/STabs/STabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-tabs__body" };
+var _hoisted_2 = ["aria-disabled"];
+var STabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "STabs",
+	props: /*@__PURE__*/ mergeModels({
+		appearance: { default: () => ESTabAppearance.PRIMARY },
+		size: { default: () => ESTabSize.LARGE },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		mandatory: {
+			type: Boolean,
+			default: true
+		},
+		addable: {
+			type: Boolean,
+			default: false
+		},
+		loop: {
+			type: Boolean,
+			default: true
+		}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["add"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const { t } = useUiKitI18n();
+		const { getRootAttrs, getAriaAttrs } = useAriaAttrs();
+		const emit = __emit;
+		const tabsBodyRef = useTemplateRef("tabsBodyRef");
+		const tabsTrackRef = useTemplateRef("tabsTrackRef");
+		const { arrivedState } = useScroll(tabsBodyRef, {
+			throttle: 100,
+			offset: { right: 1 }
+		});
+		const selection = useSelectionGroup({
+			modelValue: () => modelValue.value,
+			onUpdateModelValue: (next) => {
+				if (!isSingleSelectionValue(next)) return;
+				modelValue.value = next;
+			},
+			mode: ESelectionMode.SINGLE,
+			mandatory: () => __props.mandatory,
+			orientation: ESelectionOrientation.HORIZONTAL,
+			loop: () => __props.loop
+		});
+		provide(sTabsInjectionKey, {
+			mode: () => ESelectionMode.SINGLE,
+			isSelected: selection.isSelected,
+			selectItem: selection.toggle,
+			registerItem: selection.registerItem,
+			getItemTabIndex: selection.getItemTabIndex,
+			getGroupTabIndex: selection.getGroupTabIndex,
+			handleItemKeydown: selection.handleItemKeydown,
+			appearance: () => __props.appearance,
+			size: () => __props.size,
+			disabled: () => __props.disabled
+		});
+		const showSlidingIndicator = computed(() => __props.appearance === ESTabAppearance.PRIMARY);
+		const { indicatorStyle, indicatorIsBilling } = useTabsIndicator({
+			trackEl: () => tabsTrackRef.value,
+			selectedValue: () => modelValue.value,
+			enabled: showSlidingIndicator
+		});
+		const showFade = computed(() => {
+			return __props.addable && !arrivedState.right;
+		});
+		const rootClasses = computed(() => [
+			`s-ui-tabs--appearance-${__props.appearance}`,
+			`s-ui-tabs--size-${__props.size}`,
+			__props.addable ? "s-ui-tabs--addable" : void 0
+		]);
+		const handleAddClick = () => {
+			if (__props.disabled) return;
+			emit("add");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ class: ["s-ui-tabs", rootClasses.value] }, unref(getRootAttrs)()), [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
+				ref_key: "tabsBodyRef",
+				ref: tabsBodyRef,
+				class: "s-ui-tabs__scroll"
+			}, [createElementVNode("div", mergeProps({
+				ref_key: "tabsTrackRef",
+				ref: tabsTrackRef,
+				class: "s-ui-tabs__track",
+				role: "tablist",
+				"aria-orientation": "horizontal"
+			}, unref(getAriaAttrs)(), { "aria-disabled": __props.disabled ? true : void 0 }), [showSlidingIndicator.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(["s-ui-tabs__indicator", { "s-ui-tabs__indicator--billing": unref(indicatorIsBilling) }]),
+				style: normalizeStyle(unref(indicatorStyle)),
+				"aria-hidden": "true"
+			}, null, 6)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)], 512), __props.addable ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(["s-ui-tabs__fade", { "s-ui-tabs__fade--visible": showFade.value }]),
+				"aria-hidden": "true"
+			}, null, 2)) : createCommentVNode("", true)]), __props.addable ? renderSlot(_ctx.$slots, "add", { key: 0 }, () => [createVNode(unref(SButton_default), {
+				class: "s-ui-tabs__add",
+				icon: "plus",
+				appearance: unref(EButtonAppearance).BARE,
+				variant: unref(EButtonVariant).NEUTRAL,
+				size: unref(EButtonSize).SMALL,
+				disabled: __props.disabled,
+				"aria-label": unref(t)("tabs.add"),
+				onClick: handleAddClick
+			}, null, 8, [
+				"appearance",
+				"variant",
+				"size",
+				"disabled",
+				"aria-label"
+			])]) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { STabs_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/STabs/utils/context.cjs

@@ -0,0 +1,4 @@
+//#region src/components/STabs/utils/context.ts
+var sTabsInjectionKey = Symbol("STabs");
+//#endregion
+exports.sTabsInjectionKey = sTabsInjectionKey;

package/dist/components/STabs/utils/context.js

@@ -0,0 +1,4 @@
+//#region src/components/STabs/utils/context.ts
+var sTabsInjectionKey = Symbol("STabs");
+//#endregion
+export { sTabsInjectionKey };

package/dist/components/STabs/utils/useTabsIndicator.cjs

@@ -0,0 +1,53 @@
+const require_getIndicatorMetricsPercent = require("../../../utils/getIndicatorMetricsPercent.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/STabs/utils/useTabsIndicator.ts
+var SELECTED_TAB_SELECTOR = ".s-ui-tab[aria-selected=\"true\"]";
+var emptyTabsIndicatorMetrics = () => ({
+	...require_getIndicatorMetricsPercent.emptyIndicatorMetricsPercent(),
+	isBilling: false
+});
+var useTabsIndicator = ({ trackEl, selectedValue, enabled }) => {
+	const metrics = (0, vue.ref)(emptyTabsIndicatorMetrics());
+	const updateMetrics = () => {
+		if (!(0, vue.toValue)(enabled)) {
+			metrics.value = emptyTabsIndicatorMetrics();
+			return;
+		}
+		const track = (0, vue.toValue)(trackEl);
+		if (!track) {
+			metrics.value = emptyTabsIndicatorMetrics();
+			return;
+		}
+		const activeTab = track.querySelector(SELECTED_TAB_SELECTOR);
+		if (!(activeTab instanceof HTMLElement)) {
+			metrics.value = emptyTabsIndicatorMetrics();
+			return;
+		}
+		metrics.value = {
+			...require_getIndicatorMetricsPercent.getIndicatorMetricsPercent(track, activeTab),
+			isBilling: activeTab.classList.contains("s-ui-tab--billing")
+		};
+	};
+	(0, _vueuse_core.useResizeObserver)(trackEl, () => {
+		updateMetrics();
+	});
+	(0, vue.watch)(() => (0, vue.toValue)(selectedValue), async () => {
+		await (0, vue.nextTick)();
+		updateMetrics();
+	}, { immediate: true });
+	return {
+		indicatorStyle: (0, vue.computed)(() => {
+			const { left, width } = metrics.value;
+			if (!width) return { opacity: "0" };
+			return {
+				opacity: "1",
+				left: `${left}%`,
+				width: `${width}%`
+			};
+		}),
+		indicatorIsBilling: (0, vue.computed)(() => metrics.value.isBilling)
+	};
+};
+//#endregion
+exports.useTabsIndicator = useTabsIndicator;

package/dist/components/STabs/utils/useTabsIndicator.js

@@ -0,0 +1,53 @@
+import { emptyIndicatorMetricsPercent, getIndicatorMetricsPercent } from "../../../utils/getIndicatorMetricsPercent.js";
+import { computed, nextTick, ref, toValue, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+//#region src/components/STabs/utils/useTabsIndicator.ts
+var SELECTED_TAB_SELECTOR = ".s-ui-tab[aria-selected=\"true\"]";
+var emptyTabsIndicatorMetrics = () => ({
+	...emptyIndicatorMetricsPercent(),
+	isBilling: false
+});
+var useTabsIndicator = ({ trackEl, selectedValue, enabled }) => {
+	const metrics = ref(emptyTabsIndicatorMetrics());
+	const updateMetrics = () => {
+		if (!toValue(enabled)) {
+			metrics.value = emptyTabsIndicatorMetrics();
+			return;
+		}
+		const track = toValue(trackEl);
+		if (!track) {
+			metrics.value = emptyTabsIndicatorMetrics();
+			return;
+		}
+		const activeTab = track.querySelector(SELECTED_TAB_SELECTOR);
+		if (!(activeTab instanceof HTMLElement)) {
+			metrics.value = emptyTabsIndicatorMetrics();
+			return;
+		}
+		metrics.value = {
+			...getIndicatorMetricsPercent(track, activeTab),
+			isBilling: activeTab.classList.contains("s-ui-tab--billing")
+		};
+	};
+	useResizeObserver(trackEl, () => {
+		updateMetrics();
+	});
+	watch(() => toValue(selectedValue), async () => {
+		await nextTick();
+		updateMetrics();
+	}, { immediate: true });
+	return {
+		indicatorStyle: computed(() => {
+			const { left, width } = metrics.value;
+			if (!width) return { opacity: "0" };
+			return {
+				opacity: "1",
+				left: `${left}%`,
+				width: `${width}%`
+			};
+		}),
+		indicatorIsBilling: computed(() => metrics.value.isBilling)
+	};
+};
+//#endregion
+export { useTabsIndicator };

package/dist/components/STag/STag.types.cjs

@@ -0,0 +1,28 @@
+//#region src/components/STag/STag.types.ts
+var ESTagColor = /* @__PURE__ */ function(ESTagColor) {
+	ESTagColor["RED_ORANGE"] = "red-orange";
+	ESTagColor["ORANGE"] = "orange";
+	ESTagColor["YELLOW"] = "yellow";
+	ESTagColor["GREEN"] = "green";
+	ESTagColor["TEAL"] = "teal";
+	ESTagColor["CYAN"] = "cyan";
+	ESTagColor["BLUE"] = "blue";
+	ESTagColor["INDIGO"] = "indigo";
+	ESTagColor["VIOLET"] = "violet";
+	ESTagColor["MAGENTA"] = "magenta";
+	ESTagColor["PINK"] = "pink";
+	ESTagColor["GRAY"] = "gray";
+	ESTagColor["RED"] = "red";
+	ESTagColor["WHITE_BORDER"] = "white-border";
+	ESTagColor["BILLING"] = "billing";
+	ESTagColor["BILLING_LIGHT"] = "billing-light";
+	return ESTagColor;
+}({});
+var ESTagSize = /* @__PURE__ */ function(ESTagSize) {
+	ESTagSize["SMALL"] = "small";
+	ESTagSize["MEDIUM"] = "medium";
+	return ESTagSize;
+}({});
+//#endregion
+exports.ESTagColor = ESTagColor;
+exports.ESTagSize = ESTagSize;

package/dist/components/STag/STag.types.js

@@ -0,0 +1,27 @@
+//#region src/components/STag/STag.types.ts
+var ESTagColor = /* @__PURE__ */ function(ESTagColor) {
+	ESTagColor["RED_ORANGE"] = "red-orange";
+	ESTagColor["ORANGE"] = "orange";
+	ESTagColor["YELLOW"] = "yellow";
+	ESTagColor["GREEN"] = "green";
+	ESTagColor["TEAL"] = "teal";
+	ESTagColor["CYAN"] = "cyan";
+	ESTagColor["BLUE"] = "blue";
+	ESTagColor["INDIGO"] = "indigo";
+	ESTagColor["VIOLET"] = "violet";
+	ESTagColor["MAGENTA"] = "magenta";
+	ESTagColor["PINK"] = "pink";
+	ESTagColor["GRAY"] = "gray";
+	ESTagColor["RED"] = "red";
+	ESTagColor["WHITE_BORDER"] = "white-border";
+	ESTagColor["BILLING"] = "billing";
+	ESTagColor["BILLING_LIGHT"] = "billing-light";
+	return ESTagColor;
+}({});
+var ESTagSize = /* @__PURE__ */ function(ESTagSize) {
+	ESTagSize["SMALL"] = "small";
+	ESTagSize["MEDIUM"] = "medium";
+	return ESTagSize;
+}({});
+//#endregion
+export { ESTagColor, ESTagSize };

package/dist/components/STag/STag.vue.cjs

@@ -0,0 +1,6 @@
+const require_STag_vue_vue_type_script_setup_true_lang = require("./STag.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                          */
+//#region src/components/STag/STag.vue
+var STag_default = require_STag_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = STag_default;

package/dist/components/STag/STag.vue.js

@@ -0,0 +1,6 @@
+import STag_vue_vue_type_script_setup_true_lang_default from "./STag.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                        */
+//#region src/components/STag/STag.vue
+var STag_default = STag_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { STag_default as default };

package/dist/components/STag/STag.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,163 @@
+const require_SButton_types = require("../SButton/SButton.types.cjs");
+const require_vueRouterLinkPresentation = require("../../utils/vueRouterLinkPresentation.cjs");
+const require_useLink = require("../../composables/useLink.cjs");
+const require_SButton = require("../SButton/SButton.vue.cjs");
+const require_STag_types = require("./STag.types.cjs");
+const require_resolveTagColor = require("./utils/resolveTagColor.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/STag/STag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-tag__content s-ui-typography-body-12-regular" };
+var _hoisted_2 = {
+	key: 0,
+	class: "s-ui-tag__actions"
+};
+var _hoisted_3 = { class: "s-ui-tag__action-close" };
+var STag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "STag",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		color: { default: () => require_STag_types.ESTagColor.RED_ORANGE },
+		size: { default: () => require_STag_types.ESTagSize.MEDIUM },
+		short: {
+			type: Boolean,
+			default: false
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		selected: {
+			type: Boolean,
+			default: false
+		},
+		link: {},
+		exact: {
+			type: Boolean,
+			default: false
+		},
+		replace: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)(["close"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const emit = __emit;
+		const { t } = (0, _shtabapp_ui_kit_primitives.useUiKitI18n)();
+		const attrs = (0, vue.useAttrs)();
+		const tagLink = require_useLink.useLink(() => __props.link, () => __props.exact, () => __props.replace);
+		const linkPresentation = tagLink.linkPresentation;
+		const tagRootTag = (0, vue.computed)(() => {
+			const presentation = linkPresentation.value;
+			if (presentation.mode === "none") return "span";
+			return presentation.rootTag;
+		});
+		const tagLinkBindings = (0, vue.computed)(() => {
+			return require_vueRouterLinkPresentation.getLinkRootBindings(linkPresentation.value, { replace: __props.replace });
+		});
+		const tagRootCombinedBindings = (0, vue.computed)(() => {
+			return {
+				...tagLinkBindings.value,
+				...attrs
+			};
+		});
+		const resolvedSelected = (0, vue.computed)(() => {
+			if (tagLink.isRouterLink.value) return tagLink.isActive.value;
+			return __props.selected;
+		});
+		const showCloseAction = (0, vue.computed)(() => {
+			return __props.closable && !__props.short;
+		});
+		const tagRootTabIndex = (0, vue.computed)(() => {
+			if (__props.disabled) return -1;
+			if (require_vueRouterLinkPresentation.hasLinkProp(__props.link)) return;
+			if (!showCloseAction.value) return -1;
+			return 0;
+		});
+		const rootClasses = (0, vue.computed)(() => {
+			return [
+				require_resolveTagColor.getTagColorClass(__props.color),
+				`s-ui-tag--size-${__props.size}`,
+				{
+					"s-ui-tag--short": __props.short,
+					"s-ui-tag--disabled": __props.disabled,
+					"s-ui-tag--selected": resolvedSelected.value,
+					"s-ui-tag--link": require_vueRouterLinkPresentation.hasLinkProp(__props.link)
+				}
+			];
+		});
+		const rootStyle = (0, vue.computed)(() => {
+			if (!require_resolveTagColor.isTagCustomColor(__props.color)) return;
+			return require_resolveTagColor.getTagColorStyle(__props.color);
+		});
+		const tagTextContent = (0, vue.computed)(() => {
+			if (__props.short) return modelValue.value.slice(0, 1);
+			return modelValue.value;
+		});
+		const handleCloseClick = () => {
+			emit("close");
+		};
+		const TAG_ACTIVATION_KEYS = [
+			"Enter",
+			" ",
+			"Spacebar"
+		];
+		const TAG_REMOVAL_KEYS = ["Delete", "Backspace"];
+		const handleTagRootKeydown = (event) => {
+			if (__props.disabled) return;
+			if (tagLink.isRouterLink.value && TAG_ACTIVATION_KEYS.includes(event.key)) {
+				event.preventDefault();
+				tagLink.navigate();
+				return;
+			}
+			if (event.target !== event.currentTarget) return;
+			if (TAG_REMOVAL_KEYS.includes(event.key)) {
+				if (!showCloseAction.value) return;
+				event.preventDefault();
+				emit("close");
+			}
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagRootTag.value), (0, vue.mergeProps)({
+				class: ["s-ui-tag", rootClasses.value],
+				style: rootStyle.value,
+				tabindex: tagRootTabIndex.value,
+				"aria-disabled": __props.disabled ? true : void 0
+			}, tagRootCombinedBindings.value, { onKeydown: handleTagRootKeydown }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_1, (0, vue.toDisplayString)(tagTextContent.value), 1), showCloseAction.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, [(0, vue.createElementVNode)("span", _hoisted_3, [(0, vue.createVNode)((0, vue.unref)(require_SButton.default), {
+					appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+					variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+					size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+					disabled: __props.disabled,
+					tabindex: -1,
+					icon: "closeMini",
+					"aria-label": (0, vue.unref)(t)("tag.close"),
+					onClick: (0, vue.withModifiers)(handleCloseClick, ["stop"])
+				}, null, 8, [
+					"appearance",
+					"variant",
+					"size",
+					"disabled",
+					"aria-label"
+				])])])) : (0, vue.createCommentVNode)("", true)]),
+				_: 1
+			}, 16, [
+				"class",
+				"style",
+				"tabindex",
+				"aria-disabled"
+			]);
+		};
+	}
+});
+//#endregion
+exports.default = STag_vue_vue_type_script_setup_true_lang_default;

package/dist/components/STag/STag.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,163 @@
+import { EButtonAppearance, EButtonSize, EButtonVariant } from "../SButton/SButton.types.js";
+import { getLinkRootBindings, hasLinkProp } from "../../utils/vueRouterLinkPresentation.js";
+import { useLink } from "../../composables/useLink.js";
+import SButton_default from "../SButton/SButton.vue.js";
+import { ESTagColor, ESTagSize } from "./STag.types.js";
+import { getTagColorClass, getTagColorStyle, isTagCustomColor } from "./utils/resolveTagColor.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, openBlock, resolveDynamicComponent, toDisplayString, unref, useAttrs, useModel, withCtx, withModifiers } from "vue";
+import { useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+//#region src/components/STag/STag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-tag__content s-ui-typography-body-12-regular" };
+var _hoisted_2 = {
+	key: 0,
+	class: "s-ui-tag__actions"
+};
+var _hoisted_3 = { class: "s-ui-tag__action-close" };
+var STag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "STag",
+	props: /*@__PURE__*/ mergeModels({
+		color: { default: () => ESTagColor.RED_ORANGE },
+		size: { default: () => ESTagSize.MEDIUM },
+		short: {
+			type: Boolean,
+			default: false
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		selected: {
+			type: Boolean,
+			default: false
+		},
+		link: {},
+		exact: {
+			type: Boolean,
+			default: false
+		},
+		replace: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["close"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const { t } = useUiKitI18n();
+		const attrs = useAttrs();
+		const tagLink = useLink(() => __props.link, () => __props.exact, () => __props.replace);
+		const linkPresentation = tagLink.linkPresentation;
+		const tagRootTag = computed(() => {
+			const presentation = linkPresentation.value;
+			if (presentation.mode === "none") return "span";
+			return presentation.rootTag;
+		});
+		const tagLinkBindings = computed(() => {
+			return getLinkRootBindings(linkPresentation.value, { replace: __props.replace });
+		});
+		const tagRootCombinedBindings = computed(() => {
+			return {
+				...tagLinkBindings.value,
+				...attrs
+			};
+		});
+		const resolvedSelected = computed(() => {
+			if (tagLink.isRouterLink.value) return tagLink.isActive.value;
+			return __props.selected;
+		});
+		const showCloseAction = computed(() => {
+			return __props.closable && !__props.short;
+		});
+		const tagRootTabIndex = computed(() => {
+			if (__props.disabled) return -1;
+			if (hasLinkProp(__props.link)) return;
+			if (!showCloseAction.value) return -1;
+			return 0;
+		});
+		const rootClasses = computed(() => {
+			return [
+				getTagColorClass(__props.color),
+				`s-ui-tag--size-${__props.size}`,
+				{
+					"s-ui-tag--short": __props.short,
+					"s-ui-tag--disabled": __props.disabled,
+					"s-ui-tag--selected": resolvedSelected.value,
+					"s-ui-tag--link": hasLinkProp(__props.link)
+				}
+			];
+		});
+		const rootStyle = computed(() => {
+			if (!isTagCustomColor(__props.color)) return;
+			return getTagColorStyle(__props.color);
+		});
+		const tagTextContent = computed(() => {
+			if (__props.short) return modelValue.value.slice(0, 1);
+			return modelValue.value;
+		});
+		const handleCloseClick = () => {
+			emit("close");
+		};
+		const TAG_ACTIVATION_KEYS = [
+			"Enter",
+			" ",
+			"Spacebar"
+		];
+		const TAG_REMOVAL_KEYS = ["Delete", "Backspace"];
+		const handleTagRootKeydown = (event) => {
+			if (__props.disabled) return;
+			if (tagLink.isRouterLink.value && TAG_ACTIVATION_KEYS.includes(event.key)) {
+				event.preventDefault();
+				tagLink.navigate();
+				return;
+			}
+			if (event.target !== event.currentTarget) return;
+			if (TAG_REMOVAL_KEYS.includes(event.key)) {
+				if (!showCloseAction.value) return;
+				event.preventDefault();
+				emit("close");
+			}
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(tagRootTag.value), mergeProps({
+				class: ["s-ui-tag", rootClasses.value],
+				style: rootStyle.value,
+				tabindex: tagRootTabIndex.value,
+				"aria-disabled": __props.disabled ? true : void 0
+			}, tagRootCombinedBindings.value, { onKeydown: handleTagRootKeydown }), {
+				default: withCtx(() => [createElementVNode("span", _hoisted_1, toDisplayString(tagTextContent.value), 1), showCloseAction.value ? (openBlock(), createElementBlock("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [createVNode(unref(SButton_default), {
+					appearance: unref(EButtonAppearance).BARE,
+					variant: unref(EButtonVariant).NEUTRAL,
+					size: unref(EButtonSize).SMALL,
+					disabled: __props.disabled,
+					tabindex: -1,
+					icon: "closeMini",
+					"aria-label": unref(t)("tag.close"),
+					onClick: withModifiers(handleCloseClick, ["stop"])
+				}, null, 8, [
+					"appearance",
+					"variant",
+					"size",
+					"disabled",
+					"aria-label"
+				])])])) : createCommentVNode("", true)]),
+				_: 1
+			}, 16, [
+				"class",
+				"style",
+				"tabindex",
+				"aria-disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { STag_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/STag/utils/resolveTagColor.cjs

@@ -0,0 +1,19 @@
+const require_contrastSurfaceTextColor = require("../../../utils/color/contrastSurfaceTextColor.cjs");
+const require_colorValue = require("../../../utils/color/colorValue.cjs");
+//#region src/components/STag/utils/resolveTagColor.ts
+var isTagCustomColor = (color) => {
+	return require_contrastSurfaceTextColor.isHexColor(color) || require_colorValue.isCssVariableColor(color);
+};
+var getTagColorClass = (color) => {
+	if (isTagCustomColor(color)) return "s-ui-tag--color-custom";
+	return `s-ui-tag--color-${color}`;
+};
+var getTagColorStyle = (color) => {
+	const style = { "--s-ui-tag-bg": color };
+	if (require_contrastSurfaceTextColor.isHexColor(color)) style["--s-ui-tag-text"] = require_contrastSurfaceTextColor.getContrastingSurfaceTextColor(color);
+	return style;
+};
+//#endregion
+exports.getTagColorClass = getTagColorClass;
+exports.getTagColorStyle = getTagColorStyle;
+exports.isTagCustomColor = isTagCustomColor;