niuma-ui 2.0.3 → 2.0.9

package/dist/components/empty/src/RsEmpty.css

@@ -1,18 +1,53 @@
 
-.rs-empty {
+.rs-empty[data-v-15fa5815] {
+  --rs-empty-pad-block: calc(var(--rs-space-xl) + var(--rs-space-xl) + var(--rs-space-sm));
+  --rs-empty-pad-inline: var(--rs-space-xl);
+  --rs-empty-gap: var(--rs-space-md);
+  --rs-empty-border: var(--rs-border);
+  --rs-empty-bg: color-mix(in srgb, var(--rs-surface) 80%, var(--rs-bg));
+  --rs-empty-title: var(--rs-text-primary);
+  --rs-empty-description: var(--rs-text-secondary);
+  --rs-empty-icon-border: var(--rs-border);
+  --rs-empty-icon-bg: var(--rs-surface);
+  --rs-empty-icon-fg: var(--rs-text-secondary);
+  --rs-empty-icon-shadow: var(--rs-shadow-sm);
+  --rs-empty-icon-size: 3.5rem;
+  --rs-empty-figure-size: 5rem;
+  --rs-empty-title-size: var(--rs-font-size-sm);
+  --rs-empty-title-weight: var(--rs-font-weight-medium);
+  --rs-empty-desc-size: var(--rs-font-size-sm);
+  --rs-empty-illustration: var(--rs-text-tertiary);
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.75rem;
-  padding: 3.5rem 1.5rem;
+  gap: var(--rs-empty-gap);
+  padding-block: var(--rs-empty-pad-block);
+  padding-inline: var(--rs-empty-pad-inline);
   border-radius: var(--rs-empty-radius, var(--rs-radius));
-  border: 1px dashed var(--rs-border);
-  background: color-mix(in srgb, var(--rs-surface) 80%, var(--rs-bg));
+  border: 1px dashed var(--rs-empty-border);
+  background: var(--rs-empty-bg);
+  color: var(--rs-empty-description);
   text-align: center;
-  box-sizing: border-box;
 }
-.rs-empty--fill {
+.rs-empty--sm[data-v-15fa5815] {
+  --rs-empty-pad-block: var(--rs-space-xl);
+  --rs-empty-gap: var(--rs-space-sm);
+  --rs-empty-icon-size: 2.5rem;
+  --rs-empty-figure-size: 3.5rem;
+  --rs-empty-title-size: var(--rs-font-size-xs);
+  --rs-empty-desc-size: var(--rs-font-size-xs);
+}
+.rs-empty--lg[data-v-15fa5815] {
+  --rs-empty-pad-block: calc(var(--rs-space-xl) * 3);
+  --rs-empty-gap: var(--rs-space-lg);
+  --rs-empty-icon-size: 4.5rem;
+  --rs-empty-figure-size: 6.5rem;
+  --rs-empty-title-size: var(--rs-font-size-base);
+  --rs-empty-desc-size: var(--rs-font-size-base);
+}
+.rs-empty--fill[data-v-15fa5815] {
   flex: 1 1 auto;
   align-self: stretch;
   width: 100%;
@@ -23,30 +58,77 @@
   border-color: transparent;
   background: transparent;
 }
-.rs-empty__icon {
+.rs-empty__icon[data-v-15fa5815] {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 3.5rem;
-  height: 3.5rem;
+  color: var(--rs-empty-icon-fg);
+}
+.rs-empty__icon--badge[data-v-15fa5815] {
+  width: var(--rs-empty-icon-size);
+  height: var(--rs-empty-icon-size);
   border-radius: var(--rs-empty-icon-radius, var(--rs-radius-full));
-  border: 1px solid var(--rs-border);
-  background: var(--rs-surface);
-  color: var(--rs-muted);
-  box-shadow: var(--rs-shadow-sm);
+  border: 1px solid var(--rs-empty-icon-border);
+  background: var(--rs-empty-icon-bg);
+  box-shadow: var(--rs-empty-icon-shadow);
+}
+.rs-empty__icon--figure[data-v-15fa5815] {
+  width: var(--rs-empty-figure-size);
+  height: var(--rs-empty-figure-size);
+  color: var(--rs-empty-illustration);
+}
+.rs-empty__svg[data-v-15fa5815],
+.rs-empty__remote[data-v-15fa5815] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.rs-empty__remote[data-v-15fa5815] {
+  object-fit: contain;
 }
-.rs-empty__title {
+.rs-empty__text[data-v-15fa5815] {
+  max-width: 28rem;
+}
+.rs-empty__title[data-v-15fa5815] {
   margin: 0;
-  font-size: var(--rs-font-size-sm);
-  font-weight: var(--rs-font-weight-medium);
-  color: var(--rs-text);
+  font-size: var(--rs-empty-title-size);
+  font-weight: var(--rs-empty-title-weight);
+  color: var(--rs-empty-title);
 }
-.rs-empty__description {
+.rs-empty__description[data-v-15fa5815] {
   margin: 0;
-  font-size: var(--rs-font-size-sm);
-  color: var(--rs-muted);
+  font-size: var(--rs-empty-desc-size);
+  color: var(--rs-empty-description);
   line-height: var(--rs-line-height-normal);
 }
-.rs-empty__description--offset {
-  margin-top: 0.25rem;
+.rs-empty__description--offset[data-v-15fa5815] {
+  margin-block-start: var(--rs-space-xs);
+}
+.rs-empty__actions[data-v-15fa5815] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: var(--rs-space-sm);
+}
+@media (forced-colors: active) {
+.rs-empty[data-v-15fa5815] {
+    border-color: CanvasText;
+    background: Canvas;
+    color: CanvasText;
+}
+.rs-empty--fill[data-v-15fa5815] {
+    border-color: transparent;
+    background: transparent;
+}
+.rs-empty__icon--badge[data-v-15fa5815] {
+    border-color: CanvasText;
+    background: Canvas;
+    box-shadow: none;
+}
+.rs-empty__title[data-v-15fa5815],
+  .rs-empty__description[data-v-15fa5815],
+  .rs-empty__icon[data-v-15fa5815] {
+    color: CanvasText;
+}
 }

package/dist/components/empty/src/RsEmpty.d.ts

@@ -1,7 +1,9 @@
 import type { RsRadius } from '../../../theme/types';
+import { type RsEmptyPreset, type RsEmptySize } from './empty-utils';
 type __VLS_Props = {
-    description: string;
     title?: string;
+    /** 未传走 locale；显式空字符串隐藏描述。 */
+    description?: string;
     /**
      * 占满父级可用空间，并去除外层虚线框 / 背景。
      * 适合嵌在面板、列表、结果区内的空态。
@@ -12,15 +14,36 @@ type __VLS_Props = {
     radius?: RsRadius;
     /** 图标区圆角。默认 full（圆形）；直角 UI 传 `none`。 */
     iconRadius?: RsRadius;
+    /** 内置插图。`#image` / `#icon` / `image` 优先。 */
+    preset?: RsEmptyPreset;
+    /** 密度：sm 表格内 / md 默认 / lg 整页。不是控件四档，没有 ssm。 */
+    size?: RsEmptySize;
+    /** 自定义插图 URL。失败时回退 preset。不要传入 object URL 除非调用方自己 revoke。 */
+    image?: string;
+    /** 插图替代文本。装饰图请留空。 */
+    imageAlt?: string;
+    /** 覆盖插图边长。数字按 px。 */
+    imageSize?: number | string;
+    /** 无插槽且无 image 时是否画内置插图。 */
+    showImage?: boolean;
+    id?: string;
+    ariaLabel?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_1) => any;
+    image?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    icon?: (props: typeof __VLS_3) => any;
+} & {
+    title?: (props: typeof __VLS_5) => any;
+} & {
+    description?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     fill: boolean;
+    showImage: boolean;
 }, {}, {}, {}, 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/empty/src/RsEmpty.impl.js

@@ -1,41 +1,184 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
 import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString } from "vue";
+import { resolveRsEmptyDescription, resolveRsEmptyImageSizeCss, resolveRsEmptyLocaleKey, resolveRsEmptyPreset, resolveRsEmptySize, shouldShowRsEmptyDescription, shouldShowRsEmptyIllustration, shouldShowRsEmptyRemoteImage, shouldShowRsEmptyTitle, shouldUseRsEmptyBadgeChrome } from "./empty-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, useSlots, watch } from "vue";
 //#region src/components/empty/src/RsEmpty.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-empty__icon" };
-var _hoisted_2 = { class: "rs-empty__text" };
+var _hoisted_1 = ["id", "aria-label"];
+var _hoisted_2 = ["src", "alt"];
 var _hoisted_3 = {
+	key: 1,
+	class: "rs-empty__svg",
+	viewBox: "0 0 64 64",
+	fill: "none"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "rs-empty__svg",
+	viewBox: "0 0 64 64",
+	fill: "none"
+};
+var _hoisted_5 = {
+	key: 3,
+	class: "rs-empty__svg",
+	viewBox: "0 0 64 64",
+	fill: "none"
+};
+var _hoisted_6 = {
+	key: 1,
+	class: "rs-empty__text"
+};
+var _hoisted_7 = {
 	key: 0,
 	class: "rs-empty__title"
 };
+var _hoisted_8 = {
+	key: 2,
+	class: "rs-empty__actions"
+};
 var RsEmpty_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsEmpty",
 	__name: "RsEmpty",
 	props: {
-		description: {},
 		title: {},
+		description: {},
 		fill: {
 			type: Boolean,
 			default: false
 		},
 		radius: {},
-		iconRadius: {}
+		iconRadius: {},
+		preset: {},
+		size: {},
+		image: {},
+		imageAlt: {},
+		imageSize: {},
+		showImage: {
+			type: Boolean,
+			default: true
+		},
+		id: {},
+		ariaLabel: {}
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = useSlots();
+		const { t } = useRsI18n();
+		const failedImageSrc = ref(null);
+		const resolvedPreset = computed(() => resolveRsEmptyPreset(props.preset));
+		const resolvedSize = computed(() => resolveRsEmptySize(props.size));
 		const resolvedRadius = useResolvedRsRadius(() => props.radius, "md");
 		const resolvedIconRadius = useResolvedRsRadius(() => props.iconRadius, "full");
+		const hasIconSlot = computed(() => Boolean(slots.icon));
+		const hasImageSlot = computed(() => Boolean(slots.image));
+		const hasTitleSlot = computed(() => Boolean(slots.title));
+		const hasDescriptionSlot = computed(() => Boolean(slots.description));
+		const localeDescription = computed(() => t(resolveRsEmptyLocaleKey(resolvedPreset.value)));
+		const resolvedDescription = computed(() => resolveRsEmptyDescription(props.description, localeDescription.value));
+		const showTitle = computed(() => shouldShowRsEmptyTitle(props.title, hasTitleSlot.value));
+		const showDescription = computed(() => shouldShowRsEmptyDescription(resolvedDescription.value, hasDescriptionSlot.value));
+		const showText = computed(() => showTitle.value || showDescription.value);
+		const showIllustration = computed(() => shouldShowRsEmptyIllustration({
+			showImage: props.showImage,
+			hasIconSlot: hasIconSlot.value,
+			hasImageSlot: hasImageSlot.value
+		}));
+		const useBadgeChrome = computed(() => shouldUseRsEmptyBadgeChrome(hasIconSlot.value, hasImageSlot.value));
+		const showRemoteImage = computed(() => shouldShowRsEmptyRemoteImage({
+			image: props.image,
+			failedSrc: failedImageSrc.value,
+			hasIconSlot: hasIconSlot.value,
+			hasImageSlot: hasImageSlot.value
+		}));
+		const rootClass = computed(() => [
+			"rs-empty",
+			`rs-empty--${resolvedSize.value}`,
+			{ "rs-empty--fill": props.fill }
+		]);
+		const iconClass = computed(() => ({
+			"rs-empty__icon--badge": useBadgeChrome.value,
+			"rs-empty__icon--figure": !useBadgeChrome.value
+		}));
+		const figureStyle = computed(() => {
+			const size = resolveRsEmptyImageSizeCss(props.imageSize);
+			return size ? {
+				width: size,
+				height: size
+			} : void 0;
+		});
 		const rootStyle = computed(() => ({
 			"--rs-empty-radius": props.fill ? "0" : rsRadiusCss(resolvedRadius.value),
 			"--rs-empty-icon-radius": rsRadiusCss(resolvedIconRadius.value)
 		}));
+		const rootAriaLabel = computed(() => {
+			if (props.ariaLabel) return props.ariaLabel;
+			if (!showText.value) return t("empty.label");
+		});
+		const remoteAlt = computed(() => props.imageAlt ?? "");
+		watch(() => props.image, () => {
+			failedImageSrc.value = null;
+		});
+		function onImageError() {
+			failedImageSrc.value = props.image?.trim() || null;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(["rs-empty", { "rs-empty--fill": __props.fill }]),
-				style: normalizeStyle(rootStyle.value)
+				id: __props.id,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value),
+				role: "status",
+				"aria-label": rootAriaLabel.value
 			}, [
-				createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "icon")]),
-				createElementVNode("div", _hoisted_2, [__props.title ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("", true), createElementVNode("p", { class: normalizeClass(["rs-empty__description", { "rs-empty__description--offset": __props.title }]) }, toDisplayString(__props.description), 3)]),
-				renderSlot(_ctx.$slots, "default")
-			], 6);
+				showIllustration.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["rs-empty__icon", iconClass.value]),
+					style: normalizeStyle(figureStyle.value),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "image", {}, () => [renderSlot(_ctx.$slots, "icon", {}, () => [showRemoteImage.value ? (openBlock(), createElementBlock("img", {
+					key: 0,
+					class: "rs-empty__remote",
+					src: __props.image,
+					alt: remoteAlt.value,
+					onError: onImageError
+				}, null, 40, _hoisted_2)) : resolvedPreset.value === "simple" ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [createElementVNode("rect", {
+					x: "14",
+					y: "18",
+					width: "36",
+					height: "28",
+					rx: "4",
+					stroke: "currentColor",
+					"stroke-width": "1.75",
+					"stroke-dasharray": "3.5 2.5"
+				}, null, -1)])])) : resolvedPreset.value === "search" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [createElementVNode("circle", {
+					cx: "28",
+					cy: "28",
+					r: "12",
+					stroke: "currentColor",
+					"stroke-width": "1.75"
+				}, null, -1), createElementVNode("path", {
+					d: "M37 37 48 48",
+					stroke: "currentColor",
+					"stroke-width": "1.75",
+					"stroke-linecap": "round"
+				}, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [createElementVNode("rect", {
+					x: "13",
+					y: "16",
+					width: "38",
+					height: "32",
+					rx: "5",
+					stroke: "currentColor",
+					"stroke-width": "1.75"
+				}, null, -1), createElementVNode("path", {
+					d: "M22 28h20M22 36h14",
+					stroke: "currentColor",
+					"stroke-width": "1.75",
+					"stroke-linecap": "round"
+				}, null, -1)])]))], true)], true)], 6)) : createCommentVNode("", true),
+				showText.value ? (openBlock(), createElementBlock("div", _hoisted_6, [showTitle.value ? (openBlock(), createElementBlock("p", _hoisted_7, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)], true)])) : createCommentVNode("", true), showDescription.value ? (openBlock(), createElementBlock("p", {
+					key: 1,
+					class: normalizeClass(["rs-empty__description", { "rs-empty__description--offset": showTitle.value }])
+				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(resolvedDescription.value), 1)], true)], 2)) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true)
+			], 14, _hoisted_1);
 		};
 	}
 });

