@shtabapp/ui-kit 1.26.0

package/dist/STab-BPJQgGWd.js

@@ -0,0 +1,218 @@
+import { a as e } from "./useSelectionGroup-cKj38lEN.js";
+import { n as t, t as ee } from "./useSelectLink-DClG5hGA.js";
+import { n as te, r as ne, t as n } from "./useLink-Zo9A_RCf.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as re, createVNode as ie, defineComponent as l, inject as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, resolveDynamicComponent as ae, toDisplayString as v, toValue as y, unref as b, useAttrs as oe, useModel as se, useSlots as ce, useTemplateRef as x, vModelText as le, withCtx as ue, withDirectives as de, withModifiers as S } from "vue";
+import { SIcon as C } from "@shtabapp/ui-kit-primitives";
+//#region src/components/STabs/utils/context.ts
+var w = Symbol("STabs"), T = /* @__PURE__ */ function(e) {
+	return e.PRIMARY = "primary", e.SECONDARY = "secondary", e;
+}({}), E = /* @__PURE__ */ function(e) {
+	return e.SMALL = "small", e.LARGE = "large", e;
+}({}), fe = { class: "s-ui-tab__content" }, pe = {
+	key: 0,
+	class: "s-ui-tab__icon-wrap"
+}, me = { class: "s-ui-tab__icon" }, he = {
+	key: 0,
+	class: "s-ui-tab__icon-badge",
+	"aria-hidden": "true"
+}, ge = {
+	key: 1,
+	class: "s-ui-tab__label-wrap"
+}, D = {
+	key: 0,
+	class: "s-ui-tab__caret",
+	"aria-hidden": "true"
+}, O = {
+	key: 3,
+	class: "s-ui-tab__caret",
+	"aria-hidden": "true"
+}, k = ["placeholder", "disabled"], A = {
+	key: 2,
+	class: "s-ui-tab__right"
+}, j = /* @__PURE__ */ l({
+	inheritAttrs: !1,
+	__name: "STab",
+	props: /*@__PURE__*/ d({
+		appearance: {},
+		size: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		icon: {},
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		billing: {
+			type: Boolean,
+			default: !1
+		},
+		placeholder: {
+			type: Boolean,
+			default: !1
+		},
+		placeholderText: { default: "Введите название" },
+		editableStaticDisplay: {
+			type: Boolean,
+			default: !1
+		},
+		iconBadge: {},
+		value: {},
+		link: {},
+		exact: {
+			type: Boolean,
+			default: !1
+		},
+		replace: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ d(["click", "rename"], ["update:modelValue"]),
+	setup(l, { expose: d, emit: j }) {
+		let M = u(w, null), N = oe(), P = ce(), F = i(() => e(l.appearance, M ? y(M.appearance) : void 0, T.PRIMARY)), I = i(() => e(l.size, M ? y(M.size) : void 0, E.LARGE)), L = i(() => l.disabled || !!(M && y(M.disabled))), R = x("tabRootRef"), z = t({
+			group: () => M,
+			value: () => l.value,
+			el: R,
+			disabled: L
+		}), B = n(() => l.link, () => l.exact, () => l.replace);
+		ee({
+			isRouterLink: B.isRouterLink,
+			isActive: B.isActive,
+			group: () => M,
+			value: () => l.value
+		});
+		let V = i(() => B.isRouterLink.value ? B.isActive.value : z.isInGroup.value ? z.isActive.value : l.selected), H = se(l, "modelValue"), U = j, W = x("renameInputRef"), G = g(!1), K = g(""), q = B.linkPresentation, J = i(() => q.value.mode === "none"), _e = i(() => {
+			let e = q.value;
+			return e.mode === "none" ? "button" : e.rootTag;
+		}), ve = i(() => te(q.value, { replace: l.replace })), ye = i(() => {
+			let e = z.tabIndex.value;
+			return {
+				...ve.value,
+				...e === void 0 ? {} : { tabindex: e },
+				...N
+			};
+		}), be = i(() => I.value === E.LARGE ? 20 : 16), Y = i(() => I.value === E.LARGE ? "s-ui-typography-label-16-medium" : "s-ui-typography-label-14-medium"), xe = i(() => !!(l.icon || P.icon)), Se = i(() => l.editableStaticDisplay && l.placeholder && !H.value.length), Ce = i(() => l.editableStaticDisplay && !l.placeholder), X = i(() => G.value ? K.value : H.value), Z = i(() => !P.default && l.placeholder && !H.value.length), we = i(() => l.editableStaticDisplay && l.placeholder && !H.value.length), Te = i(() => l.editableStaticDisplay && !l.placeholder && H.value.length > 0), Q = i(() => l.iconOnly ? !1 : P.default || l.editableStaticDisplay || G.value || H.value.length > 0 || Z.value), Ee = i(() => l.iconOnly ? !1 : !!P.right), $ = i(() => G.value || l.editableStaticDisplay), De = i(() => l.placeholder && !X.value.length && ($.value || Z.value)), Oe = i(() => [
+			`s-ui-tab--appearance-${F.value}`,
+			`s-ui-tab--size-${I.value}`,
+			{
+				"s-ui-tab--selected": V.value,
+				"s-ui-tab--disabled": L.value,
+				"s-ui-tab--icon-only": l.iconOnly,
+				"s-ui-tab--billing": l.billing,
+				"s-ui-tab--editable": $.value,
+				"s-ui-tab--editable-placeholder": De.value,
+				"s-ui-tab--editable-value": !l.placeholder && $.value,
+				"s-ui-tab--link": ne(l.link)
+			}
+		]), ke = () => {
+			let e = W.value;
+			if (!e) return;
+			e.focus();
+			let t = K.value.length;
+			e.setSelectionRange(t, t);
+		}, Ae = async () => {
+			L.value || l.editableStaticDisplay || l.iconOnly || (K.value = H.value, G.value = !0, await p(), ke());
+		}, je = () => {
+			if (l.editableStaticDisplay || !G.value) return;
+			let e = K.value;
+			G.value = !1, H.value = e, U("rename", e);
+		}, Me = () => {
+			l.editableStaticDisplay || !G.value || (G.value = !1);
+		}, Ne = () => {
+			G.value && Me();
+		}, Pe = (e) => {
+			e.stopPropagation(), e.key === "Enter" && (e.preventDefault(), je(), W.value?.blur());
+		}, Fe = (e) => {
+			if (B.isRouterLink.value && (e.key === "Enter" || e.key === " " || e.key === "Spacebar")) {
+				e.preventDefault(), B.navigate();
+				return;
+			}
+			z.handleKeydown(e);
+		}, Ie = (e) => {
+			if (L.value) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			if (B.isRouterLink.value) {
+				U("click", e);
+				return;
+			}
+			z.handleClick(), U("click", e);
+		};
+		return d({ edit: Ae }), (e, t) => (h(), a(ae(_e.value), f({
+			ref_key: "tabRootRef",
+			ref: R,
+			class: ["s-ui-tab", Oe.value],
+			type: J.value ? "button" : void 0,
+			role: "tab",
+			"aria-selected": !!V.value,
+			"aria-disabled": L.value ? !0 : void 0,
+			disabled: J.value && L.value ? !0 : void 0
+		}, ye.value, {
+			onClick: Ie,
+			onKeydown: Fe
+		}), {
+			default: ue(() => [c("span", fe, [
+				xe.value ? (h(), s("span", pe, [c("span", me, [_(e.$slots, "icon", {}, () => [l.icon ? (h(), a(b(C), {
+					key: 0,
+					name: l.icon,
+					size: be.value,
+					billing: l.billing
+				}, null, 8, [
+					"name",
+					"size",
+					"billing"
+				])) : o("", !0)])]), l.iconBadge ? (h(), s("span", he, [ie(b(C), {
+					class: "s-ui-tab__icon-badge-icon",
+					name: l.iconBadge
+				}, null, 8, ["name"])])) : o("", !0)])) : o("", !0),
+				Q.value ? (h(), s("span", ge, [l.editableStaticDisplay ? (h(), s(r, { key: 0 }, [
+					Se.value ? (h(), s("span", D)) : o("", !0),
+					we.value ? (h(), s("span", {
+						key: 1,
+						class: m(["s-ui-tab__label", Y.value])
+					}, v(l.placeholderText), 3)) : o("", !0),
+					Te.value ? (h(), s("span", {
+						key: 2,
+						class: m(["s-ui-tab__label", Y.value])
+					}, v(H.value), 3)) : o("", !0),
+					Ce.value ? (h(), s("span", O)) : o("", !0)
+				], 64)) : G.value ? de((h(), s("input", {
+					key: 1,
+					ref_key: "renameInputRef",
+					ref: W,
+					"onUpdate:modelValue": t[0] ||= (e) => K.value = e,
+					class: m(["s-ui-tab__input", Y.value]),
+					type: "text",
+					placeholder: l.placeholder && !X.value.length ? l.placeholderText : void 0,
+					disabled: L.value ? !0 : void 0,
+					onBlur: Ne,
+					onClick: t[1] ||= S(() => {}, ["stop"]),
+					onKeydown: Pe
+				}, null, 42, k)), [[le, K.value]]) : (h(), s("span", {
+					key: 2,
+					class: m(["s-ui-tab__label", Y.value])
+				}, [b(P).default ? _(e.$slots, "default", { key: 0 }) : (h(), s(r, { key: 1 }, [re(v(H.value || (l.placeholder ? l.placeholderText : "")), 1)], 64))], 2))])) : o("", !0),
+				Ee.value ? (h(), s("span", A, [_(e.$slots, "right")])) : o("", !0)
+			])]),
+			_: 3
+		}, 16, [
+			"class",
+			"type",
+			"aria-selected",
+			"aria-disabled",
+			"disabled"
+		]));
+	}
+});
+//#endregion
+export { w as i, T as n, E as r, j as t };

package/dist/STab-DzehRmKv.cjs

@@ -0,0 +1 @@
+const e=require("./useSelectionGroup-TaektE-I.cjs"),t=require("./useSelectLink-DDdMmsJB.cjs"),n=require("./useLink-CvN7IK0Z.cjs");let r=require("vue"),i=require("@shtabapp/ui-kit-primitives");var a=Symbol(`STabs`),o=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e}({}),s=function(e){return e.SMALL=`small`,e.LARGE=`large`,e}({}),ee={class:`s-ui-tab__content`},c={key:0,class:`s-ui-tab__icon-wrap`},l={class:`s-ui-tab__icon`},u={key:0,class:`s-ui-tab__icon-badge`,"aria-hidden":`true`},d={key:1,class:`s-ui-tab__label-wrap`},f={key:0,class:`s-ui-tab__caret`,"aria-hidden":`true`},p={key:3,class:`s-ui-tab__caret`,"aria-hidden":`true`},m=[`placeholder`,`disabled`],h={key:2,class:`s-ui-tab__right`},g=(0,r.defineComponent)({inheritAttrs:!1,__name:`STab`,props:(0,r.mergeModels)({appearance:{},size:{},disabled:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},icon:{},iconOnly:{type:Boolean,default:!1},billing:{type:Boolean,default:!1},placeholder:{type:Boolean,default:!1},placeholderText:{default:`Введите название`},editableStaticDisplay:{type:Boolean,default:!1},iconBadge:{},value:{},link:{},exact:{type:Boolean,default:!1},replace:{type:Boolean,default:!1}},{modelValue:{default:``},modelModifiers:{}}),emits:(0,r.mergeModels)([`click`,`rename`],[`update:modelValue`]),setup(g,{expose:_,emit:v}){let y=(0,r.inject)(a,null),b=(0,r.useAttrs)(),x=(0,r.useSlots)(),S=(0,r.computed)(()=>e.a(g.appearance,y?(0,r.toValue)(y.appearance):void 0,o.PRIMARY)),C=(0,r.computed)(()=>e.a(g.size,y?(0,r.toValue)(y.size):void 0,s.LARGE)),w=(0,r.computed)(()=>g.disabled||!!(y&&(0,r.toValue)(y.disabled))),T=(0,r.useTemplateRef)(`tabRootRef`),E=t.n({group:()=>y,value:()=>g.value,el:T,disabled:w}),D=n.t(()=>g.link,()=>g.exact,()=>g.replace);t.t({isRouterLink:D.isRouterLink,isActive:D.isActive,group:()=>y,value:()=>g.value});let O=(0,r.computed)(()=>D.isRouterLink.value?D.isActive.value:E.isInGroup.value?E.isActive.value:g.selected),k=(0,r.useModel)(g,`modelValue`),A=v,j=(0,r.useTemplateRef)(`renameInputRef`),M=(0,r.ref)(!1),N=(0,r.ref)(``),P=D.linkPresentation,F=(0,r.computed)(()=>P.value.mode===`none`),I=(0,r.computed)(()=>{let e=P.value;return e.mode===`none`?`button`:e.rootTag}),L=(0,r.computed)(()=>n.n(P.value,{replace:g.replace})),R=(0,r.computed)(()=>{let e=E.tabIndex.value;return{...L.value,...e===void 0?{}:{tabindex:e},...b}}),z=(0,r.computed)(()=>C.value===s.LARGE?20:16),B=(0,r.computed)(()=>C.value===s.LARGE?`s-ui-typography-label-16-medium`:`s-ui-typography-label-14-medium`),V=(0,r.computed)(()=>!!(g.icon||x.icon)),H=(0,r.computed)(()=>g.editableStaticDisplay&&g.placeholder&&!k.value.length),U=(0,r.computed)(()=>g.editableStaticDisplay&&!g.placeholder),W=(0,r.computed)(()=>M.value?N.value:k.value),G=(0,r.computed)(()=>!x.default&&g.placeholder&&!k.value.length),K=(0,r.computed)(()=>g.editableStaticDisplay&&g.placeholder&&!k.value.length),q=(0,r.computed)(()=>g.editableStaticDisplay&&!g.placeholder&&k.value.length>0),J=(0,r.computed)(()=>g.iconOnly?!1:x.default||g.editableStaticDisplay||M.value||k.value.length>0||G.value),Y=(0,r.computed)(()=>g.iconOnly?!1:!!x.right),X=(0,r.computed)(()=>M.value||g.editableStaticDisplay),Z=(0,r.computed)(()=>g.placeholder&&!W.value.length&&(X.value||G.value)),Q=(0,r.computed)(()=>[`s-ui-tab--appearance-${S.value}`,`s-ui-tab--size-${C.value}`,{"s-ui-tab--selected":O.value,"s-ui-tab--disabled":w.value,"s-ui-tab--icon-only":g.iconOnly,"s-ui-tab--billing":g.billing,"s-ui-tab--editable":X.value,"s-ui-tab--editable-placeholder":Z.value,"s-ui-tab--editable-value":!g.placeholder&&X.value,"s-ui-tab--link":n.r(g.link)}]),$=()=>{let e=j.value;if(!e)return;e.focus();let t=N.value.length;e.setSelectionRange(t,t)},te=async()=>{w.value||g.editableStaticDisplay||g.iconOnly||(N.value=k.value,M.value=!0,await(0,r.nextTick)(),$())},ne=()=>{if(g.editableStaticDisplay||!M.value)return;let e=N.value;M.value=!1,k.value=e,A(`rename`,e)},re=()=>{g.editableStaticDisplay||!M.value||(M.value=!1)},ie=()=>{M.value&&re()},ae=e=>{e.stopPropagation(),e.key===`Enter`&&(e.preventDefault(),ne(),j.value?.blur())},oe=e=>{if(D.isRouterLink.value&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)){e.preventDefault(),D.navigate();return}E.handleKeydown(e)},se=e=>{if(w.value){e.preventDefault(),e.stopPropagation();return}if(D.isRouterLink.value){A(`click`,e);return}E.handleClick(),A(`click`,e)};return _({edit:te}),(e,t)=>((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(I.value),(0,r.mergeProps)({ref_key:`tabRootRef`,ref:T,class:[`s-ui-tab`,Q.value],type:F.value?`button`:void 0,role:`tab`,"aria-selected":!!O.value,"aria-disabled":w.value?!0:void 0,disabled:F.value&&w.value?!0:void 0},R.value,{onClick:se,onKeydown:oe}),{default:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`span`,ee,[V.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,c,[(0,r.createElementVNode)(`span`,l,[(0,r.renderSlot)(e.$slots,`icon`,{},()=>[g.icon?((0,r.openBlock)(),(0,r.createBlock)((0,r.unref)(i.SIcon),{key:0,name:g.icon,size:z.value,billing:g.billing},null,8,[`name`,`size`,`billing`])):(0,r.createCommentVNode)(``,!0)])]),g.iconBadge?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,u,[(0,r.createVNode)((0,r.unref)(i.SIcon),{class:`s-ui-tab__icon-badge-icon`,name:g.iconBadge},null,8,[`name`])])):(0,r.createCommentVNode)(``,!0)])):(0,r.createCommentVNode)(``,!0),J.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,d,[g.editableStaticDisplay?((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:0},[H.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,f)):(0,r.createCommentVNode)(``,!0),K.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,{key:1,class:(0,r.normalizeClass)([`s-ui-tab__label`,B.value])},(0,r.toDisplayString)(g.placeholderText),3)):(0,r.createCommentVNode)(``,!0),q.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,{key:2,class:(0,r.normalizeClass)([`s-ui-tab__label`,B.value])},(0,r.toDisplayString)(k.value),3)):(0,r.createCommentVNode)(``,!0),U.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,p)):(0,r.createCommentVNode)(``,!0)],64)):M.value?(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createElementBlock)(`input`,{key:1,ref_key:`renameInputRef`,ref:j,"onUpdate:modelValue":t[0]||=e=>N.value=e,class:(0,r.normalizeClass)([`s-ui-tab__input`,B.value]),type:`text`,placeholder:g.placeholder&&!W.value.length?g.placeholderText:void 0,disabled:w.value?!0:void 0,onBlur:ie,onClick:t[1]||=(0,r.withModifiers)(()=>{},[`stop`]),onKeydown:ae},null,42,m)),[[r.vModelText,N.value]]):((0,r.openBlock)(),(0,r.createElementBlock)(`span`,{key:2,class:(0,r.normalizeClass)([`s-ui-tab__label`,B.value])},[(0,r.unref)(x).default?(0,r.renderSlot)(e.$slots,`default`,{key:0}):((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:1},[(0,r.createTextVNode)((0,r.toDisplayString)(k.value||(g.placeholder?g.placeholderText:``)),1)],64))],2))])):(0,r.createCommentVNode)(``,!0),Y.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,h,[(0,r.renderSlot)(e.$slots,`right`)])):(0,r.createCommentVNode)(``,!0)])]),_:3},16,[`class`,`type`,`aria-selected`,`aria-disabled`,`disabled`]))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return g}});

