niuma-ui 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ## [Unreleased]
 
+## [2.0.1] - 2026-09-21
+
 ### 变更
 
 - 单测放到对应模块的 `__tests__/`；跨组件冒烟仍留在 `src/__tests__/`。
@@ -15,6 +17,20 @@
 - 每个组件内部为 `index.ts` + `src/` + 可选 `style/` + `__tests__/`。
 - 表格 `src/` 再拆：`table-header` / `table-body` / `table-footer` / `composables` / `context` / `features` / `utils`。
 - 架构契约补齐目录规范：组件四槽、`src/` 再拆门槛、仓库根、`package.json` 发布面（`docs/components.md` §3）。
+- `:root` 不再默认暗色。未写属性时用浅色 token。暗色宿主请在 `index.html` 写 `data-rs-theme="dark"` 或 `theme="dark"`，避免首屏闪浅色。
+- `themePresets` 标明仅参考，不驱动画面。
+- 文字公开 token 改为 `--rs-text-primary` 等；`--rs-text` / `--rs-muted` / `--rs-placeholder` 降为别名。
+- 数据源品牌色移出通用 `styles.css`。需要官方色的宿主加 `import 'niuma-ui/brand-icons.css'`。
+
+### 新增
+
+- `RsConfigProvider` `theme` 支持 `system`，跟随 `prefers-color-scheme`。`applyTheme` 仍写解析后的 `data-rs-theme="light|dark"`，并标 `data-rs-theme-pref="system"`。
+- `resolveThemeMode` / `readResolvedTheme` / `useRsConfig().resolvedTheme`。无 `data-rs-theme` 时按浅色，与 Provider 默认一致。
+- 内置品牌图标名单 `rsBrandIconNames`；Lucide 走 `--rs-icon-color`。图形规则在 `src/icons/style/brand-icons.css`。
+- `registerRsLocale`：第三方登记 BCP-47 文案；缺 key 回退 en-US。
+- `RsConfigProvider dir`（`ltr` / `rtl` / `auto`），写入 `dir` / `lang` / `data-rs-dir`。
+- 高对比：`forced-colors` 下语义 token 映射系统色。
+- 可选 `niuma-ui/brand-icons.css`：数据源 mark 色。不引入则 mark 为 currentColor。
 
 ## [2.0.0] - 2026-09-21
 

package/README.en.md

@@ -15,7 +15,7 @@ Built for ops consoles, database workbenches, and internal admin UIs. Marketing
 
 ## Features
 
