niuma-ui 2.0.3 → 2.0.4

package/dist/components/radio/src/RsRadio.d.ts

@@ -1,18 +1,21 @@
 import type { RsComponentSize } from '../../../theme/types';
-import { type RsRadioValue } from './radio-utils';
+import { type RsRadioOrientation, type RsRadioValue } from './radio-utils';
+export type { RsRadioOrientation, RsRadioValue };
 type __VLS_Props = {
     disabled?: boolean;
     size?: RsComponentSize;
     name?: string;
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: RsRadioOrientation;
+    /** 无障碍组名。选项文案不够说明整组时再传。 */
+    ariaLabel?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: RsRadioValue | undefined;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_10: {};
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: RsRadioValue) => any;
@@ -22,7 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: RsRadioValue | undefined) => any) | undefined;
 }>, {
     disabled: boolean;
-    orientation: "horizontal" | "vertical";
+    orientation: RsRadioOrientation;
 }, {}, {}, {}, 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/radio/src/RsRadio.impl.js

@@ -1,9 +1,15 @@
-import { RadioGroupRoot } from "../../_shared/src/reka.js";
+import { useRsFormContext } from "../../form/src/form-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
-import { RS_RADIO_GROUP_KEY } from "./radio-utils.js";
-import { computed, createBlock, defineComponent, mergeModels, normalizeClass, openBlock, provide, renderSlot, unref, useModel, withCtx } from "vue";
+import { RS_RADIO_GROUP_KEY, isRsRadioValueEqual, resolveRsRadioOrientation } from "./radio-utils.js";
+import { computed, createElementBlock, defineComponent, mergeModels, normalizeClass, openBlock, provide, renderSlot, useId, useModel } from "vue";
 //#region src/components/radio/src/RsRadio.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-orientation",