package/dist/STabs-B0GD_1Zy.js

@@ -0,0 +1,164 @@
+import { n as e, r as t, t as n } from "./SButton.types-CpdHQtyx.js";
+import { i as r, n as i, o as a, r as o } from "./useSelectionGroup-cKj38lEN.js";
+import { t as s } from "./SButton-DI04KG06.js";
+import { i as c, n as l, r as u } from "./STab-BPJQgGWd.js";
+import { computed as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, mergeModels as _, nextTick as v, normalizeClass as y, normalizeStyle as b, openBlock as x, provide as S, ref as C, renderSlot as w, toValue as T, unref as E, useModel as D, useTemplateRef as O, watch as k } from "vue";
+import { useResizeObserver as A, useScroll as j } from "@vueuse/core";
+//#region src/components/STabs/utils/useTabsIndicator.ts
+var M = ".s-ui-tab[aria-selected=\"true\"]", N = ({ trackEl: e, selectedValue: t, enabled: n }) => {
+	let r = C({
+		offsetX: 0,
+		width: 0,
+		isBilling: !1
+	}), i = () => {
+		if (!T(n)) {
+			r.value = {
+				offsetX: 0,
+				width: 0,
+				isBilling: !1
+			};
+			return;
+		}
+		let t = T(e);
+		if (!t) {
+			r.value = {
+				offsetX: 0,
+				width: 0,
+				isBilling: !1
+			};
+			return;
+		}
+		let i = t.querySelector(M);
+		if (!(i instanceof HTMLElement)) {
+			r.value = {
+				offsetX: 0,
+				width: 0,
+				isBilling: !1
+			};
+			return;
+		}
+		let a = t.getBoundingClientRect(), o = i.getBoundingClientRect();
+		r.value = {
+			offsetX: o.left - a.left,
+			width: o.width,
+			isBilling: i.classList.contains("s-ui-tab--billing")
+		};
+	};
+	return A(e, () => {
+		i();
+	}), k(() => T(t), async () => {
+		await v(), i();
+	}, { immediate: !0 }), {
+		indicatorStyle: d(() => {
+			let { offsetX: e, width: t } = r.value;
+			return t ? {
+				opacity: "1",
+				width: `${t}px`,
+				transform: `translateX(${e}px)`
+			} : { opacity: "0" };
+		}),
+		indicatorIsBilling: d(() => r.value.isBilling)
+	};
+}, P = ["aria-disabled"], F = { class: "s-ui-tabs__body" }, I = /* @__PURE__ */ g({
+	__name: "STabs",
+	props: /*@__PURE__*/ _({
+		appearance: { default: () => l.PRIMARY },
+		size: { default: () => u.LARGE },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		mandatory: {
+			type: Boolean,
+			default: !0
+		},
+		addable: {
+			type: Boolean,
+			default: !1
+		},
+		loop: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _(["add"], ["update:modelValue"]),
+	setup(u, { emit: g }) {
+		let _ = D(u, "modelValue"), v = g, C = O("tabsBodyRef"), T = O("tabsTrackRef"), { arrivedState: k } = j(C, {
+			throttle: 100,
+			offset: { right: 1 }
+		}), A = a({
+			modelValue: () => _.value,
+			onUpdateModelValue: (e) => {
+				r(e) && (_.value = e);
+			},
+			mode: i.SINGLE,
+			mandatory: () => u.mandatory,
+			orientation: o.HORIZONTAL,
+			loop: () => u.loop
+		});
+		S(c, {
+			mode: () => i.SINGLE,
+			isSelected: A.isSelected,
+			selectItem: A.toggle,
+			registerItem: A.registerItem,
+			getItemTabIndex: A.getItemTabIndex,
+			getGroupTabIndex: A.getGroupTabIndex,
+			handleItemKeydown: A.handleItemKeydown,
+			appearance: () => u.appearance,
+			size: () => u.size,
+			disabled: () => u.disabled
+		});
+		let M = d(() => u.appearance === l.PRIMARY), { indicatorStyle: I, indicatorIsBilling: L } = N({
+			trackEl: () => T.value,
+			selectedValue: () => _.value,
+			enabled: M
+		}), R = d(() => u.addable && !k.right), z = d(() => [
+			`s-ui-tabs--appearance-${u.appearance}`,
+			`s-ui-tabs--size-${u.size}`,
+			u.addable ? "s-ui-tabs--addable" : void 0
+		]), B = () => {
+			u.disabled || v("add");
+		};
+		return (r, i) => (x(), p("div", {
+			class: y(["s-ui-tabs", z.value]),
+			role: "tablist",
+			"aria-orientation": "horizontal",
+			"aria-disabled": u.disabled ? !0 : void 0
+		}, [m("div", F, [m("div", {
+			ref_key: "tabsBodyRef",
+			ref: C,
+			class: "s-ui-tabs__scroll"
+		}, [m("div", {
+			ref_key: "tabsTrackRef",
+			ref: T,
+			class: "s-ui-tabs__track"
+		}, [M.value ? (x(), p("span", {
+			key: 0,
+			class: y(["s-ui-tabs__indicator", { "s-ui-tabs__indicator--billing": E(L) }]),
+			style: b(E(I)),
+			"aria-hidden": "true"
+		}, null, 6)) : f("", !0), w(r.$slots, "default")], 512)], 512), u.addable ? (x(), p("span", {
+			key: 0,
+			class: y(["s-ui-tabs__fade", { "s-ui-tabs__fade--visible": R.value }]),
+			"aria-hidden": "true"
+		}, null, 2)) : f("", !0)]), u.addable ? w(r.$slots, "add", { key: 0 }, () => [h(E(s), {
+			class: "s-ui-tabs__add",
+			icon: "plus",
+			appearance: E(n).BARE,
+			variant: E(t).NEUTRAL,
+			size: E(e).SMALL,
+			disabled: u.disabled,
+			onClick: B
+		}, null, 8, [
+			"appearance",
+			"variant",
+			"size",
+			"disabled"
+		])]) : f("", !0)], 10, P));
+	}
+});
+//#endregion
+export { I as t };

package/dist/STabs-C_u7te-N.cjs

@@ -0,0 +1 @@
+const e=require("./SButton.types-UKroD-ev.cjs"),t=require("./useSelectionGroup-TaektE-I.cjs"),n=require("./SButton-fFytCz5D.cjs"),r=require("./STab-DzehRmKv.cjs");let i=require("vue"),a=require("@vueuse/core");var o=`.s-ui-tab[aria-selected="true"]`,s=({trackEl:e,selectedValue:t,enabled:n})=>{let r=(0,i.ref)({offsetX:0,width:0,isBilling:!1}),s=()=>{if(!(0,i.toValue)(n)){r.value={offsetX:0,width:0,isBilling:!1};return}let t=(0,i.toValue)(e);if(!t){r.value={offsetX:0,width:0,isBilling:!1};return}let a=t.querySelector(o);if(!(a instanceof HTMLElement)){r.value={offsetX:0,width:0,isBilling:!1};return}let s=t.getBoundingClientRect(),c=a.getBoundingClientRect();r.value={offsetX:c.left-s.left,width:c.width,isBilling:a.classList.contains(`s-ui-tab--billing`)}};return(0,a.useResizeObserver)(e,()=>{s()}),(0,i.watch)(()=>(0,i.toValue)(t),async()=>{await(0,i.nextTick)(),s()},{immediate:!0}),{indicatorStyle:(0,i.computed)(()=>{let{offsetX:e,width:t}=r.value;return t?{opacity:`1`,width:`${t}px`,transform:`translateX(${e}px)`}:{opacity:`0`}}),indicatorIsBilling:(0,i.computed)(()=>r.value.isBilling)}},c=[`aria-disabled`],l={class:`s-ui-tabs__body`},u=(0,i.defineComponent)({__name:`STabs`,props:(0,i.mergeModels)({appearance:{default:()=>r.n.PRIMARY},size:{default:()=>r.r.LARGE},disabled:{type:Boolean,default:!1},mandatory:{type:Boolean,default:!0},addable:{type:Boolean,default:!1},loop:{type:Boolean,default:!0}},{modelValue:{},modelModifiers:{}}),emits:(0,i.mergeModels)([`add`],[`update:modelValue`]),setup(o,{emit:u}){let d=(0,i.useModel)(o,`modelValue`),f=u,p=(0,i.useTemplateRef)(`tabsBodyRef`),m=(0,i.useTemplateRef)(`tabsTrackRef`),{arrivedState:h}=(0,a.useScroll)(p,{throttle:100,offset:{right:1}}),g=t.o({modelValue:()=>d.value,onUpdateModelValue:e=>{t.i(e)&&(d.value=e)},mode:t.n.SINGLE,mandatory:()=>o.mandatory,orientation:t.r.HORIZONTAL,loop:()=>o.loop});(0,i.provide)(r.i,{mode:()=>t.n.SINGLE,isSelected:g.isSelected,selectItem:g.toggle,registerItem:g.registerItem,getItemTabIndex:g.getItemTabIndex,getGroupTabIndex:g.getGroupTabIndex,handleItemKeydown:g.handleItemKeydown,appearance:()=>o.appearance,size:()=>o.size,disabled:()=>o.disabled});let _=(0,i.computed)(()=>o.appearance===r.n.PRIMARY),{indicatorStyle:v,indicatorIsBilling:y}=s({trackEl:()=>m.value,selectedValue:()=>d.value,enabled:_}),b=(0,i.computed)(()=>o.addable&&!h.right),x=(0,i.computed)(()=>[`s-ui-tabs--appearance-${o.appearance}`,`s-ui-tabs--size-${o.size}`,o.addable?`s-ui-tabs--addable`:void 0]),S=()=>{o.disabled||f(`add`)};return(t,r)=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{class:(0,i.normalizeClass)([`s-ui-tabs`,x.value]),role:`tablist`,"aria-orientation":`horizontal`,"aria-disabled":o.disabled?!0:void 0},[(0,i.createElementVNode)(`div`,l,[(0,i.createElementVNode)(`div`,{ref_key:`tabsBodyRef`,ref:p,class:`s-ui-tabs__scroll`},[(0,i.createElementVNode)(`div`,{ref_key:`tabsTrackRef`,ref:m,class:`s-ui-tabs__track`},[_.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:0,class:(0,i.normalizeClass)([`s-ui-tabs__indicator`,{"s-ui-tabs__indicator--billing":(0,i.unref)(y)}]),style:(0,i.normalizeStyle)((0,i.unref)(v)),"aria-hidden":`true`},null,6)):(0,i.createCommentVNode)(``,!0),(0,i.renderSlot)(t.$slots,`default`)],512)],512),o.addable?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:0,class:(0,i.normalizeClass)([`s-ui-tabs__fade`,{"s-ui-tabs__fade--visible":b.value}]),"aria-hidden":`true`},null,2)):(0,i.createCommentVNode)(``,!0)]),o.addable?(0,i.renderSlot)(t.$slots,`add`,{key:0},()=>[(0,i.createVNode)((0,i.unref)(n.t),{class:`s-ui-tabs__add`,icon:`plus`,appearance:(0,i.unref)(e.t).BARE,variant:(0,i.unref)(e.r).NEUTRAL,size:(0,i.unref)(e.n).SMALL,disabled:o.disabled,onClick:S},null,8,[`appearance`,`variant`,`size`,`disabled`])]):(0,i.createCommentVNode)(``,!0)],10,c))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return u}});

