ensis-ui 0.0.0-stage → 3.0.0

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

@@ -0,0 +1,7 @@
+
+.rs-config-provider[data-v-baff9acb] {
+  color: var(--rs-text-primary);
+  background: var(--rs-bg);
+  height: 100%;
+  min-height: 0;
+}

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

@@ -0,0 +1,38 @@
+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;
+    /**
+     * 全局默认圆角：none 直角 / xs~lg / full。
+     * 未传时各组件保留自身默认；传入后覆盖未显式指定 radius 的控件。
+     */
+    controlRadius?: RsRadius;
+    /**
+     * global：主题与 dir 写到 document（默认，Portal 弹出层同步）
+     * local：写到 Provider 根节点
+     */
+    themeScope?: 'global' | 'local';
+};
+declare var __VLS_1: {};
+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;
+    controlSize: RsComponentSize;
+    themeScope: "global" | "local";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,89 @@
+import { resolveHostLocale } from "../../../locale/resolve-host.js";
+import { applyTheme, subscribePreferredColorScheme } from "../../../theme/apply.js";
+import { createRsConfigState, provideRsConfig } from "../../../composables/useRsConfig.js";
+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: {},
+		dir: { default: "auto" },
+		controlSize: { default: "md" },
+		controlRadius: {},
+		themeScope: { default: "global" }
+	},
+	setup(__props) {
+		const props = __props;
+		const rootEl = ref(null);
+		const config = createRsConfigState(props.theme, props.locale ?? resolveHostLocale(), 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() {
+			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);
+		});
+		watch(() => props.locale, (value) => {
+			if (value != null && 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, (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",
+				ref: rootEl,
+				class: "rs-config-provider"
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512);
+		};
+	}
+});
+//#endregion
+export { RsConfigProvider_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,8 @@
+import './RsConfigProvider.css'
+import RsConfigProvider_vue_vue_type_script_setup_true_lang_default from "./RsConfigProvider.impl.js";
+
+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-baff9acb"]]);
+//#endregion
+export { RsConfigProvider_default as default };

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

@@ -0,0 +1,2 @@
+export { default as RsContainer } from './src/RsContainer.js';
+export type { RsContainerBreakpoint, RsContainerGap, RsContainerMaxWidth, RsContainerMaybeResponsive, RsContainerPadding, RsContainerResponsive, } from './src/container-utils';

package/dist/components/container/src/RsContainer.css

@@ -0,0 +1,94 @@
+
+.rs-container[data-v-5a260e9d] {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: var(--rs-container-max-current, var(--rs-container-max-lg));
+  padding-inline: var(--rs-container-padding-current, var(--rs-space-md));
+}
+.rs-container--centered[data-v-5a260e9d] {
+  margin-inline: auto;
+}
+.rs-container--grid[data-v-5a260e9d] {
+  display: grid;
+  grid-template-columns: repeat(var(--rs-container-columns-current, 12), minmax(0, 1fr));
+  gap: var(--rs-container-gap-current, var(--rs-space-md));
+}
+@media (width >= 40rem) {
+.rs-container[data-v-5a260e9d] {
+    max-width: var(--rs-container-max-sm, var(--rs-container-max-current, var(--rs-container-max-lg)));
+    padding-inline: var(--rs-container-padding-sm, var(--rs-container-padding-current, var(--rs-space-md)));
+}
+.rs-container--grid[data-v-5a260e9d] {
+    grid-template-columns: repeat(
+      var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-sm, var(--rs-container-gap-current, var(--rs-space-md)));
+}
+}
+@media (width >= 48rem) {
+.rs-container[data-v-5a260e9d] {
+    max-width: var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current)));
+    padding-inline: var(
+      --rs-container-padding-md,
+      var(--rs-container-padding-sm, var(--rs-container-padding-current))
+    );
+}
+.rs-container--grid[data-v-5a260e9d] {
+    grid-template-columns: repeat(
+      var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12))),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current)));
+}
+}
+@media (width >= 64rem) {
+.rs-container[data-v-5a260e9d] {
+    max-width: var(
+      --rs-container-max-lg,
+      var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current)))
+    );
+    padding-inline: var(
+      --rs-container-padding-lg,
+      var(--rs-container-padding-md, var(--rs-container-padding-sm, var(--rs-container-padding-current)))
+    );
+}
+.rs-container--grid[data-v-5a260e9d] {
+    grid-template-columns: repeat(
+      var(
+        --rs-container-columns-lg,
+        var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)))
+      ),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-lg, var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current))));
+}
+}
+@media (width >= 80rem) {
+.rs-container[data-v-5a260e9d] {
+    max-width: var(
+      --rs-container-max-xl,
+      var(--rs-container-max-lg, var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current))))
+    );
+    padding-inline: var(
+      --rs-container-padding-xl,
+      var(--rs-container-padding-lg, var(--rs-container-padding-md, var(--rs-container-padding-sm, var(--rs-container-padding-current))))
+    );
+}
+.rs-container--grid[data-v-5a260e9d] {
+    grid-template-columns: repeat(
+      var(
+        --rs-container-columns-xl,
+        var(
+          --rs-container-columns-lg,
+          var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)))
+        )
+      ),
+      minmax(0, 1fr)
+    );
+    gap: var(
+      --rs-container-gap-xl,
+      var(--rs-container-gap-lg, var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current))))
+    );
+}
+}

