niuma-ui 2.0.4 → 2.1.0

package/dist/components/stat-card/src/RsStatCard.d.ts

@@ -1,20 +1,56 @@
-export type RsStatAccent = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+import { type RsStatAccent, type RsStatFormat, type RsStatSize, type RsStatTrend, type RsStatTrendTone } from './stat-card-utils';
+export type { RsStatAccent, RsStatFormat, RsStatSize, RsStatTrend, RsStatTrendTone };
 type __VLS_Props = {
+    /** 指标名。不是标题层级，避免一排 KPI 污染大纲。 */
     label: string;
     value?: string | number;
     description?: string;
     accent?: RsStatAccent;
     loading?: boolean;
+    /** 数值前的单位或符号。货币符号优先用 format.style=currency，由 locale 决定位置。 */
+    prefix?: string;
+    /** 数值后的单位，例如 ms、req/s。 */
+    suffix?: string;
+    /** 涨跌方向。不表示好坏，好坏用 trendTone。 */
+    trend?: RsStatTrend;
+    /** 变化量。字符串原样显示；数字跟随 format / precision。 */
+    delta?: string | number;
+    trendTone?: RsStatTrendTone;
+    /**
+     * 仅对有限数字生效。默认 false，12480 仍显示 12480。
+     * true 使用当前 locale 分组；对象传给 Intl.NumberFormat。
+     */
+    format?: RsStatFormat;
+    /** 打开定点小数。未传 format 时也会格式化数字。字符串 value 仍原样。 */
+    precision?: number;
+    /** 疏密。不是控件 size，没有 ssm。 */
+    size?: RsStatSize;
+    id?: string;
+    /** 需要把整张卡标成命名区域时再传。默认不设，避免一排 KPI 变成一排 landmark。 */
+    ariaLabel?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};
 type __VLS_Slots = {} & {
-    value?: (props: typeof __VLS_1) => any;
+    icon?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    prefix?: (props: typeof __VLS_3) => any;
+} & {
+    value?: (props: typeof __VLS_5) => any;
+} & {
+    suffix?: (props: typeof __VLS_7) => any;
+} & {
+    trend?: (props: typeof __VLS_9) => any;
+} & {
+    description?: (props: typeof __VLS_11) => any;
+} & {
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: RsStatSize;
     loading: boolean;
+    format: RsStatFormat;
     accent: RsStatAccent;
+    trendTone: RsStatTrendTone;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/stat-card/src/RsStatCard.impl.js

@@ -1,20 +1,56 @@
-import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString } from "vue";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import { formatRsStatValue, hasRsStatDelta, resolveRsStatAccent, resolveRsStatSize, resolveRsStatTrend, resolveRsStatTrendTone, rsStatTrendMark, rsStatTrendMessageKey } from "./stat-card-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots } from "vue";
 //#region src/components/stat-card/src/RsStatCard.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-stat-card__body" };
