@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/SToast/SToast.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,101 @@
+const require_SNotification_types = require("../SNotification/SNotification.types.cjs");
+const require_SNotification = require("../SNotification/SNotification.vue.cjs");
+let vue = require("vue");
+//#region src/components/SToast/SToast.vue?vue&type=script&setup=true&lang.ts
+var SToast_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SToast",
+	props: {
+		type: { default: () => require_SNotification_types.ENotificationType.INFO_ACCENT },
+		layout: { default: () => require_SNotification_types.ENotificationLayout.HORIZONTAL },
+		leftside: { default: () => require_SNotification_types.ENotificationLeftside.ICON },
+		title: {},
+		description: {},
+		linkText: {},
+		primaryButtonText: {},
+		secondaryButtonText: {},
+		showPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		closeAriaLabel: { default: "" },
+		icon: {},
+		avatar: {},
+		width: {},
+		truncateTitle: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"close",
+		"linkClick",
+		"primaryAction",
+		"secondaryAction"
+	],
+	setup(__props, { emit: __emit }) {
+		/**
+		* Presentational toast с обводкой и тенью для overlay-сценариев.
+		* @displayName SToast
+		*/
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const resolvedWidth = (0, vue.computed)(() => __props.width ?? 360);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_SNotification.default, {
+				class: "s-ui-toast",
+				"data-qa": "ui:toast",
+				type: __props.type,
+				layout: __props.layout,
+				leftside: __props.leftside,
+				surface: (0, vue.unref)(require_SNotification_types.ENotificationSurface).TOAST,
+				title: __props.title,
+				description: __props.description,
+				linkText: __props.linkText,
+				primaryButtonText: __props.primaryButtonText,
+				secondaryButtonText: __props.secondaryButtonText,
+				showPrimaryButton: __props.showPrimaryButton,
+				closable: __props.closable,
+				closeAriaLabel: __props.closeAriaLabel,
+				icon: __props.icon,
+				avatar: __props.avatar,
+				width: resolvedWidth.value,
+				truncateTitle: __props.truncateTitle,
+				onClose: _cache[0] || (_cache[0] = ($event) => emit("close")),
+				onLinkClick: _cache[1] || (_cache[1] = ($event) => emit("linkClick")),
+				onPrimaryAction: _cache[2] || (_cache[2] = ($event) => emit("primaryAction")),
+				onSecondaryAction: _cache[3] || (_cache[3] = ($event) => emit("secondaryAction"))
+			}, (0, vue.createSlots)({ _: 2 }, [(0, vue.unref)(slots).title ? {
+				name: "title",
+				fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "title")]),
+				key: "0"
+			} : void 0, (0, vue.unref)(slots).description ? {
+				name: "description",
+				fn: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "description")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"type",
+				"layout",
+				"leftside",
+				"surface",
+				"title",
+				"description",
+				"linkText",
+				"primaryButtonText",
+				"secondaryButtonText",
+				"showPrimaryButton",
+				"closable",
+				"closeAriaLabel",
+				"icon",
+				"avatar",
+				"width",
+				"truncateTitle"
+			]);
+		};
+	}
+});
+//#endregion
+exports.default = SToast_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SToast/SToast.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,101 @@
+import { ENotificationLayout, ENotificationLeftside, ENotificationSurface, ENotificationType } from "../SNotification/SNotification.types.js";
+import SNotification_default from "../SNotification/SNotification.vue.js";
+import { computed, createBlock, createSlots, defineComponent, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+//#region src/components/SToast/SToast.vue?vue&type=script&setup=true&lang.ts
+var SToast_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SToast",
+	props: {
+		type: { default: () => ENotificationType.INFO_ACCENT },
+		layout: { default: () => ENotificationLayout.HORIZONTAL },
+		leftside: { default: () => ENotificationLeftside.ICON },
+		title: {},
+		description: {},
+		linkText: {},
+		primaryButtonText: {},
+		secondaryButtonText: {},
+		showPrimaryButton: {
+			type: Boolean,
+			default: false
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		closeAriaLabel: { default: "" },
+		icon: {},
+		avatar: {},
+		width: {},
+		truncateTitle: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"close",
+		"linkClick",
+		"primaryAction",
+		"secondaryAction"
+	],
+	setup(__props, { emit: __emit }) {
+		/**
+		* Presentational toast с обводкой и тенью для overlay-сценариев.
+		* @displayName SToast
+		*/
+		const emit = __emit;
+		const slots = useSlots();
+		const resolvedWidth = computed(() => __props.width ?? 360);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SNotification_default, {
+				class: "s-ui-toast",
+				"data-qa": "ui:toast",
+				type: __props.type,
+				layout: __props.layout,
+				leftside: __props.leftside,
+				surface: unref(ENotificationSurface).TOAST,
+				title: __props.title,
+				description: __props.description,
+				linkText: __props.linkText,
+				primaryButtonText: __props.primaryButtonText,
+				secondaryButtonText: __props.secondaryButtonText,
+				showPrimaryButton: __props.showPrimaryButton,
+				closable: __props.closable,
+				closeAriaLabel: __props.closeAriaLabel,
+				icon: __props.icon,
+				avatar: __props.avatar,
+				width: resolvedWidth.value,
+				truncateTitle: __props.truncateTitle,
+				onClose: _cache[0] || (_cache[0] = ($event) => emit("close")),
+				onLinkClick: _cache[1] || (_cache[1] = ($event) => emit("linkClick")),
+				onPrimaryAction: _cache[2] || (_cache[2] = ($event) => emit("primaryAction")),
+				onSecondaryAction: _cache[3] || (_cache[3] = ($event) => emit("secondaryAction"))
+			}, createSlots({ _: 2 }, [unref(slots).title ? {
+				name: "title",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
+				key: "0"
+			} : void 0, unref(slots).description ? {
+				name: "description",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"type",
+				"layout",
+				"leftside",
+				"surface",
+				"title",
+				"description",
+				"linkText",
+				"primaryButtonText",
+				"secondaryButtonText",
+				"showPrimaryButton",
+				"closable",
+				"closeAriaLabel",
+				"icon",
+				"avatar",
+				"width",
+				"truncateTitle"
+			]);
+		};
+	}
+});
+//#endregion
+export { SToast_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SToastProvider/SToastProvider.vue.cjs

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

package/dist/components/SToastProvider/SToastProvider.vue.js

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

package/dist/components/SToastProvider/SToastProvider.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,212 @@
+const require_SNotification_types = require("../SNotification/SNotification.types.cjs");
+const require_SToast = require("../SToast/SToast.vue.cjs");
+const require_SToastProviderToast = require("./SToastProviderToast.vue.cjs");
+const require_useToast = require("./useToast.cjs");
+let vue = require("vue");
+//#region src/components/SToastProvider/SToastProvider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "s-ui-toast-provider__announcer",
+	role: "status",
+	"aria-atomic": "true"
+};
+var _hoisted_2 = {
+	class: "s-ui-toast-provider__announcer",
+	role: "alert",
+	"aria-atomic": "true"
+};
+var SToastProvider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SToastProvider",
+	setup(__props) {
+		/**
+		* Overlay-провайдер toast: очередь, стек до трёх уведомлений и auto-dismiss.
+		* Управление через `useToast().show()`.
+		* @displayName SToastProvider
+		*/
+		const { toasts, hide } = require_useToast.useToast();
+		const visibleToasts = (0, vue.computed)(() => toasts.value.slice(0, 3));
+		const politeAnnouncement = (0, vue.ref)("");
+		const assertiveAnnouncement = (0, vue.ref)("");
+		const announcedToastIds = /* @__PURE__ */ new Set();
+		const buildAnnouncement = (announcedToasts) => {
+			return announcedToasts.flatMap((toast) => [toast.title, toast.description ?? ""]).filter(Boolean).join(". ");
+		};
+		/** Пустая строка, затем текст: повтор того же сообщения тоже меняет регион и объявляется. */
+		const announce = async (announcement, text) => {
+			if (!text) return;
+			announcement.value = "";
+			await (0, vue.nextTick)();
+			announcement.value = text;
+		};
+		(0, vue.watch)(visibleToasts, async (nextToasts) => {
+			const freshToasts = nextToasts.filter((toast) => !announcedToastIds.has(toast.id));
+			const queuedToastIds = new Set(toasts.value.map((toast) => toast.id));
+			announcedToastIds.forEach((toastId) => {
+				if (!queuedToastIds.has(toastId)) announcedToastIds.delete(toastId);
+			});
+			freshToasts.forEach((toast) => announcedToastIds.add(toast.id));
+			const dangerToasts = freshToasts.filter((toast) => toast.type === require_SNotification_types.ENotificationType.DANGER);
+			const calmToasts = freshToasts.filter((toast) => toast.type !== require_SNotification_types.ENotificationType.DANGER);
+			await Promise.all([announce(assertiveAnnouncement, buildAnnouncement(dangerToasts)), announce(politeAnnouncement, buildAnnouncement(calmToasts))]);
+		});
+		const isExpanded = (0, vue.ref)(false);
+		const toastHeights = (0, vue.shallowRef)({});
+		const removingToastIds = (0, vue.ref)(/* @__PURE__ */ new Set());
+		const frontToast = (0, vue.computed)(() => toasts.value[0] ?? null);
+		const frontToastHeight = (0, vue.computed)(() => {
+			if (!frontToast.value) return 0;
+			return toastHeights.value[frontToast.value.id] ?? 0;
+		});
+		const stableFrontToastHeight = (0, vue.ref)(0);
+		const resolvedFrontToastHeight = (0, vue.computed)(() => {
+			if (frontToastHeight.value > 0) return frontToastHeight.value;
+			return stableFrontToastHeight.value;
+		});
+		(0, vue.watch)(frontToastHeight, (height) => {
+			if (height > 0) stableFrontToastHeight.value = height;
+		});
+		const listStyle = (0, vue.computed)(() => {
+			if (visibleToasts.value.length === 0) return {};
+			if (isExpanded.value) return { height: `${visibleToasts.value.reduce((total, toast, index) => {
+				const toastHeight = toastHeights.value[toast.id] ?? 0;
+				const gapBefore = index > 0 ? 4 : 0;
+				return total + toastHeight + gapBefore;
+			}, 0)}px` };
+			const stackPeek = Math.min(visibleToasts.value.length - 1, 2) * 10;
+			return { height: `${resolvedFrontToastHeight.value + stackPeek}px` };
+		});
+		const getExpandedOffsetY = (index) => {
+			let offset = 0;
+			for (let toastIndex = 0; toastIndex < index; toastIndex += 1) {
+				const toast = visibleToasts.value[toastIndex];
+				if (toast) offset += (toastHeights.value[toast.id] ?? 0) + 4;
+			}
+			return offset;
+		};
+		const isRemoving = (id) => {
+			return removingToastIds.value.has(id);
+		};
+		const handleMouseEnter = () => {
+			if (visibleToasts.value.length > 1) isExpanded.value = true;
+		};
+		const handleMouseLeave = () => {
+			isExpanded.value = false;
+		};
+		const handleHeightChange = (id, height) => {
+			toastHeights.value = {
+				...toastHeights.value,
+				[id]: height
+			};
+		};
+		const requestHide = (id) => {
+			if (removingToastIds.value.has(id)) return;
+			removingToastIds.value = new Set([...removingToastIds.value, id]);
+			window.setTimeout(() => {
+				hide(id);
+				const nextRemovingIds = new Set(removingToastIds.value);
+				nextRemovingIds.delete(id);
+				removingToastIds.value = nextRemovingIds;
+				const nextHeights = { ...toastHeights.value };
+				delete nextHeights[id];
+				toastHeights.value = nextHeights;
+			}, 200);
+		};
+		const handleLinkClick = (toast) => {
+			if (toast.onLinkClick) toast.onLinkClick();
+		};
+		const handlePrimaryAction = (toast) => {
+			if (toast.onPrimaryAction) toast.onPrimaryAction(toast.id);
+		};
+		const handleSecondaryAction = (toast) => {
+			if (toast.onSecondaryAction) toast.onSecondaryAction();
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, { to: "body" }, [(0, vue.createElementVNode)("div", {
+				class: "s-ui-toast-provider",
+				onMouseenter: handleMouseEnter,
+				onMouseleave: handleMouseLeave
+			}, [
+				(0, vue.createElementVNode)("div", _hoisted_1, (0, vue.toDisplayString)(politeAnnouncement.value), 1),
+				(0, vue.createElementVNode)("div", _hoisted_2, (0, vue.toDisplayString)(assertiveAnnouncement.value), 1),
+				visibleToasts.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					class: "s-ui-toast-provider__list",
+					style: (0, vue.normalizeStyle)(listStyle.value)
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(visibleToasts.value, (toast, index) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(require_SToastProviderToast.default, {
+						key: toast.id,
+						index,
+						expanded: isExpanded.value,
+						"front-toast-height": resolvedFrontToastHeight.value,
+						"stack-peek": (0, vue.unref)(10),
+						removed: isRemoving(toast.id),
+						visible: index < (0, vue.unref)(3),
+						"offset-y": getExpandedOffsetY(index),
+						onHeightChange: (height) => handleHeightChange(toast.id, height)
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "toast", { toast }, () => [toast.component ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(toast.component), (0, vue.mergeProps)({
+							key: 0,
+							ref_for: true
+						}, toast.componentProps, {
+							toast,
+							onClose: ($event) => requestHide(toast.id)
+						}), null, 16, ["toast", "onClose"])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SToast.default), {
+							key: 1,
+							role: "presentation",
+							type: toast.type,
+							layout: toast.layout,
+							leftside: toast.leftside,
+							title: toast.title,
+							description: toast.description,
+							linkText: toast.linkText,
+							primaryButtonText: toast.primaryButtonText,
+							secondaryButtonText: toast.secondaryButtonText,
+							showPrimaryButton: toast.showPrimaryButton,
+							closable: toast.closable,
+							closeAriaLabel: toast.closeAriaLabel,
+							icon: toast.icon,
+							avatar: toast.avatar,
+							width: toast.width,
+							truncateTitle: toast.truncateTitle,
+							onClose: ($event) => requestHide(toast.id),
+							onLinkClick: ($event) => handleLinkClick(toast),
+							onPrimaryAction: ($event) => handlePrimaryAction(toast),
+							onSecondaryAction: ($event) => handleSecondaryAction(toast)
+						}, null, 8, [
+							"type",
+							"layout",
+							"leftside",
+							"title",
+							"description",
+							"linkText",
+							"primaryButtonText",
+							"secondaryButtonText",
+							"showPrimaryButton",
+							"closable",
+							"closeAriaLabel",
+							"icon",
+							"avatar",
+							"width",
+							"truncateTitle",
+							"onClose",
+							"onLinkClick",
+							"onPrimaryAction",
+							"onSecondaryAction"
+						]))])]),
+						_: 2
+					}, 1032, [
+						"index",
+						"expanded",
+						"front-toast-height",
+						"stack-peek",
+						"removed",
+						"visible",
+						"offset-y",
+						"onHeightChange"
+					]);
+				}), 128))], 4)) : (0, vue.createCommentVNode)("", true)
+			], 32)]);
+		};
+	}
+});
+//#endregion
+exports.default = SToastProvider_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SToastProvider/SToastProvider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,212 @@
+import { ENotificationType } from "../SNotification/SNotification.types.js";
+import SToast_default from "../SToast/SToast.vue.js";
+import SToastProviderToast_default from "./SToastProviderToast.vue.js";
+import { useToast } from "./useToast.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+//#region src/components/SToastProvider/SToastProvider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "s-ui-toast-provider__announcer",
+	role: "status",
+	"aria-atomic": "true"
+};
+var _hoisted_2 = {
+	class: "s-ui-toast-provider__announcer",
+	role: "alert",
+	"aria-atomic": "true"
+};
+var SToastProvider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SToastProvider",
+	setup(__props) {
+		/**
+		* Overlay-провайдер toast: очередь, стек до трёх уведомлений и auto-dismiss.
+		* Управление через `useToast().show()`.
+		* @displayName SToastProvider
+		*/
+		const { toasts, hide } = useToast();
+		const visibleToasts = computed(() => toasts.value.slice(0, 3));
+		const politeAnnouncement = ref("");
+		const assertiveAnnouncement = ref("");
+		const announcedToastIds = /* @__PURE__ */ new Set();
+		const buildAnnouncement = (announcedToasts) => {
+			return announcedToasts.flatMap((toast) => [toast.title, toast.description ?? ""]).filter(Boolean).join(". ");
+		};
+		/** Пустая строка, затем текст: повтор того же сообщения тоже меняет регион и объявляется. */
+		const announce = async (announcement, text) => {
+			if (!text) return;
+			announcement.value = "";
+			await nextTick();
+			announcement.value = text;
+		};
+		watch(visibleToasts, async (nextToasts) => {
+			const freshToasts = nextToasts.filter((toast) => !announcedToastIds.has(toast.id));
+			const queuedToastIds = new Set(toasts.value.map((toast) => toast.id));
+			announcedToastIds.forEach((toastId) => {
+				if (!queuedToastIds.has(toastId)) announcedToastIds.delete(toastId);
+			});
+			freshToasts.forEach((toast) => announcedToastIds.add(toast.id));
+			const dangerToasts = freshToasts.filter((toast) => toast.type === ENotificationType.DANGER);
+			const calmToasts = freshToasts.filter((toast) => toast.type !== ENotificationType.DANGER);
+			await Promise.all([announce(assertiveAnnouncement, buildAnnouncement(dangerToasts)), announce(politeAnnouncement, buildAnnouncement(calmToasts))]);
+		});
+		const isExpanded = ref(false);
+		const toastHeights = shallowRef({});
+		const removingToastIds = ref(/* @__PURE__ */ new Set());
+		const frontToast = computed(() => toasts.value[0] ?? null);
+		const frontToastHeight = computed(() => {
+			if (!frontToast.value) return 0;
+			return toastHeights.value[frontToast.value.id] ?? 0;
+		});
+		const stableFrontToastHeight = ref(0);
+		const resolvedFrontToastHeight = computed(() => {
+			if (frontToastHeight.value > 0) return frontToastHeight.value;
+			return stableFrontToastHeight.value;
+		});
+		watch(frontToastHeight, (height) => {
+			if (height > 0) stableFrontToastHeight.value = height;
+		});
+		const listStyle = computed(() => {
+			if (visibleToasts.value.length === 0) return {};
+			if (isExpanded.value) return { height: `${visibleToasts.value.reduce((total, toast, index) => {
+				const toastHeight = toastHeights.value[toast.id] ?? 0;
+				const gapBefore = index > 0 ? 4 : 0;
+				return total + toastHeight + gapBefore;
+			}, 0)}px` };
+			const stackPeek = Math.min(visibleToasts.value.length - 1, 2) * 10;
+			return { height: `${resolvedFrontToastHeight.value + stackPeek}px` };
+		});
+		const getExpandedOffsetY = (index) => {
+			let offset = 0;
+			for (let toastIndex = 0; toastIndex < index; toastIndex += 1) {
+				const toast = visibleToasts.value[toastIndex];
+				if (toast) offset += (toastHeights.value[toast.id] ?? 0) + 4;
+			}
+			return offset;
+		};
+		const isRemoving = (id) => {
+			return removingToastIds.value.has(id);
+		};
+		const handleMouseEnter = () => {
+			if (visibleToasts.value.length > 1) isExpanded.value = true;
+		};
+		const handleMouseLeave = () => {
+			isExpanded.value = false;
+		};
+		const handleHeightChange = (id, height) => {
+			toastHeights.value = {
+				...toastHeights.value,
+				[id]: height
+			};
+		};
+		const requestHide = (id) => {
+			if (removingToastIds.value.has(id)) return;
+			removingToastIds.value = new Set([...removingToastIds.value, id]);
+			window.setTimeout(() => {
+				hide(id);
+				const nextRemovingIds = new Set(removingToastIds.value);
+				nextRemovingIds.delete(id);
+				removingToastIds.value = nextRemovingIds;
+				const nextHeights = { ...toastHeights.value };
+				delete nextHeights[id];
+				toastHeights.value = nextHeights;
+			}, 200);
+		};
+		const handleLinkClick = (toast) => {
+			if (toast.onLinkClick) toast.onLinkClick();
+		};
+		const handlePrimaryAction = (toast) => {
+			if (toast.onPrimaryAction) toast.onPrimaryAction(toast.id);
+		};
+		const handleSecondaryAction = (toast) => {
+			if (toast.onSecondaryAction) toast.onSecondaryAction();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createElementVNode("div", {
+				class: "s-ui-toast-provider",
+				onMouseenter: handleMouseEnter,
+				onMouseleave: handleMouseLeave
+			}, [
+				createElementVNode("div", _hoisted_1, toDisplayString(politeAnnouncement.value), 1),
+				createElementVNode("div", _hoisted_2, toDisplayString(assertiveAnnouncement.value), 1),
+				visibleToasts.value.length > 0 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "s-ui-toast-provider__list",
+					style: normalizeStyle(listStyle.value)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleToasts.value, (toast, index) => {
+					return openBlock(), createBlock(SToastProviderToast_default, {
+						key: toast.id,
+						index,
+						expanded: isExpanded.value,
+						"front-toast-height": resolvedFrontToastHeight.value,
+						"stack-peek": unref(10),
+						removed: isRemoving(toast.id),
+						visible: index < unref(3),
+						"offset-y": getExpandedOffsetY(index),
+						onHeightChange: (height) => handleHeightChange(toast.id, height)
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "toast", { toast }, () => [toast.component ? (openBlock(), createBlock(resolveDynamicComponent(toast.component), mergeProps({
+							key: 0,
+							ref_for: true
+						}, toast.componentProps, {
+							toast,
+							onClose: ($event) => requestHide(toast.id)
+						}), null, 16, ["toast", "onClose"])) : (openBlock(), createBlock(unref(SToast_default), {
+							key: 1,
+							role: "presentation",
+							type: toast.type,
+							layout: toast.layout,
+							leftside: toast.leftside,
+							title: toast.title,
+							description: toast.description,
+							linkText: toast.linkText,
+							primaryButtonText: toast.primaryButtonText,
+							secondaryButtonText: toast.secondaryButtonText,
+							showPrimaryButton: toast.showPrimaryButton,
+							closable: toast.closable,
+							closeAriaLabel: toast.closeAriaLabel,
+							icon: toast.icon,
+							avatar: toast.avatar,
+							width: toast.width,
+							truncateTitle: toast.truncateTitle,
+							onClose: ($event) => requestHide(toast.id),
+							onLinkClick: ($event) => handleLinkClick(toast),
+							onPrimaryAction: ($event) => handlePrimaryAction(toast),
+							onSecondaryAction: ($event) => handleSecondaryAction(toast)
+						}, null, 8, [
+							"type",
+							"layout",
+							"leftside",
+							"title",
+							"description",
+							"linkText",
+							"primaryButtonText",
+							"secondaryButtonText",
+							"showPrimaryButton",
+							"closable",
+							"closeAriaLabel",
+							"icon",
+							"avatar",
+							"width",
+							"truncateTitle",
+							"onClose",
+							"onLinkClick",
+							"onPrimaryAction",
+							"onSecondaryAction"
+						]))])]),
+						_: 2
+					}, 1032, [
+						"index",
+						"expanded",
+						"front-toast-height",
+						"stack-peek",
+						"removed",
+						"visible",
+						"offset-y",
+						"onHeightChange"
+					]);
+				}), 128))], 4)) : createCommentVNode("", true)
+			], 32)]);
+		};
+	}
+});
+//#endregion
+export { SToastProvider_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SToastProvider/SToastProviderToast.vue.cjs

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

package/dist/components/SToastProvider/SToastProviderToast.vue.js

@@ -0,0 +1,5 @@
+import SToastProviderToast_vue_vue_type_script_setup_true_lang_default from "./SToastProviderToast.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/SToastProvider/SToastProviderToast.vue
+var SToastProviderToast_default = SToastProviderToast_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SToastProviderToast_default as default };