package/dist/components/empty/src/RsEmpty.js

@@ -1,7 +1,8 @@
 import './RsEmpty.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsEmpty_vue_vue_type_script_setup_true_lang_default from "./RsEmpty.impl.js";
 
 //#region src/components/empty/src/RsEmpty.vue
-var RsEmpty_default = RsEmpty_vue_vue_type_script_setup_true_lang_default;
+var RsEmpty_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsEmpty_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-15fa5815"]]);
 //#endregion
 export { RsEmpty_default as default };

package/dist/components/empty/src/empty-utils.d.ts

@@ -0,0 +1,28 @@
+export declare const RS_EMPTY_PRESETS: readonly ["default", "simple", "search"];
+export type RsEmptyPreset = (typeof RS_EMPTY_PRESETS)[number];
+export declare const RS_EMPTY_SIZES: readonly ["sm", "md", "lg"];
+export type RsEmptySize = (typeof RS_EMPTY_SIZES)[number];
+export type RsEmptyLocaleKey = 'empty.description' | 'empty.search';
+export declare function isRsEmptyPreset(value: unknown): value is RsEmptyPreset;
+export declare function isRsEmptySize(value: unknown): value is RsEmptySize;
+export declare function resolveRsEmptyPreset(preset?: RsEmptyPreset | null): RsEmptyPreset;
+export declare function resolveRsEmptySize(size?: RsEmptySize | null): RsEmptySize;
+export declare function resolveRsEmptyLocaleKey(preset: RsEmptyPreset): RsEmptyLocaleKey;
+/** 未传走 locale；显式 `''` 表示隐藏描述。 */
+export declare function resolveRsEmptyDescription(description: string | undefined, fallback: string): string;
+export declare function shouldShowRsEmptyTitle(title: string | undefined, hasTitleSlot: boolean): boolean;
+export declare function shouldShowRsEmptyDescription(description: string, hasDescriptionSlot: boolean): boolean;
+export declare function shouldShowRsEmptyIllustration(options: {
+    showImage: boolean;
+    hasIconSlot: boolean;
+    hasImageSlot: boolean;
+}): boolean;
+/** `#image` 整图替换；仅 `#icon` 时保留圆形徽章底。 */
+export declare function shouldUseRsEmptyBadgeChrome(hasIconSlot: boolean, hasImageSlot: boolean): boolean;
+export declare function shouldShowRsEmptyRemoteImage(options: {
+    image?: string;
+    failedSrc: string | null;
+    hasIconSlot: boolean;
+    hasImageSlot: boolean;
+}): boolean;
+export declare function resolveRsEmptyImageSizeCss(size?: number | string): string | undefined;

