@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/SRoadmap/SRoadmap.types.js

@@ -0,0 +1,13 @@
+//#region src/components/SRoadmap/SRoadmap.types.ts
+var ESRoadmapStatus = /* @__PURE__ */ function(ESRoadmapStatus) {
+	ESRoadmapStatus["UNDONE"] = "undone";
+	ESRoadmapStatus["GENERATED"] = "generated";
+	ESRoadmapStatus["ON_PLAN"] = "on-plan";
+	ESRoadmapStatus["RISK"] = "risk";
+	ESRoadmapStatus["DEVIATED"] = "deviated";
+	ESRoadmapStatus["ON_PAUSE"] = "on-pause";
+	ESRoadmapStatus["DONE"] = "done";
+	return ESRoadmapStatus;
+}({});
+//#endregion
+export { ESRoadmapStatus };

package/dist/components/SRoadmap/SRoadmap.vue.cjs

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

package/dist/components/SRoadmap/SRoadmap.vue.js

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

package/dist/components/SRoadmap/SRoadmap.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,231 @@
+const require_useHasListener = require("../../composables/useHasListener.cjs");
+const require_roadmapDate = require("./utils/roadmapDate.cjs");
+const require_buildRoadmapRows = require("./utils/buildRoadmapRows.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SRoadmap/SRoadmap.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-busy"];
+var _hoisted_2 = { class: "s-ui-roadmap__ruler" };
+var _hoisted_3 = { class: "s-ui-roadmap__year" };
+var _hoisted_4 = { class: "s-ui-roadmap__months" };
+var _hoisted_5 = { class: "s-ui-roadmap__body" };
+var _hoisted_6 = {
+	class: "s-ui-roadmap__grid",
+	"aria-hidden": "true"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "s-ui-roadmap__rows"
+};
+var _hoisted_8 = { class: "s-ui-roadmap__row" };
+var _hoisted_9 = {
+	key: 2,
+	class: "s-ui-roadmap__rows"
+};
+var _hoisted_10 = [
+	"role",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_11 = { class: "s-ui-roadmap__card-header" };
+var _hoisted_12 = { class: "s-ui-roadmap__card-title" };
+var _hoisted_13 = { class: "s-ui-roadmap__card-track" };
+var _hoisted_14 = [
+	"title",
+	"aria-label",
+	"onClick"
+];
+var _hoisted_15 = {
+	key: 0,
+	class: "s-ui-roadmap__card-progress"
+};
+var _hoisted_16 = { class: "s-ui-roadmap__card-percent" };
+var _hoisted_17 = {
+	key: 3,
+	class: "s-ui-roadmap__empty"
+};
+var SKELETON_CARD_LEFT = 3.8;
+var SKELETON_CARD_WIDTH = 39.6;
+var MILESTONE_ICON_SIZE = 16;
+var HINT_CURSOR_OFFSET = 16;
+var SRoadmap_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SRoadmap",
+	props: {
+		items: { default: () => [] },
+		year: {},
+		today: {},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		itemActionLabel: {},
+		milestoneActionLabel: {}
+	},
+	emits: ["itemClick", "milestoneClick"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const MILESTONE_ICON_HALF = MILESTONE_ICON_SIZE / 2;
+		const stageIconName = _shtabapp_ui_kit_primitives.ESIconName.stageFill;
+		const milestoneIconName = _shtabapp_ui_kit_primitives.ESIconName.milestoneFill;
+		const progressBarSize = _shtabapp_ui_kit_primitives.ESProgressBarSize.SMALL;
+		const skeletonType = _shtabapp_ui_kit_primitives.ESSkeletonType.S_ROADMAP_CARD;
+		const skeletonCardStyle = {
+			insetInlineStart: `${SKELETON_CARD_LEFT}%`,
+			inlineSize: `${SKELETON_CARD_WIDTH}%`
+		};
+		const { t, locale } = (0, _shtabapp_ui_kit_primitives.useUiKitI18n)();
+		const hasItemClickListener = require_useHasListener.useHasListener("onItemClick");
+		const hasMilestoneClickListener = require_useHasListener.useHasListener("onMilestoneClick");
+		/** Отступ подсказки от курсора по вертикали, как у тултипов макета. */
+		const hint = (0, vue.ref)(null);
+		const itemHintText = (0, vue.computed)(() => hasItemClickListener() ? __props.itemActionLabel : void 0);
+		const milestoneHintText = (0, vue.computed)(() => hasMilestoneClickListener() ? __props.milestoneActionLabel : void 0);
+		const hintStyle = (0, vue.computed)(() => hint.value ? {
+			insetInlineStart: `${hint.value.x}px`,
+			insetBlockStart: `${hint.value.y + HINT_CURSOR_OFFSET}px`
+		} : void 0);
+		const showHint = (text, event) => {
+			hint.value = text ? {
+				text,
+				x: event.clientX,
+				y: event.clientY
+			} : null;
+		};
+		const hideHint = () => {
+			hint.value = null;
+		};
+		const todayDay = (0, vue.computed)(() => require_roadmapDate.toRoadmapDay(__props.today ?? /* @__PURE__ */ new Date()));
+		const timelineYear = (0, vue.computed)(() => __props.year ?? todayDay.value?.year ?? (/* @__PURE__ */ new Date()).getFullYear());
+		const isCurrentYear = (0, vue.computed)(() => todayDay.value?.year === timelineYear.value);
+		const rootClasses = (0, vue.computed)(() => ["s-ui-roadmap", { "s-ui-roadmap--loading": __props.loading }]);
+		const months = (0, vue.computed)(() => require_roadmapDate.getRoadmapMonthLabels(String((0, vue.toValue)(locale))).map((label, index) => ({
+			index,
+			label,
+			classes: ["s-ui-roadmap__month", { "s-ui-roadmap__month--current": isCurrentYear.value && todayDay.value?.month === index }]
+		})));
+		const todayStyle = (0, vue.computed)(() => {
+			if (!isCurrentYear.value || !todayDay.value) return null;
+			return { insetInlineStart: `${require_roadmapDate.getRoadmapDayPosition(todayDay.value, timelineYear.value)}%` };
+		});
+		const rowViews = (0, vue.computed)(() => require_buildRoadmapRows.buildRoadmapRows(__props.items, timelineYear.value).map((row) => ({
+			key: row.item.id,
+			row,
+			role: hasItemClickListener() ? "button" : void 0,
+			tabindex: hasItemClickListener() ? 0 : void 0,
+			progressLabel: t("roadmap.progress", { value: String(row.progress ?? 0) }),
+			cardClasses: [
+				"s-ui-roadmap__card",
+				`s-ui-roadmap__card--status-${row.status}`,
+				{ "s-ui-roadmap__card--clickable": hasItemClickListener() }
+			],
+			cardStyle: {
+				insetInlineStart: `${row.left}%`,
+				inlineSize: `${row.width}%`
+			},
+			milestones: row.milestones.map((placement) => ({
+				key: placement.milestone.id,
+				placement,
+				title: t("roadmap.milestone", { title: placement.milestone.title }),
+				nativeTitle: milestoneHintText.value ? void 0 : t("roadmap.milestone", { title: placement.milestone.title }),
+				classes: ["s-ui-roadmap__milestone", `s-ui-roadmap__milestone--status-${placement.status}`],
+				style: { insetInlineStart: `clamp(0px, calc(${placement.offset}% - ${MILESTONE_ICON_HALF}px), calc(100% - ${MILESTONE_ICON_SIZE}px))` }
+			}))
+		})));
+		const handleItemClick = (item) => {
+			emit("itemClick", item);
+		};
+		const handleMilestoneClick = (milestone, item) => {
+			emit("milestoneClick", milestone, item);
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)(rootClasses.value),
+				"data-qa": "ui:roadmap",
+				"aria-busy": __props.loading
+			}, [
+				(0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.createElementVNode)("div", _hoisted_3, (0, vue.toDisplayString)(timelineYear.value), 1), (0, vue.createElementVNode)("ol", _hoisted_4, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(months.value, (month) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
+						key: month.index,
+						class: (0, vue.normalizeClass)(month.classes)
+					}, (0, vue.toDisplayString)(month.label), 3);
+				}), 128))])]),
+				(0, vue.createElementVNode)("div", _hoisted_5, [
+					(0, vue.createElementVNode)("div", _hoisted_6, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(months.value, (month) => {
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+							key: month.index,
+							class: "s-ui-roadmap__grid-column"
+						});
+					}), 128))]),
+					todayStyle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: 0,
+						class: "s-ui-roadmap__today",
+						style: (0, vue.normalizeStyle)(todayStyle.value),
+						"aria-hidden": "true"
+					}, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("span", { class: "s-ui-roadmap__today-point" }, null, -1)])], 4)) : (0, vue.createCommentVNode)("", true),
+					__props.loading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("ul", _hoisted_7, [(0, vue.createElementVNode)("li", _hoisted_8, [(0, vue.createElementVNode)("div", {
+						class: "s-ui-roadmap__card s-ui-roadmap__card--skeleton",
+						style: skeletonCardStyle,
+						"aria-hidden": "true"
+					}, [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SSkeleton), {
+						class: "s-ui-roadmap__card-skeleton",
+						type: (0, vue.unref)(skeletonType)
+					}, null, 8, ["type"])])])])) : rowViews.value.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("ul", _hoisted_9, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(rowViews.value, (rowView) => {
+						return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
+							key: rowView.key,
+							class: "s-ui-roadmap__row"
+						}, [(0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)(rowView.cardClasses),
+							style: (0, vue.normalizeStyle)(rowView.cardStyle),
+							role: rowView.role,
+							tabindex: rowView.tabindex,
+							onClick: ($event) => handleItemClick(rowView.row.item),
+							onKeydown: (0, vue.withKeys)(($event) => handleItemClick(rowView.row.item), ["enter"]),
+							onPointermove: _cache[1] || (_cache[1] = ($event) => showHint(itemHintText.value, $event)),
+							onPointerleave: hideHint
+						}, [
+							(0, vue.createElementVNode)("div", _hoisted_11, [(0, vue.renderSlot)(_ctx.$slots, "item-leading", { item: rowView.row.item }), (0, vue.createElementVNode)("span", _hoisted_12, (0, vue.toDisplayString)(rowView.row.item.title), 1)]),
+							(0, vue.createElementVNode)("div", _hoisted_13, [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+								class: "s-ui-roadmap__stage-icon",
+								name: (0, vue.unref)(stageIconName),
+								size: 16
+							}, null, 8, ["name"]), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(rowView.milestones, (milestoneView) => {
+								return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+									key: milestoneView.key,
+									type: "button",
+									class: (0, vue.normalizeClass)(milestoneView.classes),
+									style: (0, vue.normalizeStyle)(milestoneView.style),
+									title: milestoneView.nativeTitle,
+									"aria-label": milestoneView.title,
+									onClick: (0, vue.withModifiers)(($event) => handleMilestoneClick(milestoneView.placement.milestone, rowView.row.item), ["stop"]),
+									onPointermove: _cache[0] || (_cache[0] = (0, vue.withModifiers)(($event) => showHint(milestoneHintText.value, $event), ["stop"]))
+								}, [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+									name: (0, vue.unref)(milestoneIconName),
+									size: 16
+								}, null, 8, ["name"])], 46, _hoisted_14);
+							}), 128))]),
+							rowView.row.progress !== null ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_15, [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SProgressBar), {
+								class: "s-ui-roadmap__card-progress-bar",
+								value: rowView.row.progress,
+								size: (0, vue.unref)(progressBarSize),
+								"aria-label": rowView.progressLabel
+							}, null, 8, [
+								"value",
+								"size",
+								"aria-label"
+							]), (0, vue.createElementVNode)("span", _hoisted_16, (0, vue.toDisplayString)(rowView.row.progress) + "%", 1)])) : (0, vue.createCommentVNode)("", true)
+						], 46, _hoisted_10)]);
+					}), 128))])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_17, [(0, vue.renderSlot)(_ctx.$slots, "empty", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("roadmap.empty")), 1)])]))
+				]),
+				((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, { to: "body" }, [hint.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 0,
+					class: "s-ui-roadmap__hint",
+					style: (0, vue.normalizeStyle)(hintStyle.value),
+					role: "tooltip"
+				}, (0, vue.toDisplayString)(hint.value.text), 5)) : (0, vue.createCommentVNode)("", true)]))
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+exports.default = SRoadmap_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SRoadmap/SRoadmap.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,231 @@
+import { useHasListener } from "../../composables/useHasListener.js";
+import { getRoadmapDayPosition, getRoadmapMonthLabels, toRoadmapDay } from "./utils/roadmapDate.js";
+import { buildRoadmapRows } from "./utils/buildRoadmapRows.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, withKeys, withModifiers } from "vue";
+import { ESIconName, ESProgressBarSize, ESSkeletonType, SIcon, SProgressBar, SSkeleton, useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SRoadmap/SRoadmap.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-busy"];
+var _hoisted_2 = { class: "s-ui-roadmap__ruler" };
+var _hoisted_3 = { class: "s-ui-roadmap__year" };
+var _hoisted_4 = { class: "s-ui-roadmap__months" };
+var _hoisted_5 = { class: "s-ui-roadmap__body" };
+var _hoisted_6 = {
+	class: "s-ui-roadmap__grid",
+	"aria-hidden": "true"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "s-ui-roadmap__rows"
+};
+var _hoisted_8 = { class: "s-ui-roadmap__row" };
+var _hoisted_9 = {
+	key: 2,
+	class: "s-ui-roadmap__rows"
+};
+var _hoisted_10 = [
+	"role",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_11 = { class: "s-ui-roadmap__card-header" };
+var _hoisted_12 = { class: "s-ui-roadmap__card-title" };
+var _hoisted_13 = { class: "s-ui-roadmap__card-track" };
+var _hoisted_14 = [
+	"title",
+	"aria-label",
+	"onClick"
+];
+var _hoisted_15 = {
+	key: 0,
+	class: "s-ui-roadmap__card-progress"
+};
+var _hoisted_16 = { class: "s-ui-roadmap__card-percent" };
+var _hoisted_17 = {
+	key: 3,
+	class: "s-ui-roadmap__empty"
+};
+var SKELETON_CARD_LEFT = 3.8;
+var SKELETON_CARD_WIDTH = 39.6;
+var MILESTONE_ICON_SIZE = 16;
+var HINT_CURSOR_OFFSET = 16;
+var SRoadmap_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SRoadmap",
+	props: {
+		items: { default: () => [] },
+		year: {},
+		today: {},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		itemActionLabel: {},
+		milestoneActionLabel: {}
+	},
+	emits: ["itemClick", "milestoneClick"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const MILESTONE_ICON_HALF = MILESTONE_ICON_SIZE / 2;
+		const stageIconName = ESIconName.stageFill;
+		const milestoneIconName = ESIconName.milestoneFill;
+		const progressBarSize = ESProgressBarSize.SMALL;
+		const skeletonType = ESSkeletonType.S_ROADMAP_CARD;
+		const skeletonCardStyle = {
+			insetInlineStart: `${SKELETON_CARD_LEFT}%`,
+			inlineSize: `${SKELETON_CARD_WIDTH}%`
+		};
+		const { t, locale } = useUiKitI18n();
+		const hasItemClickListener = useHasListener("onItemClick");
+		const hasMilestoneClickListener = useHasListener("onMilestoneClick");
+		/** Отступ подсказки от курсора по вертикали, как у тултипов макета. */
+		const hint = ref(null);
+		const itemHintText = computed(() => hasItemClickListener() ? __props.itemActionLabel : void 0);
+		const milestoneHintText = computed(() => hasMilestoneClickListener() ? __props.milestoneActionLabel : void 0);
+		const hintStyle = computed(() => hint.value ? {
+			insetInlineStart: `${hint.value.x}px`,
+			insetBlockStart: `${hint.value.y + HINT_CURSOR_OFFSET}px`
+		} : void 0);
+		const showHint = (text, event) => {
+			hint.value = text ? {
+				text,
+				x: event.clientX,
+				y: event.clientY
+			} : null;
+		};
+		const hideHint = () => {
+			hint.value = null;
+		};
+		const todayDay = computed(() => toRoadmapDay(__props.today ?? /* @__PURE__ */ new Date()));
+		const timelineYear = computed(() => __props.year ?? todayDay.value?.year ?? (/* @__PURE__ */ new Date()).getFullYear());
+		const isCurrentYear = computed(() => todayDay.value?.year === timelineYear.value);
+		const rootClasses = computed(() => ["s-ui-roadmap", { "s-ui-roadmap--loading": __props.loading }]);
+		const months = computed(() => getRoadmapMonthLabels(String(toValue(locale))).map((label, index) => ({
+			index,
+			label,
+			classes: ["s-ui-roadmap__month", { "s-ui-roadmap__month--current": isCurrentYear.value && todayDay.value?.month === index }]
+		})));
+		const todayStyle = computed(() => {
+			if (!isCurrentYear.value || !todayDay.value) return null;
+			return { insetInlineStart: `${getRoadmapDayPosition(todayDay.value, timelineYear.value)}%` };
+		});
+		const rowViews = computed(() => buildRoadmapRows(__props.items, timelineYear.value).map((row) => ({
+			key: row.item.id,
+			row,
+			role: hasItemClickListener() ? "button" : void 0,
+			tabindex: hasItemClickListener() ? 0 : void 0,
+			progressLabel: t("roadmap.progress", { value: String(row.progress ?? 0) }),
+			cardClasses: [
+				"s-ui-roadmap__card",
+				`s-ui-roadmap__card--status-${row.status}`,
+				{ "s-ui-roadmap__card--clickable": hasItemClickListener() }
+			],
+			cardStyle: {
+				insetInlineStart: `${row.left}%`,
+				inlineSize: `${row.width}%`
+			},
+			milestones: row.milestones.map((placement) => ({
+				key: placement.milestone.id,
+				placement,
+				title: t("roadmap.milestone", { title: placement.milestone.title }),
+				nativeTitle: milestoneHintText.value ? void 0 : t("roadmap.milestone", { title: placement.milestone.title }),
+				classes: ["s-ui-roadmap__milestone", `s-ui-roadmap__milestone--status-${placement.status}`],
+				style: { insetInlineStart: `clamp(0px, calc(${placement.offset}% - ${MILESTONE_ICON_HALF}px), calc(100% - ${MILESTONE_ICON_SIZE}px))` }
+			}))
+		})));
+		const handleItemClick = (item) => {
+			emit("itemClick", item);
+		};
+		const handleMilestoneClick = (milestone, item) => {
+			emit("milestoneClick", milestone, item);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(rootClasses.value),
+				"data-qa": "ui:roadmap",
+				"aria-busy": __props.loading
+			}, [
+				createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, toDisplayString(timelineYear.value), 1), createElementVNode("ol", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(months.value, (month) => {
+					return openBlock(), createElementBlock("li", {
+						key: month.index,
+						class: normalizeClass(month.classes)
+					}, toDisplayString(month.label), 3);
+				}), 128))])]),
+				createElementVNode("div", _hoisted_5, [
+					createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(months.value, (month) => {
+						return openBlock(), createElementBlock("span", {
+							key: month.index,
+							class: "s-ui-roadmap__grid-column"
+						});
+					}), 128))]),
+					todayStyle.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "s-ui-roadmap__today",
+						style: normalizeStyle(todayStyle.value),
+						"aria-hidden": "true"
+					}, [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "s-ui-roadmap__today-point" }, null, -1)])], 4)) : createCommentVNode("", true),
+					__props.loading ? (openBlock(), createElementBlock("ul", _hoisted_7, [createElementVNode("li", _hoisted_8, [createElementVNode("div", {
+						class: "s-ui-roadmap__card s-ui-roadmap__card--skeleton",
+						style: skeletonCardStyle,
+						"aria-hidden": "true"
+					}, [createVNode(unref(SSkeleton), {
+						class: "s-ui-roadmap__card-skeleton",
+						type: unref(skeletonType)
+					}, null, 8, ["type"])])])])) : rowViews.value.length ? (openBlock(), createElementBlock("ul", _hoisted_9, [(openBlock(true), createElementBlock(Fragment, null, renderList(rowViews.value, (rowView) => {
+						return openBlock(), createElementBlock("li", {
+							key: rowView.key,
+							class: "s-ui-roadmap__row"
+						}, [createElementVNode("div", {
+							class: normalizeClass(rowView.cardClasses),
+							style: normalizeStyle(rowView.cardStyle),
+							role: rowView.role,
+							tabindex: rowView.tabindex,
+							onClick: ($event) => handleItemClick(rowView.row.item),
+							onKeydown: withKeys(($event) => handleItemClick(rowView.row.item), ["enter"]),
+							onPointermove: _cache[1] || (_cache[1] = ($event) => showHint(itemHintText.value, $event)),
+							onPointerleave: hideHint
+						}, [
+							createElementVNode("div", _hoisted_11, [renderSlot(_ctx.$slots, "item-leading", { item: rowView.row.item }), createElementVNode("span", _hoisted_12, toDisplayString(rowView.row.item.title), 1)]),
+							createElementVNode("div", _hoisted_13, [createVNode(unref(SIcon), {
+								class: "s-ui-roadmap__stage-icon",
+								name: unref(stageIconName),
+								size: 16
+							}, null, 8, ["name"]), (openBlock(true), createElementBlock(Fragment, null, renderList(rowView.milestones, (milestoneView) => {
+								return openBlock(), createElementBlock("button", {
+									key: milestoneView.key,
+									type: "button",
+									class: normalizeClass(milestoneView.classes),
+									style: normalizeStyle(milestoneView.style),
+									title: milestoneView.nativeTitle,
+									"aria-label": milestoneView.title,
+									onClick: withModifiers(($event) => handleMilestoneClick(milestoneView.placement.milestone, rowView.row.item), ["stop"]),
+									onPointermove: _cache[0] || (_cache[0] = withModifiers(($event) => showHint(milestoneHintText.value, $event), ["stop"]))
+								}, [createVNode(unref(SIcon), {
+									name: unref(milestoneIconName),
+									size: 16
+								}, null, 8, ["name"])], 46, _hoisted_14);
+							}), 128))]),
+							rowView.row.progress !== null ? (openBlock(), createElementBlock("div", _hoisted_15, [createVNode(unref(SProgressBar), {
+								class: "s-ui-roadmap__card-progress-bar",
+								value: rowView.row.progress,
+								size: unref(progressBarSize),
+								"aria-label": rowView.progressLabel
+							}, null, 8, [
+								"value",
+								"size",
+								"aria-label"
+							]), createElementVNode("span", _hoisted_16, toDisplayString(rowView.row.progress) + "%", 1)])) : createCommentVNode("", true)
+						], 46, _hoisted_10)]);
+					}), 128))])) : (openBlock(), createElementBlock("div", _hoisted_17, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(t)("roadmap.empty")), 1)])]))
+				]),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [hint.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "s-ui-roadmap__hint",
+					style: normalizeStyle(hintStyle.value),
+					role: "tooltip"
+				}, toDisplayString(hint.value.text), 5)) : createCommentVNode("", true)]))
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SRoadmap_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SRoadmap/utils/buildRoadmapRows.cjs

