niuma-ui 2.0.4 → 2.1.0

package/dist/components/split-pane/src/RsSplitPane.impl.js

@@ -1,33 +1,40 @@
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
+import { resolveDirMode } from "../../../locale/apply.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import { applySplitResize, collapseSplitPane, expandSplitPane, isSplitPaneCollapsed, normalizeSplitSizes, resolveSplitAutoFlags, resolveSplitConstraints, roundSize, splitSizesEqual } from "./split-pane-utils.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, unref, useModel, watch } from "vue";
+import { applySplitResize, collapseSplitPane, expandSplitPane, invertSplitAxisDelta, isSplitPaneCollapsed, isSplitResizerInteractive, normalizeSplitSizes, resolveSplitAutoFlags, resolveSplitConstraints, roundSize, splitPaneDomId, splitSizesEqual } from "./split-pane-utils.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, useId, useModel, watch } from "vue";
 //#region src/components/split-pane/src/RsSplitPane.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-pane-key"];
-var _hoisted_2 = [
+var _hoisted_1 = ["id", "aria-label"];
+var _hoisted_2 = ["id", "data-pane-key"];
+var _hoisted_3 = [
 	"data-resizer-index",
 	"onPointerdown",
 	"onPointermove",
 	"onPointerup",
-	"onPointercancel"
+	"onPointercancel",
+	"onLostpointercapture"
 ];
-var _hoisted_3 = [
+var _hoisted_4 = [
 	"tabindex",
 	"aria-orientation",
 	"aria-valuenow",
 	"aria-valuemin",
 	"aria-valuemax",
+	"aria-valuetext",
+	"aria-controls",
 	"aria-label",
 	"aria-disabled",
 	"onKeydown",
 	"onDblclick"
 ];
-var _hoisted_4 = {
+var _hoisted_5 = {
 	key: 0,
 	class: "rs-split__grip",
 	"aria-hidden": "true"
 };
 var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsSplitPane",
 	__name: "RsSplitPane",
 	props: /*@__PURE__*/ mergeModels({
 		panes: {},
@@ -44,7 +51,9 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		fill: {
 			type: Boolean,
 			default: false
-		}
+		},
+		id: {},
+		ariaLabel: {}
 	}, {
 		"sizes": { default: () => [] },
 		"sizesModifiers": {}
@@ -52,6 +61,7 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	emits: /*@__PURE__*/ mergeModels([
 		"resize",
 		"resize-end",
+		"resize-start",
 		"collapse",
 		"expand"
 	], ["update:sizes"]),
@@ -60,13 +70,20 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		/** 各面板尺寸（百分比，总和 100） */
 		const model = useModel(__props, "sizes");
 		const emit = __emit;
-		const { t } = useRsI18n();
+		const { t, locale } = useRsI18n();
+		const config = useRsConfigOptional();
+		const fallbackId = useId();
 		const rootRef = ref(null);
 		const sizes = ref([]);
+		const rootId = computed(() => props.id || fallbackId);
+		const groupLabel = computed(() => props.ariaLabel || t("split.label"));
+		const writingDir = computed(() => resolveDirMode(config?.dir.value ?? "auto", config?.locale.value ?? locale.value));
 		const constraints = computed(() => resolveSplitConstraints(props.panes));
 		const resizerCount = computed(() => Math.max(0, props.panes.length - 1));
 		/** 内容自适应面板标记；首次拖拽/键盘调整时会物化为百分比并清空 */
 		const autoFlags = ref(resolveSplitAutoFlags(props.panes));
+		/** pane key → 折叠前尺寸；expand 未显式传 toSize 时还原 */
+		const sizeBeforeCollapse = /* @__PURE__ */ new Map();
 		/** 归一化初始值，作为双击复位的基准 */
 		let initialSizes = normalizeSplitSizes(props.panes, modelSeed());
 		sizes.value = initialSizes.slice();
@@ -76,11 +93,16 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		function paneKeySignature() {
 			return props.panes.map((pane) => pane.key).join("|");
 		}
+		function pruneCollapseMemory() {
+			const keys = new Set(props.panes.map((pane) => pane.key));
+			for (const key of sizeBeforeCollapse.keys()) if (!keys.has(key)) sizeBeforeCollapse.delete(key);
+		}
 		watch(() => paneKeySignature(), () => {
 			const provided = sizes.value.length === props.panes.length ? sizes.value : void 0;
 			autoFlags.value = resolveSplitAutoFlags(props.panes);
 			initialSizes = normalizeSplitSizes(props.panes, provided);
 			sizes.value = initialSizes.slice();
+			pruneCollapseMemory();
 			syncModel(sizes.value);
 		});
 		watch(() => props.panes.map((pane) => pane.size).join("|"), () => {
@@ -105,8 +127,6 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			syncModel(next);
 			emit("resize", next.slice());
 		}
-		/** pane key → 折叠前尺寸；expand 未显式传 toSize 时还原 */
-		const sizeBeforeCollapse = /* @__PURE__ */ new Map();
 		function emitBoundaryTransitions(before, after) {
 			props.panes.forEach((pane, index) => {
 				const constraint = constraints.value[index];
@@ -124,12 +144,39 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			if (toSize !== void 0) return toSize;
 			return sizeBeforeCollapse.get(key) ?? initialSizes[index];
 		}
+		function paneDomId(key) {
+			return splitPaneDomId(rootId.value, key);
+		}
+		function resizerInteractive(index) {
+			return isSplitResizerInteractive(props.panes[index], props.disabled);
+		}
+		function resizerAriaLabel(index) {
+			return props.panes[index]?.resizerAriaLabel || t("split.resize");
+		}
+		function resizerValueText(index) {
+			return t("split.value", { value: Math.round(sizes.value[index] ?? 0) });
+		}
+		function resizerControls(index) {
+			return [props.panes[index], props.panes[index + 1]].filter((pane) => Boolean(pane)).map((pane) => paneDomId(pane.key)).join(" ");
+		}
+		/** 跟计算样式，避免只读 Config 而父级已写 dir=rtl */
+		function rootIsRtl() {
+			const root = rootRef.value;
+			if (root && typeof getComputedStyle === "function") return getComputedStyle(root).direction === "rtl";
+			return writingDir.value === "rtl";
+		}
+		function axisDelta(raw) {
+			return invertSplitAxisDelta(props.orientation, rootIsRtl(), raw);
+		}
 		let dragIndex = null;
 		let dragOrigin = 0;
 		let dragStartSizes = [];
 		let flexPx = 0;
 		let pendingDragSizes = null;
 		let dragFrame = 0;
+		let dragTarget = null;
+		let dragPointerId = null;
+		let dragPaneEls = [];
 		function directPaneElements(root) {
 			return [...root.children].filter((el) => el instanceof HTMLElement && el.classList.contains("rs-split__pane"));
 		}
@@ -140,41 +187,69 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		}
 		/** 拖拽过程中直接写 flex-grow，避免每帧触发 Vue 重渲染 */
 		function applyDragToDom(next) {
-			const panes = paneElements();
+			const panes = dragPaneEls.length ? dragPaneEls : paneElements();
 			next.forEach((size, i) => {
 				panes[i]?.style.setProperty("flex-grow", String(size));
 			});
 		}
-		function setDraggingUi(active, index) {
-			const root = rootRef.value;
-			if (!root) return;
-			root.classList.toggle("rs-split--dragging", active);
-			const host = root.querySelector(`[data-resizer-index="${index}"]`);
+		function setDraggingUi(active, host) {
+			rootRef.value?.classList.toggle("rs-split--dragging", active);
 			if (!host) return;
-			if (active) host.setAttribute("data-active", "");
-			else host.removeAttribute("data-active");
+			if (active) host.dataset.active = "";
+			else delete host.dataset.active;
 		}
 		function scheduleDragApply(next) {
 			pendingDragSizes = next;
 			if (dragFrame) return;
 			dragFrame = requestAnimationFrame(() => {
 				dragFrame = 0;
-				if (pendingDragSizes) applyDragToDom(pendingDragSizes);
+				if (!pendingDragSizes) return;
+				applyDragToDom(pendingDragSizes);
+				emit("resize", pendingDragSizes.slice());
+			});
+		}
+		function clearDragInlineStyles() {
+			(dragPaneEls.length ? dragPaneEls : paneElements()).forEach((el) => {
+				el.style.removeProperty("flex-grow");
 			});
 		}
+		function releaseDragPointer() {
+			if (dragTarget && dragPointerId != null) try {
+				dragTarget.releasePointerCapture(dragPointerId);
+			} catch {}
+			dragTarget = null;
+			dragPointerId = null;
+		}
+		function abortDrag() {
+			if (dragFrame) {
+				cancelAnimationFrame(dragFrame);
+				dragFrame = 0;
+			}
+			const host = dragTarget;
+			const index = dragIndex;
+			releaseDragPointer();
+			if (index !== null) {
+				setDraggingUi(false, host);
+				clearDragInlineStyles();
+			}
+			dragIndex = null;
+			pendingDragSizes = null;
+			dragPaneEls = [];
+		}
 		function finishDrag(index) {
 			if (dragIndex !== index) return;
-			dragIndex = null;
 			if (dragFrame) {
 				cancelAnimationFrame(dragFrame);
 				dragFrame = 0;
 			}
-			setDraggingUi(false, index);
+			const host = dragTarget;
 			const final = pendingDragSizes ?? sizes.value;
 			pendingDragSizes = null;
-			paneElements().forEach((el) => {
-				el.style.removeProperty("flex-grow");
-			});
+			dragIndex = null;
+			releaseDragPointer();
+			setDraggingUi(false, host);
+			clearDragInlineStyles();
+			dragPaneEls = [];
 			commit(final);
 			emitBoundaryTransitions(dragStartSizes, final);
 			emit("resize-end", final.slice());
@@ -193,40 +268,51 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			return sum;
 		}
 		function onResizerPointerDown(index, event) {
-			if (props.disabled) return;
+			if (!resizerInteractive(index)) return;
 			if (event.pointerType === "mouse" && event.button !== 0) return;
 			materializeAutoPanes();
-			event.currentTarget.setPointerCapture?.(event.pointerId);
+			const target = event.currentTarget;
+			target.setPointerCapture?.(event.pointerId);
 			dragIndex = index;
 			dragOrigin = props.orientation === "horizontal" ? event.clientX : event.clientY;
 			dragStartSizes = sizes.value.slice();
 			pendingDragSizes = dragStartSizes;
 			flexPx = measureFlexPx();
-			setDraggingUi(true, index);
+			dragTarget = target;
+			dragPointerId = event.pointerId;
+			dragPaneEls = paneElements();
+			setDraggingUi(true, target);
+			emit("resize-start", dragStartSizes.slice());
 			event.preventDefault();
 		}
 		function onResizerPointerMove(index, event) {
 			if (dragIndex !== index || flexPx <= 0) return;
-			const deltaPercent = ((props.orientation === "horizontal" ? event.clientX : event.clientY) - dragOrigin) / flexPx * 100;
+			const deltaPercent = axisDelta(((props.orientation === "horizontal" ? event.clientX : event.clientY) - dragOrigin) / flexPx * 100);
 			scheduleDragApply(applySplitResize(dragStartSizes, constraints.value, index, deltaPercent));
 		}
 		function endDrag(index, event) {
 			if (dragIndex !== index) return;
-			event.currentTarget.releasePointerCapture?.(event.pointerId);
+			if (dragTarget && event.pointerId === dragPointerId) try {
+				dragTarget.releasePointerCapture(event.pointerId);
+			} catch {}
+			finishDrag(index);
+		}
+		function onLostPointerCapture(index) {
+			if (dragIndex !== index) return;
 			finishDrag(index);
 		}
 		function onResizerKeydown(index, event) {
-			if (props.disabled) return;
+			if (!resizerInteractive(index)) return;
 			materializeAutoPanes();
 			const horizontal = props.orientation === "horizontal";
 			const step = props.keyboardStep;
 			let delta = 0;
 			switch (event.key) {
 				case "ArrowLeft":
-					if (horizontal) delta = -step;
+					if (horizontal) delta = axisDelta(-step);
 					break;
 				case "ArrowRight":
-					if (horizontal) delta = step;
+					if (horizontal) delta = axisDelta(step);
 					break;
 				case "ArrowUp":
 					if (!horizontal) delta = -step;
@@ -249,13 +335,14 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			}
 			if (delta === 0) return;
 			event.preventDefault();
+			emit("resize-start", sizes.value.slice());
 			const before = sizes.value.slice();
 			commit(applySplitResize(sizes.value, constraints.value, index, delta));
 			emitBoundaryTransitions(before, sizes.value);
 			emit("resize-end", sizes.value.slice());
 		}
 		function onResizerDblClick(index) {
-			if (props.disabled) return;
+			if (!resizerInteractive(index)) return;
 			materializeAutoPanes();
 			const a = sizes.value[index];
 			const b = sizes.value[index + 1];
@@ -363,22 +450,37 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			commit(initialSizes.slice());
 			emit("resize-end", sizes.value.slice());
 		}
+		function focus(index) {
+			const root = rootRef.value;
+			if (!root) return;
+			const hosts = [...root.querySelectorAll("[data-resizer-index]")];
+			((index !== void 0 ? hosts.find((el) => Number(el.dataset.resizerIndex) === index) : hosts.find((el) => resizerInteractive(Number(el.dataset.resizerIndex)))) ?? hosts[0])?.querySelector(".rs-split__resizer")?.focus();
+		}
+		onUnmounted(() => {
+			abortDrag();
+			sizeBeforeCollapse.clear();
+		});
 		__expose({
 			collapse,
 			expand,
 			reset,
-			getSizes: () => sizes.value.slice()
+			getSizes: () => sizes.value.slice(),
+			focus
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				id: __props.id,
 				ref_key: "rootRef",
 				ref: rootRef,
 				class: normalizeClass(["rs-split", [`rs-split--${__props.orientation}`, {
 					"rs-split--disabled": __props.disabled,
 					"rs-split--fill": __props.fill
-				}]])
+				}]]),
+				role: "group",
+				"aria-label": groupLabel.value
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.panes, (pane, index) => {
 				return openBlock(), createElementBlock(Fragment, { key: pane.key }, [createElementVNode("div", {
+					id: paneDomId(pane.key),
 					class: normalizeClass(["rs-split__pane", {
 						"rs-split__pane--collapsed": paneCollapsed(index),
 						"rs-split__pane--auto": autoFlags.value[index]
@@ -388,30 +490,36 @@ var RsSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				}, [renderSlot(_ctx.$slots, pane.key, {
 					size: sizes.value[index],
 					collapsed: paneCollapsed(index)
-				})], 14, _hoisted_1), index < resizerCount.value ? (openBlock(), createElementBlock("div", {
+				})], 14, _hoisted_2), index < resizerCount.value ? (openBlock(), createElementBlock("div", {
 					key: 0,
-					class: normalizeClass(["rs-split__resizer-host", { "rs-split__resizer-host--handle": resizerShowsHandle(index) }]),
+					class: normalizeClass(["rs-split__resizer-host", {
+						"rs-split__resizer-host--handle": resizerShowsHandle(index),
+						"rs-split__resizer-host--disabled": !resizerInteractive(index)
+					}]),
 					"data-resizer-index": index,
 					onPointerdown: ($event) => onResizerPointerDown(index, $event),
 					onPointermove: ($event) => onResizerPointerMove(index, $event),
 					onPointerup: ($event) => endDrag(index, $event),
-					onPointercancel: ($event) => endDrag(index, $event)
+					onPointercancel: ($event) => endDrag(index, $event),
+					onLostpointercapture: ($event) => onLostPointerCapture(index)
 				}, [createElementVNode("hr", {
 					class: normalizeClass(["rs-split__resizer", { "rs-split__resizer--handle": resizerShowsHandle(index) }]),
-					tabindex: __props.disabled ? -1 : 0,
+					tabindex: resizerInteractive(index) ? 0 : -1,
 					"aria-orientation": __props.orientation === "horizontal" ? "vertical" : "horizontal",
 					"aria-valuenow": Math.round(sizes.value[index] ?? 0),
 					"aria-valuemin": Math.round(constraints.value[index]?.min ?? 0),
 					"aria-valuemax": Math.round(constraints.value[index]?.max ?? 100),
-					"aria-label": unref(t)("split.resize"),
-					"aria-disabled": __props.disabled || void 0,
+					"aria-valuetext": resizerValueText(index),
+					"aria-controls": resizerControls(index),
+					"aria-label": resizerAriaLabel(index),
+					"aria-disabled": resizerInteractive(index) ? void 0 : true,
 					onKeydown: ($event) => onResizerKeydown(index, $event),
 					onDblclick: ($event) => onResizerDblClick(index)
-				}, null, 42, _hoisted_3), resizerShowsHandle(index) ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(RsIcon_default, {
+				}, null, 42, _hoisted_4), resizerShowsHandle(index) ? (openBlock(), createElementBlock("span", _hoisted_5, [createVNode(RsIcon_default, {
 					name: __props.orientation === "horizontal" ? "grip-vertical" : "grip-horizontal",
 					size: 12
-				}, null, 8, ["name"])])) : createCommentVNode("", true)], 42, _hoisted_2)) : createCommentVNode("", true)], 64);
-			}), 128))], 2);
+				}, null, 8, ["name"])])) : createCommentVNode("", true)], 42, _hoisted_3)) : createCommentVNode("", true)], 64);
+			}), 128))], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/split-pane/src/split-pane-utils.d.ts

