ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/_shared/src/overlay-utils.js

@@ -0,0 +1,130 @@
+//#region src/components/_shared/src/overlay-utils.ts
+var RS_TOAST_DEFAULT_POSITION = "top-center";
+/** 多条 Toast 之间的垂直间距（px） */
+var RS_TOAST_DEFAULT_GAP = 4;
+var rsToastPositions = [
+	"top-center",
+	"top-left",
+	"top-right",
+	"bottom-center",
+	"bottom-left",
+	"bottom-right"
+];
+function rsFeedbackIconClass(tone) {
+	return `rs-feedback-icon rs-feedback-icon--${tone}`;
+}
+/**
+* 把浮层贴到锚点：优先下方，视口不够则翻到上方，左右夹进窗口。
+* 对齐 WAI-ARIA APG 浮层惯例与 CSS overflow 避让，不跟某一家组件库的 API。
+*/
+function placeAnchoredPopup(anchor, popup, viewport, gap = 4) {
+	const below = anchor.top + anchor.height + gap;
+	const above = anchor.top - popup.height - gap;
+	const placement = below + popup.height <= viewport.height || above < gap ? "bottom" : "top";
+	const top = placement === "bottom" ? below : Math.max(gap, above);
+	const width = Math.min(popup.width, Math.max(0, viewport.width - gap * 2));
+	const maxLeft = Math.max(gap, viewport.width - width - gap);
+	return {
+		top,
+		left: Math.min(Math.max(gap, anchor.left), maxLeft),
+		width,
+		placement
+	};
+}
+/**
+* 把浮层贴到锚点侧面：默认右侧，视口不够则翻到左侧，上下夹进窗口。
+* 折叠导航 flyout 用；不要在各组件再写一套 left/top。
+*/
+function placeSidePopup(anchor, popup, viewport, gap = 8, preferred = "right") {
+	const anchorWidth = anchor.width ?? 0;
+	const right = anchor.left + anchorWidth + gap;
+	const leftPos = anchor.left - popup.width - gap;
+	const roomRight = right + popup.width <= viewport.width - gap;
+	const roomLeft = leftPos >= gap;
+	let placement = preferred;
+	if (preferred === "right" && !roomRight && roomLeft) placement = "left";
+	if (preferred === "left" && !roomLeft && roomRight) placement = "right";
+	const width = Math.min(popup.width, Math.max(0, viewport.width - gap * 2));
+	const rawLeft = placement === "right" ? right : leftPos;
+	const maxLeft = Math.max(gap, viewport.width - width - gap);
+	const left = Math.min(Math.max(gap, rawLeft), maxLeft);
+	const maxTop = Math.max(gap, viewport.height - popup.height - gap);
+	return {
+		top: Math.min(Math.max(gap, anchor.top), maxTop),
+		left,
+		width,
+		placement
+	};
+}
+var RS_OVERLAY_OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/**
+* 把浮层贴到锚点四侧：主轴放不下就翻到对侧，交叉轴按 start / center / end，再夹进视口。
+* 横向的 start / end 在 RTL 对调；left / right 是物理方向，不跟书写方向对调。
+*/
+function placeAlignedPopup(anchor, popup, viewport, options = {}) {
+	const side = options.side ?? "bottom";
+	const align = options.align ?? "start";
+	const sideOffset = options.sideOffset ?? 6;
+	const alignOffset = options.alignOffset ?? 0;
+	const padding = options.padding ?? 8;
+	const rtl = options.rtl ?? false;
+	const anchorWidth = anchor.width ?? 0;
+	const popupWidth = Math.max(0, popup.width);
+	const popupHeight = Math.max(0, popup.height);
+	const fits = (candidate) => {
+		if (candidate === "bottom") return anchor.top + anchor.height + sideOffset + popupHeight <= viewport.height - padding;
+		if (candidate === "top") return anchor.top - sideOffset - popupHeight >= padding;
+		if (candidate === "right") return anchor.left + anchorWidth + sideOffset + popupWidth <= viewport.width - padding;
+		return anchor.left - sideOffset - popupWidth >= padding;
+	};
+	const resolved = !fits(side) && fits(RS_OVERLAY_OPPOSITE[side]) ? RS_OVERLAY_OPPOSITE[side] : side;
+	const cross = (resolved === "top" || resolved === "bottom") && rtl && align !== "center" ? align === "start" ? "end" : "start" : align;
+	let top = anchor.top;
+	let left = anchor.left;
+	if (resolved === "bottom") top = anchor.top + anchor.height + sideOffset;
+	else if (resolved === "top") top = anchor.top - popupHeight - sideOffset;
+	else if (resolved === "right") left = anchor.left + anchorWidth + sideOffset;
+	else left = anchor.left - popupWidth - sideOffset;
+	if (resolved === "top" || resolved === "bottom") if (cross === "end") left = anchor.left + anchorWidth - popupWidth - alignOffset;
+	else if (cross === "center") left = anchor.left + (anchorWidth - popupWidth) / 2 + alignOffset;
+	else left = anchor.left + alignOffset;
+	else if (cross === "end") top = anchor.top + anchor.height - popupHeight - alignOffset;
+	else if (cross === "center") top = anchor.top + (anchor.height - popupHeight) / 2 + alignOffset;
+	else top = anchor.top + alignOffset;
+	const maxLeft = Math.max(padding, viewport.width - popupWidth - padding);
+	const maxTop = Math.max(padding, viewport.height - popupHeight - padding);
+	return {
+		top: Math.min(Math.max(padding, top), maxTop),
+		left: Math.min(Math.max(padding, left), maxLeft),
+		side: resolved,
+		align
+	};
+}
+/** 视口坐标换成容器内坐标。容器是 body / 文档根时保持视口坐标（position: fixed）。 */
+function toContainerPoint(top, left, origin) {
+	if (!origin) return {
+		top,
+		left
+	};
+	return {
+		top: top - origin.top,
+		left: left - origin.left
+	};
+}
+/** 在可选项里按方向跳过 disabled，供 combobox / listbox 方向键与 Home / End。 */
+function stepEnabledIndex(options, current, delta) {
+	if (!options.length) return 0;
+	let index = current;
+	for (let n = 0; n < options.length; n += 1) {
+		index = (index + delta + options.length) % options.length;
+		if (!options[index]?.disabled) return index;
+	}
+	return Math.max(0, current);
+}
+//#endregion
+export { RS_TOAST_DEFAULT_GAP, RS_TOAST_DEFAULT_POSITION, placeAlignedPopup, placeAnchoredPopup, placeSidePopup, rsFeedbackIconClass, rsToastPositions, stepEnabledIndex, toContainerPoint };

