niuma-ui 2.0.3 → 2.0.4

package/dist/components/cascader/src/RsCascader.impl.js

@@ -1,11 +1,20 @@
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
+import { useRsFormContext } from "../../form/src/form-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
-import RsPopover_default from "../../popover/src/RsPopover.js";
-import { cascaderColumns, cascaderDisplay, isCascaderLeaf } from "./cascader-utils.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
+import RsButton_default from "../../button/src/RsButton.js";
+import { placeAnchoredPopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
+import { cascaderColumns, cascaderDisplay, isCascaderLeaf, nextCascaderPath, popCascaderPath } from "./cascader-utils.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref, useId, useModel, useTemplateRef, watch, withModifiers } from "vue";
 //#region src/components/cascader/src/RsCascader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["disabled"];
+var _hoisted_1 = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls"
+];
 var _hoisted_2 = {
 	key: 0,
 	class: "rs-cascader__value"
@@ -14,7 +23,11 @@ var _hoisted_3 = {
 	key: 1,
 	class: "rs-cascader__placeholder"
 };
-var _hoisted_4 = ["aria-label"];
+var _hoisted_4 = [
+	"id",
+	"data-placement",
+	"data-rs-theme"
+];
 var _hoisted_5 = ["onClick", "onMouseenter"];
 var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RsCascader",
@@ -36,7 +49,9 @@ var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		},
 		expandTrigger: { default: "click" },
 		separator: { default: " / " },
-		size: {}
+		size: {},
+		ariaLabel: {},
+		id: {}
 	}, {
 		"modelValue": { default: () => [] },
 		"modelModifiers": {},
@@ -47,21 +62,60 @@ var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		"openModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue", "update:open"]),
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		const open = useModel(__props, "open");
 		const props = __props;
 		const emit = __emit;
 		const { t } = useRsI18n();
+		const formContext = useRsFormContext();
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const panelId = useId();
+		const triggerId = computed(() => props.id || panelId);
+		const triggerRef = useTemplateRef("triggerRef");
+		const panelRef = useTemplateRef("panelRef");
+		const rootRef = useTemplateRef("rootRef");
+		const highlight = ref(0);
+		const panelTheme = ref();
+		const popup = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			placement: "bottom"
+		});
+		const chevronSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const clearIconSize = RS_COMPONENT_SIZE_ICON_PX.ssm;
 		const columns = computed(() => cascaderColumns(props.options, model.value));
 		const display = computed(() => cascaderDisplay(props.options, model.value, props.separator));