@@ -0,0 +1,35 @@
+const require_SRoadmap_types = require("../SRoadmap.types.cjs");
+const require_roadmapDate = require("./roadmapDate.cjs");
+//#region src/components/SRoadmap/utils/buildRoadmapRows.ts
+var clampPercent = (value) => Math.min(100, Math.max(0, value));
+var placeMilestones = (milestones, itemStatus, year, left, width) => milestones.flatMap((milestone) => {
+	const milestoneDay = require_roadmapDate.toRoadmapDay(milestone.date);
+	if (!milestoneDay || milestoneDay.year !== year) return [];
+	const position = require_roadmapDate.getRoadmapDayPosition(milestoneDay, year, true);
+	const offset = width > 0 ? clampPercent((position - left) / width * 100) : 0;
+	return [{
+		milestone,
+		status: milestone.status ?? itemStatus,
+		offset
+	}];
+});
+var buildRoadmapRows = (items, year) => items.flatMap((item) => {
+	const startDay = require_roadmapDate.toRoadmapDay(item.start);
+	const endDay = require_roadmapDate.toRoadmapDay(item.end);
+	if (!startDay || !endDay || startDay.year > year || endDay.year < year) return [];
+	const left = require_roadmapDate.getRoadmapDayPosition(startDay, year);
+	const right = require_roadmapDate.getRoadmapDayPosition(endDay, year, true);
+	if (right <= left) return [];
+	const status = item.status ?? require_SRoadmap_types.ESRoadmapStatus.ON_PLAN;
+	const width = right - left;
+	return [{
+		item,
+		status,
+		left,
+		width,
+		progress: item.progress === void 0 ? null : clampPercent(Math.round(item.progress)),
+		milestones: placeMilestones(item.milestones ?? [], status, year, left, width)
+	}];
+});
+//#endregion
+exports.buildRoadmapRows = buildRoadmapRows;