package/dist/components/_shared/src/resolve-radius.d.ts

@@ -0,0 +1,9 @@
+import { type ComputedRef } from 'vue';
+import { type RsRadius } from '../../../theme/types';
+/**
+ * 解析圆角：props → ConfigProvider.controlRadius → 组件默认档。
+ * 业务应传 `radius` / `iconRadius` 或依赖全局配置，避免 :deep 改 border-radius。
+ */
+export declare function useResolvedRsRadius(radius: () => RsRadius | undefined, fallback: RsRadius): ComputedRef<RsRadius>;
+/** 将档位转为可写入 style / CSS 变量的值。 */
+export declare function rsRadiusCss(radius: RsRadius): string;

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

@@ -0,0 +1,18 @@
+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
+/**
+* 解析圆角：props → ConfigProvider.controlRadius → 组件默认档。
+* 业务应传 `radius` / `iconRadius` 或依赖全局配置，避免 :deep 改 border-radius。
+*/
+function useResolvedRsRadius(radius, fallback) {
+	const config = useRsConfigOptional();
+	return computed(() => radius() ?? config?.controlRadius.value ?? fallback);
+}
+/** 将档位转为可写入 style / CSS 变量的值。 */
+function rsRadiusCss(radius) {
+	return RS_RADIUS_CSS[radius];
+}
+//#endregion
+export { rsRadiusCss, useResolvedRsRadius };

package/dist/components/_shared/src/resolve-size.d.ts

