@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/SSegmentControl/SSegmentControl.types.js

@@ -0,0 +1,15 @@
+//#region src/components/SSegmentControl/SSegmentControl.types.ts
+/** Размеры по Figma segmentedControl: `small` — сегмент 24px / трек 28px, `medium` — 28px / 32px. */
+var ESSegmentControlSize = /* @__PURE__ */ function(ESSegmentControlSize) {
+	ESSegmentControlSize["SMALL"] = "small";
+	ESSegmentControlSize["MEDIUM"] = "medium";
+	return ESSegmentControlSize;
+}({});
+/** Форма трека и сегментов: `default` — скругление 4px, `rounded` — «таблетка». */
+var ESSegmentControlShape = /* @__PURE__ */ function(ESSegmentControlShape) {
+	ESSegmentControlShape["DEFAULT"] = "default";
+	ESSegmentControlShape["ROUNDED"] = "rounded";
+	return ESSegmentControlShape;
+}({});
+//#endregion
+export { ESSegmentControlShape, ESSegmentControlSize };

package/dist/components/SSegmentControl/SSegmentControl.vue.cjs

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

package/dist/components/SSegmentControl/SSegmentControl.vue.js

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

package/dist/components/SSegmentControl/SSegmentControl.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,108 @@
+const require_useSelectionGroup = require("../../composables/useSelectionGroup.cjs");
+const require_SSegmentControl_types = require("./SSegmentControl.types.cjs");
+const require_context = require("./utils/context.cjs");
+const require_SSegmentControlItem = require("./SSegmentControlItem.vue.cjs");
+const require_useSegmentIndicator = require("./utils/useSegmentIndicator.cjs");
+let vue = require("vue");
+//#region src/components/SSegmentControl/SSegmentControl.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-disabled"];
+var SSegmentControl_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SSegmentControl",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		items: {},
+		size: { default: () => require_SSegmentControl_types.ESSegmentControlSize.MEDIUM },
+		shape: { default: () => require_SSegmentControl_types.ESSegmentControlShape.DEFAULT },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		mandatory: {
+			type: Boolean,
+			default: true
+		},
+		name: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)(["change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const emit = __emit;
+		const trackRef = (0, vue.useTemplateRef)("trackRef");
+		const selection = require_useSelectionGroup.useSelectionGroup({
+			modelValue: () => modelValue.value,
+			onUpdateModelValue: (next) => {
+				if (!require_useSelectionGroup.isSingleSelectionValue(next)) return;
+				modelValue.value = next;
+				emit("change", next);
+			},
+			mode: require_useSelectionGroup.ESelectionMode.SINGLE,
+			mandatory: () => __props.mandatory,
+			orientation: require_useSelectionGroup.ESelectionOrientation.HORIZONTAL,
+			loop: true
+		});
+		(0, vue.provide)(require_context.sSegmentControlInjectionKey, {
+			mode: () => require_useSelectionGroup.ESelectionMode.SINGLE,
+			isSelected: selection.isSelected,
+			selectItem: selection.select,
+			registerItem: selection.registerItem,
+			getItemTabIndex: selection.getItemTabIndex,
+			getGroupTabIndex: selection.getGroupTabIndex,
+			handleItemKeydown: selection.handleItemKeydown,
+			disabled: () => __props.disabled,
+			name: () => __props.name,
+			size: () => __props.size
+		});
+		const { indicatorStyle } = require_useSegmentIndicator.useSegmentIndicator({
+			trackEl: () => trackRef.value,
+			activeIndex: (0, vue.computed)(() => {
+				const selectedIndex = __props.items.findIndex((item) => selection.isSelected(item.value));
+				return selectedIndex >= 0 ? selectedIndex : 0;
+			}),
+			itemCount: () => __props.items.length
+		});
+		const rootClasses = (0, vue.computed)(() => ({
+			[`s-ui-segment-control--size-${__props.size}`]: true,
+			[`s-ui-segment-control--shape-${__props.shape}`]: true,
+			"s-ui-segment-control--full-width": __props.fullWidth,
+			"s-ui-segment-control--disabled": __props.disabled
+		}));
+		const getItemKey = (item, itemIndex) => {
+			return `${String(item.value)}-${itemIndex}`;
+		};
+		const resolveInitialValue = () => {
+			if (modelValue.value !== void 0 && modelValue.value !== null) return;
+			const firstEnabledItem = __props.items.find((item) => !item.disabled);
+			if (!firstEnabledItem) return;
+			modelValue.value = firstEnabledItem.value;
+		};
+		(0, vue.watch)(() => __props.items, () => {
+			resolveInitialValue();
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+				ref_key: "trackRef",
+				ref: trackRef,
+				class: ["s-ui-segment-control", rootClasses.value],
+				role: "radiogroup",
+				"aria-disabled": __props.disabled || void 0
+			}, _ctx.$attrs), [(0, vue.createElementVNode)("span", {
+				class: "s-ui-segment-control__indicator",
+				style: (0, vue.normalizeStyle)((0, vue.unref)(indicatorStyle)),
+				"aria-hidden": "true"
+			}, null, 4), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.items, (item, itemIndex) => {
+				return (0, vue.openBlock)(), (0, vue.createBlock)(require_SSegmentControlItem.default, {
+					key: getItemKey(item, itemIndex),
+					item
+				}, null, 8, ["item"]);
+			}), 128))], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+exports.default = SSegmentControl_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SSegmentControl/SSegmentControl.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,108 @@
+import { ESelectionMode, ESelectionOrientation, isSingleSelectionValue, useSelectionGroup } from "../../composables/useSelectionGroup.js";
+import { ESSegmentControlShape, ESSegmentControlSize } from "./SSegmentControl.types.js";
+import { sSegmentControlInjectionKey } from "./utils/context.js";
+import SSegmentControlItem_default from "./SSegmentControlItem.vue.js";
+import { useSegmentIndicator } from "./utils/useSegmentIndicator.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, normalizeStyle, openBlock, provide, renderList, unref, useModel, useTemplateRef, watch } from "vue";
+//#region src/components/SSegmentControl/SSegmentControl.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-disabled"];
+var SSegmentControl_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SSegmentControl",
+	props: /*@__PURE__*/ mergeModels({
+		items: {},
+		size: { default: () => ESSegmentControlSize.MEDIUM },
+		shape: { default: () => ESSegmentControlShape.DEFAULT },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		mandatory: {
+			type: Boolean,
+			default: true
+		},
+		name: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const trackRef = useTemplateRef("trackRef");
+		const selection = useSelectionGroup({
+			modelValue: () => modelValue.value,
+			onUpdateModelValue: (next) => {
+				if (!isSingleSelectionValue(next)) return;
+				modelValue.value = next;
+				emit("change", next);
+			},
+			mode: ESelectionMode.SINGLE,
+			mandatory: () => __props.mandatory,
+			orientation: ESelectionOrientation.HORIZONTAL,
+			loop: true
+		});
+		provide(sSegmentControlInjectionKey, {
+			mode: () => ESelectionMode.SINGLE,
+			isSelected: selection.isSelected,
+			selectItem: selection.select,
+			registerItem: selection.registerItem,
+			getItemTabIndex: selection.getItemTabIndex,
+			getGroupTabIndex: selection.getGroupTabIndex,
+			handleItemKeydown: selection.handleItemKeydown,
+			disabled: () => __props.disabled,
+			name: () => __props.name,
+			size: () => __props.size
+		});
+		const { indicatorStyle } = useSegmentIndicator({
+			trackEl: () => trackRef.value,
+			activeIndex: computed(() => {
+				const selectedIndex = __props.items.findIndex((item) => selection.isSelected(item.value));
+				return selectedIndex >= 0 ? selectedIndex : 0;
+			}),
+			itemCount: () => __props.items.length
+		});
+		const rootClasses = computed(() => ({
+			[`s-ui-segment-control--size-${__props.size}`]: true,
+			[`s-ui-segment-control--shape-${__props.shape}`]: true,
+			"s-ui-segment-control--full-width": __props.fullWidth,
+			"s-ui-segment-control--disabled": __props.disabled
+		}));
+		const getItemKey = (item, itemIndex) => {
+			return `${String(item.value)}-${itemIndex}`;
+		};
+		const resolveInitialValue = () => {
+			if (modelValue.value !== void 0 && modelValue.value !== null) return;
+			const firstEnabledItem = __props.items.find((item) => !item.disabled);
+			if (!firstEnabledItem) return;
+			modelValue.value = firstEnabledItem.value;
+		};
+		watch(() => __props.items, () => {
+			resolveInitialValue();
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "trackRef",
+				ref: trackRef,
+				class: ["s-ui-segment-control", rootClasses.value],
+				role: "radiogroup",
+				"aria-disabled": __props.disabled || void 0
+			}, _ctx.$attrs), [createElementVNode("span", {
+				class: "s-ui-segment-control__indicator",
+				style: normalizeStyle(unref(indicatorStyle)),
+				"aria-hidden": "true"
+			}, null, 4), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, itemIndex) => {
+				return openBlock(), createBlock(SSegmentControlItem_default, {
+					key: getItemKey(item, itemIndex),
+					item
+				}, null, 8, ["item"]);
+			}), 128))], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SSegmentControl_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SSegmentControl/SSegmentControlItem.vue.cjs