package/dist/STag-D_E2Wrbz.cjs

@@ -0,0 +1 @@
+const e=require("./SButton.types-UKroD-ev.cjs"),t=require("./useLink-CvN7IK0Z.cjs"),n=require("./SButton-fFytCz5D.cjs");let r=require("vue");var i=function(e){return e.RED_ORANGE=`red-orange`,e.ORANGE=`orange`,e.YELLOW=`yellow`,e.GREEN=`green`,e.TEAL=`teal`,e.CYAN=`cyan`,e.BLUE=`blue`,e.INDIGO=`indigo`,e.VIOLET=`violet`,e.MAGENTA=`magenta`,e.PINK=`pink`,e.GRAY=`gray`,e.RED=`red`,e.WHITE_BORDER=`white-border`,e.BILLING=`billing`,e.BILLING_LIGHT=`billing-light`,e}({}),a=function(e){return e.SMALL=`small`,e.MEDIUM=`medium`,e}({}),o=e=>e.startsWith(`#`)||e.startsWith(`var(--`),s=e=>o(e)?`s-ui-tag--color-custom`:`s-ui-tag--color-${e}`,c=e=>({"--s-ui-tag-bg":e}),l={class:`s-ui-tag__content s-ui-typography-body-12-regular`},u={key:0,class:`s-ui-tag__actions`},d={class:`s-ui-tag__action-close`},f=(0,r.defineComponent)({inheritAttrs:!1,__name:`STag`,props:(0,r.mergeModels)({color:{default:()=>i.RED_ORANGE},size:{default:()=>a.MEDIUM},short:{type:Boolean,default:!1},closable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},link:{},exact:{type:Boolean,default:!1},replace:{type:Boolean,default:!1}},{modelValue:{default:``},modelModifiers:{}}),emits:(0,r.mergeModels)([`close`],[`update:modelValue`]),setup(i,{emit:a}){let f=(0,r.useAttrs)(),p=(0,r.useModel)(i,`modelValue`),m=a,h=t.t(()=>i.link,()=>i.exact,()=>i.replace),g=h.linkPresentation,_=(0,r.computed)(()=>{let e=g.value;return e.mode===`none`?`span`:e.rootTag}),v=(0,r.computed)(()=>t.n(g.value,{replace:i.replace})),y=(0,r.computed)(()=>({...v.value,...f})),b=(0,r.computed)(()=>h.isRouterLink.value?h.isActive.value:i.selected),x=(0,r.computed)(()=>i.closable&&!i.short),S=(0,r.computed)(()=>{if(i.disabled)return-1;if(!t.r(i.link))return x.value?0:-1}),C=(0,r.computed)(()=>[s(i.color),`s-ui-tag--size-${i.size}`,{"s-ui-tag--short":i.short,"s-ui-tag--disabled":i.disabled,"s-ui-tag--selected":b.value,"s-ui-tag--link":t.r(i.link)}]),w=(0,r.computed)(()=>{if(o(i.color))return c(i.color)}),T=(0,r.computed)(()=>i.short?p.value.slice(0,1):p.value),E=()=>{m(`close`)},D=[`Enter`,` `,`Spacebar`],O=[`Delete`,`Backspace`],k=e=>{if(!i.disabled){if(h.isRouterLink.value&&D.includes(e.key)){e.preventDefault(),h.navigate();return}if(e.target===e.currentTarget&&O.includes(e.key)){if(!x.value)return;e.preventDefault(),m(`close`)}}};return(t,a)=>((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(_.value),(0,r.mergeProps)({class:[`s-ui-tag`,C.value],style:w.value,tabindex:S.value,"aria-disabled":i.disabled?!0:void 0},y.value,{onKeydown:k}),{default:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`span`,l,(0,r.toDisplayString)(T.value),1),x.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,u,[(0,r.createElementVNode)(`span`,d,[(0,r.createVNode)((0,r.unref)(n.t),{appearance:(0,r.unref)(e.t).BARE,variant:(0,r.unref)(e.r).NEUTRAL,size:(0,r.unref)(e.n).SMALL,disabled:i.disabled,tabindex:-1,icon:`closeMini`,onClick:(0,r.withModifiers)(E,[`stop`])},null,8,[`appearance`,`variant`,`size`,`disabled`])])])):(0,r.createCommentVNode)(``,!0)]),_:1},16,[`class`,`style`,`tabindex`,`aria-disabled`]))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return f}});

