@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/utils/style/styles.d.ts

@@ -0,0 +1,118 @@
+/**
+ * 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：
+ * 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。
+ * 样式表只放被多个组件复用的；只有一个组件用的写在组件里。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+/** 圆角档位，对应主题的 radii（em，随字号缩放），括号里是默认主题的值；各组件的 radius 都用它 */
+export interface RadiusScale {
+    /** 直角：表格、密集列表里与直线对齐 */
+    none: unknown;
+    /** 0.15em */
+    xs: unknown;
+    /** 0.25em */
+    sm: unknown;
+    /** 0.4em：控件与按钮的默认 */
+    md: unknown;
+    /** 0.7em：卡片、面板 */
+    lg: unknown;
+    /** 1em */
+    xl: unknown;
+    /** 胶囊形（宽高相等时是圆形） */
+    full: unknown;
+}
+/** 圆角档位 */
+export type Radius = keyof RadiusScale;
+/** 圆角档位的样式：none、xs、sm、md、lg、xl、full */
+export declare const radiusStyles: Readonly<{
+    full: css.CompiledStyles;
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 间距档位，对应主题的 space（em，随字号缩放），括号里是默认主题的值 */
+export interface SpaceScale {
+    /** 无间距（0） */
+    none: unknown;
+    /** 0.25em：图标与文字之间、紧凑的元素之间 */
+    xs: unknown;
+    /** 0.5em：控件内部、相关的元素之间 */
+    sm: unknown;
+    /** 0.75em：一组内容的元素之间 */
+    md: unknown;
+    /** 1em：表单项之间、段落之间 */
+    lg: unknown;
+    /** 1.5em：区块之间、卡片与对话框的内边距 */
+    xl: unknown;
+}
+/** 间距档位：五档之外可以是 none */
+export type Space = keyof SpaceScale;
+/**
+ * 一组按名字取的样式（如按变体分组的色调表 Record<变体, StyleTable<色调>>）。
+ * css.create 的结果不用写它：create 返回具名的 CompiledStyles，类型直接推导
+ */
+export type StyleTable<Key extends string> = Readonly<Record<Key, SxStyles>>;
+/** 间距 gap：Flex、Grid */
+export declare const gapStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 两侧的内边距：列表条目与所在容器（弹出层、卡片）的内边距对齐 */
+export declare const paddingInlineStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 行间距：Grid 单独指定时 */
+export declare const rowGapStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 列间距：Grid 单独指定时 */
+export declare const columnGapStyles: Readonly<{
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    none: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/**
+ * 焦点环：宽度、颜色全站一致，只有触发的伪类与偏移不同。
+ * - visible：键盘聚焦本元素（Link、Button 等），环离开元素一点；
+ * - tight：同上但贴着边框（勾选框、单选、开关这类小控件，环离远了显得松）；
+ * - hasVisible：里面的元素键盘聚焦时画在整块上（FileDrop：原生 input 视觉上隐藏）；
+ * - within：里面的元素聚焦（含鼠标）时画在外壳上，往里收压住边框（输入框外壳）
+ */
+export declare const focusRingStyles: Readonly<{
+    hasVisible: css.CompiledStyles;
+    tight: css.CompiledStyles;
+    visible: css.CompiledStyles;
+    within: css.CompiledStyles;
+}>;
+/**
+ * 列表元素（ul、ol）当布局容器时去掉默认的圆点与缩进。
+ * Safari 去掉圆点后会把它当成普通容器，读屏不再报“列表”，所以组件同时补上 role="list"（见 listRole）
+ */
+export declare const listStyles: Readonly<{
+    reset: css.CompiledStyles;
+}>;
+/** 布局组件的工厂（createFlex、createGrid、createContainer）可用的语义容器标签 */
+export type LayoutTag = 'div' | 'section' | 'article' | 'ul' | 'ol' | 'li' | 'nav' | 'header' | 'footer' | 'main' | 'aside' | 'form';
+/** 列表标签需要的 role（见 listStyles），其他标签不加 */
+export declare const listRole: (tag: string) => "list" | undefined;

package/dist/utils/style/styles.js

@@ -0,0 +1,114 @@
+import { t } from "../../config/theme/tokens.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/utils/style/styles.ts
+/**
+* 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：
+* 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。
+* 样式表只放被多个组件复用的；只有一个组件用的写在组件里。
+*/
+/** 圆角档位的样式：none、xs、sm、md、lg、xl、full */
+var radiusStyles = css.create({
+	none: { borderRadius: 0 },
+	xs: { borderRadius: "_xs" },
+	sm: { borderRadius: "_sm" },
+	md: { borderRadius: "_md" },
+	lg: { borderRadius: "_lg" },
+	xl: { borderRadius: "_xl" },
+	full: { borderRadius: "_full" }
+});
+/** 间距 gap：Flex、Grid */
+var gapStyles = css.create({
+	none: { gap: "_none" },
+	xs: { gap: "_xs" },
+	sm: { gap: "_sm" },
+	md: { gap: "_md" },
+	lg: { gap: "_lg" },
+	xl: { gap: "_xl" }
+});
+/** 两侧的内边距：列表条目与所在容器（弹出层、卡片）的内边距对齐 */
+var paddingInlineStyles = css.create({
+	none: { paddingInline: "_none" },
+	xs: { paddingInline: "_xs" },
+	sm: { paddingInline: "_sm" },
+	md: { paddingInline: "_md" },
+	lg: { paddingInline: "_lg" },
+	xl: { paddingInline: "_xl" }
+});
+/** 行间距：Grid 单独指定时 */
+var rowGapStyles = css.create({
+	none: { rowGap: "_none" },
+	xs: { rowGap: "_xs" },
+	sm: { rowGap: "_sm" },
+	md: { rowGap: "_md" },
+	lg: { rowGap: "_lg" },
+	xl: { rowGap: "_xl" }
+});
+/** 列间距：Grid 单独指定时 */
+var columnGapStyles = css.create({
+	none: { columnGap: "_none" },
+	xs: { columnGap: "_xs" },
+	sm: { columnGap: "_sm" },
+	md: { columnGap: "_md" },
+	lg: { columnGap: "_lg" },
+	xl: { columnGap: "_xl" }
+});
+/**
+* 焦点环：宽度、颜色全站一致，只有触发的伪类与偏移不同。
+* - visible：键盘聚焦本元素（Link、Button 等），环离开元素一点；
+* - tight：同上但贴着边框（勾选框、单选、开关这类小控件，环离远了显得松）；
+* - hasVisible：里面的元素键盘聚焦时画在整块上（FileDrop：原生 input 视觉上隐藏）；
+* - within：里面的元素聚焦（含鼠标）时画在外壳上，往里收压住边框（输入框外壳）
+*/
+var focusRingStyles = css.create({
+	visible: {
+		outlineStyle: {
+			default: "none",
+			":focus-visible": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: "_sm"
+	},
+	tight: {
+		outlineStyle: {
+			default: "none",
+			":focus-visible": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: "_borderWidths.sm"
+	},
+	hasVisible: {
+		outlineStyle: {
+			default: "none",
+			":has(:focus-visible)": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: "_borderWidths.sm"
+	},
+	within: {
+		outlineStyle: {
+			default: "none",
+			":focus-within": "solid"
+		},
+		outlineWidth: "_sm",
+		outlineColor: "_focusRing",
+		outlineOffset: `calc(-1 * ${t.borderWidths.xs})`
+	}
+});
+/**
+* 列表元素（ul、ol）当布局容器时去掉默认的圆点与缩进。
+* Safari 去掉圆点后会把它当成普通容器，读屏不再报“列表”，所以组件同时补上 role="list"（见 listRole）
+*/
+var listStyles = css.create({ reset: {
+	margin: 0,
+	paddingInlineStart: 0,
+	listStyleType: "none"
+} });
+/** 列表标签需要的 role（见 listStyles），其他标签不加 */
+var listRole = (tag) => tag === "ul" || tag === "ol" ? "list" : void 0;
+//#endregion
+export { columnGapStyles, focusRingStyles, gapStyles, listRole, listStyles, paddingInlineStyles, radiusStyles, rowGapStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/utils/style/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../../src/utils/style/styles.ts"],"sourcesContent":["/**\n * 组件共用的档位类型与样式表。档位与主题 tokens 同名（COMPONENTS.md §6.2）：\n * 组件的 size、gap 等 prop 直接用这些类型，取值一一对应到 token。\n * 样式表只放被多个组件复用的；只有一个组件用的写在组件里。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/*\n * 取值类型的写法（COMPONENTS.md §1）：写成带注释接口的 keyof，接口的每个键带注释，\n * 补全列表与悬停取值时能看到每个取值的效果（WebStorm 把字符串字面量解析到 keyof 的键上）。\n */\n\n/** 圆角档位，对应主题的 radii（em，随字号缩放），括号里是默认主题的值；各组件的 radius 都用它 */\nexport interface RadiusScale {\n  /** 直角：表格、密集列表里与直线对齐 */\n  none: unknown;\n  /** 0.15em */\n  xs: unknown;\n  /** 0.25em */\n  sm: unknown;\n  /** 0.4em：控件与按钮的默认 */\n  md: unknown;\n  /** 0.7em：卡片、面板 */\n  lg: unknown;\n  /** 1em */\n  xl: unknown;\n  /** 胶囊形（宽高相等时是圆形） */\n  full: unknown;\n}\n\n/** 圆角档位 */\nexport type Radius = keyof RadiusScale;\n\n/** 圆角档位的样式：none、xs、sm、md、lg、xl、full */\nexport const radiusStyles = css.create({\n  none: { borderRadius: 0 },\n  xs: { borderRadius: '_xs' },\n  sm: { borderRadius: '_sm' },\n  md: { borderRadius: '_md' },\n  lg: { borderRadius: '_lg' },\n  xl: { borderRadius: '_xl' },\n  full: { borderRadius: '_full' },\n});\n\n/** 间距档位，对应主题的 space（em，随字号缩放），括号里是默认主题的值 */\nexport interface SpaceScale {\n  /** 无间距（0） */\n  none: unknown;\n  /** 0.25em：图标与文字之间、紧凑的元素之间 */\n  xs: unknown;\n  /** 0.5em：控件内部、相关的元素之间 */\n  sm: unknown;\n  /** 0.75em：一组内容的元素之间 */\n  md: unknown;\n  /** 1em：表单项之间、段落之间 */\n  lg: unknown;\n  /** 1.5em：区块之间、卡片与对话框的内边距 */\n  xl: unknown;\n}\n\n/** 间距档位：五档之外可以是 none */\nexport type Space = keyof SpaceScale;\n\n/**\n * 一组按名字取的样式（如按变体分组的色调表 Record<变体, StyleTable<色调>>）。\n * css.create 的结果不用写它：create 返回具名的 CompiledStyles，类型直接推导\n */\nexport type StyleTable<Key extends string> = Readonly<Record<Key, SxStyles>>;\n\n/** 间距 gap：Flex、Grid */\nexport const gapStyles = css.create({\n  none: { gap: '_none' },\n  xs: { gap: '_xs' },\n  sm: { gap: '_sm' },\n  md: { gap: '_md' },\n  lg: { gap: '_lg' },\n  xl: { gap: '_xl' },\n});\n\n/** 两侧的内边距：列表条目与所在容器（弹出层、卡片）的内边距对齐 */\nexport const paddingInlineStyles = css.create({\n  none: { paddingInline: '_none' },\n  xs: { paddingInline: '_xs' },\n  sm: { paddingInline: '_sm' },\n  md: { paddingInline: '_md' },\n  lg: { paddingInline: '_lg' },\n  xl: { paddingInline: '_xl' },\n});\n\n/** 行间距：Grid 单独指定时 */\nexport const rowGapStyles = css.create({\n  none: { rowGap: '_none' },\n  xs: { rowGap: '_xs' },\n  sm: { rowGap: '_sm' },\n  md: { rowGap: '_md' },\n  lg: { rowGap: '_lg' },\n  xl: { rowGap: '_xl' },\n});\n\n/** 列间距：Grid 单独指定时 */\nexport const columnGapStyles = css.create({\n  none: { columnGap: '_none' },\n  xs: { columnGap: '_xs' },\n  sm: { columnGap: '_sm' },\n  md: { columnGap: '_md' },\n  lg: { columnGap: '_lg' },\n  xl: { columnGap: '_xl' },\n});\n\n/**\n * 焦点环：宽度、颜色全站一致，只有触发的伪类与偏移不同。\n * - visible：键盘聚焦本元素（Link、Button 等），环离开元素一点；\n * - tight：同上但贴着边框（勾选框、单选、开关这类小控件，环离远了显得松）；\n * - hasVisible：里面的元素键盘聚焦时画在整块上（FileDrop：原生 input 视觉上隐藏）；\n * - within：里面的元素聚焦（含鼠标）时画在外壳上，往里收压住边框（输入框外壳）\n */\nexport const focusRingStyles = css.create({\n  visible: {\n    outlineStyle: { default: 'none', ':focus-visible': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_sm',\n  },\n  tight: {\n    outlineStyle: { default: 'none', ':focus-visible': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_borderWidths.sm',\n  },\n  hasVisible: {\n    outlineStyle: { default: 'none', ':has(:focus-visible)': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: '_borderWidths.sm',\n  },\n  within: {\n    outlineStyle: { default: 'none', ':focus-within': 'solid' },\n    outlineWidth: '_sm',\n    outlineColor: '_focusRing',\n    outlineOffset: `calc(-1 * ${t.borderWidths.xs})`,\n  },\n});\n\n/**\n * 列表元素（ul、ol）当布局容器时去掉默认的圆点与缩进。\n * Safari 去掉圆点后会把它当成普通容器，读屏不再报“列表”，所以组件同时补上 role=\"list\"（见 listRole）\n */\nexport const listStyles = css.create({\n  reset: { margin: 0, paddingInlineStart: 0, listStyleType: 'none' },\n});\n\n/** 布局组件的工厂（createFlex、createGrid、createContainer）可用的语义容器标签 */\nexport type LayoutTag =\n  | 'div'\n  | 'section'\n  | 'article'\n  | 'ul'\n  | 'ol'\n  | 'li'\n  | 'nav'\n  | 'header'\n  | 'footer'\n  | 'main'\n  | 'aside'\n  | 'form';\n\n/** 列表标签需要的 role（见 listStyles），其他标签不加 */\nexport const listRole = (tag: string) => (tag === 'ul' || tag === 'ol' ? 'list' : undefined);\n"],"mappings":";;;;;;;;;AAoCA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM,EAAE,cAAc,EAAE;CACxB,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,IAAI,EAAE,cAAc,MAAM;CAC1B,MAAM,EAAE,cAAc,QAAQ;AAChC,CAAC;;AA4BD,IAAa,YAAY,IAAI,OAAO;CAClC,MAAM,EAAE,KAAK,QAAQ;CACrB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;AACnB,CAAC;;AAGD,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM,EAAE,eAAe,QAAQ;CAC/B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;CAC3B,IAAI,EAAE,eAAe,MAAM;AAC7B,CAAC;;AAGD,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM,EAAE,QAAQ,QAAQ;CACxB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;CACpB,IAAI,EAAE,QAAQ,MAAM;AACtB,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM,EAAE,WAAW,QAAQ;CAC3B,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;CACvB,IAAI,EAAE,WAAW,MAAM;AACzB,CAAC;;;;;;;;AASD,IAAa,kBAAkB,IAAI,OAAO;CACxC,SAAS;EACP,cAAc;GAAE,SAAS;GAAQ,kBAAkB;EAAQ;EAC3D,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,OAAO;EACL,cAAc;GAAE,SAAS;GAAQ,kBAAkB;EAAQ;EAC3D,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,YAAY;EACV,cAAc;GAAE,SAAS;GAAQ,wBAAwB;EAAQ;EACjE,cAAc;EACd,cAAc;EACd,eAAe;CACjB;CACA,QAAQ;EACN,cAAc;GAAE,SAAS;GAAQ,iBAAiB;EAAQ;EAC1D,cAAc;EACd,cAAc;EACd,eAAe,aAAa,EAAE,aAAa,GAAE;CAC/C;AACF,CAAC;;;;;AAMD,IAAa,aAAa,IAAI,OAAO,EACnC,OAAO;CAAE,QAAQ;CAAG,oBAAoB;CAAG,eAAe;AAAO,EACnE,CAAC;;AAkBD,IAAa,YAAY,QAAiB,QAAQ,QAAQ,QAAQ,OAAO,SAAS,KAAA"}

package/dist/utils/style/swatch-styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。
+ * 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+/** 色块的样式：checkerboard、ring */
+export declare const swatchStyles: Readonly<{
+    checkerboard: css.CompiledStyles;
+    ring: css.CompiledStyles;
+}>;

package/dist/utils/style/swatch-styles.js

@@ -0,0 +1,19 @@
+import { t } from "../../config/theme/tokens.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/utils/style/swatch-styles.ts
+/**
+* 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。
+* 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。
+*/
+/** 色块的样式：checkerboard、ring */
+var swatchStyles = css.create({
+	checkerboard: {
+		backgroundImage: `repeating-conic-gradient(${t.colors.fill} 0 25%, ${t.colors.surface} 0 50%)`,
+		backgroundSize: "0.5em 0.5em"
+	},
+	ring: { boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${t.colors.text} 14%, transparent)` }
+});
+//#endregion
+export { swatchStyles };
+
+//# sourceMappingURL=swatch-styles.js.map

package/dist/utils/style/swatch-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch-styles.js","names":[],"sources":["../../../src/utils/style/swatch-styles.ts"],"sourcesContent":["/**\n * 色块共用的样式：ColorSwatch、ColorField、ThemeCustomizer 里画一块颜色。\n * 棋盘格垫在下面，半透明的颜色看得出来；内描边按正文色的淡色画出色块边界，亮色、暗色主题里都看得见。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from '../../config/theme/tokens';\n\n/** 色块的样式：checkerboard、ring */\nexport const swatchStyles = css.create({\n  // 格子大小用 em：随色块所在的字号缩放\n  checkerboard: {\n    backgroundImage: `repeating-conic-gradient(${t.colors.fill} 0 25%, ${t.colors.surface} 0 50%)`,\n    backgroundSize: '0.5em 0.5em',\n  },\n  ring: { boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${t.colors.text} 14%, transparent)` },\n});\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAe,IAAI,OAAO;CAErC,cAAc;EACZ,iBAAiB,4BAA4B,EAAE,OAAO,KAAI,UAAW,EAAE,OAAO,QAAO;EACrF,gBAAgB;CAClB;CACA,MAAM,EAAE,WAAW,uCAAuC,EAAE,OAAO,KAAI,oBAAqB;AAC9F,CAAC"}

package/dist/utils/style/tone-styles.d.ts

@@ -0,0 +1,58 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { IconData } from '../../base/Icon';
+import type { StyleTable } from './styles';
+/** 状态色调 */
+export interface StatusTones {
+    /** 中性：普通的标签、计数，不需要强调的操作（如“取消”） */
+    neutral: unknown;
+    /** 品牌色：新功能、选中、主要操作 */
+    accent: unknown;
+    /** 信息：提示、说明 */
+    info: unknown;
+    /** 成功：已完成、正常 */
+    success: unknown;
+    /** 警告：需要注意、即将过期 */
+    warning: unknown;
+    /** 危险：错误、失败、删除等破坏性操作 */
+    danger: unknown;
+}
+/** 标记与提示的样式 */
+export interface StatusVariants {
+    /** 实底：最醒目，计数、状态点 */
+    solid: unknown;
+    /** 浅色底（默认） */
+    soft: unknown;
+    /** 浅色底加描边 */
+    surface: unknown;
+    /** 只有描边 */
+    outline: unknown;
+}
+/** 状态色调 */
+export type StatusTone = keyof StatusTones;
+/** 标记与提示的样式 */
+export type StatusVariant = keyof StatusVariants;
+/** 状态色调 的样式：bordered */
+export declare const statusToneBorderStyles: Readonly<{
+    bordered: css.CompiledStyles;
+}>;
+/** 样式 × 状态色调 → 样式表：statusToneStyles[variant][tone]（一般用 statusToneSx） */
+export declare const statusToneStyles: Readonly<Record<StatusVariant, StyleTable<StatusTone>>>;
+/** 每种状态色调默认的图标（Lucide）：提示条、通知、确认对话框按色调自动选图标 */
+export declare const statusIcons: Readonly<Record<StatusTone, IconData>>;
+/** 样式 × 色调 → 颜色、底色与边框 */
+export declare function statusToneSx(variant: StatusVariant, tone: StatusTone): SxStyles;
+/**
+ * 实底色调的颜色变量：选中的勾选框、单选框、开关与滑块的已选部分用 `var(--tone-fill)` 作底色、
+ * `var(--tone-on-fill)` 作其上的对勾、圆点、滑块色。组件根元素加 toneFillStyles[tone]，各部件引用变量：
+ * 部件的选中样式不随色调再分六份。
+ * 状态色用文字色而不是实色：黄、绿的实色在表面上不到 3:1，图形要的是与周围的对比；danger 同理（暗色主题里在轨道上不到 3:1）
+ */
+export declare const toneFillStyles: Readonly<{
+    accent: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    info: css.CompiledStyles;
+    neutral: css.CompiledStyles;
+    success: css.CompiledStyles;
+    warning: css.CompiledStyles;
+}>;

package/dist/utils/style/tone-styles.js

@@ -0,0 +1,180 @@
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "@lucide/icons";
+//#region src/utils/style/tone-styles.ts
+/**
+* 状态色调的样式表与默认图标：Badge、Tag、Alert、Toast 等“带颜色的标记与提示”共用；按钮家族、Progress 等也用这一套色调。
+* 外观 = variant（实底 / 浅色底 / 浅色底加描边 / 描边）× tone（六种色调）。
+* 实底用各色调的实色与其上的字色（accent / accentContrast、success / successContrast…），主题检查保证 4.5:1。
+*/
+var solid = css.create({
+	neutral: {
+		color: "_inverseText",
+		backgroundColor: "_inverseSurface"
+	},
+	accent: {
+		color: "_accentContrast",
+		backgroundColor: "_accent"
+	},
+	info: {
+		color: "_infoContrast",
+		backgroundColor: "_info"
+	},
+	success: {
+		color: "_successContrast",
+		backgroundColor: "_success"
+	},
+	warning: {
+		color: "_warningContrast",
+		backgroundColor: "_warning"
+	},
+	danger: {
+		color: "_dangerContrast",
+		backgroundColor: "_danger"
+	}
+});
+var soft = css.create({
+	neutral: {
+		color: "_text",
+		backgroundColor: "_fill"
+	},
+	accent: {
+		color: "_accentText",
+		backgroundColor: "_accentSoft"
+	},
+	info: {
+		color: "_infoText",
+		backgroundColor: "_infoSoft"
+	},
+	success: {
+		color: "_successText",
+		backgroundColor: "_successSoft"
+	},
+	warning: {
+		color: "_warningText",
+		backgroundColor: "_warningSoft"
+	},
+	danger: {
+		color: "_dangerText",
+		backgroundColor: "_dangerSoft"
+	}
+});
+var surface = css.create({
+	neutral: {
+		color: "_text",
+		backgroundColor: "_surface",
+		borderColor: "_border"
+	},
+	accent: {
+		color: "_accentText",
+		backgroundColor: "_accentSoft",
+		borderColor: "_accentBorder"
+	},
+	info: {
+		color: "_infoText",
+		backgroundColor: "_infoSoft",
+		borderColor: "_infoBorder"
+	},
+	success: {
+		color: "_successText",
+		backgroundColor: "_successSoft",
+		borderColor: "_successBorder"
+	},
+	warning: {
+		color: "_warningText",
+		backgroundColor: "_warningSoft",
+		borderColor: "_warningBorder"
+	},
+	danger: {
+		color: "_dangerText",
+		backgroundColor: "_dangerSoft",
+		borderColor: "_dangerBorder"
+	}
+});
+var outline = css.create({
+	neutral: {
+		color: "_text",
+		borderColor: "_border"
+	},
+	accent: {
+		color: "_accentText",
+		borderColor: "_accentBorder"
+	},
+	info: {
+		color: "_infoText",
+		borderColor: "_infoBorder"
+	},
+	success: {
+		color: "_successText",
+		borderColor: "_successBorder"
+	},
+	warning: {
+		color: "_warningText",
+		borderColor: "_warningBorder"
+	},
+	danger: {
+		color: "_dangerText",
+		borderColor: "_dangerBorder"
+	}
+});
+/** 状态色调 的样式：bordered */
+var statusToneBorderStyles = css.create({ bordered: {
+	borderWidth: "_xs",
+	borderStyle: "solid",
+	borderColor: "transparent"
+} });
+/** 样式 × 状态色调 → 样式表：statusToneStyles[variant][tone]（一般用 statusToneSx） */
+var statusToneStyles = {
+	solid,
+	soft,
+	surface,
+	outline
+};
+/** 每种状态色调默认的图标（Lucide）：提示条、通知、确认对话框按色调自动选图标 */
+var statusIcons = {
+	neutral: Info,
+	accent: Info,
+	info: Info,
+	success: CircleCheck,
+	warning: TriangleAlert,
+	danger: CircleAlert
+};
+/** 样式 × 色调 → 颜色、底色与边框 */
+function statusToneSx(variant, tone) {
+	return [statusToneBorderStyles.bordered, statusToneStyles[variant][tone]];
+}
+/**
+* 实底色调的颜色变量：选中的勾选框、单选框、开关与滑块的已选部分用 `var(--tone-fill)` 作底色、
+* `var(--tone-on-fill)` 作其上的对勾、圆点、滑块色。组件根元素加 toneFillStyles[tone]，各部件引用变量：
+* 部件的选中样式不随色调再分六份。
+* 状态色用文字色而不是实色：黄、绿的实色在表面上不到 3:1，图形要的是与周围的对比；danger 同理（暗色主题里在轨道上不到 3:1）
+*/
+var toneFillStyles = css.create({
+	neutral: {
+		"--tone-fill": "_colors.inverseSurface",
+		"--tone-on-fill": "_colors.inverseText"
+	},
+	accent: {
+		"--tone-fill": "_colors.accent",
+		"--tone-on-fill": "_colors.accentContrast"
+	},
+	info: {
+		"--tone-fill": "_colors.infoText",
+		"--tone-on-fill": "_colors.background"
+	},
+	success: {
+		"--tone-fill": "_colors.successText",
+		"--tone-on-fill": "_colors.background"
+	},
+	warning: {
+		"--tone-fill": "_colors.warningText",
+		"--tone-on-fill": "_colors.background"
+	},
+	danger: {
+		"--tone-fill": "_colors.dangerText",
+		"--tone-on-fill": "_colors.background"
+	}
+});
+//#endregion
+export { statusIcons, statusToneBorderStyles, statusToneStyles, statusToneSx, toneFillStyles };
+
+//# sourceMappingURL=tone-styles.js.map

package/dist/utils/style/tone-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone-styles.js","names":[],"sources":["../../../src/utils/style/tone-styles.ts"],"sourcesContent":["/**\n * 状态色调的样式表与默认图标：Badge、Tag、Alert、Toast 等“带颜色的标记与提示”共用；按钮家族、Progress 等也用这一套色调。\n * 外观 = variant（实底 / 浅色底 / 浅色底加描边 / 描边）× tone（六种色调）。\n * 实底用各色调的实色与其上的字色（accent / accentContrast、success / successContrast…），主题检查保证 4.5:1。\n */\nimport { CircleAlert, CircleCheck, Info, TriangleAlert } from '@lucide/icons';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { IconData } from '../../base/Icon';\nimport type { StyleTable } from './styles';\n\n/** 状态色调 */\nexport interface StatusTones {\n  /** 中性：普通的标签、计数，不需要强调的操作（如“取消”） */\n  neutral: unknown;\n  /** 品牌色：新功能、选中、主要操作 */\n  accent: unknown;\n  /** 信息：提示、说明 */\n  info: unknown;\n  /** 成功：已完成、正常 */\n  success: unknown;\n  /** 警告：需要注意、即将过期 */\n  warning: unknown;\n  /** 危险：错误、失败、删除等破坏性操作 */\n  danger: unknown;\n}\n\n/** 标记与提示的样式 */\nexport interface StatusVariants {\n  /** 实底：最醒目，计数、状态点 */\n  solid: unknown;\n  /** 浅色底（默认） */\n  soft: unknown;\n  /** 浅色底加描边 */\n  surface: unknown;\n  /** 只有描边 */\n  outline: unknown;\n}\n\n/** 状态色调 */\nexport type StatusTone = keyof StatusTones;\n/** 标记与提示的样式 */\nexport type StatusVariant = keyof StatusVariants;\n\nconst solid = css.create({\n  neutral: { color: '_inverseText', backgroundColor: '_inverseSurface' },\n  accent: { color: '_accentContrast', backgroundColor: '_accent' },\n  info: { color: '_infoContrast', backgroundColor: '_info' },\n  success: { color: '_successContrast', backgroundColor: '_success' },\n  warning: { color: '_warningContrast', backgroundColor: '_warning' },\n  danger: { color: '_dangerContrast', backgroundColor: '_danger' },\n});\n\nconst soft = css.create({\n  neutral: { color: '_text', backgroundColor: '_fill' },\n  accent: { color: '_accentText', backgroundColor: '_accentSoft' },\n  info: { color: '_infoText', backgroundColor: '_infoSoft' },\n  success: { color: '_successText', backgroundColor: '_successSoft' },\n  warning: { color: '_warningText', backgroundColor: '_warningSoft' },\n  danger: { color: '_dangerText', backgroundColor: '_dangerSoft' },\n});\n\nconst surface = css.create({\n  neutral: { color: '_text', backgroundColor: '_surface', borderColor: '_border' },\n  accent: { color: '_accentText', backgroundColor: '_accentSoft', borderColor: '_accentBorder' },\n  info: { color: '_infoText', backgroundColor: '_infoSoft', borderColor: '_infoBorder' },\n  success: {\n    color: '_successText',\n    backgroundColor: '_successSoft',\n    borderColor: '_successBorder',\n  },\n  warning: {\n    color: '_warningText',\n    backgroundColor: '_warningSoft',\n    borderColor: '_warningBorder',\n  },\n  danger: { color: '_dangerText', backgroundColor: '_dangerSoft', borderColor: '_dangerBorder' },\n});\n\nconst outline = css.create({\n  neutral: { color: '_text', borderColor: '_border' },\n  accent: { color: '_accentText', borderColor: '_accentBorder' },\n  info: { color: '_infoText', borderColor: '_infoBorder' },\n  success: { color: '_successText', borderColor: '_successBorder' },\n  warning: { color: '_warningText', borderColor: '_warningBorder' },\n  danger: { color: '_dangerText', borderColor: '_dangerBorder' },\n});\n\n/** 状态色调 的样式：bordered */\nexport const statusToneBorderStyles = css.create({\n  // 每种样式都留出边框的位置（实底、浅色底时透明），切换样式时尺寸不变\n  bordered: { borderWidth: '_xs', borderStyle: 'solid', borderColor: 'transparent' },\n});\n\n/** 样式 × 状态色调 → 样式表：statusToneStyles[variant][tone]（一般用 statusToneSx） */\nexport const statusToneStyles: Readonly<Record<StatusVariant, StyleTable<StatusTone>>> = {\n  solid,\n  soft,\n  surface,\n  outline,\n};\n\n/** 每种状态色调默认的图标（Lucide）：提示条、通知、确认对话框按色调自动选图标 */\nexport const statusIcons: Readonly<Record<StatusTone, IconData>> = {\n  neutral: Info,\n  accent: Info,\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  danger: CircleAlert,\n};\n\n/** 样式 × 色调 → 颜色、底色与边框 */\nexport function statusToneSx(variant: StatusVariant, tone: StatusTone): SxStyles {\n  return [statusToneBorderStyles.bordered, statusToneStyles[variant][tone]] as SxStyles;\n}\n\n/**\n * 实底色调的颜色变量：选中的勾选框、单选框、开关与滑块的已选部分用 `var(--tone-fill)` 作底色、\n * `var(--tone-on-fill)` 作其上的对勾、圆点、滑块色。组件根元素加 toneFillStyles[tone]，各部件引用变量：\n * 部件的选中样式不随色调再分六份。\n * 状态色用文字色而不是实色：黄、绿的实色在表面上不到 3:1，图形要的是与周围的对比；danger 同理（暗色主题里在轨道上不到 3:1）\n */\nexport const toneFillStyles = css.create({\n  neutral: { '--tone-fill': '_colors.inverseSurface', '--tone-on-fill': '_colors.inverseText' },\n  accent: { '--tone-fill': '_colors.accent', '--tone-on-fill': '_colors.accentContrast' },\n  info: { '--tone-fill': '_colors.infoText', '--tone-on-fill': '_colors.background' },\n  success: { '--tone-fill': '_colors.successText', '--tone-on-fill': '_colors.background' },\n  warning: { '--tone-fill': '_colors.warningText', '--tone-on-fill': '_colors.background' },\n  danger: { '--tone-fill': '_colors.dangerText', '--tone-on-fill': '_colors.background' },\n});\n"],"mappings":";;;;;;;;AA4CA,IAAM,QAAQ,IAAI,OAAO;CACvB,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAkB;CACrE,QAAQ;EAAE,OAAO;EAAmB,iBAAiB;CAAU;CAC/D,MAAM;EAAE,OAAO;EAAiB,iBAAiB;CAAQ;CACzD,SAAS;EAAE,OAAO;EAAoB,iBAAiB;CAAW;CAClE,SAAS;EAAE,OAAO;EAAoB,iBAAiB;CAAW;CAClE,QAAQ;EAAE,OAAO;EAAmB,iBAAiB;CAAU;AACjE,CAAC;AAED,IAAM,OAAO,IAAI,OAAO;CACtB,SAAS;EAAE,OAAO;EAAS,iBAAiB;CAAQ;CACpD,QAAQ;EAAE,OAAO;EAAe,iBAAiB;CAAc;CAC/D,MAAM;EAAE,OAAO;EAAa,iBAAiB;CAAY;CACzD,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAe;CAClE,SAAS;EAAE,OAAO;EAAgB,iBAAiB;CAAe;CAClE,QAAQ;EAAE,OAAO;EAAe,iBAAiB;CAAc;AACjE,CAAC;AAED,IAAM,UAAU,IAAI,OAAO;CACzB,SAAS;EAAE,OAAO;EAAS,iBAAiB;EAAY,aAAa;CAAU;CAC/E,QAAQ;EAAE,OAAO;EAAe,iBAAiB;EAAe,aAAa;CAAgB;CAC7F,MAAM;EAAE,OAAO;EAAa,iBAAiB;EAAa,aAAa;CAAc;CACrF,SAAS;EACP,OAAO;EACP,iBAAiB;EACjB,aAAa;CACf;CACA,SAAS;EACP,OAAO;EACP,iBAAiB;EACjB,aAAa;CACf;CACA,QAAQ;EAAE,OAAO;EAAe,iBAAiB;EAAe,aAAa;CAAgB;AAC/F,CAAC;AAED,IAAM,UAAU,IAAI,OAAO;CACzB,SAAS;EAAE,OAAO;EAAS,aAAa;CAAU;CAClD,QAAQ;EAAE,OAAO;EAAe,aAAa;CAAgB;CAC7D,MAAM;EAAE,OAAO;EAAa,aAAa;CAAc;CACvD,SAAS;EAAE,OAAO;EAAgB,aAAa;CAAiB;CAChE,SAAS;EAAE,OAAO;EAAgB,aAAa;CAAiB;CAChE,QAAQ;EAAE,OAAO;EAAe,aAAa;CAAgB;AAC/D,CAAC;;AAGD,IAAa,yBAAyB,IAAI,OAAO,EAE/C,UAAU;CAAE,aAAa;CAAO,aAAa;CAAS,aAAa;AAAc,EACnF,CAAC;;AAGD,IAAa,mBAA4E;CACvF;CACA;CACA;CACA;AACF;;AAGA,IAAa,cAAsD;CACjE,SAAS;CACT,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;AACV;;AAGA,SAAgB,aAAa,SAAwB,MAA4B;CAC/E,OAAO,CAAC,uBAAuB,UAAU,iBAAiB,QAAQ,CAAC,KAAK;AAC1E;;;;;;;AAQA,IAAa,iBAAiB,IAAI,OAAO;CACvC,SAAS;EAAE,eAAe;EAA0B,kBAAkB;CAAsB;CAC5F,QAAQ;EAAE,eAAe;EAAkB,kBAAkB;CAAyB;CACtF,MAAM;EAAE,eAAe;EAAoB,kBAAkB;CAAqB;CAClF,SAAS;EAAE,eAAe;EAAuB,kBAAkB;CAAqB;CACxF,SAAS;EAAE,eAAe;EAAuB,kBAAkB;CAAqB;CACxF,QAAQ;EAAE,eAAe;EAAsB,kBAAkB;CAAqB;AACxF,CAAC"}

package/dist/utils/style/transitions.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 顶层元素（原生 popover、模态 dialog）的进出场过渡，纯 CSS：
+ *   - 进场：打开状态（:popover-open / :modal）里用 @starting-style 给出起始值
+ *   - 离场：display 与 overlay 加 allow-discrete，关闭后先播完过渡、再离开顶层
+ * 原生弹层被 Esc、点击外部关闭时 JS 来不及介入，所以不用 JS 动画。
+ * 用法：`sx: [styles.panel, transitions.scale]`；遮罩再加 `transitions.backdrop`。
+ * 进场用 enter 缓动与 md 时长，离场用 exit 缓动与更短的 sm 时长；“减少动态效果”时时长为 0。
+ * 离场过渡依赖 CSS 的 overlay，目前只有 Chromium 支持；Firefox、Safari 关闭后立即隐藏（三大浏览器实测），
+ * 进场过渡各浏览器都有。属于渐进增强：不支持时少了离场动画，状态不受影响。
+ */
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+/** 顶层元素的进出场过渡：fade 淡入淡出、scale 缩放加淡入、backdrop 模态遮罩的淡入 */
+export declare const transitions: Readonly<{
+    backdrop: css.CompiledStyles;
+    fade: css.CompiledStyles;
+    scale: css.CompiledStyles;
+}>;
+/** 交互状态的过渡：悬停、按下、选中、聚焦时颜色与阴影的变化（按钮、列表项、标签、输入框外壳共用） */
+export declare const interactionTransitions: Readonly<{
+    colors: css.CompiledStyles;
+}>;
+/** 展开指示（chevron）的旋转过渡；旋转角度由各组件给（右指向下 90°，下指向上 180°） */
+export declare const disclosureStyles: Readonly<{
+    icon: css.CompiledStyles;
+}>;
+/**
+ * 配合 usePresence 的淡入淡出：进场用 enter 缓动，离场（presence.state 为 closed）淡出到 0 用 exit 缓动。
+ *   sx: [styles.root, presenceStyles.fade, presence.state === 'closed' && presenceStyles.leaving]
+ */
+export declare const presenceStyles: Readonly<{
+    fade: css.CompiledStyles;
+    leaving: css.CompiledStyles;
+}>;
+/**
+ * 等元素（含子元素）上正在进行的过渡与动画结束；没有时立即完成，“减少动态效果”时也就立即完成。
+ * 被打断（取消、反向）的动画也算结束，调用方按当前状态决定下一步。
+ * 无限循环的动画（加载指示的旋转）永远不会结束，不等它。
+ * 最多等 timeout 毫秒（默认 1500，比主题最长的时长宽裕得多）：Linux 上的 WebKit 偶尔把过渡停在起点不动，
+ * 不能让离场、收起的流程一直挂着。
+ */
+export declare function afterTransitions(element: Element, { timeout }?: {
+    timeout?: number;
+}): Promise<void>;