-- **Design tokens** — light / dark via `data-rs-theme` and CSS variables; hosts override a brand layer
+- **Design tokens** — light / dark / system via `data-rs-theme` and CSS variables; hosts override a brand layer
 - **Rs\* components** — Button, Form, Dialog, Table, Tree, Tabs, Anchor, and more
 - **Tooling** — Monaco, CodeMirror, xterm (import only on routes that need them)
 - **Accessibility** — [Reka UI](https://reka-ui.com/) underneath; apps depend only on `niuma-ui`

package/README.md

@@ -15,7 +15,7 @@ Vue 3 **工作台**设计系统：一致的 `Rs*` 组件与 `--rs-*` Token，以
 
 ## 特性
 
-- **Design Token**：明暗主题走 `data-rs-theme` 与 CSS 变量，宿主用品牌层覆盖
+- **Design Token**：明暗主题走 `data-rs-theme`（`light` / `dark` / `system`）与 CSS 变量，宿主用品牌层覆盖
 - **Rs\* 组件**：Button、Form、Dialog、Table、Tree、Tabs、Anchor 等
 - **专业工具**：Monaco、CodeMirror、xterm（只在用到的路由引入）
 - **无障碍**：底层 [Reka UI](https://reka-ui.com/)，应用只依赖 `niuma-ui`

package/dist/brand-icons.css

@@ -0,0 +1,40 @@
+/**
+ * 工作台品牌 mark 色（可选）。
+ * 用法：在 styles.css 之后 `import 'niuma-ui/brand-icons.css'`。
+ * 不引入时，mark 走 currentColor，与 Lucide 一致。
+ */
+
+:root:not([data-rs-theme]),
+[data-rs-theme='light'] {
+  --rs-icon-ftp-accent: #ea580c;
+  --rs-icon-ftp-on-accent: #ffffff;
+  --rs-icon-redis-accent: #dc382d;
+  --rs-icon-mongodb-accent: #47a248;
+  --rs-icon-vastbase-accent: #ff6f1a;
+  --rs-icon-mysql-accent: #4479a1;
+  --rs-icon-sqlite-accent: #003b57;
+  --rs-icon-dameng-accent: #0000d2;
+  --rs-icon-dameng-wave: #ec1b34;
+  --rs-icon-oracle-accent: #f80000;
+  --rs-icon-clickhouse-accent: #ffcc01;
+  --rs-icon-kingbase-accent: #c9151e;
+  --rs-icon-sqlserver-accent: #cc2927;
+  --rs-icon-postgres-accent: #336791;
+}
+
+[data-rs-theme='dark'] {
+  --rs-icon-ftp-accent: #fb923c;
+  --rs-icon-ftp-on-accent: #ffffff;
+  --rs-icon-redis-accent: #ff6f61;
+  --rs-icon-mongodb-accent: #5cb85c;
+  --rs-icon-vastbase-accent: #ff8a3d;
+  --rs-icon-mysql-accent: #5a9fd4;
+  --rs-icon-sqlite-accent: #5aafd4;
+  --rs-icon-dameng-accent: #4d4dff;
+  --rs-icon-dameng-wave: #ff4d63;
+  --rs-icon-oracle-accent: #ff4d4d;
+  --rs-icon-clickhouse-accent: #ffe066;
+  --rs-icon-kingbase-accent: #ff4d57;
+  --rs-icon-sqlserver-accent: #ff5a57;
+  --rs-icon-postgres-accent: #6a9ec4;
+}

package/dist/components/_shared/src/resolve-radius.js

@@ -1,5 +1,5 @@
-import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
 import { RS_RADIUS_CSS } from "../../../theme/types.js";
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
 import { computed } from "vue";
 //#region src/components/_shared/src/resolve-radius.ts
 /**

package/dist/components/button/src/RsButton.impl.js

@@ -1,5 +1,5 @@
-import RsIcon_default from "../../icon/src/RsIcon.js";
 import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
 import { resolveRsButtonTone, resolveRsButtonVariant } from "./button-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
 import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";

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

@@ -1,5 +1,5 @@
 
-.rs-cascader[data-v-05f0e9c1] {
+.rs-cascader[data-v-4b45dd5a] {
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-sm);
@@ -15,54 +15,54 @@
   font-size: var(--rs-font-size-sm);
   cursor: pointer;
 }
-.rs-cascader--sm[data-v-05f0e9c1] {
+.rs-cascader--sm[data-v-4b45dd5a] {
   height: var(--rs-control-height-sm);
 }
-.rs-cascader--lg[data-v-05f0e9c1] {
+.rs-cascader--lg[data-v-4b45dd5a] {
   height: var(--rs-control-height-lg);
 }
-.rs-cascader--disabled[data-v-05f0e9c1] {
+.rs-cascader--disabled[data-v-4b45dd5a] {
   opacity: 0.38;
   cursor: not-allowed;
 }
-.rs-cascader__placeholder[data-v-05f0e9c1] {
+.rs-cascader__placeholder[data-v-4b45dd5a] {
   flex: 1;
   color: var(--rs-muted);
-  text-align: left;
+  text-align: start;
 }
-.rs-cascader__value[data-v-05f0e9c1] {
+.rs-cascader__value[data-v-4b45dd5a] {
   flex: 1;
   overflow: hidden;
-  text-align: left;
+  text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-cascader__clear[data-v-05f0e9c1],
-.rs-cascader__icon[data-v-05f0e9c1] {
+.rs-cascader__clear[data-v-4b45dd5a],
+.rs-cascader__icon[data-v-4b45dd5a] {
   color: var(--rs-muted);
 }
-.rs-cascader__clear[data-v-05f0e9c1] {
+.rs-cascader__clear[data-v-4b45dd5a] {
   border: 0;
   background: transparent;
   cursor: pointer;
 }
-.rs-cascader__panel[data-v-05f0e9c1] {
+.rs-cascader__panel[data-v-4b45dd5a] {
   display: flex;
   min-height: 8rem;
   max-height: 16rem;
 }
-.rs-cascader__col[data-v-05f0e9c1] {
+.rs-cascader__col[data-v-4b45dd5a] {
   min-width: 8rem;
   margin: 0;
   padding: var(--rs-space-xs);
   overflow: auto;
-  border-right: 1px solid var(--rs-border);
+  border-inline-end: 1px solid var(--rs-border);
   list-style: none;
 }
-.rs-cascader__col[data-v-05f0e9c1]:last-child {
-  border-right: 0;
+.rs-cascader__col[data-v-4b45dd5a]:last-child {
+  border-inline-end: 0;
 }
-.rs-cascader__item[data-v-05f0e9c1] {
+.rs-cascader__item[data-v-4b45dd5a] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -71,11 +71,11 @@
   border-radius: var(--rs-radius-xs);
   cursor: pointer;
 }
-.rs-cascader__item--active[data-v-05f0e9c1],
-.rs-cascader__item[data-v-05f0e9c1]:hover:not(.rs-cascader__item--disabled) {
+.rs-cascader__item--active[data-v-4b45dd5a],
+.rs-cascader__item[data-v-4b45dd5a]:hover:not(.rs-cascader__item--disabled) {
   background: var(--rs-surface-hover);
 }
-.rs-cascader__item--disabled[data-v-05f0e9c1] {
+.rs-cascader__item--disabled[data-v-4b45dd5a] {
   opacity: 0.4;
   cursor: not-allowed;
 }

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-05f0e9c1"]]);
+var RsCascader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsCascader_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4b45dd5a"]]);
 //#endregion
 export { RsCascader_default as default };

package/dist/components/code-block/src/RsCodeBlock.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:code"?: ((value: string) => any) | undefined;
 }>, {
-    editable: boolean;
     lang: string;
+    editable: boolean;
     showBar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/code-editor/src/code-editor-utils.js

@@ -1,3 +1,4 @@
+import { readResolvedTheme } from "../../../theme/apply.js";
 //#region src/components/code-editor/src/code-editor-utils.ts
 var SUPPORTED_LANGUAGES = [
 	"plaintext",
@@ -50,8 +51,7 @@ function codeEditorLanguageLabel(language) {
 	return LANGUAGE_DISPLAY_NAME[lang] ?? lang;
 }
 function readDocumentTheme() {
-	if (typeof document === "undefined") return "dark";
-	return document.documentElement.dataset.rsTheme === "light" ? "light" : "dark";
+	return readResolvedTheme();
 }
 function resolveCodeEditorTheme(theme = "auto") {
 	return theme === "auto" ? readDocumentTheme() : theme;

package/dist/components/code-editor/src/code-mirror-lang.js

@@ -103,7 +103,7 @@ async function resolveCodeMirrorLanguage(lang, options) {
 	}
 }
 function isCodeMirrorLightTheme() {
-	return typeof document !== "undefined" && document.documentElement.dataset.rsTheme === "light";
+	return typeof document === "undefined" || document.documentElement.dataset.rsTheme !== "dark";
 }
 /** 预加载 CodeMirror 核心与目标语言包（供辅助窗口 reveal 前调用） */
 async function prewarmCodeMirrorEditor(language) {

package/dist/components/config-provider/src/RsConfigProvider.css

@@ -1,6 +1,6 @@
 
-.rs-config-provider[data-v-16401a38] {
-  color: var(--rs-text);
+.rs-config-provider[data-v-175ca1a4] {
+  color: var(--rs-text-primary);
   background: var(--rs-bg);
   height: 100%;
   min-height: 0;

package/dist/components/config-provider/src/RsConfigProvider.d.ts

@@ -1,8 +1,10 @@
-import { type RsLocale } from '../../../locale/types';
+import { type RsDirMode, type RsLocale } from '../../../locale/types';
 import type { RsComponentSize, RsRadius, RsThemeMode } from '../../../theme/types';
 type __VLS_Props = {
     theme?: RsThemeMode;
     locale?: RsLocale;
+    /** auto：跟 locale（ar / he 等为 rtl）；也可强制 ltr / rtl */
+    dir?: RsDirMode;
     /** 全局默认控件尺寸：ssm 极小 / sm 小号 / md 中号 / lg 大号 */
     controlSize?: RsComponentSize;
     /**
@@ -11,8 +13,8 @@ type __VLS_Props = {
      */
     controlRadius?: RsRadius;
     /**
-     * global：data-rs-theme 写到 document（默认，Portal 弹出层同步）
-     * local：写到 Provider 根节点（子树隔离，业务 CSS 可 scoped 到 .rs-app-*）
+     * global：主题与 dir 写到 document（默认，Portal 弹出层同步）
+     * local：写到 Provider 根节点
      */
     themeScope?: 'global' | 'local';
 };
@@ -21,6 +23,7 @@ type __VLS_Slots = {} & {
     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<{}>, {
+    dir: RsDirMode;
     theme: RsThemeMode;
     locale: RsLocale;
     controlSize: RsComponentSize;

package/dist/components/config-provider/src/RsConfigProvider.impl.js

@@ -1,13 +1,16 @@
 import { defaultLocale } from "../../../locale/types.js";
+import { applyTheme, subscribePreferredColorScheme } from "../../../theme/apply.js";
 import { createRsConfigState, provideRsConfig } from "../../../composables/useRsConfig.js";
-import { applyTheme } from "../../../theme/apply.js";
-import { createElementBlock, defineComponent, openBlock, ref, renderSlot, watch } from "vue";
+import { applyLocale } from "../../../locale/apply.js";
+import { createElementBlock, defineComponent, onBeforeUnmount, openBlock, ref, renderSlot, watch } from "vue";
 //#region src/components/config-provider/src/RsConfigProvider.vue?vue&type=script&setup=true&lang.ts
 var RsConfigProvider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsConfigProvider",
 	__name: "RsConfigProvider",
 	props: {
 		theme: { default: "light" },
 		locale: { default: defaultLocale },
+		dir: { default: "auto" },
 		controlSize: { default: "md" },
 		controlRadius: {},
 		themeScope: { default: "global" }
@@ -15,12 +18,30 @@ var RsConfigProvider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const props = __props;
 		const rootEl = ref(null);
-		const config = createRsConfigState(props.theme, props.locale, props.controlSize, props.controlRadius);
+		const config = createRsConfigState(props.theme, props.locale, props.controlSize, props.controlRadius, props.dir);
 		provideRsConfig(config);
+		let stopPreferred;
+		function chromeTarget() {
+			if (typeof document === "undefined") return void 0;
+			if (props.themeScope === "local" && rootEl.value) return rootEl.value;
+			return document.documentElement;
+		}
 		function syncTheme() {
-			if (typeof document === "undefined") return;
-			const el = props.themeScope === "local" && rootEl.value ? rootEl.value : document.documentElement;
+			const el = chromeTarget();
+			if (!el) return;
 			applyTheme(config.theme.value, el);
+			config.syncResolvedTheme();
+		}
+		function syncLocale() {
+			const el = chromeTarget();
+			if (!el) return;
+			applyLocale(config.locale.value, config.dir.value, el);
+		}
+		function bindPreferredListener(mode) {
+			stopPreferred?.();
+			stopPreferred = void 0;
+			if (mode !== "system") return;
+			stopPreferred = subscribePreferredColorScheme(syncTheme);
 		}
 		watch(() => props.theme, (value) => {
 			if (value !== config.theme.value) config.setTheme(value);
@@ -28,14 +49,33 @@ var RsConfigProvider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		watch(() => props.locale, (value) => {
 			if (value !== config.locale.value) config.setLocale(value);
 		});
+		watch(() => props.dir, (value) => {
+			if (value !== config.dir.value) config.setDir(value);
+		});
 		watch(() => props.controlSize, (value) => {
 			if (value && value !== config.controlSize.value) config.setControlSize(value);
 		});
 		watch(() => props.controlRadius, (value) => {
 			if (value !== config.controlRadius.value) config.setControlRadius(value);
 		});
-		watch(() => config.theme.value, syncTheme, { immediate: true });
-		watch(() => props.themeScope, syncTheme);
+		watch(() => config.theme.value, (mode) => {
+			syncTheme();
+			bindPreferredListener(mode);
+		}, { immediate: true });
+		watch([() => config.locale.value, () => config.dir.value], syncLocale, { immediate: true });
+		watch(() => props.themeScope, () => {
+			syncTheme();
+			syncLocale();
+		});
+		watch(rootEl, () => {
+			if (props.themeScope === "local") {
+				syncTheme();
+				syncLocale();
+			}
+		});
+		onBeforeUnmount(() => {
+			stopPreferred?.();
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref_key: "rootEl",

package/dist/components/config-provider/src/RsConfigProvider.js

@@ -3,6 +3,6 @@ import RsConfigProvider_vue_vue_type_script_setup_true_lang_default from "./RsCo
 
 import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 //#region src/components/config-provider/src/RsConfigProvider.vue
-var RsConfigProvider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsConfigProvider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-16401a38"]]);
+var RsConfigProvider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsConfigProvider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-175ca1a4"]]);
 //#endregion
 export { RsConfigProvider_default as default };

package/dist/components/context-menu/src/RsContextMenu.css

@@ -90,7 +90,7 @@ to {
 /* 键盘快捷键 */
 .rs-context-menu__shortcut {
   flex-shrink: 0;
-  margin-left: 16px;
+  margin-inline-start: 16px;
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-regular);
   color: var(--rs-ctx-shortcut);
@@ -101,7 +101,7 @@ to {
 /* 子菜单展开箭头 */
 .rs-context-menu__arrow {
   flex-shrink: 0;
-  margin-left: 6px;
+  margin-inline-start: 6px;
   color: var(--rs-ctx-icon);
 }
 

package/dist/components/date-picker/src/RsDatePicker.css

@@ -1,8 +1,8 @@
 
-.rs-date-picker[data-v-82aed16d] {
+.rs-date-picker[data-v-816760df] {
   width: 100%;
 }
-.rs-date-picker__trigger[data-v-82aed16d] {
+.rs-date-picker__trigger[data-v-816760df] {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -19,7 +19,7 @@
   font: inherit;
   font-size: var(--rs-font-size-sm);
   line-height: var(--rs-line-height-tight);
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   outline: none;
   box-shadow: var(--rs-input-shadow, none);
@@ -28,28 +28,28 @@
     box-shadow var(--rs-transition-fast),
     background var(--rs-transition-fast);
 }
-.rs-date-picker--ssm .rs-date-picker__trigger[data-v-82aed16d] {
+.rs-date-picker--ssm .rs-date-picker__trigger[data-v-816760df] {
   height: var(--rs-control-height-ssm);
   min-height: var(--rs-control-height-ssm);
   padding: 0 var(--rs-space-xs);
   font-size: var(--rs-font-size-xs);
 }
-.rs-date-picker--sm .rs-date-picker__trigger[data-v-82aed16d] {
+.rs-date-picker--sm .rs-date-picker__trigger[data-v-816760df] {
   height: var(--rs-control-height-sm);
   min-height: var(--rs-control-height-sm);
   padding: 0 var(--rs-space-sm);
   font-size: var(--rs-font-size-xs);
 }
-.rs-date-picker--lg .rs-date-picker__trigger[data-v-82aed16d] {
+.rs-date-picker--lg .rs-date-picker__trigger[data-v-816760df] {
   height: var(--rs-control-height-lg);
   min-height: var(--rs-control-height-lg);
   padding: 0 var(--rs-space-lg);
   font-size: var(--rs-font-size-base);
 }
-.rs-date-picker__trigger[data-v-82aed16d]:hover:not(:disabled) {
+.rs-date-picker__trigger[data-v-816760df]:hover:not(:disabled) {
   border-color: var(--rs-input-border-hover, var(--rs-border));
 }
-.rs-date-picker__trigger[data-v-82aed16d]:focus-visible {
+.rs-date-picker__trigger[data-v-816760df]:focus-visible {
   outline: none;
   border-color: var(--rs-focus-border, var(--rs-primary));
   background: var(--rs-input-bg);
@@ -57,42 +57,42 @@
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-date-picker__trigger[data-v-82aed16d]:disabled {
+.rs-date-picker__trigger[data-v-816760df]:disabled {
   opacity: 0.38;
   cursor: not-allowed;
 }
-.rs-date-picker__trigger--placeholder .rs-date-picker__value[data-v-82aed16d] {
+.rs-date-picker__trigger--placeholder .rs-date-picker__value[data-v-816760df] {
   color: var(--rs-placeholder);
 }
-.rs-date-picker__trigger--invalid[data-v-82aed16d] {
+.rs-date-picker__trigger--invalid[data-v-816760df] {
   border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
 }
-.rs-date-picker__trigger--invalid[data-v-82aed16d]:focus-visible {
+.rs-date-picker__trigger--invalid[data-v-816760df]:focus-visible {
   border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
   box-shadow:
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px)
       color-mix(in srgb, var(--rs-danger, #dc2626) 14%, transparent);
 }
-.rs-date-picker-field__error[data-v-82aed16d] {
+.rs-date-picker-field__error[data-v-816760df] {
   margin: var(--rs-space-xs) 0 0;
   color: var(--rs-danger, var(--rs-color-danger, #dc2626));
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-tight);
 }
-.rs-date-picker__leading[data-v-82aed16d] {
+.rs-date-picker__leading[data-v-816760df] {
   display: inline-flex;
   min-width: 0;
   flex: 1;
   align-items: center;
   gap: var(--rs-space-sm);
 }
-.rs-date-picker__icon[data-v-82aed16d],
-.rs-date-picker__chevron[data-v-82aed16d] {
+.rs-date-picker__icon[data-v-816760df],
+.rs-date-picker__chevron[data-v-816760df] {
   flex-shrink: 0;
   color: var(--rs-muted);
 }
-.rs-date-picker__value[data-v-82aed16d] {
+.rs-date-picker__value[data-v-816760df] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/components/date-picker/src/RsDatePicker.impl.js

@@ -1,6 +1,6 @@
+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 { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
 import { buildLocalInputRules, runFormFieldRules } from "../../form/src/form-rules.js";
 import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormItemContext } from "../../form/src/form-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";

package/dist/components/date-picker/src/RsDatePicker.js

@@ -5,6 +5,6 @@ import RsDatePicker_vue_vue_type_script_setup_true_lang_default from "./RsDatePi
 
 
 //#region src/components/date-picker/src/RsDatePicker.vue
-var RsDatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsDatePicker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-82aed16d"]]);
+var RsDatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsDatePicker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-816760df"]]);
 //#endregion
 export { RsDatePicker_default as default };

package/dist/components/dialog/src/RsDialog.css

@@ -246,8 +246,7 @@ to {
 }
 .rs-dialog__resize-handle--n,
 .rs-dialog__resize-handle--s {
-  left: 0.5rem;
-  right: 0.5rem;
+  inset-inline: 0.5rem;
   height: 0.5rem;
   cursor: ns-resize;
 }

package/dist/components/divider/src/RsDivider.css

@@ -1,51 +1,51 @@
 
-.rs-divider[data-v-b8b44303] {
+.rs-divider[data-v-f0cd895b] {
   flex-shrink: 0;
   box-sizing: border-box;
   border: 0;
   background: transparent;
 }
-.rs-divider--horizontal[data-v-b8b44303] {
+.rs-divider--horizontal[data-v-f0cd895b] {
   display: flex;
   align-items: center;
   width: 100%;
   margin: var(--rs-space-md) 0;
 }
-.rs-divider--horizontal[data-v-b8b44303]:not(.rs-divider--with-label)::before {
+.rs-divider--horizontal[data-v-f0cd895b]:not(.rs-divider--with-label)::before {
   content: '';
   display: block;
   width: 100%;
   border-top: 1px solid var(--rs-border);
 }
-.rs-divider--horizontal.rs-divider--dashed[data-v-b8b44303]:not(.rs-divider--with-label)::before {
+.rs-divider--horizontal.rs-divider--dashed[data-v-f0cd895b]:not(.rs-divider--with-label)::before {
   border-top-style: dashed;
 }
-.rs-divider--horizontal.rs-divider--with-label[data-v-b8b44303]::before,
-.rs-divider--horizontal.rs-divider--with-label[data-v-b8b44303]::after {
+.rs-divider--horizontal.rs-divider--with-label[data-v-f0cd895b]::before,
+.rs-divider--horizontal.rs-divider--with-label[data-v-f0cd895b]::after {
   content: '';
   flex: 1 1 auto;
   border-top: 1px solid var(--rs-border);
 }
-.rs-divider--horizontal.rs-divider--dashed.rs-divider--with-label[data-v-b8b44303]::before,
-.rs-divider--horizontal.rs-divider--dashed.rs-divider--with-label[data-v-b8b44303]::after {
+.rs-divider--horizontal.rs-divider--dashed.rs-divider--with-label[data-v-f0cd895b]::before,
+.rs-divider--horizontal.rs-divider--dashed.rs-divider--with-label[data-v-f0cd895b]::after {
   border-top-style: dashed;
 }
-.rs-divider__label[data-v-b8b44303] {
+.rs-divider__label[data-v-f0cd895b] {
   flex-shrink: 0;
   padding: 0 var(--rs-space-md);
   font-size: var(--rs-font-size-xs);
   color: var(--rs-muted);
   white-space: nowrap;
 }
-.rs-divider--vertical[data-v-b8b44303] {
+.rs-divider--vertical[data-v-f0cd895b] {
   display: inline-block;
   align-self: stretch;
   width: 0;
   min-height: 1em;
   margin: 0 var(--rs-space-md);
-  border-left: 1px solid var(--rs-border);
+  border-inline-start: 1px solid var(--rs-border);
   vertical-align: middle;
 }
-.rs-divider--vertical.rs-divider--dashed[data-v-b8b44303] {
-  border-left-style: dashed;
+.rs-divider--vertical.rs-divider--dashed[data-v-f0cd895b] {
+  border-inline-start-style: dashed;
 }

package/dist/components/divider/src/RsDivider.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsDivider_vue_vue_type_script_setup_true_lang_default from "./RsDivider.impl.js";
 
 //#region src/components/divider/src/RsDivider.vue
-var RsDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsDivider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b8b44303"]]);
+var RsDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsDivider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f0cd895b"]]);
 //#endregion
 export { RsDivider_default as default };

package/dist/components/drawer/src/RsDrawer.css

@@ -59,8 +59,7 @@
 }
 .rs-drawer__content--top > .rs-drawer__resize,
 .rs-drawer__content--bottom > .rs-drawer__resize {
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   height: 6px;
   cursor: ns-resize;
 }
@@ -122,8 +121,7 @@
 }
 .rs-drawer__content--top,
 .rs-drawer__content--bottom {
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   height: min(100vh, var(--rs-drawer-panel-size, 22rem));
 }
 .rs-drawer__content--contained:is(.rs-drawer__content--top, .rs-drawer__content--bottom) {

package/dist/components/dropdown/src/RsDropdown.css

@@ -65,7 +65,7 @@
 .rs-dropdown__value {
   flex: 1;
   min-width: 0;
-  text-align: left;
+  text-align: start;
 }
 .rs-dropdown__label {
   display: block;
@@ -111,7 +111,7 @@
   top: -0.55em;
   margin-bottom: 0.125rem;
   padding: 0 0.375rem;
-  margin-left: var(--rs-space-md);
+  margin-inline-start: var(--rs-space-md);
   width: fit-content;
   max-width: calc(100% - var(--rs-space-md) * 2);
   background: var(--rs-surface-elevated);