package/dist/components/container/src/RsContainer.d.ts

@@ -0,0 +1,42 @@
+import { type RsContainerGap, type RsContainerMaxWidth, type RsContainerMaybeResponsive, type RsContainerPadding } from './container-utils';
+export type { RsContainerBreakpoint, RsContainerGap, RsContainerMaxWidth, RsContainerMaybeResponsive, RsContainerPadding, RsContainerResponsive, } from './container-utils';
+type __VLS_Props = {
+    /** 最大内容宽度；`fluid` 为 true 时忽略。 */
+    maxWidth?: RsContainerMaybeResponsive<RsContainerMaxWidth>;
+    /** 水平内边距。 */
+    padding?: RsContainerMaybeResponsive<RsContainerPadding>;
+    /** 是否在父级内水平居中。 */
+    centered?: boolean;
+    /** 占满父级宽度，忽略 `maxWidth`。 */
+    fluid?: boolean;
+    /** 根元素标签名。 */
+    tag?: string;
+    /** 启用栅格布局；未传 `columns` 时默认为 12 栅格。 */
+    grid?: boolean;
+    /** 栅格列数，支持响应式。 */
+    columns?: RsContainerMaybeResponsive<number>;
+    /** 栅格间距，支持响应式。 */
+    gap?: RsContainerMaybeResponsive<RsContainerGap>;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    maxWidth: RsContainerMaybeResponsive<RsContainerMaxWidth>;
+    padding: RsContainerMaybeResponsive<RsContainerPadding>;
+    centered: boolean;
+    fluid: boolean;
+    tag: string;
+    grid: boolean;
+    columns: RsContainerMaybeResponsive<number>;
+    gap: RsContainerMaybeResponsive<RsContainerGap>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/container/src/RsContainer.impl.js

@@ -0,0 +1,52 @@
+import { resolveRsContainerStyle } from "./container-utils.js";
+import { computed, createBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+//#region src/components/container/src/RsContainer.vue?vue&type=script&setup=true&lang.ts
+var RsContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsContainer",
+	__name: "RsContainer",
+	props: {
+		maxWidth: { default: "lg" },
+		padding: { default: "md" },
+		centered: {
+			type: Boolean,
+			default: true
+		},
+		fluid: {
+			type: Boolean,
+			default: false
+		},
+		tag: { default: "div" },
+		grid: {
+			type: Boolean,
+			default: false
+		},
+		columns: { default: 12 },
+		gap: { default: "md" }
+	},
+	setup(__props) {
+		const props = __props;
+		const rootClass = computed(() => ["rs-container", {
+			"rs-container--centered": props.centered,
+			"rs-container--grid": props.grid
+		}]);
+		const rootStyle = computed(() => resolveRsContainerStyle({
+			maxWidth: props.maxWidth,
+			padding: props.padding,
+			fluid: props.fluid,
+			grid: props.grid,
+			columns: props.columns,
+			gap: props.gap
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, ["class", "style"]);
+		};
+	}
+});
+//#endregion
+export { RsContainer_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/container/src/RsContainer.js

@@ -0,0 +1,8 @@
+import './RsContainer.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsContainer_vue_vue_type_script_setup_true_lang_default from "./RsContainer.impl.js";
+
+//#region src/components/container/src/RsContainer.vue
+var RsContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5a260e9d"]]);
+//#endregion
+export { RsContainer_default as default };

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

@@ -0,0 +1,23 @@
+export declare const RS_CONTAINER_BREAKPOINTS: readonly ["sm", "md", "lg", "xl"];
+export type RsContainerBreakpoint = (typeof RS_CONTAINER_BREAKPOINTS)[number];
+export declare const RS_CONTAINER_MAX_WIDTHS: readonly ["sm", "md", "lg", "xl", "full"];
+export type RsContainerMaxWidth = (typeof RS_CONTAINER_MAX_WIDTHS)[number];
+export declare const RS_CONTAINER_PADDINGS: readonly ["none", "sm", "md", "lg"];
+export type RsContainerPadding = (typeof RS_CONTAINER_PADDINGS)[number];
+export declare const RS_CONTAINER_GAPS: readonly ["none", "xs", "sm", "md", "lg", "xl"];
+export type RsContainerGap = (typeof RS_CONTAINER_GAPS)[number];
+export type RsContainerResponsive<T> = Partial<Record<RsContainerBreakpoint, T>>;
+export type RsContainerMaybeResponsive<T> = T | RsContainerResponsive<T>;
+export declare const RS_CONTAINER_SPACE_CSS: Record<RsContainerGap | RsContainerPadding, string>;
+export declare const RS_CONTAINER_MAX_WIDTH_CSS: Record<RsContainerMaxWidth, string>;
+export declare function isRsContainerResponsive<T>(value: RsContainerMaybeResponsive<T>): value is RsContainerResponsive<T>;
+export interface RsContainerStyleInput {
+    maxWidth: RsContainerMaybeResponsive<RsContainerMaxWidth>;
+    padding: RsContainerMaybeResponsive<RsContainerPadding>;
+    fluid: boolean;
+    grid: boolean;
+    columns: RsContainerMaybeResponsive<number>;
+    gap: RsContainerMaybeResponsive<RsContainerGap>;
+}
+/** 写入根节点的 CSS 变量。语义与原先 SFC 内联计算一致。 */
+export declare function resolveRsContainerStyle(input: RsContainerStyleInput): Record<string, string | number>;

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

@@ -0,0 +1,51 @@
+//#region src/components/container/src/container-utils.ts
+var RS_CONTAINER_BREAKPOINTS = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var RS_CONTAINER_SPACE_CSS = {
+	none: "0",
+	xs: "var(--rs-space-xs)",
+	sm: "var(--rs-space-sm)",
+	md: "var(--rs-space-md)",
+	lg: "var(--rs-space-lg)",
+	xl: "var(--rs-space-xl)"
+};
+var RS_CONTAINER_MAX_WIDTH_CSS = {
+	sm: "var(--rs-container-max-sm)",
+	md: "var(--rs-container-max-md)",
+	lg: "var(--rs-container-max-lg)",
+	xl: "var(--rs-container-max-xl)",
+	full: "var(--rs-container-max-full)"
+};
+function isRsContainerResponsive(value) {
+	return typeof value === "object" && value !== null;
+}
+function writeResponsiveVars(style, prefix, value, toCss) {
+	if (isRsContainerResponsive(value)) {
+		for (const bp of RS_CONTAINER_BREAKPOINTS) {
+			const item = value[bp];
+			if (item === void 0) continue;
+			const css = toCss(item);
+			if (css !== void 0) style[`${prefix}-${bp}`] = css;
+		}
+		return;
+	}
+	const css = toCss(value);
+	if (css !== void 0) style[`${prefix}-current`] = css;
+}
+/** 写入根节点的 CSS 变量。语义与原先 SFC 内联计算一致。 */
+function resolveRsContainerStyle(input) {
+	const style = {};
+	if (input.fluid) style["--rs-container-max-current"] = "none";
+	else writeResponsiveVars(style, "--rs-container-max", input.maxWidth, (item) => RS_CONTAINER_MAX_WIDTH_CSS[item]);
+	writeResponsiveVars(style, "--rs-container-padding", input.padding, (item) => RS_CONTAINER_SPACE_CSS[item]);
+	if (!input.grid) return style;
+	writeResponsiveVars(style, "--rs-container-columns", input.columns, (item) => typeof item === "number" ? item : void 0);
+	writeResponsiveVars(style, "--rs-container-gap", input.gap, (item) => RS_CONTAINER_SPACE_CSS[item]);
+	return style;
+}
+//#endregion
+export { RS_CONTAINER_BREAKPOINTS, RS_CONTAINER_MAX_WIDTH_CSS, RS_CONTAINER_SPACE_CSS, isRsContainerResponsive, resolveRsContainerStyle };

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RsContextMenu } from './src/RsContextMenu.js';
+export type { RsContextMenuExpose, RsContextMenuGetPopupContainer, RsContextMenuItem, RsContextMenuItemSlot, RsContextMenuItemType, RsContextMenuPoint, } from './src/context-menu-utils';

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

@@ -0,0 +1,204 @@
+
+/* 实底。半透明加 backdrop-filter 在 CEF GPU 崩溃后会被丢掉，菜单会透出下层。 */
+.rs-context-menu__portal {
+  display: contents;
+}
+.rs-context-menu__content,
+.rs-context-menu__sub-content {
+  position: fixed;
+  z-index: var(--rs-ctx-z);
+  box-sizing: border-box;
+  min-width: var(--rs-ctx-min-width);
+  max-width: min(var(--rs-ctx-max-width), calc(100vw - 1rem));
+  width: max-content;
+  padding: var(--rs-ctx-pad);
+  border-radius: var(--rs-ctx-radius);
+  border: 1px solid var(--rs-ctx-border);
+  background: var(--rs-ctx-bg);
+  box-shadow: var(--rs-ctx-shadow);
+  color: var(--rs-ctx-fg);
+  font-family: var(--rs-font-sans);
+  font-size: var(--rs-ctx-font-size);
+  line-height: var(--rs-line-height-tight);
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.rs-context-menu__content {
+  transform-origin: top left;
+}
+.rs-context-menu__content:not([data-placed]) {
+  visibility: hidden;
+  pointer-events: none;
+}
+.rs-context-menu__content[data-origin-x='right'][data-origin-y='top'] {
+  transform-origin: top right;
+}
+.rs-context-menu__content[data-origin-x='left'][data-origin-y='bottom'] {
+  transform-origin: bottom left;
+}
+.rs-context-menu__content[data-origin-x='right'][data-origin-y='bottom'] {
+  transform-origin: bottom right;
+}
+.rs-context-menu__content[data-placed] {
+  animation: rs-ctx-in var(--rs-ctx-motion-in) ease-out;
+}
+.rs-context-menu__sub-content[data-placed] {
+  animation: rs-ctx-sub-in var(--rs-ctx-motion-sub) ease-out;
+}
+.rs-context-menu__sub-content[data-origin-x='left'] {
+  transform-origin: left center;
+}
+.rs-context-menu__sub-content[data-origin-x='right'] {
+  transform-origin: right center;
+}
+@keyframes rs-ctx-in {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes rs-ctx-sub-in {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+.rs-context-menu--ssm {
+  --rs-ctx-item-height: 1.25rem;
+  --rs-ctx-font-size: var(--rs-font-size-xs);
+}
+.rs-context-menu--sm {
+  --rs-ctx-item-height: 1.5rem;
+  --rs-ctx-font-size: var(--rs-font-size-xs);
+}
+.rs-context-menu--md {
+  --rs-ctx-item-height: 2rem;
+  --rs-ctx-font-size: var(--rs-font-size-sm);
+}
+.rs-context-menu--lg {
+  --rs-ctx-item-height: 2.25rem;
+  --rs-ctx-font-size: var(--rs-font-size-sm);
+}
+.rs-context-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0.625rem 0 0;
+  min-height: var(--rs-ctx-item-height);
+  border: 0;
+  border-radius: var(--rs-ctx-item-radius);
+  background: transparent;
+  font: inherit;
+  font-size: var(--rs-ctx-font-size);
+  font-weight: var(--rs-font-weight-regular);
+  line-height: 1.2;
+  color: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: default;
+  appearance: none;
+  outline: none;
+  user-select: none;
+  transition:
+    background-color 0.08s ease-out,
+    color 0.08s ease-out;
+}
+.rs-context-menu__icon-cell {
+  flex-shrink: 0;
+  width: var(--rs-ctx-icon-col);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-ctx-muted);
+}
+.rs-context-menu__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+.rs-context-menu__label,
+.rs-context-menu__hint {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-context-menu__hint {
+  color: var(--rs-ctx-muted);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-context-menu__shortcut {
+  flex-shrink: 0;
+  margin-inline-start: 1.75rem;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-regular);
+  color: var(--rs-ctx-muted);
+  font-family: var(--rs-font-sans);
+}
+.rs-context-menu__arrow {
+  flex-shrink: 0;
+  margin-inline-start: 6px;
+  color: var(--rs-ctx-muted);
+}
+[dir='rtl'] .rs-context-menu__arrow {
+  transform: scaleX(-1);
+}
+.rs-context-menu__item[data-highlighted],
+.rs-context-menu__item[data-state='open'] {
+  background: var(--rs-ctx-item-active-bg);
+  color: var(--rs-ctx-item-active-fg);
+}
+.rs-context-menu__item[data-highlighted] .rs-context-menu__icon-cell,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__shortcut,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__arrow,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__hint,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__icon-cell,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__shortcut,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__arrow,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__hint {
+  color: var(--rs-ctx-item-active-muted);
+}
+.rs-context-menu__item:focus-visible {
+  outline: none;
+}
+.rs-context-menu__item--danger {
+  color: var(--rs-ctx-danger);
+}
+.rs-context-menu__item--danger .rs-context-menu__icon-cell {
+  color: var(--rs-ctx-danger);
+}
+.rs-context-menu__item[data-disabled] {
+  opacity: var(--rs-ctx-disabled-opacity);
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-context-menu__item {
+    transition: none;
+}
+}
+.rs-context-menu__separator {
+  height: 1px;
+  margin: 4px 0.375rem;
+  border: 0;
+  background: var(--rs-ctx-separator);
+}
+.rs-context-menu__group {
+  margin: 0;
+  padding: 0.375rem 0.75rem 0.125rem var(--rs-ctx-icon-col);
+  font-size: var(--rs-font-size-xs);
+  line-height: 1.2;
+  color: var(--rs-ctx-muted);
+  user-select: none;
+}