package/dist/components/empty/src/empty-utils.js

@@ -0,0 +1,55 @@
+//#region src/components/empty/src/empty-utils.ts
+var RS_EMPTY_PRESETS = [
+	"default",
+	"simple",
+	"search"
+];
+var RS_EMPTY_SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+function isRsEmptyPreset(value) {
+	return typeof value === "string" && RS_EMPTY_PRESETS.includes(value);
+}
+function isRsEmptySize(value) {
+	return typeof value === "string" && RS_EMPTY_SIZES.includes(value);
+}
+function resolveRsEmptyPreset(preset) {
+	return isRsEmptyPreset(preset) ? preset : "default";
+}
+function resolveRsEmptySize(size) {
+	return isRsEmptySize(size) ? size : "md";
+}
+function resolveRsEmptyLocaleKey(preset) {
+	return preset === "search" ? "empty.search" : "empty.description";
+}
+/** 未传走 locale；显式 `''` 表示隐藏描述。 */
+function resolveRsEmptyDescription(description, fallback) {
+	return description ?? fallback;
+}
+function shouldShowRsEmptyTitle(title, hasTitleSlot) {
+	return hasTitleSlot || Boolean(title);
+}
+function shouldShowRsEmptyDescription(description, hasDescriptionSlot) {
+	return hasDescriptionSlot || description !== "";
+}
+function shouldShowRsEmptyIllustration(options) {
+	return options.hasImageSlot || options.hasIconSlot || options.showImage;
+}
+/** `#image` 整图替换；仅 `#icon` 时保留圆形徽章底。 */
+function shouldUseRsEmptyBadgeChrome(hasIconSlot, hasImageSlot) {
+	return hasIconSlot && !hasImageSlot;
+}
+function shouldShowRsEmptyRemoteImage(options) {
+	const src = options.image?.trim();
+	if (!src || options.hasIconSlot || options.hasImageSlot) return false;
+	return src !== options.failedSrc;
+}
+function resolveRsEmptyImageSizeCss(size) {
+	if (size == null || size === "") return void 0;
+	if (typeof size === "number" && Number.isFinite(size)) return `${size}px`;
+	return String(size).trim() || void 0;
+}
+//#endregion
+export { RS_EMPTY_PRESETS, RS_EMPTY_SIZES, isRsEmptyPreset, isRsEmptySize, resolveRsEmptyDescription, resolveRsEmptyImageSizeCss, resolveRsEmptyLocaleKey, resolveRsEmptyPreset, resolveRsEmptySize, shouldShowRsEmptyDescription, shouldShowRsEmptyIllustration, shouldShowRsEmptyRemoteImage, shouldShowRsEmptyTitle, shouldUseRsEmptyBadgeChrome };