@@ -0,0 +1,10 @@
+import { type ComputedRef } from 'vue';
+import type { RsComponentSize } from '../../../theme/types';
+import { type RsFormContext } from '../../form/src/form-utils';
+/**
+ * 解析控件尺寸：props → Form → ConfigProvider → md。
+ * 业务应传 `size` 或依赖全局/表单上下文，避免 :deep 改高度。
+ */
+export declare function resolveRsComponentSize(size: RsComponentSize | undefined, form?: RsFormContext | null): ComputedRef<RsComponentSize>;
+/** 在 setup 内便捷解析（自动读 Form / Config）。 */
+export declare function useResolvedRsComponentSize(size: () => RsComponentSize | undefined): ComputedRef<RsComponentSize>;

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

@@ -0,0 +1,20 @@
+import { useRsConfigOptional } from "../../../composables/useRsConfig.js";
+import { useRsFormContext } from "../../form/src/form-utils.js";
+import { computed } from "vue";
+//#region src/components/_shared/src/resolve-size.ts
+/**
+* 解析控件尺寸：props → Form → ConfigProvider → md。
+* 业务应传 `size` 或依赖全局/表单上下文，避免 :deep 改高度。
+*/
+function resolveRsComponentSize(size, form) {
+	const config = useRsConfigOptional();
+	return computed(() => size ?? form?.size.value ?? config?.controlSize.value ?? "md");
+}
+/** 在 setup 内便捷解析（自动读 Form / Config）。 */
+function useResolvedRsComponentSize(size) {
+	const form = useRsFormContext();
+	const config = useRsConfigOptional();
+	return computed(() => size() ?? form?.size.value ?? config?.controlSize.value ?? "md");
+}
+//#endregion
+export { resolveRsComponentSize, useResolvedRsComponentSize };

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

@@ -0,0 +1,2 @@
+export { default as RsAlert } from './src/RsAlert.js';
+export type { RsAlertExpose, RsAlertInstance, RsAlertSize, RsAlertTone, RsAlertVariant, } from './src/alert-utils';

package/dist/components/alert/src/RsAlert.css