@@ -0,0 +1,4 @@
+//#region src/components/SSegmentControl/SSegmentControlItem.vue
+var SSegmentControlItem_default = require("./SSegmentControlItem.vue_vue_type_script_setup_true_lang.cjs").default;
+//#endregion
+exports.default = SSegmentControlItem_default;

package/dist/components/SSegmentControl/SSegmentControlItem.vue.js

@@ -0,0 +1,5 @@
+import SSegmentControlItem_vue_vue_type_script_setup_true_lang_default from "./SSegmentControlItem.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/SSegmentControl/SSegmentControlItem.vue
+var SSegmentControlItem_default = SSegmentControlItem_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SSegmentControlItem_default as default };

package/dist/components/SSegmentControl/SSegmentControlItem.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,144 @@
+const require_useSelectionGroupItem = require("../../composables/useSelectionGroupItem.cjs");
+const require_vueRouterLinkPresentation = require("../../utils/vueRouterLinkPresentation.cjs");
+const require_useLink = require("../../composables/useLink.cjs");
+const require_useSelectLink = require("../../composables/useSelectLink.cjs");
+const require_SSegmentControl_types = require("./SSegmentControl.types.cjs");
+const require_context = require("./utils/context.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SSegmentControl/SSegmentControlItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "s-ui-segment-control__icon",
+	"aria-hidden": "true"
+};
+var SSegmentControlItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SSegmentControlItem",
+	props: { item: {} },
+	setup(__props) {
+		const segmentControl = (0, vue.inject)(require_context.sSegmentControlInjectionKey, null);
+		const segmentLabelClassesBySize = {
+			[require_SSegmentControl_types.ESSegmentControlSize.SMALL]: "s-ui-typography-label-12-medium",
+			[require_SSegmentControl_types.ESSegmentControlSize.MEDIUM]: "s-ui-typography-label-14-medium"
+		};
+		const segmentIconSizeBySize = {
+			[require_SSegmentControl_types.ESSegmentControlSize.SMALL]: 16,
+			[require_SSegmentControl_types.ESSegmentControlSize.MEDIUM]: 20
+		};
+		const resolvedSegmentSize = (0, vue.computed)(() => {
+			if (!segmentControl) return require_SSegmentControl_types.ESSegmentControlSize.MEDIUM;
+			return (0, vue.toValue)(segmentControl.size);
+		});
+		const segmentLabelClasses = (0, vue.computed)(() => {
+			return segmentLabelClassesBySize[resolvedSegmentSize.value];
+		});
+		const segmentIconSize = (0, vue.computed)(() => {
+			return segmentIconSizeBySize[resolvedSegmentSize.value];
+		});
+		const itemRootRef = (0, vue.useTemplateRef)("itemRootRef");
+		const itemLink = require_useLink.useLink(() => __props.item.link, () => __props.item.exact, () => __props.item.replace);
+		require_useSelectLink.useSelectLink({
+			isRouterLink: itemLink.isRouterLink,
+			isActive: itemLink.isActive,
+			group: () => segmentControl,
+			value: () => __props.item.value
+		});
+		const itemDisabled = (0, vue.computed)(() => {
+			return Boolean(segmentControl && (0, vue.toValue)(segmentControl.disabled)) || Boolean(__props.item.disabled);
+		});
+		const groupItem = require_useSelectionGroupItem.useSelectionGroupItem({
+			group: () => segmentControl,
+			value: () => __props.item.value,
+			el: itemRootRef,
+			disabled: itemDisabled
+		});
+		const resolvedSelected = (0, vue.computed)(() => {
+			if (itemLink.isRouterLink.value) return itemLink.isActive.value;
+			return groupItem.isActive.value;
+		});
+		const linkPresentation = itemLink.linkPresentation;
+		const itemRootTag = (0, vue.computed)(() => {
+			const presentation = linkPresentation.value;
+			if (presentation.mode === "none") return "button";
+			return presentation.rootTag;
+		});
+		const isNativeButton = (0, vue.computed)(() => itemRootTag.value === "button");
+		const segmentName = (0, vue.computed)(() => {
+			if (!segmentControl) return;
+			return (0, vue.toValue)(segmentControl.name);
+		});
+		/** Сегмент без видимой подписи иначе озвучивается скринридером как пустая radio-кнопка. */
+		const itemAriaLabel = (0, vue.computed)(() => {
+			if (__props.item.ariaLabel) return __props.item.ariaLabel;
+			return __props.item.iconOnly ? __props.item.label : void 0;
+		});
+		const itemClasses = (0, vue.computed)(() => ({
+			"s-ui-segment-control__item--selected": resolvedSelected.value,
+			"s-ui-segment-control__item--icon-only": Boolean(__props.item.iconOnly),
+			"s-ui-segment-control__item--link": require_vueRouterLinkPresentation.hasLinkProp(__props.item.link)
+		}));
+		const itemRootBindings = (0, vue.computed)(() => {
+			return {
+				...require_vueRouterLinkPresentation.getLinkRootBindings(linkPresentation.value, { replace: __props.item.replace }),
+				disabled: isNativeButton.value && itemDisabled.value ? true : void 0,
+				"aria-disabled": !isNativeButton.value && itemDisabled.value ? true : void 0
+			};
+		});
+		const itemTabIndex = (0, vue.computed)(() => {
+			if (itemDisabled.value) return -1;
+			return groupItem.tabIndex.value ?? -1;
+		});
+		const handleItemKeyDown = (event) => {
+			if (itemDisabled.value) return;
+			if (itemLink.isRouterLink.value && (event.key === "Enter" || event.key === " " || event.key === "Spacebar")) {
+				event.preventDefault();
+				itemLink.navigate();
+				return;
+			}
+			groupItem.handleKeydown(event);
+		};
+		const handleItemClick = (event) => {
+			if (itemDisabled.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			if (itemLink.isRouterLink.value) return;
+			groupItem.handleClick();
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(itemRootTag.value), (0, vue.mergeProps)({
+				ref_key: "itemRootRef",
+				ref: itemRootRef,
+				role: "radio",
+				class: ["s-ui-segment-control__item", itemClasses.value],
+				type: isNativeButton.value ? "button" : void 0
+			}, itemRootBindings.value, {
+				"aria-checked": resolvedSelected.value ? "true" : "false",
+				"aria-label": itemAriaLabel.value,
+				tabindex: itemTabIndex.value,
+				name: isNativeButton.value ? segmentName.value : void 0,
+				onClick: handleItemClick,
+				onKeydown: handleItemKeyDown
+			}), {
+				default: (0, vue.withCtx)(() => [__props.item.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1, [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+					name: __props.item.icon,
+					size: segmentIconSize.value
+				}, null, 8, ["name", "size"])])) : (0, vue.createCommentVNode)("", true), __props.item.label && !__props.item.iconOnly ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 1,
+					class: (0, vue.normalizeClass)(["s-ui-segment-control__label", segmentLabelClasses.value])
+				}, (0, vue.toDisplayString)(__props.item.label), 3)) : (0, vue.createCommentVNode)("", true)]),
+				_: 1
+			}, 16, [
+				"class",
+				"type",
+				"aria-checked",
+				"aria-label",
+				"tabindex",
+				"name"
+			]);
+		};
+	}
+});
+//#endregion
+exports.default = SSegmentControlItem_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SSegmentControl/SSegmentControlItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,144 @@
+import { useSelectionGroupItem } from "../../composables/useSelectionGroupItem.js";
+import { getLinkRootBindings, hasLinkProp } from "../../utils/vueRouterLinkPresentation.js";
+import { useLink } from "../../composables/useLink.js";
+import { useSelectLink } from "../../composables/useSelectLink.js";
+import { ESSegmentControlSize } from "./SSegmentControl.types.js";
+import { sSegmentControlInjectionKey } from "./utils/context.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, resolveDynamicComponent, toDisplayString, toValue, unref, useTemplateRef, withCtx } from "vue";
+import { SIcon } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SSegmentControl/SSegmentControlItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "s-ui-segment-control__icon",
+	"aria-hidden": "true"
+};
+var SSegmentControlItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SSegmentControlItem",
+	props: { item: {} },
+	setup(__props) {
+		const segmentControl = inject(sSegmentControlInjectionKey, null);
+		const segmentLabelClassesBySize = {
+			[ESSegmentControlSize.SMALL]: "s-ui-typography-label-12-medium",
+			[ESSegmentControlSize.MEDIUM]: "s-ui-typography-label-14-medium"
+		};
+		const segmentIconSizeBySize = {
+			[ESSegmentControlSize.SMALL]: 16,
+			[ESSegmentControlSize.MEDIUM]: 20
+		};
+		const resolvedSegmentSize = computed(() => {
+			if (!segmentControl) return ESSegmentControlSize.MEDIUM;
+			return toValue(segmentControl.size);
+		});
+		const segmentLabelClasses = computed(() => {
+			return segmentLabelClassesBySize[resolvedSegmentSize.value];
+		});
+		const segmentIconSize = computed(() => {
+			return segmentIconSizeBySize[resolvedSegmentSize.value];
+		});
+		const itemRootRef = useTemplateRef("itemRootRef");
+		const itemLink = useLink(() => __props.item.link, () => __props.item.exact, () => __props.item.replace);
+		useSelectLink({
+			isRouterLink: itemLink.isRouterLink,
+			isActive: itemLink.isActive,
+			group: () => segmentControl,
+			value: () => __props.item.value
+		});
+		const itemDisabled = computed(() => {
+			return Boolean(segmentControl && toValue(segmentControl.disabled)) || Boolean(__props.item.disabled);
+		});
+		const groupItem = useSelectionGroupItem({
+			group: () => segmentControl,
+			value: () => __props.item.value,
+			el: itemRootRef,
+			disabled: itemDisabled
+		});
+		const resolvedSelected = computed(() => {
+			if (itemLink.isRouterLink.value) return itemLink.isActive.value;
+			return groupItem.isActive.value;
+		});
+		const linkPresentation = itemLink.linkPresentation;
+		const itemRootTag = computed(() => {
+			const presentation = linkPresentation.value;
+			if (presentation.mode === "none") return "button";
+			return presentation.rootTag;
+		});
+		const isNativeButton = computed(() => itemRootTag.value === "button");
+		const segmentName = computed(() => {
+			if (!segmentControl) return;
+			return toValue(segmentControl.name);
+		});
+		/** Сегмент без видимой подписи иначе озвучивается скринридером как пустая radio-кнопка. */
+		const itemAriaLabel = computed(() => {
+			if (__props.item.ariaLabel) return __props.item.ariaLabel;
+			return __props.item.iconOnly ? __props.item.label : void 0;
+		});
+		const itemClasses = computed(() => ({
+			"s-ui-segment-control__item--selected": resolvedSelected.value,
+			"s-ui-segment-control__item--icon-only": Boolean(__props.item.iconOnly),
+			"s-ui-segment-control__item--link": hasLinkProp(__props.item.link)
+		}));
+		const itemRootBindings = computed(() => {
+			return {
+				...getLinkRootBindings(linkPresentation.value, { replace: __props.item.replace }),
+				disabled: isNativeButton.value && itemDisabled.value ? true : void 0,
+				"aria-disabled": !isNativeButton.value && itemDisabled.value ? true : void 0
+			};
+		});
+		const itemTabIndex = computed(() => {
+			if (itemDisabled.value) return -1;
+			return groupItem.tabIndex.value ?? -1;
+		});
+		const handleItemKeyDown = (event) => {
+			if (itemDisabled.value) return;
+			if (itemLink.isRouterLink.value && (event.key === "Enter" || event.key === " " || event.key === "Spacebar")) {
+				event.preventDefault();
+				itemLink.navigate();
+				return;
+			}
+			groupItem.handleKeydown(event);
+		};
+		const handleItemClick = (event) => {
+			if (itemDisabled.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			if (itemLink.isRouterLink.value) return;
+			groupItem.handleClick();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(itemRootTag.value), mergeProps({
+				ref_key: "itemRootRef",
+				ref: itemRootRef,
+				role: "radio",
+				class: ["s-ui-segment-control__item", itemClasses.value],
+				type: isNativeButton.value ? "button" : void 0
+			}, itemRootBindings.value, {
+				"aria-checked": resolvedSelected.value ? "true" : "false",
+				"aria-label": itemAriaLabel.value,
+				tabindex: itemTabIndex.value,
+				name: isNativeButton.value ? segmentName.value : void 0,
+				onClick: handleItemClick,
+				onKeydown: handleItemKeyDown
+			}), {
+				default: withCtx(() => [__props.item.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(unref(SIcon), {
+					name: __props.item.icon,
+					size: segmentIconSize.value
+				}, null, 8, ["name", "size"])])) : createCommentVNode("", true), __props.item.label && !__props.item.iconOnly ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(["s-ui-segment-control__label", segmentLabelClasses.value])
+				}, toDisplayString(__props.item.label), 3)) : createCommentVNode("", true)]),
+				_: 1
+			}, 16, [
+				"class",
+				"type",
+				"aria-checked",
+				"aria-label",
+				"tabindex",
+				"name"
+			]);
+		};
+	}
+});
+//#endregion
+export { SSegmentControlItem_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

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

package/dist/components/SSegmentControl/utils/useSegmentIndicator.cjs

@@ -0,0 +1,45 @@
+const require_getIndicatorMetricsPercent = require("../../../utils/getIndicatorMetricsPercent.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/SSegmentControl/utils/useSegmentIndicator.ts
+var SEGMENT_ITEM_SELECTOR = ".s-ui-segment-control__item";
+var useSegmentIndicator = ({ trackEl, activeIndex, itemCount }) => {
+	const metrics = (0, vue.ref)(require_getIndicatorMetricsPercent.emptyIndicatorMetricsPercent());
+	const updateMetrics = () => {
+		const track = (0, vue.toValue)(trackEl);
+		const index = (0, vue.toValue)(activeIndex);
+		if (!track || index < 0) {
+			metrics.value = require_getIndicatorMetricsPercent.emptyIndicatorMetricsPercent();
+			return;
+		}
+		const activeButton = track.querySelectorAll(SEGMENT_ITEM_SELECTOR).item(index);
+		if (!(activeButton instanceof HTMLElement)) {
+			metrics.value = require_getIndicatorMetricsPercent.emptyIndicatorMetricsPercent();
+			return;
+		}
+		metrics.value = require_getIndicatorMetricsPercent.getIndicatorMetricsPercent(track, activeButton);
+	};
+	(0, _vueuse_core.useResizeObserver)(trackEl, () => {
+		updateMetrics();
+	});
+	(0, vue.watch)(() => [(0, vue.toValue)(activeIndex), (0, vue.toValue)(itemCount)], async () => {
+		await (0, vue.nextTick)();
+		updateMetrics();
+	}, { immediate: true });
+	return {
+		indicatorStyle: (0, vue.computed)(() => {
+			const { left, top, width, height } = metrics.value;
+			if (!width || !height) return { opacity: "0" };
+			return {
+				opacity: "1",
+				left: `${left}%`,
+				top: `${top}%`,
+				width: `${width}%`,
+				height: `${height}%`
+			};
+		}),
+		updateMetrics
+	};
+};
+//#endregion
+exports.useSegmentIndicator = useSegmentIndicator;

package/dist/components/SSegmentControl/utils/useSegmentIndicator.js

@@ -0,0 +1,45 @@
+import { emptyIndicatorMetricsPercent, getIndicatorMetricsPercent } from "../../../utils/getIndicatorMetricsPercent.js";
+import { computed, nextTick, ref, toValue, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+//#region src/components/SSegmentControl/utils/useSegmentIndicator.ts
+var SEGMENT_ITEM_SELECTOR = ".s-ui-segment-control__item";
+var useSegmentIndicator = ({ trackEl, activeIndex, itemCount }) => {
+	const metrics = ref(emptyIndicatorMetricsPercent());
+	const updateMetrics = () => {
+		const track = toValue(trackEl);
+		const index = toValue(activeIndex);
+		if (!track || index < 0) {
+			metrics.value = emptyIndicatorMetricsPercent();
+			return;
+		}
+		const activeButton = track.querySelectorAll(SEGMENT_ITEM_SELECTOR).item(index);
+		if (!(activeButton instanceof HTMLElement)) {
+			metrics.value = emptyIndicatorMetricsPercent();
+			return;
+		}
+		metrics.value = getIndicatorMetricsPercent(track, activeButton);
+	};
+	useResizeObserver(trackEl, () => {
+		updateMetrics();
+	});
+	watch(() => [toValue(activeIndex), toValue(itemCount)], async () => {
+		await nextTick();
+		updateMetrics();
+	}, { immediate: true });
+	return {
+		indicatorStyle: computed(() => {
+			const { left, top, width, height } = metrics.value;
+			if (!width || !height) return { opacity: "0" };
+			return {
+				opacity: "1",
+				left: `${left}%`,
+				top: `${top}%`,
+				width: `${width}%`,
+				height: `${height}%`
+			};
+		}),
+		updateMetrics
+	};
+};
+//#endregion
+export { useSegmentIndicator };

package/dist/components/SSelect/SSelect.types.cjs

@@ -0,0 +1,8 @@
+//#region src/components/SSelect/SSelect.types.ts
+var ESSelectSearchable = /* @__PURE__ */ function(ESSelectSearchable) {
+	ESSelectSearchable["INPUT"] = "input";
+	ESSelectSearchable["CONTENT"] = "content";
+	return ESSelectSearchable;
+}({});
+//#endregion
+exports.ESSelectSearchable = ESSelectSearchable;

package/dist/components/SSelect/SSelect.types.js

@@ -0,0 +1,8 @@
+//#region src/components/SSelect/SSelect.types.ts
+var ESSelectSearchable = /* @__PURE__ */ function(ESSelectSearchable) {
+	ESSelectSearchable["INPUT"] = "input";
+	ESSelectSearchable["CONTENT"] = "content";
+	return ESSelectSearchable;
+}({});
+//#endregion
+export { ESSelectSearchable };