package/dist/components/SRoadmap/utils/buildRoadmapRows.js

@@ -0,0 +1,35 @@
+import { ESRoadmapStatus } from "../SRoadmap.types.js";
+import { getRoadmapDayPosition, toRoadmapDay } from "./roadmapDate.js";
+//#region src/components/SRoadmap/utils/buildRoadmapRows.ts
+var clampPercent = (value) => Math.min(100, Math.max(0, value));
+var placeMilestones = (milestones, itemStatus, year, left, width) => milestones.flatMap((milestone) => {
+	const milestoneDay = toRoadmapDay(milestone.date);
+	if (!milestoneDay || milestoneDay.year !== year) return [];
+	const position = getRoadmapDayPosition(milestoneDay, year, true);
+	const offset = width > 0 ? clampPercent((position - left) / width * 100) : 0;
+	return [{
+		milestone,
+		status: milestone.status ?? itemStatus,
+		offset
+	}];
+});
+var buildRoadmapRows = (items, year) => items.flatMap((item) => {
+	const startDay = toRoadmapDay(item.start);
+	const endDay = toRoadmapDay(item.end);
+	if (!startDay || !endDay || startDay.year > year || endDay.year < year) return [];
+	const left = getRoadmapDayPosition(startDay, year);
+	const right = getRoadmapDayPosition(endDay, year, true);
+	if (right <= left) return [];
+	const status = item.status ?? ESRoadmapStatus.ON_PLAN;
+	const width = right - left;
+	return [{
+		item,
+		status,
+		left,
+		width,
+		progress: item.progress === void 0 ? null : clampPercent(Math.round(item.progress)),
+		milestones: placeMilestones(item.milestones ?? [], status, year, left, width)
+	}];
+});
+//#endregion
+export { buildRoadmapRows };