-var _hoisted_2 = { class: "rs-stat-card__label" };
-var _hoisted_3 = {
+var _hoisted_1 = [
+	"id",
+	"aria-busy",
+	"aria-label"
+];
+var _hoisted_2 = { class: "rs-stat-card__body" };
+var _hoisted_3 = { class: "rs-stat-card__top" };
+var _hoisted_4 = { class: "rs-stat-card__label" };
+var _hoisted_5 = {
+	key: 0,
+	class: "rs-stat-card__icon",
+	"aria-hidden": "true"
+};
+var _hoisted_6 = {
 	key: 0,
 	class: "rs-stat-card__skeleton"
 };
-var _hoisted_4 = {
+var _hoisted_7 = { class: "rs-stat-card__sr" };
+var _hoisted_8 = {
 	key: 1,
 	class: "rs-stat-card__value"
 };
-var _hoisted_5 = {
+var _hoisted_9 = {
+	key: 0,
+	class: "rs-stat-card__affix"
+};
+var _hoisted_10 = {
+	key: 1,
+	class: "rs-stat-card__affix"
+};
+var _hoisted_11 = {
+	key: 0,
+	class: "rs-stat-card__mark",
+	"aria-hidden": "true"
+};
+var _hoisted_12 = {
+	key: 1,
+	class: "rs-stat-card__sr"
+};
+var _hoisted_13 = {
 	key: 2,
+	class: "rs-stat-card__delta"
+};
+var _hoisted_14 = {
+	key: 3,
 	class: "rs-stat-card__description"
 };
 var RsStatCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsStatCard",
 	__name: "RsStatCard",
 	props: {
 		label: {},
@@ -24,16 +60,74 @@ var RsStatCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		loading: {
 			type: Boolean,
 			default: false
-		}
+		},
+		prefix: {},
+		suffix: {},
+		trend: {},
+		delta: {},
+		trendTone: { default: "neutral" },
+		format: {
+			type: Boolean,
+			default: false
+		},
+		precision: {},
+		size: { default: "md" },
+		id: {},
+		ariaLabel: {}
 	},
 	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const { t, locale } = useRsI18n();
+		const accentName = computed(() => resolveRsStatAccent(props.accent));
+		const sizeName = computed(() => resolveRsStatSize(props.size));
+		const trendKind = computed(() => resolveRsStatTrend(props.trend));
+		const rootClass = computed(() => [
+			"rs-stat-card",
+			`rs-stat-card--${accentName.value}`,
+			`rs-stat-card--${sizeName.value}`
+		]);
+		const trendClass = computed(() => `rs-stat-card__trend--${resolveRsStatTrendTone(props.trendTone)}`);
+		const showTrend = computed(() => Boolean(slots.trend) || trendKind.value != null || hasRsStatDelta(props.delta));
+		const displayValue = computed(() => formatRsStatValue(props.value, {
+			format: props.format,
+			precision: props.precision,
+			locale: locale.value
+		}));
+		const displayDelta = computed(() => formatRsStatValue(props.delta, {
+			format: props.format,
+			precision: props.precision,
+			locale: locale.value
+		}));
+		const trendMark = computed(() => trendKind.value ? rsStatTrendMark(trendKind.value) : "");
+		const trendText = computed(() => trendKind.value ? t(rsStatTrendMessageKey(trendKind.value)) : "");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("section", { class: normalizeClass(["rs-stat-card", `rs-stat-card--${__props.accent}`]) }, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "rs-stat-card__accent" }, null, -1)), createElementVNode("div", _hoisted_1, [
-				createElementVNode("div", _hoisted_2, toDisplayString(__props.label), 1),
-				__props.loading ? (openBlock(), createElementBlock("div", _hoisted_3)) : (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "value", {}, () => [createTextVNode(toDisplayString(__props.value), 1)], true)])),
-				__props.description ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+			return openBlock(), createElementBlock("section", {
+				id: __props.id,
+				class: normalizeClass(rootClass.value),
+				"aria-busy": __props.loading ? true : void 0,
+				"aria-label": __props.ariaLabel
+			}, [_cache[0] || (_cache[0] = createElementVNode("div", {
+				class: "rs-stat-card__accent",
+				"aria-hidden": "true"
+			}, null, -1)), createElementVNode("div", _hoisted_2, [
+				createElementVNode("div", _hoisted_3, [createElementVNode("p", _hoisted_4, toDisplayString(__props.label), 1), _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "icon", {}, void 0, true)])) : createCommentVNode("", true)]),
+				__props.loading ? (openBlock(), createElementBlock("div", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString(unref(t)("statCard.loading")), 1)])) : (openBlock(), createElementBlock("div", _hoisted_8, [
+					__props.prefix || _ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_9, [renderSlot(_ctx.$slots, "prefix", {}, () => [createTextVNode(toDisplayString(__props.prefix), 1)], true)])) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "value", {}, () => [createTextVNode(toDisplayString(displayValue.value), 1)], true),
+					__props.suffix || _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_10, [renderSlot(_ctx.$slots, "suffix", {}, () => [createTextVNode(toDisplayString(__props.suffix), 1)], true)])) : createCommentVNode("", true)
+				])),
+				!__props.loading && showTrend.value ? (openBlock(), createElementBlock("p", {
+					key: 2,
+					class: normalizeClass(["rs-stat-card__trend", trendClass.value])
+				}, [renderSlot(_ctx.$slots, "trend", {}, () => [
+					trendMark.value ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(trendMark.value), 1)) : createCommentVNode("", true),
+					trendText.value ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(trendText.value), 1)) : createCommentVNode("", true),
+					displayDelta.value ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(displayDelta.value), 1)) : createCommentVNode("", true)
+				], true)], 2)) : createCommentVNode("", true),
+				__props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("p", _hoisted_14, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)], true)])) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "default", {}, void 0, true)
-			])], 2);
+			])], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/stat-card/src/RsStatCard.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsStatCard_vue_vue_type_script_setup_true_lang_default from "./RsStatCard.impl.js";
 
 //#region src/components/stat-card/src/RsStatCard.vue