+	"aria-disabled",
+	"aria-label"
+];
 var RsRadio_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsRadio",
 	__name: "RsRadio",
 	props: /*@__PURE__*/ mergeModels({
 		disabled: {
@@ -12,7 +18,8 @@ var RsRadio_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		},
 		size: {},
 		name: {},
-		orientation: { default: "horizontal" }
+		orientation: { default: "horizontal" },
+		ariaLabel: {}
 	}, {
 		"modelValue": {
 			type: [
@@ -29,36 +36,39 @@ var RsRadio_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const model = useModel(__props, "modelValue");
 		const props = __props;
 		const emit = __emit;
+		const formContext = useRsFormContext();
+		const groupId = useId();
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
-		provide(RS_RADIO_GROUP_KEY, { size: resolvedSize });
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const resolvedOrientation = computed(() => resolveRsRadioOrientation(props.orientation));
+		const resolvedName = computed(() => props.name || groupId);
 		const rootClass = computed(() => [
 			"rs-radio-group",
-			`rs-radio-group--${props.orientation}`,
+			`rs-radio-group--${resolvedOrientation.value}`,
 			`rs-radio-group--${resolvedSize.value}`,
-			{ "rs-radio-group--disabled": props.disabled }
+			{ "rs-radio-group--disabled": resolvedDisabled.value }
 		]);
-		function onUpdate(value) {
+		function select(value) {
+			if (resolvedDisabled.value) return;
+			if (isRsRadioValueEqual(model.value, value)) return;
 			model.value = value;
 			emit("change", value);
 		}
+		provide(RS_RADIO_GROUP_KEY, {
+			size: resolvedSize,
+			disabled: resolvedDisabled,
+			name: resolvedName,
+			isChecked: (value) => isRsRadioValueEqual(model.value, value),
+			select
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(RadioGroupRoot), {
+			return openBlock(), createElementBlock("div", {
+				role: "radiogroup",
 				class: normalizeClass(rootClass.value),
-				"model-value": model.value,
-				disabled: __props.disabled,
-				name: __props.name,
-				orientation: __props.orientation,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => onUpdate($event))
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"class",
-				"model-value",
-				"disabled",
-				"name",
-				"orientation"
-			]);
+				"aria-orientation": resolvedOrientation.value,
+				"aria-disabled": resolvedDisabled.value || void 0,
+				"aria-label": __props.ariaLabel
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/radio/src/RsRadio.js

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

package/dist/components/radio/src/RsRadioItem.css

@@ -1,23 +1,40 @@
 
-.rs-radio {
-  display: inline-flex;
+.rs-radio[data-v-f460a126] {
+  --rs-radio-size: 1rem;
+  --rs-radio-dot: calc(var(--rs-radio-size) * 0.5);
+  position: relative;
+  display: flex;
   align-items: center;
   gap: var(--rs-space-xs);
+  min-height: var(--rs-control-height-md);
+  vertical-align: middle;
   cursor: pointer;
   user-select: none;
   line-height: 1;
 }
-.rs-radio--disabled {
+.rs-radio--disabled[data-v-f460a126] {
   cursor: not-allowed;
   opacity: 0.55;
 }
-.rs-radio__item {
+.rs-radio__input[data-v-f460a126] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.rs-radio__item[data-v-f460a126] {
   position: relative;
-  display: inline-flex;
+  display: block;
   flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
   box-sizing: border-box;
+  width: var(--rs-radio-size, 1rem);
+  height: var(--rs-radio-size, 1rem);
+  overflow: hidden;
   border: 1px solid var(--rs-border);
   border-radius: var(--rs-radius-full);
   background: var(--rs-surface);
@@ -27,64 +44,64 @@
     border-color var(--rs-transition-fast),
     background-color var(--rs-transition-fast);
 }
-.rs-radio--disabled .rs-radio__item {
+.rs-radio--disabled .rs-radio__item[data-v-f460a126] {
   cursor: not-allowed;
 }
-.rs-radio:hover:not(.rs-radio--disabled) .rs-radio__item:not([data-state='checked']) {
+.rs-radio:hover:not(.rs-radio--disabled) .rs-radio__item[data-v-f460a126]:not([data-state='checked']) {
   border-color: var(--rs-primary);
 }
-.rs-radio__item:focus-visible {
+.rs-radio__input:focus-visible + .rs-radio__item[data-v-f460a126] {
   box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-radio--ssm .rs-radio__item {
-  width: 0.75rem;
-  height: 0.75rem;
+.rs-radio--ssm[data-v-f460a126] {
+  --rs-radio-size: 0.75rem;
+  min-height: var(--rs-control-height-ssm);
 }
-.rs-radio--sm .rs-radio__item {
-  width: 0.875rem;
-  height: 0.875rem;
+.rs-radio--sm[data-v-f460a126] {
+  --rs-radio-size: 0.875rem;
+  min-height: var(--rs-control-height-sm);
 }
-.rs-radio--md .rs-radio__item {
-  width: 1rem;
-  height: 1rem;
+.rs-radio--md[data-v-f460a126] {
+  --rs-radio-size: 1rem;
+  min-height: var(--rs-control-height-md);
 }
-.rs-radio--lg .rs-radio__item {
-  width: 1.125rem;
-  height: 1.125rem;
+.rs-radio--lg[data-v-f460a126] {
+  --rs-radio-size: 1.125rem;
+  min-height: var(--rs-control-height-lg);
 }
-.rs-radio__item[data-state='checked'] {
+.rs-radio__item[data-state='checked'][data-v-f460a126] {
   border-color: var(--rs-primary);
 }
-.rs-radio__indicator {
-  display: block;
+.rs-radio__indicator[data-v-f460a126] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--rs-radio-dot, 0.5rem);
+  height: var(--rs-radio-dot, 0.5rem);
   border-radius: var(--rs-radius-full);
   background: var(--rs-primary);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity var(--rs-transition-fast);
 }
-.rs-radio--ssm .rs-radio__indicator {
-  width: 0.375rem;
-  height: 0.375rem;
-}
-.rs-radio--sm .rs-radio__indicator {
-  width: 0.4375rem;
-  height: 0.4375rem;
+.rs-radio__item[data-state='checked'] .rs-radio__indicator[data-v-f460a126] {
+  opacity: 1;
 }
-.rs-radio--md .rs-radio__indicator {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-.rs-radio--lg .rs-radio__indicator {
-  width: 0.5625rem;
-  height: 0.5625rem;
-}
-.rs-radio__label {
+.rs-radio__label[data-v-f460a126] {
   font-size: var(--rs-font-size-sm);
   line-height: var(--rs-line-height-normal);
   cursor: pointer;
 }
-.rs-radio--disabled .rs-radio__label {
+.rs-radio--disabled .rs-radio__label[data-v-f460a126] {
   cursor: not-allowed;
 }
-.rs-radio--ssm .rs-radio__label,
-.rs-radio--sm .rs-radio__label {
+.rs-radio--ssm .rs-radio__label[data-v-f460a126],
+.rs-radio--sm .rs-radio__label[data-v-f460a126] {
   font-size: var(--rs-font-size-xs);
 }
+@media (prefers-reduced-motion: reduce) {
+.rs-radio__item[data-v-f460a126],
+  .rs-radio__indicator[data-v-f460a126] {
+    transition: none;
+}
+}

package/dist/components/radio/src/RsRadioItem.d.ts

@@ -6,9 +6,9 @@ type __VLS_Props = {
     size?: RsComponentSize;
     id?: string;
 };
-declare var __VLS_12: {};
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;

package/dist/components/radio/src/RsRadioItem.impl.js

@@ -1,10 +1,23 @@
-import { RadioGroupIndicator, RadioGroupItem } from "../../_shared/src/reka.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
-import { RS_RADIO_GROUP_KEY } from "./radio-utils.js";
-import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, unref, useId, withCtx } from "vue";
+import { RS_RADIO_GROUP_KEY, rsRadioInputValue } from "./radio-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, unref, useId, useSlots, withModifiers } from "vue";
 //#region src/components/radio/src/RsRadioItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["for"];
+var _hoisted_2 = [
+	"id",
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"aria-label"
+];
+var _hoisted_3 = ["data-state"];
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-radio__label"
+};
 var RsRadioItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsRadioItem",
 	__name: "RsRadioItem",
 	props: {
 		value: { type: [
@@ -21,33 +34,53 @@ var RsRadioItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = useSlots();
 		const group = inject(RS_RADIO_GROUP_KEY, null);
 		const resolvedSize = useResolvedRsComponentSize(() => props.size ?? group?.size.value);
+		const hasText = computed(() => Boolean(slots.default));
 		const autoId = useId();
 		const inputId = computed(() => props.id || autoId);
+		const resolvedDisabled = computed(() => props.disabled || Boolean(group?.disabled.value));
+		const checked = computed(() => Boolean(group?.isChecked(props.value)));
+		const inputName = computed(() => group?.name.value || autoId);
+		const itemState = computed(() => checked.value ? "checked" : "unchecked");
 		const rootClass = computed(() => [
 			"rs-radio",
 			`rs-radio--${resolvedSize.value}`,
-			{ "rs-radio--disabled": props.disabled }
+			{
+				"rs-radio--checked": checked.value,
+				"rs-radio--disabled": resolvedDisabled.value
+			}
 		]);
+		function onChange(event) {
+			if (resolvedDisabled.value) return;
+			if (!event.target.checked) return;
+			group?.select(props.value);
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(rootClass.value) }, [createVNode(unref(RadioGroupItem), {
-				id: inputId.value,
-				class: "rs-radio__item",
-				value: __props.value,
-				disabled: __props.disabled
-			}, {
-				default: withCtx(() => [createVNode(unref(RadioGroupIndicator), { class: "rs-radio__indicator" })]),
-				_: 1
-			}, 8, [
-				"id",
-				"value",
-				"disabled"
-			]), _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
-				key: 0,
-				class: "rs-radio__label",
+			return openBlock(), createElementBlock("label", {
+				class: normalizeClass(rootClass.value),
 				for: inputId.value
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1)) : createCommentVNode("", true)], 2);
+			}, [
+				createElementVNode("input", {
+					id: inputId.value,
+					class: "rs-radio__input",
+					type: "radio",
+					name: inputName.value,
+					value: unref(rsRadioInputValue)(__props.value),
+					checked: checked.value,
+					disabled: resolvedDisabled.value,
+					"aria-label": hasText.value ? void 0 : unref(rsRadioInputValue)(__props.value),
+					onChange,
+					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+				}, null, 40, _hoisted_2),
+				createElementVNode("span", {
+					class: "rs-radio__item",
+					"data-state": itemState.value,
+					"aria-hidden": "true"
+				}, [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "rs-radio__indicator" }, null, -1)])], 8, _hoisted_3),
+				_ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true)
+			], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/radio/src/RsRadioItem.js

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

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

@@ -1,9 +1,20 @@
-import type { InjectionKey, Ref } from 'vue';
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
 import type { RsComponentSize } from '../../../theme/types';
 /** 单选值类型 */
 export type RsRadioValue = string | number | boolean;
+export declare const RS_RADIO_ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type RsRadioOrientation = (typeof RS_RADIO_ORIENTATIONS)[number];
+export declare function isRsRadioOrientation(value: unknown): value is RsRadioOrientation;
+export declare function resolveRsRadioOrientation(orientation?: RsRadioOrientation | null): RsRadioOrientation;
+export declare function isRsRadioValueEqual(left: RsRadioValue | undefined, right: RsRadioValue | undefined): boolean;
+/** 原生 radio 的 value 只能是 string；选型比较仍用原始 RsRadioValue。 */
+export declare function rsRadioInputValue(value: RsRadioValue): string;
 /** RadioGroup 向下注入的上下文 */
 export type RsRadioGroupContext = {
     size: Ref<RsComponentSize>;
+    disabled: ComputedRef<boolean>;
+    name: ComputedRef<string>;
+    isChecked: (value: RsRadioValue) => boolean;
+    select: (value: RsRadioValue) => void;
 };
 export declare const RS_RADIO_GROUP_KEY: InjectionKey<RsRadioGroupContext>;

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

@@ -1,4 +1,18 @@
 //#region src/components/radio/src/radio-utils.ts
+var RS_RADIO_ORIENTATIONS = ["horizontal", "vertical"];
+function isRsRadioOrientation(value) {
+	return typeof value === "string" && RS_RADIO_ORIENTATIONS.includes(value);
+}
+function resolveRsRadioOrientation(orientation) {
+	return isRsRadioOrientation(orientation) ? orientation : "horizontal";
+}
+function isRsRadioValueEqual(left, right) {
+	return left === right;
+}
+/** 原生 radio 的 value 只能是 string；选型比较仍用原始 RsRadioValue。 */
+function rsRadioInputValue(value) {
+	return `${value}`;
+}
 var RS_RADIO_GROUP_KEY = Symbol("rs-radio-group");
 //#endregion
-export { RS_RADIO_GROUP_KEY };
+export { RS_RADIO_GROUP_KEY, RS_RADIO_ORIENTATIONS, isRsRadioOrientation, isRsRadioValueEqual, resolveRsRadioOrientation, rsRadioInputValue };

package/dist/components/scrollbar/src/RsScrollbar.css

@@ -1,5 +1,5 @@
 
-.rs-scrollbar {
+.rs-scrollbar[data-v-507ffbba] {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -7,62 +7,109 @@
   border-radius: var(--rs-radius-sm);
   background: var(--rs-surface);
 }
-.rs-scrollbar__viewport {
+.rs-scrollbar__viewport[data-v-507ffbba] {
   width: 100%;
   height: 100%;
   border-radius: inherit;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
 }
-
-/* Reka 注入的 Primitive div。
-   必须用 height:100% 而非 min-height:100%：
-   只有父元素拥有"明确高度"时，子元素的 min-height:100% 才能解析（CSS 规范）。
-   height:100% 让 Primitive 与 viewport 等高（= 明确高度），
-   超出内容通过 overflow:visible 溢出 → viewport(overflow:scroll) 正常滚动。 */
-.rs-scrollbar__viewport > div {
-  height: 100%;
+.rs-scrollbar__viewport[data-v-507ffbba]::-webkit-scrollbar {
+  display: none;
 }
-
-/* rs-scrollbar__content 同理：height:100% = Primitive 的明确高度。
-   slot 内容若超出则溢出，滚动仍然工作；短内容时填满整个滚动区（空白可捕获右键）。 */
-.rs-scrollbar__content {
+.rs-scrollbar__content[data-v-507ffbba] {
   min-width: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.rs-scrollbar__bar {
+.rs-scrollbar__bar[data-v-507ffbba] {
+  --rs-scrollbar-thumb-size: 18px;
+  --rs-scrollbar-thumb-offset: 0px;
+  position: absolute;
   user-select: none;
   touch-action: none;
   display: flex;
   padding: var(--rs-scrollbar-padding);
   background: transparent;
-  transition: background var(--rs-transition-fast);
+  transition:
+    background var(--rs-transition-fast),
+    opacity var(--rs-transition-fast);
 }
-.rs-scrollbar__bar[data-orientation='vertical'] {
+.rs-scrollbar__bar[data-state='hidden'][data-v-507ffbba] {
+  opacity: 0;
+  pointer-events: none;
+}
+.rs-scrollbar__bar--vertical[data-v-507ffbba] {
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: var(--rs-scrollbar-corner, 0px);
   width: var(--rs-scrollbar-size);
 }
-.rs-scrollbar__bar[data-orientation='horizontal'] {
+.rs-scrollbar__bar--horizontal[data-v-507ffbba] {
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  inset-inline-end: var(--rs-scrollbar-corner, 0px);
   flex-direction: column;
   height: var(--rs-scrollbar-size);
 }
-.rs-scrollbar__bar:hover {
+.rs-scrollbar__bar[data-v-507ffbba]:hover {
   background: color-mix(in srgb, var(--rs-border-subtle) 80%, transparent);
 }
-.rs-scrollbar__thumb {
-  flex: 1;
+.rs-scrollbar__thumb[data-v-507ffbba] {
+  flex: 0 0 auto;
   border-radius: var(--rs-radius-full);
   background: color-mix(in srgb, var(--rs-muted) 60%, transparent);
   position: relative;
   transition: background var(--rs-transition-fast);
 }
-.rs-scrollbar__thumb::before {
+.rs-scrollbar__bar--vertical .rs-scrollbar__thumb[data-v-507ffbba] {
+  width: 100%;
+  height: var(--rs-scrollbar-thumb-size);
+  transform: translate3d(0, var(--rs-scrollbar-thumb-offset), 0);
+}
+.rs-scrollbar__bar--horizontal .rs-scrollbar__thumb[data-v-507ffbba] {
+  height: 100%;
+  width: var(--rs-scrollbar-thumb-size);
+  transform: translate3d(var(--rs-scrollbar-thumb-offset), 0, 0);
+}
+.rs-scrollbar__thumb[data-v-507ffbba]::before {
   content: '';
   position: absolute;
   inset: -0.375rem;
 }
-.rs-scrollbar__thumb:hover {
+.rs-scrollbar__thumb[data-v-507ffbba]:hover {
   background: color-mix(in srgb, var(--rs-primary) 40%, var(--rs-muted));
 }
-.rs-scrollbar__corner {
+.rs-scrollbar__corner[data-v-507ffbba] {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  width: var(--rs-scrollbar-size);
+  height: var(--rs-scrollbar-size);
   background: var(--rs-surface);
 }
+.rs-scrollbar__corner[data-state='hidden'][data-v-507ffbba] {
+  opacity: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-scrollbar__bar[data-v-507ffbba],
+  .rs-scrollbar__thumb[data-v-507ffbba] {
+    transition: none;
+}
+}
+@media (forced-colors: active) {
+.rs-scrollbar[data-v-507ffbba] {
+    border: 1px solid CanvasText;
+    background: Canvas;
+    forced-color-adjust: none;
+}
+.rs-scrollbar__thumb[data-v-507ffbba] {
+    background: GrayText;
+}
+.rs-scrollbar__thumb[data-v-507ffbba]:hover {
+    background: Highlight;
+}
+}

package/dist/components/scrollbar/src/RsScrollbar.d.ts

@@ -1,4 +1,5 @@
 import { type RsScrollbarOrientation, type RsScrollbarType } from './scrollbar-utils';
+export type { RsScrollbarOrientation, RsScrollbarType };
 type __VLS_Props = {
     type?: RsScrollbarType;
     scrollHideDelay?: number;
@@ -7,14 +8,17 @@ type __VLS_Props = {
     maxHeight?: string | number;
     minHeight?: string | number;
 };
-declare var __VLS_15: {};
+declare function scrollTop(): void;
+declare function scrollTopLeft(): void;
+declare function getViewport(): HTMLElement | undefined;
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
-    scrollTop: () => void | undefined;
-    scrollTopLeft: () => void | undefined;
-    getViewport: () => HTMLElement | undefined;
+    scrollTop: typeof scrollTop;
+    scrollTopLeft: typeof scrollTopLeft;
+    getViewport: typeof getViewport;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     type: RsScrollbarType;
     height: string | number;