@shtabapp/ui-kit 1.59.0 → 1.59.1

package/dist/utils/getIndicatorMetricsPercent.d.ts

@@ -0,0 +1,22 @@
+export interface IIndicatorMetricsPercent {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export declare const emptyIndicatorMetricsPercent: () => IIndicatorMetricsPercent;
+/**
+ * Метрики скользящего индикатора в процентах от трека (SSegmentControl, STabs).
+ *
+ * Проценты, а не пиксели, потому что отношение двух `getBoundingClientRect()` внутри одного
+ * поддерева не зависит от `transform` предков — масштаб сокращается. Абсолютные пиксели,
+ * снятые внутри масштабированного контейнера (модалка с scale-анимацией входа), остаются
+ * неверными навсегда: `ResizeObserver` следит за layout-боксом, а `transform` его не меняет,
+ * поэтому пересчёта после анимации не происходит.
+ *
+ * Знаменатель — border-box трека: он же и padding-box, то есть containing block для
+ * absolute-индикатора, потому что обводки в ките рисуются через `outline` (см. правило
+ * `borders-via-outline`), и `border` у трека нулевой.
+ */
+export declare const getIndicatorMetricsPercent: (trackElement: HTMLElement, activeElement: HTMLElement) => IIndicatorMetricsPercent;
+//# sourceMappingURL=getIndicatorMetricsPercent.d.ts.map

package/dist/utils/getIndicatorMetricsPercent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getIndicatorMetricsPercent.d.ts","sourceRoot":"","sources":["../../src/utils/getIndicatorMetricsPercent.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,4BAA4B,QAAO,wBAK9C,CAAA;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,0BAA0B,GACrC,cAAc,WAAW,EACzB,eAAe,WAAW,6BAgB3B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shtabapp/ui-kit",
-  "version": "1.59.0",
+  "version": "1.59.1",
   "description": "Vue 3 component library by Shtab — 30+ typed components, design tokens, light/dark themes",
   "keywords": [
     "shtab",

package/dist/SSegmentControl-CmJEjfSR.js

@@ -1,212 +0,0 @@
-import { n as e } from "./SButton.types-CpdHQtyx.js";
-import { i as t, n, o as r, r as i } from "./useSelectionGroup-cKj38lEN.js";
-import { n as a, t as o } from "./useSelectLink-DClG5hGA.js";
-import { n as s, r as c, t as l } from "./useLink-Com5VhOk.js";
-import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, inject as v, mergeModels as y, mergeProps as b, normalizeClass as x, normalizeStyle as S, openBlock as C, provide as w, ref as T, renderList as E, resolveDynamicComponent as D, toDisplayString as O, toValue as k, unref as A, useModel as j, useTemplateRef as M, watch as N, withCtx as P } from "vue";
-import { SIcon as F } from "@shtabapp/ui-kit-primitives";
-import { useResizeObserver as I } from "@vueuse/core";
-//#region src/components/SSegmentControl/utils/context.ts
-var L = Symbol("SSegmentControl"), R = {
-	key: 0,
-	class: "s-ui-segment-control__icon",
-	"aria-hidden": "true"
-}, z = /* @__PURE__ */ _({
-	__name: "SSegmentControlItem",
-	props: { item: {} },
-	setup(t) {
-		let n = v(L, null), r = {
-			[e.SMALL]: "s-ui-typography-label-12-medium",
-			[e.MEDIUM]: "s-ui-typography-label-14-medium",
-			[e.LARGE]: "s-ui-typography-label-16-medium"
-		}, i = {
-			[e.SMALL]: 16,
-			[e.MEDIUM]: 20,
-			[e.LARGE]: 24
-		}, u = d(() => n ? k(n.size) : e.MEDIUM), h = d(() => r[u.value]), _ = d(() => i[u.value]), y = M("itemRootRef"), S = l(() => t.item.link, () => t.item.exact, () => t.item.replace);
-		o({
-			isRouterLink: S.isRouterLink,
-			isActive: S.isActive,
-			group: () => n,
-			value: () => t.item.value
-		});
-		let w = d(() => !!(n && k(n.disabled)) || !!t.item.disabled), T = a({
-			group: () => n,
-			value: () => t.item.value,
-			el: y,
-			disabled: w
-		}), E = d(() => S.isRouterLink.value ? S.isActive.value : T.isActive.value), j = S.linkPresentation, N = d(() => {
-			let e = j.value;
-			return e.mode === "none" ? "button" : e.rootTag;
-		}), I = d(() => N.value === "button"), z = d(() => {
-			if (n) return k(n.name);
-		}), B = d(() => ({
-			"s-ui-segment-control__item--selected": E.value,
-			"s-ui-segment-control__item--icon-only": !!t.item.iconOnly,
-			"s-ui-segment-control__item--link": c(t.item.link)
-		})), V = d(() => ({
-			...s(j.value, { replace: t.item.replace }),
-			disabled: I.value && w.value ? !0 : void 0,
-			"aria-disabled": !I.value && w.value ? !0 : void 0
-		})), H = d(() => w.value ? -1 : T.tabIndex.value ?? -1), U = (e) => {
-			if (!w.value) {
-				if (S.isRouterLink.value && (e.key === "Enter" || e.key === " " || e.key === "Spacebar")) {
-					e.preventDefault(), S.navigate();
-					return;
-				}
-				T.handleKeydown(e);
-			}
-		}, W = (e) => {
-			if (w.value) {
-				e.preventDefault(), e.stopPropagation();
-				return;
-			}
-			S.isRouterLink.value || T.handleClick();
-		};
-		return (e, n) => (C(), f(D(N.value), b({
-			ref_key: "itemRootRef",
-			ref: y,
-			role: "radio",
-			class: ["s-ui-segment-control__item", B.value],
-			type: I.value ? "button" : void 0
-		}, V.value, {
-			"aria-checked": E.value ? "true" : "false",
-			tabindex: H.value,
-			name: I.value ? z.value : void 0,
-			onClick: W,
-			onKeydown: U
-		}), {
-			default: P(() => [t.item.icon ? (C(), m("span", R, [g(A(F), {
-				name: t.item.icon,
-				size: _.value
-			}, null, 8, ["name", "size"])])) : p("", !0), t.item.label && !t.item.iconOnly ? (C(), m("span", {
-				key: 1,
-				class: x(["s-ui-segment-control__label", h.value])
-			}, O(t.item.label), 3)) : p("", !0)]),
-			_: 1
-		}, 16, [
-			"class",
-			"type",
-			"aria-checked",
-			"tabindex",
-			"name"
-		]));
-	}
-}), B = ".s-ui-segment-control__item", V = () => ({
-	offsetX: 0,
-	offsetY: 0,
-	width: 0,
-	height: 0
-}), H = ({ trackEl: e, activeIndex: t, itemCount: n }) => {
-	let r = T(V()), i = () => {
-		let n = k(e), i = k(t);
-		if (!n || i < 0) {
-			r.value = V();
-			return;
-		}
-		let a = n.querySelectorAll(B).item(i);
-		if (!(a instanceof HTMLElement)) {
-			r.value = V();
-			return;
-		}
-		let o = n.getBoundingClientRect(), s = a.getBoundingClientRect();
-		r.value = {
-			offsetX: s.left - o.left,
-			offsetY: s.top - o.top,
-			width: s.width,
-			height: s.height
-		};
-	};
-	return I(e, () => {
-		i();
-	}), N(() => [k(t), k(n)], () => {
-		i();
-	}, { immediate: !0 }), {
-		indicatorStyle: d(() => {
-			let { offsetX: e, offsetY: t, width: n, height: i } = r.value;
-			return !n || !i ? { opacity: "0" } : {
-				opacity: "1",
-				left: `${e}px`,
-				top: `${t}px`,
-				width: `${n}px`,
-				height: `${i}px`
-			};
-		}),
-		updateMetrics: i
-	};
-}, U = ["aria-disabled"], W = /* @__PURE__ */ _({
-	__name: "SSegmentControl",
-	props: /*@__PURE__*/ y({
-		items: {},
-		size: { default: () => e.MEDIUM },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		mandatory: {
-			type: Boolean,
-			default: !0
-		},
-		name: {}
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ y(["change"], ["update:modelValue"]),
-	setup(e, { emit: a }) {
-		let o = j(e, "modelValue"), s = a, c = M("trackRef"), l = r({
-			modelValue: () => o.value,
-			onUpdateModelValue: (e) => {
-				t(e) && (o.value = e, s("change", e));
-			},
-			mode: n.SINGLE,
-			mandatory: () => e.mandatory,
-			orientation: i.HORIZONTAL,
-			loop: !0
-		});
-		w(L, {
-			mode: () => n.SINGLE,
-			isSelected: l.isSelected,
-			selectItem: l.select,
-			registerItem: l.registerItem,
-			getItemTabIndex: l.getItemTabIndex,
-			getGroupTabIndex: l.getGroupTabIndex,
-			handleItemKeydown: l.handleItemKeydown,
-			disabled: () => e.disabled,
-			name: () => e.name,
-			size: () => e.size
-		});
-		let { indicatorStyle: p } = H({
-			trackEl: () => c.value,
-			activeIndex: d(() => {
-				let t = e.items.findIndex((e) => l.isSelected(e.value));
-				return t >= 0 ? t : 0;
-			}),
-			itemCount: () => e.items.length
-		}), g = d(() => ({
-			[`s-ui-segment-control--size-${e.size}`]: !0,
-			"s-ui-segment-control--disabled": e.disabled
-		})), _ = (e, t) => `${String(e.value)}-${t}`, v = () => {
-			if (o.value !== void 0 && o.value !== null) return;
-			let t = e.items.find((e) => !e.disabled);
-			t && (o.value = t.value);
-		};
-		return N(() => e.items, () => {
-			v();
-		}, { immediate: !0 }), (t, n) => (C(), m("div", b({
-			ref_key: "trackRef",
-			ref: c,
-			class: ["s-ui-segment-control", g.value],
-			role: "radiogroup",
-			"aria-disabled": e.disabled || void 0
-		}, t.$attrs), [h("span", {
-			class: "s-ui-segment-control__indicator",
-			style: S(A(p)),
-			"aria-hidden": "true"
-		}, null, 4), (C(!0), m(u, null, E(e.items, (e, t) => (C(), f(z, {
-			key: _(e, t),
-			item: e
-		}, null, 8, ["item"]))), 128))], 16, U));
-	}
-});
-//#endregion
-export { W as t };

package/dist/SSegmentControl-Dz-d3Y9v.cjs

@@ -1 +0,0 @@
-const e=require("./SButton.types-UKroD-ev.cjs"),t=require("./useSelectionGroup-TaektE-I.cjs"),n=require("./useSelectLink-DDdMmsJB.cjs"),r=require("./useLink-1LLWpdDZ.cjs");let i=require("vue"),a=require("@shtabapp/ui-kit-primitives"),o=require("@vueuse/core");var s=Symbol(`SSegmentControl`),c={key:0,class:`s-ui-segment-control__icon`,"aria-hidden":`true`},l=(0,i.defineComponent)({__name:`SSegmentControlItem`,props:{item:{}},setup(t){let o=(0,i.inject)(s,null),l={[e.n.SMALL]:`s-ui-typography-label-12-medium`,[e.n.MEDIUM]:`s-ui-typography-label-14-medium`,[e.n.LARGE]:`s-ui-typography-label-16-medium`},u={[e.n.SMALL]:16,[e.n.MEDIUM]:20,[e.n.LARGE]:24},d=(0,i.computed)(()=>o?(0,i.toValue)(o.size):e.n.MEDIUM),f=(0,i.computed)(()=>l[d.value]),p=(0,i.computed)(()=>u[d.value]),m=(0,i.useTemplateRef)(`itemRootRef`),h=r.t(()=>t.item.link,()=>t.item.exact,()=>t.item.replace);n.t({isRouterLink:h.isRouterLink,isActive:h.isActive,group:()=>o,value:()=>t.item.value});let g=(0,i.computed)(()=>!!(o&&(0,i.toValue)(o.disabled))||!!t.item.disabled),_=n.n({group:()=>o,value:()=>t.item.value,el:m,disabled:g}),v=(0,i.computed)(()=>h.isRouterLink.value?h.isActive.value:_.isActive.value),y=h.linkPresentation,b=(0,i.computed)(()=>{let e=y.value;return e.mode===`none`?`button`:e.rootTag}),x=(0,i.computed)(()=>b.value===`button`),S=(0,i.computed)(()=>{if(o)return(0,i.toValue)(o.name)}),C=(0,i.computed)(()=>({"s-ui-segment-control__item--selected":v.value,"s-ui-segment-control__item--icon-only":!!t.item.iconOnly,"s-ui-segment-control__item--link":r.r(t.item.link)})),w=(0,i.computed)(()=>({...r.n(y.value,{replace:t.item.replace}),disabled:x.value&&g.value?!0:void 0,"aria-disabled":!x.value&&g.value?!0:void 0})),T=(0,i.computed)(()=>g.value?-1:_.tabIndex.value??-1),E=e=>{if(!g.value){if(h.isRouterLink.value&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)){e.preventDefault(),h.navigate();return}_.handleKeydown(e)}},D=e=>{if(g.value){e.preventDefault(),e.stopPropagation();return}h.isRouterLink.value||_.handleClick()};return(e,n)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(b.value),(0,i.mergeProps)({ref_key:`itemRootRef`,ref:m,role:`radio`,class:[`s-ui-segment-control__item`,C.value],type:x.value?`button`:void 0},w.value,{"aria-checked":v.value?`true`:`false`,tabindex:T.value,name:x.value?S.value:void 0,onClick:D,onKeydown:E}),{default:(0,i.withCtx)(()=>[t.item.icon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,c,[(0,i.createVNode)((0,i.unref)(a.SIcon),{name:t.item.icon,size:p.value},null,8,[`name`,`size`])])):(0,i.createCommentVNode)(``,!0),t.item.label&&!t.item.iconOnly?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:1,class:(0,i.normalizeClass)([`s-ui-segment-control__label`,f.value])},(0,i.toDisplayString)(t.item.label),3)):(0,i.createCommentVNode)(``,!0)]),_:1},16,[`class`,`type`,`aria-checked`,`tabindex`,`name`]))}}),u=`.s-ui-segment-control__item`,d=()=>({offsetX:0,offsetY:0,width:0,height:0}),f=({trackEl:e,activeIndex:t,itemCount:n})=>{let r=(0,i.ref)(d()),a=()=>{let n=(0,i.toValue)(e),a=(0,i.toValue)(t);if(!n||a<0){r.value=d();return}let o=n.querySelectorAll(u).item(a);if(!(o instanceof HTMLElement)){r.value=d();return}let s=n.getBoundingClientRect(),c=o.getBoundingClientRect();r.value={offsetX:c.left-s.left,offsetY:c.top-s.top,width:c.width,height:c.height}};return(0,o.useResizeObserver)(e,()=>{a()}),(0,i.watch)(()=>[(0,i.toValue)(t),(0,i.toValue)(n)],()=>{a()},{immediate:!0}),{indicatorStyle:(0,i.computed)(()=>{let{offsetX:e,offsetY:t,width:n,height:i}=r.value;return!n||!i?{opacity:`0`}:{opacity:`1`,left:`${e}px`,top:`${t}px`,width:`${n}px`,height:`${i}px`}}),updateMetrics:a}},p=[`aria-disabled`],m=(0,i.defineComponent)({__name:`SSegmentControl`,props:(0,i.mergeModels)({items:{},size:{default:()=>e.n.MEDIUM},disabled:{type:Boolean,default:!1},mandatory:{type:Boolean,default:!0},name:{}},{modelValue:{},modelModifiers:{}}),emits:(0,i.mergeModels)([`change`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,i.useModel)(e,`modelValue`),a=n,o=(0,i.useTemplateRef)(`trackRef`),c=t.o({modelValue:()=>r.value,onUpdateModelValue:e=>{t.i(e)&&(r.value=e,a(`change`,e))},mode:t.n.SINGLE,mandatory:()=>e.mandatory,orientation:t.r.HORIZONTAL,loop:!0});(0,i.provide)(s,{mode:()=>t.n.SINGLE,isSelected:c.isSelected,selectItem:c.select,registerItem:c.registerItem,getItemTabIndex:c.getItemTabIndex,getGroupTabIndex:c.getGroupTabIndex,handleItemKeydown:c.handleItemKeydown,disabled:()=>e.disabled,name:()=>e.name,size:()=>e.size});let{indicatorStyle:u}=f({trackEl:()=>o.value,activeIndex:(0,i.computed)(()=>{let t=e.items.findIndex(e=>c.isSelected(e.value));return t>=0?t:0}),itemCount:()=>e.items.length}),d=(0,i.computed)(()=>({[`s-ui-segment-control--size-${e.size}`]:!0,"s-ui-segment-control--disabled":e.disabled})),m=(e,t)=>`${String(e.value)}-${t}`,h=()=>{if(r.value!==void 0&&r.value!==null)return;let t=e.items.find(e=>!e.disabled);t&&(r.value=t.value)};return(0,i.watch)(()=>e.items,()=>{h()},{immediate:!0}),(t,n)=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,(0,i.mergeProps)({ref_key:`trackRef`,ref:o,class:[`s-ui-segment-control`,d.value],role:`radiogroup`,"aria-disabled":e.disabled||void 0},t.$attrs),[(0,i.createElementVNode)(`span`,{class:`s-ui-segment-control__indicator`,style:(0,i.normalizeStyle)((0,i.unref)(u)),"aria-hidden":`true`},null,4),((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(e.items,(e,t)=>((0,i.openBlock)(),(0,i.createBlock)(l,{key:m(e,t),item:e},null,8,[`item`]))),128))],16,p))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return m}});