package/dist/components/SRoadmap/utils/roadmapDate.cjs

@@ -0,0 +1,40 @@
+//#region src/components/SRoadmap/utils/roadmapDate.ts
+var ISO_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})/;
+var toRoadmapDay = (date) => {
+	if (date instanceof Date) return Number.isNaN(date.getTime()) ? null : {
+		year: date.getFullYear(),
+		month: date.getMonth(),
+		day: date.getDate()
+	};
+	const match = ISO_DATE_PATTERN.exec(date);
+	if (!match) return null;
+	return {
+		year: Number(match[1]),
+		month: Number(match[2]) - 1,
+		day: Number(match[3])
+	};
+};
+var getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+var MONTHS_IN_YEAR = 12;
+/**
+* Позиция дня на годовой шкале в процентах. Месяцы на шкале равной ширины, поэтому позиция —
+* номер месяца плюс доля прошедших дней. `endOfDay` сдвигает точку на конец дня (для окончаний).
+*/
+var getRoadmapDayPosition = (roadmapDay, year, endOfDay = false) => {
+	if (roadmapDay.year < year) return 0;
+	if (roadmapDay.year > year) return 100;
+	const daysInMonth = getDaysInMonth(roadmapDay.year, roadmapDay.month);
+	const elapsedDays = endOfDay ? roadmapDay.day : roadmapDay.day - 1;
+	return (roadmapDay.month + elapsedDays / daysInMonth) / MONTHS_IN_YEAR * 100;
+};
+var getRoadmapMonthLabels = (locale) => {
+	const monthFormatter = new Intl.DateTimeFormat(locale, { month: "long" });
+	return Array.from({ length: MONTHS_IN_YEAR }, (_, month) => {
+		const monthName = monthFormatter.format(new Date(2e3, month, 1));
+		return monthName.charAt(0).toLocaleUpperCase(locale) + monthName.slice(1);
+	});
+};
+//#endregion
+exports.getRoadmapDayPosition = getRoadmapDayPosition;
+exports.getRoadmapMonthLabels = getRoadmapMonthLabels;
+exports.toRoadmapDay = toRoadmapDay;