-var RsStatCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsStatCard_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-96f97696"]]);
+var RsStatCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsStatCard_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-75b35569"]]);
 //#endregion
 export { RsStatCard_default as default };

package/dist/components/stat-card/src/stat-card-utils.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 指标卡纯函数。数字格式化只在调用方打开 format / precision 时走 Intl，
+ * 默认把 number 转成与模板插值相同的字符串，避免改变已有仪表盘文案。
+ */
+export declare const RS_STAT_ACCENTS: readonly ["primary", "success", "warning", "danger", "info"];
+export type RsStatAccent = (typeof RS_STAT_ACCENTS)[number];
+export declare const RS_STAT_TRENDS: readonly ["up", "down", "flat"];
+export type RsStatTrend = (typeof RS_STAT_TRENDS)[number];
+export declare const RS_STAT_TREND_TONES: readonly ["neutral", "primary", "success", "warning", "danger", "info"];
+export type RsStatTrendTone = (typeof RS_STAT_TREND_TONES)[number];
+/** 疏密，不是控件高度。没有 ssm。 */
+export declare const RS_STAT_SIZES: readonly ["sm", "md", "lg"];
+export type RsStatSize = (typeof RS_STAT_SIZES)[number];
+/** true 使用当前 locale 的默认分组；对象传给 Intl.NumberFormat。false 保持原文。 */
+export type RsStatFormat = boolean | Intl.NumberFormatOptions;
+export declare function isRsStatAccent(value: unknown): value is RsStatAccent;
+export declare function isRsStatTrend(value: unknown): value is RsStatTrend;
+export declare function isRsStatTrendTone(value: unknown): value is RsStatTrendTone;
+export declare function isRsStatSize(value: unknown): value is RsStatSize;
+export declare function resolveRsStatAccent(accent?: string | null): RsStatAccent;
+export declare function resolveRsStatTrend(trend?: string | null): RsStatTrend | null;
+export declare function resolveRsStatTrendTone(tone?: string | null): RsStatTrendTone;
+export declare function resolveRsStatSize(size?: string | null): RsStatSize;
+export declare function rsStatTrendMark(trend: RsStatTrend): string;
+export declare function rsStatTrendMessageKey(trend: RsStatTrend): string;
+export declare function hasRsStatDelta(delta: string | number | null | undefined): boolean;
+/** 未打开格式化时返回 null，调用方保持 String(value)。 */
+export declare function resolveRsStatNumberFormat(format: RsStatFormat | null | undefined, precision: number | null | undefined): Intl.NumberFormatOptions | null;
+/** 测试观察缓存上限。不从包根导出。 */
+export declare function rsStatFormatterCacheSize(): number;
+/**
+ * 字符串原样返回（调用方已经本地化）。
+ * 有限数字在 format/precision 打开时用 locale 格式化；非法选项回退 String(value)，不抛。
+ */
+export declare function formatRsStatValue(value: string | number | null | undefined, input: {
+    format?: RsStatFormat | null;
+    precision?: number | null;
+    locale: string;
+}): string;

package/dist/components/stat-card/src/stat-card-utils.js