+		const activeCol = computed(() => Math.max(0, columns.value.length - 1));
+		const activeOptions = computed(() => columns.value[activeCol.value] ?? []);
+		const highlighted = computed(() => activeOptions.value[highlight.value]);
+		const itemIconSize = computed(() => {
+			if (resolvedSize.value === "lg") return 16;
+			if (resolvedSize.value === "md") return 14;
+			return 12;
+		});
+		const triggerClass = computed(() => [
+			"rs-cascader",
+			`rs-cascader--${resolvedSize.value}`,
+			{
+				"rs-cascader--disabled": resolvedDisabled.value,
+				"rs-cascader--open": open.value
+			}
+		]);
+		const panelClass = computed(() => ["rs-cascader__panel", `rs-cascader__panel--${resolvedSize.value}`]);
+		const panelStyle = computed(() => ({
+			position: "fixed",
+			top: `${popup.value.top}px`,
+			left: `${popup.value.left}px`
+		}));
 		function isActive(depth, value) {
 			return String(model.value[depth] ?? "") === String(value);
 		}
 		function pick(depth, option) {
-			if (option.disabled) return;
-			const next = [...model.value.slice(0, depth), option.value];
+			if (option.disabled || resolvedDisabled.value) return;
+			const next = nextCascaderPath(model.value, depth, option.value);
 			model.value = next;
 			emit("change", next);
 			if (isCascaderLeaf(option) || props.changeOnSelect && props.expandTrigger === "click") {
@@ -70,32 +124,229 @@ var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		}
 		function onHover(depth, option) {
 			if (props.expandTrigger !== "hover" || option.disabled) return;
-			if (!isCascaderLeaf(option)) model.value = [...model.value.slice(0, depth), option.value];
+			if (!isCascaderLeaf(option)) model.value = nextCascaderPath(model.value, depth, option.value);
 		}
 		function onClear() {
+			if (resolvedDisabled.value) return;
 			model.value = [];
 			emit("change", []);
 		}
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(RsPopover_default, {
-				open: open.value,
-				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
-				side: "bottom",
-				align: "start",
-				width: "auto"
+		function focus() {
+			triggerRef.value?.focus();
+		}
+		function toggleOpen() {
+			if (resolvedDisabled.value) return;
+			open.value = !open.value;
+		}
+		function syncHighlight() {
+			const col = activeOptions.value;
+			const selected = model.value[activeCol.value];
+			const idx = col.findIndex((item) => String(item.value) === String(selected ?? ""));
+			highlight.value = idx >= 0 ? idx : stepEnabledIndex(col, -1, 1);
+		}
+		function syncPanelTheme() {
+			const el = triggerRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+		}
+		function placePopup() {
+			const trigger = triggerRef.value;
+			const panel = panelRef.value;
+			if (!trigger || !open.value || typeof window === "undefined") return;
+			const anchor = trigger.getBoundingClientRect();
+			const measured = panel?.getBoundingClientRect();
+			const prefWidth = Math.max(anchor.width, measured?.width || anchor.width);
+			popup.value = placeAnchoredPopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: prefWidth,
+				height: measured?.height || 256
 			}, {
-				content: withCtx(() => [createElementVNode("div", {
-					class: "rs-cascader__panel",
-					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		}
+		let frame = 0;
+		function requestPlace() {
+			if (typeof window === "undefined") return;
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!target) return;
+			if (rootRef.value?.contains(target)) return;
+			if (panelRef.value?.contains(target)) return;
+			open.value = false;
+		}
+		function onWindowChange() {
+			if (open.value) requestPlace();
+		}
+		function detachOverlay() {
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocPointerDown);
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
+		function moveHighlight(delta) {
+			highlight.value = stepEnabledIndex(activeOptions.value, highlight.value, delta);
+		}
+		function handleClosedKeys(event) {
+			if (event.key !== "ArrowDown" && event.key !== "Enter" && event.key !== " ") return false;
+			event.preventDefault();
+			open.value = true;
+			return true;
+		}
+		function handleOpenKeys(event) {
+			const col = activeOptions.value;
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				moveHighlight(1);
+				return true;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				moveHighlight(-1);
+				return true;
+			}
+			if (event.key === "Home") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(col, -1, 1);
+				return true;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(col, col.length, -1);
+				return true;
+			}
+			if (event.key === "ArrowRight" && highlighted.value && !isCascaderLeaf(highlighted.value)) {
+				event.preventDefault();
+				pick(activeCol.value, highlighted.value);
+				return true;
+			}
+			if (event.key === "ArrowLeft" && model.value.length) {
+				event.preventDefault();
+				model.value = popCascaderPath(model.value);
+				return true;
+			}
+			if (event.key === "Enter" && highlighted.value) {
+				event.preventDefault();
+				pick(activeCol.value, highlighted.value);
+				return true;
+			}
+			return false;
+		}
+		function onTriggerKeydown(event) {
+			if (resolvedDisabled.value || event.isComposing) return;
+			if (event.key === "Escape" && open.value) {
+				event.preventDefault();
+				open.value = false;
+				return;
+			}
+			if (!open.value) {
+				handleClosedKeys(event);
+				return;
+			}
+			handleOpenKeys(event);
+		}
+		watch(open, (isOpen) => {
+			if (typeof document === "undefined" || typeof window === "undefined") return;
+			if (isOpen) {
+				if (resolvedDisabled.value) {
+					open.value = false;
+					return;
+				}
+				syncPanelTheme();
+				syncHighlight();
+				document.addEventListener("pointerdown", onDocPointerDown);
+				window.addEventListener("resize", onWindowChange);
+				window.addEventListener("scroll", onWindowChange, true);
+				nextTick(() => requestPlace());
+				return;
+			}
+			detachOverlay();
+		});
+		watch(columns, () => {
+			if (!open.value) return;
+			syncHighlight();
+			requestPlace();
+		});
+		onBeforeUnmount(detachOverlay);
+		__expose({ focus });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["rs-cascader-wrap", { "rs-cascader-wrap--clearable": __props.allowClear && display.value && !resolvedDisabled.value }])
+			}, [
+				createElementVNode("button", {
+					id: triggerId.value,
+					ref_key: "triggerRef",
+					ref: triggerRef,
+					type: "button",
+					class: normalizeClass(triggerClass.value),
+					disabled: resolvedDisabled.value,
+					"aria-label": __props.ariaLabel,
+					"aria-haspopup": "listbox",
+					"aria-expanded": open.value ? "true" : "false",
+					"aria-controls": open.value ? unref(panelId) : void 0,
+					onClick: toggleOpen,
+					onKeydown: onTriggerKeydown
+				}, [display.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(display.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.placeholder ?? unref(t)("select.placeholder")), 1)), createVNode(RsIcon_default, {
+					name: "chevron-down",
+					size: chevronSize.value,
+					class: "rs-cascader__icon",
+					"aria-hidden": "true"
+				}, null, 8, ["size"])], 42, _hoisted_1),
+				__props.allowClear && display.value && !resolvedDisabled.value ? (openBlock(), createBlock(RsButton_default, {
+					key: 0,
+					class: "rs-cascader__clear",
+					variant: "text",
+					bordered: false,
+					size: "ssm",
+					radius: "full",
+					icon: "x",
+					"icon-size": unref(clearIconSize),
+					"icon-only": "",
+					"aria-label": unref(t)("select.clear"),
+					onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+					onClick: withModifiers(onClear, ["stop"])
+				}, null, 8, ["icon-size", "aria-label"])) : createCommentVNode("", true),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [open.value && !resolvedDisabled.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(panelId),
+					ref_key: "panelRef",
+					ref: panelRef,
+					class: normalizeClass(panelClass.value),
+					"data-placement": popup.value.placement,
+					"data-rs-theme": panelTheme.value,
+					style: normalizeStyle(panelStyle.value),
+					onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col, depth) => {
 					return openBlock(), createElementBlock("ul", {
 						key: depth,
 						class: "rs-cascader__col"
-					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(col, (opt) => {
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(col, (opt, index) => {
 						return openBlock(), createElementBlock("li", {
 							key: String(opt.value),
 							class: normalizeClass(["rs-cascader__item", {
 								"rs-cascader__item--active": isActive(depth, opt.value),
+								"rs-cascader__item--highlight": depth === activeCol.value && index === highlight.value,
 								"rs-cascader__item--disabled": opt.disabled
 							}]),
 							onClick: ($event) => pick(depth, opt),
@@ -103,34 +354,12 @@ var RsCascader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						}, [createElementVNode("span", null, toDisplayString(opt.label), 1), !unref(isCascaderLeaf)(opt) ? (openBlock(), createBlock(RsIcon_default, {
 							key: 0,
 							name: "chevron-right",
-							size: 12
-						})) : createCommentVNode("", true)], 42, _hoisted_5);
+							size: itemIconSize.value,
+							"aria-hidden": "true"
+						}, null, 8, ["size"])) : createCommentVNode("", true)], 42, _hoisted_5);
 					}), 128))]);