@@ -0,0 +1,166 @@
+
+.rs-alert[data-v-8c18fdd0] {
+  --rs-alert-icon-offset: 0.125rem;
+  --rs-alert-content-alpha: 78%;
+  --rs-alert-close-opacity: 0.7;
+  --rs-alert-tone: var(--rs-border);
+  --rs-alert-tone-container: var(--rs-surface-hover);
+  --rs-alert-on-container: var(--rs-text-primary);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rs-alert-gap, var(--rs-space-sm));
+  padding: var(--rs-alert-padding-y, var(--rs-space-md))
+    var(--rs-alert-padding-x, var(--rs-space-lg));
+  border-radius: var(--rs-alert-radius, var(--rs-radius));
+  box-sizing: border-box;
+  color: var(--rs-alert-on-container);
+  outline: none;
+}
+.rs-alert--bordered[data-v-8c18fdd0] {
+  border: 1px solid transparent;
+}
+.rs-alert--sm[data-v-8c18fdd0] {
+  --rs-alert-padding-y: var(--rs-space-sm);
+  --rs-alert-padding-x: var(--rs-space-md);
+}
+.rs-alert--lg[data-v-8c18fdd0] {
+  --rs-alert-padding-y: var(--rs-space-lg);
+  --rs-alert-padding-x: var(--rs-space-lg);
+}
+.rs-alert--banner[data-v-8c18fdd0] {
+  width: 100%;
+  border-radius: 0;
+}
+.rs-alert--soft[data-v-8c18fdd0] {
+  background: var(--rs-alert-tone-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-alert-tone) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+.rs-alert--outline[data-v-8c18fdd0] {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--rs-alert-tone) 55%, transparent);
+}
+.rs-alert--solid[data-v-8c18fdd0] {
+  background: var(--rs-alert-tone);
+  color: var(--rs-text-inverse);
+  border-color: var(--rs-alert-tone);
+}
+.rs-alert--default[data-v-8c18fdd0] {
+  --rs-alert-tone: var(--rs-border);
+  --rs-alert-tone-container: var(--rs-surface-hover);
+  --rs-alert-on-container: var(--rs-text-primary);
+}
+.rs-alert--info[data-v-8c18fdd0] {
+  --rs-alert-tone: var(--rs-info);
+  --rs-alert-tone-container: var(--rs-info-container);
+  --rs-alert-on-container: var(--rs-on-info-container);
+}
+.rs-alert--success[data-v-8c18fdd0] {
+  --rs-alert-tone: var(--rs-success);
+  --rs-alert-tone-container: var(--rs-success-container);
+  --rs-alert-on-container: var(--rs-on-success-container);
+}
+.rs-alert--warning[data-v-8c18fdd0] {
+  --rs-alert-tone: var(--rs-warning);
+  --rs-alert-tone-container: var(--rs-warning-container);
+  --rs-alert-on-container: var(--rs-on-warning-container);
+}
+.rs-alert--danger[data-v-8c18fdd0] {
+  --rs-alert-tone: var(--rs-danger);
+  --rs-alert-tone-container: var(--rs-danger-container);
+  --rs-alert-on-container: var(--rs-on-danger-container);
+}
+.rs-alert__icon[data-v-8c18fdd0] {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-block-start: var(--rs-alert-icon-offset);
+}
+.rs-alert__body[data-v-8c18fdd0] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.rs-alert__title[data-v-8c18fdd0] {
+  font-size: var(--rs-font-size-sm);
+  font-weight: var(--rs-font-weight-semibold);
+  line-height: var(--rs-line-height-tight);
+  color: inherit;
+}
+.rs-alert--lg .rs-alert__title[data-v-8c18fdd0] {
+  font-size: var(--rs-font-size-base);
+}
+.rs-alert__content[data-v-8c18fdd0] {
+  margin-block-start: var(--rs-space-xs);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-alert-content-fg, var(--rs-text-secondary));
+}
+.rs-alert--default .rs-alert__content[data-v-8c18fdd0] {
+  color: var(--rs-alert-content-fg, var(--rs-text-secondary));
+}
+.rs-alert--info .rs-alert__content[data-v-8c18fdd0],
+.rs-alert--success .rs-alert__content[data-v-8c18fdd0],
+.rs-alert--warning .rs-alert__content[data-v-8c18fdd0],
+.rs-alert--danger .rs-alert__content[data-v-8c18fdd0] {
+  color: color-mix(
+    in srgb,
+    var(--rs-alert-on-container) var(--rs-alert-content-alpha, 78%),
+    transparent
+  );
+}
+.rs-alert--solid .rs-alert__content[data-v-8c18fdd0] {
+  color: color-mix(in srgb, var(--rs-text-inverse) var(--rs-alert-content-alpha, 78%), transparent);
+}
+.rs-alert__action[data-v-8c18fdd0] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  margin-inline-start: auto;
+}
+.rs-alert__close[data-v-8c18fdd0] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: var(--rs-alert-icon-offset);
+  border: 0;
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: var(--rs-alert-close-opacity);
+  outline: none;
+  font: inherit;
+  line-height: 1;
+}
+.rs-alert__close--text[data-v-8c18fdd0] {
+  padding-block: var(--rs-space-xs);
+  padding-inline: var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-medium);
+}
+.rs-alert__close[data-v-8c18fdd0]:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+.rs-alert__close[data-v-8c18fdd0]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-alert__close[data-v-8c18fdd0] {
+    transition: none;
+}
+}
+@media (forced-colors: active) {
+.rs-alert[data-v-8c18fdd0] {
+    border: 1px solid CanvasText;
+    forced-color-adjust: none;
+}
+.rs-alert__close[data-v-8c18fdd0]:focus-visible {
+    outline: 2px solid Highlight;
+    box-shadow: none;
+}
+}

package/dist/components/alert/src/RsAlert.d.ts

@@ -0,0 +1,51 @@
+import { type RsComponentSize, type RsRadius } from '../../../theme/types';
+import { type RsAlertExpose, type RsAlertTone, type RsAlertVariant } from './alert-utils';
+export type { RsAlertExpose, RsAlertTone, RsAlertVariant };
+type __VLS_Props = {
+    /** 色相。与 type 同时传时以 tone 为准。 */
+    tone?: RsAlertTone;
+    /** type 的兼容别名，语义与 tone 相同。 */
+    type?: RsAlertTone;
+    variant?: RsAlertVariant;
+    title?: string;
+    description?: string;
+    closable?: boolean;
+    bordered?: boolean;
+    showIcon?: boolean;
+    banner?: boolean;
+    closeText?: string;
+    size?: RsComponentSize;
+    radius?: RsRadius;
+    id?: string;
+    ariaLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    action?: (props: typeof __VLS_12) => any;
+} & {
+    close?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, RsAlertExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    bordered: boolean;
+    closable: boolean;
+    showIcon: boolean;
+    banner: boolean;
+}, {}, {}, {}, 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/alert/src/RsAlert.impl.js