package/dist/STag-FAeaFL--.js

@@ -0,0 +1,118 @@
+import { n as e, r as t, t as n } from "./SButton.types-CpdHQtyx.js";
+import { n as r, r as i, t as a } from "./useLink-Zo9A_RCf.js";
+import { t as o } from "./SButton-DI04KG06.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, openBlock as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useAttrs as b, useModel as x, withCtx as S, withModifiers as C } from "vue";
+//#region src/components/STag/STag.types.ts
+var w = /* @__PURE__ */ function(e) {
+	return e.RED_ORANGE = "red-orange", e.ORANGE = "orange", e.YELLOW = "yellow", e.GREEN = "green", e.TEAL = "teal", e.CYAN = "cyan", e.BLUE = "blue", e.INDIGO = "indigo", e.VIOLET = "violet", e.MAGENTA = "magenta", e.PINK = "pink", e.GRAY = "gray", e.RED = "red", e.WHITE_BORDER = "white-border", e.BILLING = "billing", e.BILLING_LIGHT = "billing-light", e;
+}({}), T = /* @__PURE__ */ function(e) {
+	return e.SMALL = "small", e.MEDIUM = "medium", e;
+}({}), E = (e) => e.startsWith("#") || e.startsWith("var(--"), D = (e) => E(e) ? "s-ui-tag--color-custom" : `s-ui-tag--color-${e}`, O = (e) => ({ "--s-ui-tag-bg": e }), k = { class: "s-ui-tag__content s-ui-typography-body-12-regular" }, A = {
+	key: 0,
+	class: "s-ui-tag__actions"
+}, j = { class: "s-ui-tag__action-close" }, M = /* @__PURE__ */ p({
+	inheritAttrs: !1,
+	__name: "STag",
+	props: /*@__PURE__*/ m({
+		color: { default: () => w.RED_ORANGE },
+		size: { default: () => T.MEDIUM },
+		short: {
+			type: Boolean,
+			default: !1
+		},
+		closable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		link: {},
+		exact: {
+			type: Boolean,
+			default: !1
+		},
+		replace: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ m(["close"], ["update:modelValue"]),
+	setup(p, { emit: m }) {
+		let w = b(), T = x(p, "modelValue"), M = m, N = a(() => p.link, () => p.exact, () => p.replace), P = N.linkPresentation, F = s(() => {
+			let e = P.value;
+			return e.mode === "none" ? "span" : e.rootTag;
+		}), I = s(() => r(P.value, { replace: p.replace })), L = s(() => ({
+			...I.value,
+			...w
+		})), R = s(() => N.isRouterLink.value ? N.isActive.value : p.selected), z = s(() => p.closable && !p.short), B = s(() => {
+			if (p.disabled) return -1;
+			if (!i(p.link)) return z.value ? 0 : -1;
+		}), V = s(() => [
+			D(p.color),
+			`s-ui-tag--size-${p.size}`,
+			{
+				"s-ui-tag--short": p.short,
+				"s-ui-tag--disabled": p.disabled,
+				"s-ui-tag--selected": R.value,
+				"s-ui-tag--link": i(p.link)
+			}
+		]), H = s(() => {
+			if (E(p.color)) return O(p.color);
+		}), U = s(() => p.short ? T.value.slice(0, 1) : T.value), W = () => {
+			M("close");
+		}, G = [
+			"Enter",
+			" ",
+			"Spacebar"
+		], K = ["Delete", "Backspace"], q = (e) => {
+			if (!p.disabled) {
+				if (N.isRouterLink.value && G.includes(e.key)) {
+					e.preventDefault(), N.navigate();
+					return;
+				}
+				if (e.target === e.currentTarget && K.includes(e.key)) {
+					if (!z.value) return;
+					e.preventDefault(), M("close");
+				}
+			}
+		};
+		return (r, i) => (g(), c(_(F.value), h({
+			class: ["s-ui-tag", V.value],
+			style: H.value,
+			tabindex: B.value,
+			"aria-disabled": p.disabled ? !0 : void 0
+		}, L.value, { onKeydown: q }), {
+			default: S(() => [d("span", k, v(U.value), 1), z.value ? (g(), u("span", A, [d("span", j, [f(y(o), {
+				appearance: y(n).BARE,
+				variant: y(t).NEUTRAL,
+				size: y(e).SMALL,
+				disabled: p.disabled,
+				tabindex: -1,
+				icon: "closeMini",
+				onClick: C(W, ["stop"])
+			}, null, 8, [
+				"appearance",
+				"variant",
+				"size",
+				"disabled"
+			])])])) : l("", !0)]),
+			_: 1
+		}, 16, [
+			"class",
+			"style",
+			"tabindex",
+			"aria-disabled"
+		]));
+	}
+});
+//#endregion
+export { w as n, T as r, M as t };

package/dist/STagGroup-CR6yvDmU.cjs

@@ -0,0 +1 @@
+const e=require("./SOverflowGroup-DyVUzkNu.cjs"),t=require("./STag-D_E2Wrbz.cjs");let n=require("vue");var r=(e,{size:r,short:i})=>e.type===t.t?(0,n.cloneVNode)(e,{size:r,short:i,...i?{closable:!1}:{}}):e,i=(0,n.defineComponent)({__name:`STagGroup`,props:{maxVisible:{},size:{default:()=>t.r.SMALL},short:{type:Boolean,default:!0}},setup(i){let a=e=>r(e,{size:i.size,short:i.short});return(r,o)=>((0,n.openBlock)(),(0,n.createBlock)(e.t,{class:`s-ui-tag-group`,role:`group`,"cluster-class":`s-ui-tag-group__cluster`,"max-visible":i.maxVisible,"map-vnode":a},{overflow:(0,n.withCtx)(({overflowLabel:e})=>[(0,n.createVNode)((0,n.unref)(t.t),{color:(0,n.unref)(t.n).WHITE_BORDER,size:i.size,short:!1,"model-value":e},null,8,[`color`,`size`,`model-value`])]),default:(0,n.withCtx)(()=>[(0,n.renderSlot)(r.$slots,`default`)]),_:3},8,[`max-visible`]))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/dist/STagGroup-Z5ZHpRMT.js

@@ -0,0 +1,47 @@
+import { t as e } from "./SOverflowGroup-CVSon6Eg.js";
+import { n as t, r as n, t as r } from "./STag-FAeaFL--.js";
+import { cloneVNode as i, createBlock as a, createVNode as o, defineComponent as s, openBlock as c, renderSlot as l, unref as u, withCtx as d } from "vue";
+//#region src/components/STagGroup/utils/applyTagGroupItemProps.ts
+var f = (e, { size: t, short: n }) => e.type === r ? i(e, {
+	size: t,
+	short: n,
+	...n ? { closable: !1 } : {}
+}) : e, p = /* @__PURE__ */ s({
+	__name: "STagGroup",
+	props: {
+		maxVisible: {},
+		size: { default: () => n.SMALL },
+		short: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(n) {
+		let i = (e) => f(e, {
+			size: n.size,
+			short: n.short
+		});
+		return (s, f) => (c(), a(e, {
+			class: "s-ui-tag-group",
+			role: "group",
+			"cluster-class": "s-ui-tag-group__cluster",
+			"max-visible": n.maxVisible,
+			"map-vnode": i
+		}, {
+			overflow: d(({ overflowLabel: e }) => [o(u(r), {
+				color: u(t).WHITE_BORDER,
+				size: n.size,
+				short: !1,
+				"model-value": e
+			}, null, 8, [
+				"color",
+				"size",
+				"model-value"
+			])]),
+			default: d(() => [l(s.$slots, "default")]),
+			_: 3
+		}, 8, ["max-visible"]));
+	}
+});
+//#endregion
+export { p as t };