@@ -0,0 +1,113 @@
+//#region src/components/stat-card/src/stat-card-utils.ts
+/**
+* 指标卡纯函数。数字格式化只在调用方打开 format / precision 时走 Intl，
+* 默认把 number 转成与模板插值相同的字符串，避免改变已有仪表盘文案。
+*/
+var RS_STAT_ACCENTS = [
+	"primary",
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+var RS_STAT_TRENDS = [
+	"up",
+	"down",
+	"flat"
+];
+var RS_STAT_TREND_TONES = ["neutral", ...RS_STAT_ACCENTS];
+/** 疏密，不是控件高度。没有 ssm。 */
+var RS_STAT_SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+var FORMATTER_CACHE_LIMIT = 24;
+var formatters = /* @__PURE__ */ new Map();
+function isRsStatAccent(value) {
+	return typeof value === "string" && RS_STAT_ACCENTS.includes(value);
+}
+function isRsStatTrend(value) {
+	return typeof value === "string" && RS_STAT_TRENDS.includes(value);
+}
+function isRsStatTrendTone(value) {
+	return typeof value === "string" && RS_STAT_TREND_TONES.includes(value);
+}
+function isRsStatSize(value) {
+	return typeof value === "string" && RS_STAT_SIZES.includes(value);
+}
+function resolveRsStatAccent(accent) {
+	return isRsStatAccent(accent) ? accent : "primary";
+}
+function resolveRsStatTrend(trend) {
+	return isRsStatTrend(trend) ? trend : null;
+}
+function resolveRsStatTrendTone(tone) {
+	return isRsStatTrendTone(tone) ? tone : "neutral";
+}
+function resolveRsStatSize(size) {
+	return isRsStatSize(size) ? size : "md";
+}
+function rsStatTrendMark(trend) {
+	if (trend === "up") return "↑";
+	if (trend === "down") return "↓";
+	return "–";
+}
+function rsStatTrendMessageKey(trend) {
+	return `statCard.trend.${trend}`;
+}
+function hasRsStatDelta(delta) {
+	return delta != null && delta !== "";
+}
+function clampPrecision(precision) {
+	if (precision == null || !Number.isFinite(precision)) return null;
+	return Math.min(20, Math.max(0, Math.trunc(precision)));
+}
+/** 未打开格式化时返回 null，调用方保持 String(value)。 */
+function resolveRsStatNumberFormat(format, precision) {
+	const digits = clampPrecision(precision);
+	if (!(format === true || format != null && typeof format === "object") && digits == null) return null;
+	const spec = format != null && typeof format === "object" ? { ...format } : {};
+	if (digits != null) {
+		spec.minimumFractionDigits = digits;
+		spec.maximumFractionDigits = digits;
+	}
+	return spec;
+}
+function stableFormatKey(options) {
+	return Object.keys(options).sort().map((key) => `${key}=${String(options[key])}`).join("&");
+}
+function cachedFormatter(locale, options) {
+	const key = `${locale}\0${stableFormatKey(options)}`;
+	const hit = formatters.get(key);
+	if (hit) {
+		formatters.delete(key);
+		formatters.set(key, hit);
+		return hit;
+	}
+	const created = new Intl.NumberFormat(locale || void 0, options);
+	if (formatters.size >= FORMATTER_CACHE_LIMIT) {
+		const oldest = formatters.keys().next().value;
+		if (oldest !== void 0) formatters.delete(oldest);
+	}
+	formatters.set(key, created);
+	return created;
+}
+/**
+* 字符串原样返回（调用方已经本地化）。
+* 有限数字在 format/precision 打开时用 locale 格式化；非法选项回退 String(value)，不抛。
+*/
+function formatRsStatValue(value, input) {
+	if (value == null || value === "") return "";
+	if (typeof value === "string") return value;
+	if (!Number.isFinite(value)) return String(value);
+	const spec = resolveRsStatNumberFormat(input.format, input.precision);
+	if (!spec) return String(value);
+	try {
+		return cachedFormatter(input.locale, spec).format(value);
+	} catch {
+		return String(value);
+	}
+}
+//#endregion
+export { RS_STAT_ACCENTS, RS_STAT_SIZES, RS_STAT_TRENDS, RS_STAT_TREND_TONES, formatRsStatValue, hasRsStatDelta, isRsStatAccent, isRsStatSize, isRsStatTrend, isRsStatTrendTone, resolveRsStatAccent, resolveRsStatNumberFormat, resolveRsStatSize, resolveRsStatTrend, resolveRsStatTrendTone, rsStatTrendMark, rsStatTrendMessageKey };

package/dist/components/steps/index.d.ts

@@ -1,3 +1,3 @@
 export { default as RsSteps } from './src/RsSteps.js';
-export type { RsStepItem, RsStepStatus, RsStepsOrientation, RsStepsSize } from './src/steps-utils';
+export type { RsStepItem, RsStepStatus, RsStepsExpose, RsStepsInstance, RsStepsItemSlot, RsStepsLabelPlacement, RsStepsOrientation, RsStepsSize, RsStepsType, } from './src/steps-utils';
 export { isStepSeparatorCompleted, resolveStepStatus } from './src/steps-utils';

package/dist/components/steps/src/RsSteps.css

@@ -1,83 +1,204 @@
 
-.rs-steps[data-v-b7fdd868] {
+.rs-steps[data-v-773a38b0] {
+  --rs-steps-indicator-size: var(--rs-steps-indicator-size-md);
+  min-width: 0;
+}
+.rs-steps--ssm[data-v-773a38b0] {
+  --rs-steps-indicator-size: var(--rs-steps-indicator-size-ssm);
+}
+.rs-steps--sm[data-v-773a38b0] {
+  --rs-steps-indicator-size: var(--rs-steps-indicator-size-sm);
+}
+.rs-steps--lg[data-v-773a38b0] {
+  --rs-steps-indicator-size: var(--rs-steps-indicator-size-lg);
+}
+.rs-steps__list[data-v-773a38b0] {
   display: flex;
-  gap: var(--rs-space-md);
+  gap: var(--rs-steps-gap);
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.rs-steps--vertical[data-v-b7fdd868] {
+.rs-steps--vertical .rs-steps__list[data-v-773a38b0] {
   flex-direction: column;
 }
-.rs-steps__item[data-v-b7fdd868] {
+.rs-steps__item[data-v-773a38b0] {
   display: flex;
   flex: 1;
   align-items: center;
-  gap: var(--rs-space-md);
+  gap: var(--rs-steps-item-gap);
   min-width: 0;
 }
-.rs-steps--vertical .rs-steps__item[data-v-b7fdd868] {
-  align-items: flex-start;
+.rs-steps--vertical .rs-steps__item[data-v-773a38b0] {
+  flex: none;
+  flex-direction: column;
+  align-items: stretch;
+}
+.rs-steps--label-bottom.rs-steps--horizontal .rs-steps__item[data-v-773a38b0] {
+  position: relative;
+  flex-direction: column;
+  align-items: center;
 }
-.rs-steps__trigger[data-v-b7fdd868] {
+.rs-steps__trigger[data-v-773a38b0] {
   display: inline-flex;
   align-items: center;
-  gap: var(--rs-space-sm);
+  gap: var(--rs-steps-trigger-gap);
   min-width: 0;
+  margin: 0;
+  padding: 0;
   border: 0;
   background: transparent;
   color: inherit;
+  font: inherit;
   text-align: start;
+  cursor: default;
 }
-.rs-steps__trigger[data-v-b7fdd868]:not(:disabled) {
+.rs-steps--clickable .rs-steps__trigger[data-v-773a38b0] {
   cursor: pointer;
 }
-.rs-steps__indicator[data-v-b7fdd868] {
+.rs-steps--label-bottom.rs-steps--horizontal .rs-steps__trigger[data-v-773a38b0] {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.rs-steps__trigger[data-v-773a38b0]:focus-visible {
+  outline: var(--rs-focus-ring-width) solid var(--rs-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--rs-radius-xs);
+}
+.rs-steps__item--disabled .rs-steps__trigger[data-v-773a38b0] {
+  opacity: var(--rs-steps-disabled-opacity);
+  cursor: not-allowed;
+}
+.rs-steps__indicator[data-v-773a38b0] {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: var(--rs-steps-indicator-size);
+  height: var(--rs-steps-indicator-size);
   flex: 0 0 auto;
   border-radius: var(--rs-radius-full);
-  background: var(--rs-surface-hover);
-  color: var(--rs-muted);
+  background: var(--rs-steps-wait-bg);
+  color: var(--rs-steps-wait-fg);
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-bold);
+  line-height: 1;
+  transition:
+    background-color var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+}
+.rs-steps--ssm .rs-steps__indicator[data-v-773a38b0],
+.rs-steps--sm .rs-steps__indicator[data-v-773a38b0] {
+  font-size: var(--rs-font-size-xs);
 }
-.rs-steps--sm .rs-steps__indicator[data-v-b7fdd868] {
-  width: 1.5rem;
-  height: 1.5rem;
+.rs-steps--dot .rs-steps__indicator[data-v-773a38b0] {
+  width: var(--rs-steps-dot-size);
+  height: var(--rs-steps-dot-size);
 }
-.rs-steps__item--finish .rs-steps__indicator[data-v-b7fdd868],
-.rs-steps__item--process .rs-steps__indicator[data-v-b7fdd868] {
-  background: var(--rs-primary);
-  color: var(--rs-primary-foreground);
+.rs-steps__item--finish .rs-steps__indicator[data-v-773a38b0],
+.rs-steps__item--process .rs-steps__indicator[data-v-773a38b0] {
+  background: var(--rs-steps-process-bg);
+  color: var(--rs-steps-process-fg);
 }
-.rs-steps__item--error .rs-steps__indicator[data-v-b7fdd868] {
-  background: var(--rs-danger-container);
-  color: var(--rs-on-danger-container);
+.rs-steps__item--finish .rs-steps__indicator[data-v-773a38b0] {
+  background: var(--rs-steps-finish-bg);
+  color: var(--rs-steps-finish-fg);
 }
-.rs-steps__body[data-v-b7fdd868] {
+.rs-steps__item--error .rs-steps__indicator[data-v-773a38b0] {
+  background: var(--rs-steps-error-bg);
+  color: var(--rs-steps-error-fg);
+}
+.rs-steps__indicator--percent[data-v-773a38b0] {
+  background: conic-gradient(
+    var(--rs-steps-process-bg) calc(var(--rs-steps-percent, 0) * 1%),
+    var(--rs-steps-wait-bg) 0
+  );
+}
+.rs-steps__indicator--percent[data-v-773a38b0]::before {
+  content: '';
+  position: absolute;
+  inset: 0.125rem;
+  border-radius: inherit;
+  background: var(--rs-steps-process-bg);
+}
+.rs-steps__mark[data-v-773a38b0] {
+  position: relative;
+  z-index: 1;
+}
+.rs-steps__body[data-v-773a38b0] {
   display: grid;
   min-width: 0;
 }
-.rs-steps__title[data-v-b7fdd868] {
-  color: var(--rs-text);
+.rs-steps__title[data-v-773a38b0] {
+  overflow: hidden;
+  color: var(--rs-steps-title);
   font-size: var(--rs-font-size-sm);
-  font-weight: var(--rs-font-weight-semibold);
+  font-weight: var(--rs-steps-title-weight);
+  line-height: var(--rs-line-height-normal);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-steps__item--process .rs-steps__title[data-v-773a38b0],
+.rs-steps__item--finish .rs-steps__title[data-v-773a38b0] {
+  color: var(--rs-steps-title-active);
 }
-.rs-steps__description[data-v-b7fdd868] {
-  color: var(--rs-muted);
+.rs-steps__item--error .rs-steps__title[data-v-773a38b0] {
+  color: var(--rs-steps-title-error);
+}
+.rs-steps__description[data-v-773a38b0] {
+  overflow: hidden;
+  color: var(--rs-steps-description);
   font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-normal);
+  text-overflow: ellipsis;
 }
-.rs-steps__separator[data-v-b7fdd868] {
+.rs-steps__status[data-v-773a38b0] {
+  position: absolute;
+  width: 1px;
   height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.rs-steps__separator[data-v-773a38b0] {
+  height: var(--rs-steps-separator-size);
   flex: 1;
-  background: var(--rs-border);
+  background: var(--rs-steps-separator);
+  transition: background-color var(--rs-transition-fast);
+}
+.rs-steps__separator--finish[data-v-773a38b0] {
+  background: var(--rs-steps-separator-finish);
+}
+.rs-steps--vertical .rs-steps__separator[data-v-773a38b0] {
+  width: var(--rs-steps-separator-size);
+  min-height: var(--rs-steps-separator-min);
+  margin-inline-start: calc((var(--rs-steps-indicator-size) - var(--rs-steps-separator-size)) / 2);
+  flex: none;
+  height: auto;
+}
+.rs-steps--label-bottom.rs-steps--horizontal .rs-steps__separator[data-v-773a38b0] {
+  position: absolute;
+  top: calc(var(--rs-steps-indicator-size) / 2);
+  inset-inline-start: calc(50% + var(--rs-steps-indicator-size) / 2 + var(--rs-steps-gap) / 2);
+  width: calc(100% - var(--rs-steps-indicator-size) - var(--rs-steps-gap));
+  height: var(--rs-steps-separator-size);
+  flex: none;
+}
+.rs-steps--dot.rs-steps--vertical .rs-steps__separator[data-v-773a38b0] {
+  margin-inline-start: calc((var(--rs-steps-dot-size) - var(--rs-steps-separator-size)) / 2);
+}
+.rs-steps--dot.rs-steps--label-bottom.rs-steps--horizontal .rs-steps__separator[data-v-773a38b0] {
+  top: calc(var(--rs-steps-dot-size) / 2);
+  inset-inline-start: calc(50% + var(--rs-steps-dot-size) / 2 + var(--rs-steps-gap) / 2);
+  width: calc(100% - var(--rs-steps-dot-size) - var(--rs-steps-gap));
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-steps__indicator[data-v-773a38b0],
+  .rs-steps__separator[data-v-773a38b0] {
+    transition: none;
 }
-.rs-steps--vertical .rs-steps__separator[data-v-b7fdd868] {
-  width: 1px;
-  min-height: 1.5rem;
-  margin-inline-start: 0.875rem;
 }