@@ -0,0 +1,155 @@
+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 { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
+import { hasAlertDescription, hasAlertTitle, resolveAlertIcon, resolveAlertRole, resolveAlertSize, resolveAlertTone, resolveAlertVariant, shouldShowAlertIcon } from "./alert-utils.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, useId, useSlots } from "vue";
+//#region src/components/alert/src/RsAlert.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"role",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"tabindex"
+];
+var _hoisted_2 = {
+	key: 0,
+	class: "rs-alert__icon",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "rs-alert__body" };
+var _hoisted_4 = ["id"];
+var _hoisted_5 = ["id"];
+var _hoisted_6 = {
+	key: 1,
+	class: "rs-alert__action"
+};
+var _hoisted_7 = ["aria-label"];
+var _hoisted_8 = { key: 0 };
+var RsAlert_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsAlert",
+	__name: "RsAlert",
+	props: {
+		tone: {},
+		type: {},
+		variant: {},
+		title: {},
+		description: {},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		showIcon: {
+			type: Boolean,
+			default: true
+		},
+		banner: {
+			type: Boolean,
+			default: false
+		},
+		closeText: {},
+		size: {},
+		radius: {},
+		id: {},
+		ariaLabel: {}
+	},
+	emits: ["close"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const slots = useSlots();
+		const uid = useId();
+		const rootRef = ref(null);
+		const closeRef = ref(null);
+		const inheritedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedSize = computed(() => resolveAlertSize(inheritedSize.value));
+		const resolvedRadius = useResolvedRsRadius(() => props.banner ? "none" : props.radius, "md");
+		const resolvedTone = computed(() => resolveAlertTone(props.tone, props.type));
+		const resolvedVariant = computed(() => resolveAlertVariant(props.variant));
+		const iconName = computed(() => resolveAlertIcon(resolvedTone.value));
+		const liveRole = computed(() => resolveAlertRole(resolvedTone.value));
+		const showIcon = computed(() => shouldShowAlertIcon(props.showIcon, Boolean(slots.icon)));
+		const showTitle = computed(() => hasAlertTitle(props.title, Boolean(slots.title)));
+		const showDescription = computed(() => hasAlertDescription(props.description, Boolean(slots.default)));
+		const iconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value === "sm" ? "sm" : resolvedSize.value]);
+		const closeIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value === "lg" ? "md" : "ssm"]);
+		const titleDomId = computed(() => showTitle.value ? `${props.id || uid}-title` : void 0);
+		const descDomId = computed(() => showDescription.value ? `${props.id || uid}-desc` : void 0);
+		const closeLabel = computed(() => props.closeText || t("alert.close"));
+		const rootClass = computed(() => [
+			"rs-alert",
+			`rs-alert--${resolvedTone.value}`,
+			`rs-alert--${resolvedVariant.value}`,
+			`rs-alert--${resolvedSize.value}`,
+			{
+				"rs-alert--bordered": props.bordered,
+				"rs-alert--closable": props.closable,
+				"rs-alert--banner": props.banner,
+				"rs-alert--no-icon": !showIcon.value
+			}
+		]);
+		const rootStyle = computed(() => ({ "--rs-alert-radius": props.banner ? "0" : rsRadiusCss(resolvedRadius.value) }));
+		function onClose(event) {
+			emit("close", event);
+		}
+		function focus() {
+			if (closeRef.value) {
+				closeRef.value.focus();
+				return;
+			}
+			rootRef.value?.focus();
+		}
+		__expose({ focus });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: __props.id,
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value),
+				role: liveRole.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": titleDomId.value,
+				"aria-describedby": descDomId.value,
+				tabindex: __props.closable ? void 0 : -1
+			}, [
+				showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(RsIcon_default, {
+					name: iconName.value,
+					size: iconSize.value
+				}, null, 8, ["name", "size"])], true)])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_3, [showTitle.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: titleDomId.value,
+					class: "rs-alert__title"
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)], true)], 8, _hoisted_4)) : createCommentVNode("", true), showDescription.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					id: descDomId.value,
+					class: "rs-alert__content"
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.description), 1)], true)], 8, _hoisted_5)) : createCommentVNode("", true)]),
+				_ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "action", {}, void 0, true)])) : createCommentVNode("", true),
+				__props.closable ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					ref_key: "closeRef",
+					ref: closeRef,
+					type: "button",
+					class: normalizeClass(["rs-alert__close", { "rs-alert__close--text": Boolean(__props.closeText || _ctx.$slots.close) }]),
+					"aria-label": closeLabel.value,
+					onClick: onClose
+				}, [renderSlot(_ctx.$slots, "close", {}, () => [__props.closeText ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(__props.closeText), 1)) : (openBlock(), createBlock(RsIcon_default, {
+					key: 1,
+					name: "x",
+					size: closeIconSize.value
+				}, null, 8, ["size"]))], true)], 10, _hoisted_7)) : createCommentVNode("", true)
+			], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RsAlert_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/alert/src/RsAlert.js

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

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