package/dist/STabs-CTM8Nji_.js

@@ -1,164 +0,0 @@
-import { n as e, r as t, t as n } from "./SButton.types-CpdHQtyx.js";
-import { t as r } from "./SButton-DnU_XZ1C.js";
-import { i, n as a, o, r as s } from "./useSelectionGroup-cKj38lEN.js";
-import { i as c, n as l, r as u } from "./STab-DY1TGadw.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 = o({
-			modelValue: () => _.value,
-			onUpdateModelValue: (e) => {
-				i(e) && (_.value = e);
-			},
-			mode: a.SINGLE,
-			mandatory: () => u.mandatory,
-			orientation: s.HORIZONTAL,
-			loop: () => u.loop
-		});
-		S(c, {
-			mode: () => a.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 (i, a) => (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(i.$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(i.$slots, "add", { key: 0 }, () => [h(E(r), {
-			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-DeHqnjNJ.cjs

@@ -1 +0,0 @@
-const e=require("./SButton.types-UKroD-ev.cjs"),t=require("./SButton-C-z_q5CG.cjs"),n=require("./useSelectionGroup-TaektE-I.cjs"),r=require("./STab-BbzowB-Y.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=n.o({modelValue:()=>d.value,onUpdateModelValue:e=>{n.i(e)&&(d.value=e)},mode:n.n.SINGLE,mandatory:()=>o.mandatory,orientation:n.r.HORIZONTAL,loop:()=>o.loop});(0,i.provide)(r.i,{mode:()=>n.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(n,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)(n.$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)(n.$slots,`add`,{key:0},()=>[(0,i.createVNode)((0,i.unref)(t.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}});