@@ -23,6 +23,18 @@ export interface RsSplitPaneItem {
     collapsedSize?: number;
     /** 本面板右侧分隔条是否显示抓手；缺省时继承 RsSplitPane.withHandle */
     resizerHandle?: boolean;
+    /**
+     * 本面板右侧 / 下方分隔条是否可拖、可键盘调整。
+     * 默认 true；false 时缝仍渲染，但不能改尺寸。
+     */
+    resizable?: boolean;
+    /** 覆盖本缝的 aria-label；缺省走 split.resize */
+    resizerAriaLabel?: string;
+}
+/** 具名插槽参数：当前占比与是否折叠 */
+export interface RsSplitPaneSlot {
+    size: number;
+    collapsed: boolean;
 }
 /**
  * RsSplitPane 模板 ref 请用此类型。
@@ -33,6 +45,8 @@ export interface RsSplitPaneExpose {
     expand: (key: string, toSize?: number) => void;
     reset: () => void;
     getSizes: () => number[];
+    /** 聚焦第 index 条分隔条（默认第一条可交互缝） */
+    focus: (index?: number) => void;
 }
 /** 模板 ref 实例：expose + 根节点 */
 export type RsSplitPaneInstance = RsSplitPaneExpose & {
@@ -72,3 +86,12 @@ export declare function collapseSplitPane(sizes: number[], constraints: RsSplitC
 export declare function expandSplitPane(sizes: number[], constraints: RsSplitConstraint[], index: number, toSize?: number): number[];
 /** 两组尺寸是否近似相等（用于受控回写时避免抖动） */
 export declare function splitSizesEqual(a: number[], b: number[], epsilon?: number): boolean;
+/**
+ * RTL 下行方向主轴与视觉左右对调：指针 / 左右键的增量要取反，
+ * 分隔条才跟手、且符合 APG「方向键按物理方向移动分隔条」。
+ */
+export declare function invertSplitAxisDelta(orientation: RsSplitOrientation, rtl: boolean, delta: number): number;
+/** 面板 DOM id：给 separator 的 aria-controls 用 */
+export declare function splitPaneDomId(rootId: string, key: string): string;
+/** 第 index 条缝（pane[index] 右侧 / 下方）是否允许拖拽与键盘调整 */
+export declare function isSplitResizerInteractive(pane: RsSplitPaneItem | undefined, disabled: boolean): boolean;

package/dist/components/split-pane/src/split-pane-utils.js

@@ -131,5 +131,22 @@ function splitSizesEqual(a, b, epsilon = .01) {
 	if (a.length !== b.length) return false;
 	return a.every((value, index) => Math.abs(value - (b[index] ?? 0)) <= epsilon);
 }
+/**
+* RTL 下行方向主轴与视觉左右对调：指针 / 左右键的增量要取反，
+* 分隔条才跟手、且符合 APG「方向键按物理方向移动分隔条」。
+*/
+function invertSplitAxisDelta(orientation, rtl, delta) {
+	if (rtl && orientation === "horizontal") return -delta;
+	return delta;
+}
+/** 面板 DOM id：给 separator 的 aria-controls 用 */
+function splitPaneDomId(rootId, key) {
+	return `${rootId}-pane-${key.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
+/** 第 index 条缝（pane[index] 右侧 / 下方）是否允许拖拽与键盘调整 */
+function isSplitResizerInteractive(pane, disabled) {
+	if (disabled) return false;
+	return pane?.resizable !== false;
+}
 //#endregion
-export { applySplitResize, collapseSplitPane, expandSplitPane, isRsSplitPaneAutoSize, isSplitPaneCollapsed, normalizeSplitSizes, resolveSplitAutoFlags, resolveSplitConstraints, roundSize, splitSizesEqual };
+export { applySplitResize, collapseSplitPane, expandSplitPane, invertSplitAxisDelta, isRsSplitPaneAutoSize, isSplitPaneCollapsed, isSplitResizerInteractive, normalizeSplitSizes, resolveSplitAutoFlags, resolveSplitConstraints, roundSize, splitPaneDomId, splitSizesEqual };

package/dist/components/stat-card/index.d.ts

@@ -1 +1,2 @@
 export { default as RsStatCard } from './src/RsStatCard.js';
+export type { RsStatAccent, RsStatFormat, RsStatSize, RsStatTrend, RsStatTrendTone, } from './src/stat-card-utils';

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

@@ -1,51 +1,155 @@
 
-.rs-stat-card[data-v-96f97696] {
+.rs-stat-card[data-v-75b35569] {
+  --rs-stat-accent: var(--rs-primary);
   position: relative;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
   overflow: hidden;
   border: 1px solid var(--rs-border);
   border-radius: var(--rs-radius);
   background: var(--rs-surface);
   box-shadow: var(--rs-shadow-sm);
+  color: var(--rs-text-primary);
 }
-.rs-stat-card__accent[data-v-96f97696] {
-  height: 3px;
-  background: var(--rs-primary);
+.rs-stat-card--success[data-v-75b35569] {
+  --rs-stat-accent: var(--rs-success);
 }
-.rs-stat-card--success .rs-stat-card__accent[data-v-96f97696] {
-  background: var(--rs-success);
+.rs-stat-card--warning[data-v-75b35569] {
+  --rs-stat-accent: var(--rs-warning);
 }
-.rs-stat-card--warning .rs-stat-card__accent[data-v-96f97696] {
-  background: var(--rs-warning);
+.rs-stat-card--danger[data-v-75b35569] {
+  --rs-stat-accent: var(--rs-danger);
 }
-.rs-stat-card--danger .rs-stat-card__accent[data-v-96f97696] {
-  background: var(--rs-danger);
+.rs-stat-card--info[data-v-75b35569] {
+  --rs-stat-accent: var(--rs-info);
 }
-.rs-stat-card--info .rs-stat-card__accent[data-v-96f97696] {
-  background: var(--rs-info);
+.rs-stat-card__accent[data-v-75b35569] {
+  flex: none;
+  block-size: calc(var(--rs-space-xs) * 0.75);
+  background: var(--rs-stat-accent);
 }
-.rs-stat-card__body[data-v-96f97696] {
+.rs-stat-card__body[data-v-75b35569] {
   padding: var(--rs-space-lg);
 }
-.rs-stat-card__label[data-v-96f97696] {
-  color: var(--rs-muted);
+.rs-stat-card--sm .rs-stat-card__body[data-v-75b35569] {
+  padding: var(--rs-space-md);
+}
+.rs-stat-card--lg .rs-stat-card__body[data-v-75b35569] {
+  padding: var(--rs-space-xl);
+}
+.rs-stat-card__top[data-v-75b35569] {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--rs-space-sm);
+}
+.rs-stat-card__label[data-v-75b35569] {
+  margin: 0;
+  min-inline-size: 0;
+  color: var(--rs-text-secondary);
   font-size: var(--rs-font-size-sm);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-normal);
+}
+.rs-stat-card__icon[data-v-75b35569] {
+  display: inline-flex;
+  flex: none;
+  color: var(--rs-stat-accent);
 }
-.rs-stat-card__value[data-v-96f97696] {
-  margin-top: var(--rs-space-sm);
-  color: var(--rs-text);
+.rs-stat-card__value[data-v-75b35569] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--rs-space-xs);
+  margin-block-start: var(--rs-space-sm);
+  color: var(--rs-text-primary);
   font-size: var(--rs-font-size-3xl);
   font-weight: var(--rs-font-weight-bold);
-  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+  line-height: var(--rs-line-height-tight);
+  overflow-wrap: anywhere;
 }
-.rs-stat-card__description[data-v-96f97696] {
+.rs-stat-card--sm .rs-stat-card__value[data-v-75b35569] {
+  font-size: var(--rs-font-size-2xl);
+}
+.rs-stat-card--lg .rs-stat-card__value[data-v-75b35569] {
+  font-size: calc(var(--rs-font-size-3xl) + var(--rs-space-xs));
+}
+.rs-stat-card__affix[data-v-75b35569] {
+  color: var(--rs-text-secondary);
+  font-size: var(--rs-font-size-sm);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-normal);
+  white-space: nowrap;
+}
+.rs-stat-card__trend[data-v-75b35569] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--rs-space-xs);
   margin: var(--rs-space-sm) 0 0;
-  color: var(--rs-muted);
+  color: var(--rs-text-secondary);
   font-size: var(--rs-font-size-sm);
+  font-weight: var(--rs-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--rs-line-height-normal);
+}
+.rs-stat-card__trend--primary[data-v-75b35569] {
+  color: var(--rs-primary);
+}
+.rs-stat-card__trend--success[data-v-75b35569] {
+  color: var(--rs-success);
+}
+.rs-stat-card__trend--warning[data-v-75b35569] {
+  color: var(--rs-warning);
+}
+.rs-stat-card__trend--danger[data-v-75b35569] {
+  color: var(--rs-danger);
+}
+.rs-stat-card__trend--info[data-v-75b35569] {
+  color: var(--rs-info);
 }
-.rs-stat-card__skeleton[data-v-96f97696] {
-  width: 8rem;
-  height: 2rem;
-  margin-top: var(--rs-space-sm);
+.rs-stat-card__description[data-v-75b35569] {
+  margin: var(--rs-space-sm) 0 0;
+  color: var(--rs-text-secondary);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+}
+.rs-stat-card__skeleton[data-v-75b35569] {
+  position: relative;
+  inline-size: calc(var(--rs-space-xl) * 5);
+  block-size: var(--rs-font-size-3xl);
+  margin-block-start: var(--rs-space-sm);
   border-radius: var(--rs-radius-sm);
   background: var(--rs-surface-hover);
+  animation: rs-stat-card-pulse-75b35569 1.4s ease-in-out infinite;
+}
+.rs-stat-card--sm .rs-stat-card__skeleton[data-v-75b35569] {
+  inline-size: calc(var(--rs-space-xl) * 4);
+  block-size: var(--rs-font-size-2xl);
+}
+.rs-stat-card--lg .rs-stat-card__skeleton[data-v-75b35569] {
+  inline-size: calc(var(--rs-space-xl) * 6);
+}
+.rs-stat-card__sr[data-v-75b35569] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-stat-card__skeleton[data-v-75b35569] {
+    animation: none;
+}
+}
+@keyframes rs-stat-card-pulse-75b35569 {
+50% {
+    opacity: 0.55;
+}
 }