-				}), 128))], 32)]),
-				default: withCtx(() => [createElementVNode("button", {
-					type: "button",
-					class: normalizeClass(["rs-cascader", [`rs-cascader--${unref(resolvedSize)}`, { "rs-cascader--disabled": __props.disabled }]]),
-					disabled: __props.disabled
-				}, [
-					display.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(display.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.placeholder ?? unref(t)("select.placeholder")), 1)),
-					__props.allowClear && display.value && !__props.disabled ? (openBlock(), createElementBlock("button", {
-						key: 2,
-						type: "button",
-						class: "rs-cascader__clear",
-						"aria-label": unref(t)("select.clear"),
-						onClick: withModifiers(onClear, ["stop"])
-					}, [createVNode(RsIcon_default, {
-						name: "x",
-						size: 12
-					})], 8, _hoisted_4)) : createCommentVNode("", true),
-					createVNode(RsIcon_default, {
-						name: "chevron-down",
-						size: 14,
-						class: "rs-cascader__icon"
-					})
-				], 10, _hoisted_1)]),
-				_: 1
-			}, 8, ["open"]);
+				}), 128))], 46, _hoisted_4)) : createCommentVNode("", true)]))
+			], 2);
 		};
 	}
 });

package/dist/components/cascader/src/RsCascader.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsCascader_vue_vue_type_script_setup_true_lang_default from "./RsCascader.impl.js";
 
 //#region src/components/cascader/src/RsCascader.vue