@@ -0,0 +1,37 @@
+import type { RsComponentSize } from '../../../theme/types';
+/** 与 RsFeedbackTone 同一套色相。历史 prop 名是 type，新代码用 tone。 */
+export type RsAlertTone = 'default' | 'info' | 'success' | 'warning' | 'danger';
+/** 形态轴：浅底 / 描边 / 实心。色相走 tone，不要用 variant 表示危险。 */
+export type RsAlertVariant = 'soft' | 'outline' | 'solid';
+/** 密度。ssm 落到 sm，避免提示条做成控件极小档。 */
+export type RsAlertSize = 'sm' | 'md' | 'lg';
+export type RsAlertRole = 'alert' | 'status';
+export interface RsAlertExpose {
+    /** 焦点落到关闭钮；没有关闭钮时落到根节点。 */
+    focus: () => void;
+}
+export type RsAlertInstance = RsAlertExpose & {
+    $el: HTMLElement;
+};
+export declare const RS_ALERT_TONES: readonly ["default", "info", "success", "warning", "danger"];
+export declare const RS_ALERT_VARIANTS: readonly ["soft", "outline", "solid"];
+export declare const RS_ALERT_SIZES: readonly ["sm", "md", "lg"];
+export declare const RS_ALERT_DEFAULT_TONE: RsAlertTone;
+export declare const RS_ALERT_DEFAULT_VARIANT: RsAlertVariant;
+export declare const RS_ALERT_DEFAULT_SIZE: RsAlertSize;
+export declare function isRsAlertTone(value: unknown): value is RsAlertTone;
+export declare function isRsAlertVariant(value: unknown): value is RsAlertVariant;
+export declare function isRsAlertSize(value: unknown): value is RsAlertSize;
+/**
+ * tone 优先，type 是兼容别名。两边都无效时回落 info（与旧默认一致）。
+ */
+export declare function resolveAlertTone(tone?: string | null, type?: string | null): RsAlertTone;
+export declare function resolveAlertVariant(variant?: string | null): RsAlertVariant;
+/** 未传或非法落到 md；ssm 并到 sm。 */
+export declare function resolveAlertSize(size?: RsComponentSize | RsAlertSize | null): RsAlertSize;
+export declare function resolveAlertIcon(tone: RsAlertTone): string;
+/** 警告 / 错误用 alert（断言）；信息 / 成功 / 中性用 status，避免进页就打断读屏。 */
+export declare function resolveAlertRole(tone: RsAlertTone): RsAlertRole;
+export declare function shouldShowAlertIcon(showIcon: boolean, hasIconSlot: boolean): boolean;
+export declare function hasAlertTitle(title?: string | null, hasTitleSlot?: boolean): boolean;
+export declare function hasAlertDescription(description?: string | null, hasDefaultSlot?: boolean): boolean;