package/dist/components/fieldset/src/RsFieldset.css

@@ -1,74 +1,84 @@
 
-.rs-fieldset[data-v-b3043538] {
+.rs-fieldset[data-v-460cb31f] {
+  --rs-fieldset-line: var(--rs-fieldset-border);
   display: flex;
   flex-direction: column;
-  gap: var(--rs-fieldset-gap, var(--rs-space-md));
+  gap: var(--rs-fieldset-gap);
   box-sizing: border-box;
-  min-width: 0;
   min-inline-size: 0;
   margin: 0;
-  padding: var(--rs-space-md) var(--rs-space-lg) var(--rs-space-lg);
+  padding-block: var(--rs-space-md) var(--rs-space-lg);
+  padding-inline: var(--rs-space-lg);
   border-width: 1px;
   border-style: solid;
-  border-color: var(--rs-fieldset-border, var(--rs-border));
-  border-radius: var(--rs-fieldset-radius, var(--rs-radius-sm));
+  border-color: var(--rs-fieldset-line);
+  border-radius: var(--rs-fieldset-radius);
   background: transparent;
 }
-.rs-fieldset--sm[data-v-b3043538] {
-  gap: var(--rs-space-sm);
-  padding: var(--rs-space-sm) var(--rs-space-md) var(--rs-space-md);
+.rs-fieldset--sm[data-v-460cb31f] {
+  gap: var(--rs-fieldset-gap-sm);
+  padding-block: var(--rs-space-sm) var(--rs-space-md);
+  padding-inline: var(--rs-space-md);
 }
-.rs-fieldset--dashed[data-v-b3043538] {
+.rs-fieldset--dashed[data-v-460cb31f] {
   border-style: dashed;
 }
-.rs-fieldset--dotted[data-v-b3043538] {
+.rs-fieldset--dotted[data-v-460cb31f] {
   border-style: dotted;
 }
-.rs-fieldset--tone-subtle[data-v-b3043538] {
-  border-color: var(--rs-fieldset-border, var(--rs-border-subtle));
+.rs-fieldset--tone-subtle[data-v-460cb31f] {
+  --rs-fieldset-line: var(--rs-fieldset-border-subtle);
+}
+.rs-fieldset--tone-faded[data-v-460cb31f] {
+  --rs-fieldset-line: var(--rs-fieldset-border-faded);
 }
-.rs-fieldset--tone-faded[data-v-b3043538] {
-  border-color: color-mix(
-    in srgb,
-    var(--rs-fieldset-border, var(--rs-border)) 42%,
-    transparent
-  );
+.rs-fieldset[data-v-460cb31f]:disabled,
+.rs-fieldset--disabled[data-v-460cb31f] {
+  --rs-fieldset-line: var(--rs-fieldset-border-subtle);
 }
-.rs-fieldset__legend[data-v-b3043538] {
+.rs-fieldset--invalid[data-v-460cb31f],
+.rs-fieldset--invalid.rs-fieldset--disabled[data-v-460cb31f] {
+  --rs-fieldset-line: var(--rs-fieldset-border-invalid);
+}
+.rs-fieldset__legend[data-v-460cb31f] {
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-sm);
   float: none;
-  padding: 0 var(--rs-space-xs);
+  padding-inline: var(--rs-space-xs);
   margin: 0;
   font-size: var(--rs-fieldset-title-size, var(--rs-font-size-sm));
   font-weight: var(--rs-fieldset-title-weight, var(--rs-font-weight-semibold));
   line-height: var(--rs-line-height-tight);
-  color: var(--rs-text);
-  background: var(--rs-fieldset-legend-bg, var(--rs-surface));
+  color: var(--rs-fieldset-title);
+  background: var(--rs-fieldset-legend-bg);
 }
-.rs-fieldset__heading[data-v-b3043538] {
+.rs-fieldset__heading[data-v-460cb31f] {
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-xs);
-  min-width: 0;
+  min-inline-size: 0;
 }
-.rs-fieldset__title[data-v-b3043538] {
-  min-width: 0;
+.rs-fieldset__title[data-v-460cb31f] {
+  min-inline-size: 0;
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
 }
-.rs-fieldset--title-strong .rs-fieldset__legend[data-v-b3043538] {
-  color: var(--rs-text);
+.rs-fieldset__required[data-v-460cb31f] {
+  margin-inline-start: var(--rs-label-mark-gap);
+  color: var(--rs-danger);
 }
-.rs-fieldset--title-default .rs-fieldset__legend[data-v-b3043538] {
-  color: var(--rs-text);
+.rs-fieldset--title-strong .rs-fieldset__legend[data-v-460cb31f] {
+  color: var(--rs-fieldset-title-strong);
 }
-.rs-fieldset--title-muted .rs-fieldset__legend[data-v-b3043538] {
-  color: var(--rs-muted);
+.rs-fieldset--title-default .rs-fieldset__legend[data-v-460cb31f] {
+  color: var(--rs-fieldset-title);
 }
-.rs-fieldset__extra[data-v-b3043538] {
+.rs-fieldset--title-muted .rs-fieldset__legend[data-v-460cb31f] {
+  color: var(--rs-fieldset-title-muted);
+}
+.rs-fieldset__extra[data-v-460cb31f] {
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-xs);
@@ -76,17 +86,37 @@
   font-weight: var(--rs-font-weight-regular);
   color: var(--rs-muted);
 }
-.rs-fieldset__body[data-v-b3043538] {
+.rs-fieldset__body[data-v-460cb31f] {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-inline-size: 0;
   gap: inherit;
 }
-.rs-fieldset[data-v-b3043538]:disabled,
-.rs-fieldset--disabled[data-v-b3043538] {
-  border-color: var(--rs-border-subtle);
+.rs-fieldset__hint[data-v-460cb31f] {
+  margin: 0;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-regular);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-fieldset-hint);
 }
-.rs-fieldset:disabled .rs-fieldset__legend[data-v-b3043538],
-.rs-fieldset--disabled .rs-fieldset__legend[data-v-b3043538] {
+.rs-fieldset__error[data-v-460cb31f] {
+  margin: 0;
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-fieldset-error);
+}
+.rs-fieldset:disabled .rs-fieldset__legend[data-v-460cb31f],
+.rs-fieldset--disabled .rs-fieldset__legend[data-v-460cb31f] {
   color: var(--rs-muted);
 }
+.rs-fieldset__sr[data-v-460cb31f] {
+  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;
+}