-var RsCascader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCascader_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4b45dd5a"]]);
+var RsCascader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCascader_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8c1435b6"]]);
 //#endregion
 export { RsCascader_default as default };

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

@@ -14,3 +14,5 @@ export declare function cascaderColumns(options: readonly RsCascaderOption[], pa
 export declare function cascaderLabels(options: readonly RsCascaderOption[], path: RsCascaderPath): string[];
 export declare function cascaderDisplay(options: readonly RsCascaderOption[], path: RsCascaderPath, separator?: string): string;
 export declare function isCascaderLeaf(option: RsCascaderOption): boolean;
+export declare function nextCascaderPath(path: RsCascaderPath, depth: number, value: RsSelectValue): RsCascaderPath;
+export declare function popCascaderPath(path: RsCascaderPath): RsCascaderPath;

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

@@ -35,5 +35,12 @@ function isCascaderLeaf(option) {
 	if (option.isLeaf === false) return false;
 	return !option.children?.length;
 }
+function nextCascaderPath(path, depth, value) {
+	return [...path.slice(0, depth), value];
+}
+function popCascaderPath(path) {
+	if (path.length <= 1) return [];
+	return path.slice(0, -1);
+}
 //#endregion
-export { cascaderColumns, cascaderDisplay, cascaderLabels, findCascaderOption, isCascaderLeaf };
+export { cascaderColumns, cascaderDisplay, cascaderLabels, findCascaderOption, isCascaderLeaf, nextCascaderPath, popCascaderPath };

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

@@ -1 +1,2 @@
 export { default as RsCheckbox } from './src/RsCheckbox.js';
+export type { RsCheckboxExpose, RsCheckboxInstance } from './src/RsCheckbox.js';

package/dist/components/checkbox/src/RsCheckbox.css

@@ -1,5 +1,5 @@
 
-.rs-checkbox {
+.rs-checkbox[data-v-5e521b70] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -10,11 +10,11 @@
   user-select: none;
   color: var(--rs-text);
 }
-.rs-checkbox--disabled {
+.rs-checkbox--disabled[data-v-5e521b70] {
   cursor: not-allowed;
   opacity: 0.55;
 }
-.rs-checkbox__input {
+.rs-checkbox__input[data-v-5e521b70] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -25,7 +25,7 @@
   white-space: nowrap;
   border: 0;
 }
-.rs-checkbox__box {
+.rs-checkbox__box[data-v-5e521b70] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -33,56 +33,56 @@
   flex-shrink: 0;
   box-sizing: border-box;
   border: 1px solid var(--rs-border);
-  border-radius: var(--rs-radius-xs, 4px);
+  border-radius: var(--rs-radius-xs);
   background: var(--rs-surface);
   transition:
-    border-color var(--rs-transition-fast, 0.12s ease),
-    background-color var(--rs-transition-fast, 0.12s ease);
+    border-color var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
 }
-.rs-checkbox--ssm .rs-checkbox__box {
+.rs-checkbox--ssm .rs-checkbox__box[data-v-5e521b70] {
   width: 0.75rem;
   height: 0.75rem;
 }
-.rs-checkbox--sm .rs-checkbox__box {
+.rs-checkbox--sm .rs-checkbox__box[data-v-5e521b70] {
   width: 0.875rem;
   height: 0.875rem;
 }
-.rs-checkbox--md .rs-checkbox__box {
+.rs-checkbox--md .rs-checkbox__box[data-v-5e521b70] {
   width: 1rem;
   height: 1rem;
 }
-.rs-checkbox--lg .rs-checkbox__box {
+.rs-checkbox--lg .rs-checkbox__box[data-v-5e521b70] {
   width: 1.125rem;
   height: 1.125rem;
 }
-.rs-checkbox:hover:not(.rs-checkbox--disabled) .rs-checkbox__box {
+.rs-checkbox:hover:not(.rs-checkbox--disabled) .rs-checkbox__box[data-v-5e521b70] {
   border-color: var(--rs-primary);
 }
-.rs-checkbox--checked .rs-checkbox__box,
-.rs-checkbox--indeterminate .rs-checkbox__box {
+.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70],
+.rs-checkbox--indeterminate .rs-checkbox__box[data-v-5e521b70] {
   border-color: var(--rs-primary);
   background: var(--rs-primary);
 }
-.rs-checkbox--checked .rs-checkbox__box::after {
+.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70]::after {
   content: '';
   position: absolute;
   top: 42%;
   left: 50%;
   width: 0.28rem;
   height: 0.5rem;
-  border: solid var(--rs-primary-foreground, #fff);
+  border: solid var(--rs-primary-foreground);
   border-width: 0 2px 2px 0;
   transform: translate(-50%, -50%) rotate(45deg);
 }
-.rs-checkbox--ssm.rs-checkbox--checked .rs-checkbox__box::after {
+.rs-checkbox--ssm.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70]::after {
   width: 0.2rem;
   height: 0.36rem;
 }
-.rs-checkbox--sm.rs-checkbox--checked .rs-checkbox__box::after {
+.rs-checkbox--sm.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70]::after {
   width: 0.24rem;
   height: 0.42rem;
 }
-.rs-checkbox--indeterminate .rs-checkbox__box::after {
+.rs-checkbox--indeterminate .rs-checkbox__box[data-v-5e521b70]::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -91,14 +91,37 @@
   height: 2px;
   border: 0;
   border-radius: 1px;
-  background: var(--rs-primary-foreground, #fff);
+  background: var(--rs-primary-foreground);
   transform: translate(-50%, -50%);
 }
-.rs-checkbox__label {
+.rs-checkbox__label[data-v-5e521b70] {
   font-size: var(--rs-font-size-sm);
   line-height: var(--rs-line-height-normal);
 }
-.rs-checkbox--ssm .rs-checkbox__label,
-.rs-checkbox--sm .rs-checkbox__label {
+.rs-checkbox--ssm .rs-checkbox__label[data-v-5e521b70],
+.rs-checkbox--sm .rs-checkbox__label[data-v-5e521b70] {
   font-size: var(--rs-font-size-xs);
 }
+@media (prefers-reduced-motion: reduce) {
+.rs-checkbox__box[data-v-5e521b70] {
+    transition: none;
+}
+}
+@media (forced-colors: active) {
+.rs-checkbox__box[data-v-5e521b70] {
+    border-color: ButtonText;
+    background: Field;
+    forced-color-adjust: none;
+}
+.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70],
+  .rs-checkbox--indeterminate .rs-checkbox__box[data-v-5e521b70] {
+    border-color: Highlight;
+    background: Highlight;
+}
+.rs-checkbox--checked .rs-checkbox__box[data-v-5e521b70]::after {
+    border-color: HighlightText;
+}
+.rs-checkbox--indeterminate .rs-checkbox__box[data-v-5e521b70]::after {
+    background: HighlightText;
+}
+}

package/dist/components/checkbox/src/RsCheckbox.d.ts

@@ -1,4 +1,11 @@
 import type { RsComponentSize } from '../../../theme/types';
+export interface RsCheckboxExpose {
+    focus: () => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsCheckboxInstance = RsCheckboxExpose & {
+    $el: HTMLElement;
+};
 type __VLS_Props = {
     /** 半选（仅视觉；点击仍按 model 取反） */
     indeterminate?: boolean;
@@ -7,6 +14,8 @@ type __VLS_Props = {
     /** 无障碍名称；有默认插槽文案时可省略 */
     ariaLabel?: string;
     id?: string;
+    name?: string;
+    required?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;
@@ -16,13 +25,14 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsCheckboxExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: boolean) => any;
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onChange?: ((value: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
+    required: boolean;
     disabled: boolean;
     indeterminate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;