package/dist/components/SRoadmap/utils/roadmapDate.js

@@ -0,0 +1,38 @@
+//#region src/components/SRoadmap/utils/roadmapDate.ts
+var ISO_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})/;
+var toRoadmapDay = (date) => {
+	if (date instanceof Date) return Number.isNaN(date.getTime()) ? null : {
+		year: date.getFullYear(),
+		month: date.getMonth(),
+		day: date.getDate()
+	};
+	const match = ISO_DATE_PATTERN.exec(date);
+	if (!match) return null;
+	return {
+		year: Number(match[1]),
+		month: Number(match[2]) - 1,
+		day: Number(match[3])
+	};
+};
+var getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+var MONTHS_IN_YEAR = 12;
+/**
+* Позиция дня на годовой шкале в процентах. Месяцы на шкале равной ширины, поэтому позиция —
+* номер месяца плюс доля прошедших дней. `endOfDay` сдвигает точку на конец дня (для окончаний).
+*/
+var getRoadmapDayPosition = (roadmapDay, year, endOfDay = false) => {
+	if (roadmapDay.year < year) return 0;
+	if (roadmapDay.year > year) return 100;
+	const daysInMonth = getDaysInMonth(roadmapDay.year, roadmapDay.month);
+	const elapsedDays = endOfDay ? roadmapDay.day : roadmapDay.day - 1;
+	return (roadmapDay.month + elapsedDays / daysInMonth) / MONTHS_IN_YEAR * 100;
+};
+var getRoadmapMonthLabels = (locale) => {
+	const monthFormatter = new Intl.DateTimeFormat(locale, { month: "long" });
+	return Array.from({ length: MONTHS_IN_YEAR }, (_, month) => {
+		const monthName = monthFormatter.format(new Date(2e3, month, 1));
+		return monthName.charAt(0).toLocaleUpperCase(locale) + monthName.slice(1);
+	});
+};
+//#endregion
+export { getRoadmapDayPosition, getRoadmapMonthLabels, toRoadmapDay };

package/dist/components/SSegmentControl/SSegmentControl.types.cjs

@@ -0,0 +1,16 @@
+//#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
+exports.ESSegmentControlShape = ESSegmentControlShape;
+exports.ESSegmentControlSize = ESSegmentControlSize;