diff --git a/.ua/backlog.json b/.ua/backlog.json
index 7492447..7064d4b 100644
--- a/.ua/backlog.json
+++ b/.ua/backlog.json
@@ -1036,6 +1036,14 @@
"acceptance": "width 为数字的列在表头右缘出现手柄:拖动实时改对应
宽度(下限 56px,拖出表头仍跟手),聚焦手柄后 ← → 每次 ±8px,双击复位到声明宽度;拖拽/双击不触发排序;拖拽期间全局禁选文本;样式走令牌且有 reduced-motion 兜底;dataTable ≤ 200 行;npm run check 全绿",
"notes": "自补:可用性;拖拽与键盘共用 apply 单一写宽入口,逻辑拆到 columnResize.ts 免撑大 dataTable",
"status": "done"
+ },
+ {
+ "id": "g85",
+ "title": "进度条补可访问名与语义色",
+ "motivation": "定量态只有 aria-valuenow,没有名称——读屏只念「50%」,不知道是什么在 50%;且除 accent/success 外没有失败告警色,同步失败也只能显示成一片蓝",
+ "acceptance": "新增 label(可访问名,不确定态缺省「进行中」兜底)与 variant(default/success/warning/danger);语义色规则置于 .ua-done 之后同特异性胜出,满格不回退 success;样式只消费 --ua-* 令牌;文档 props/steps 与演示同步;npm run check 全绿",
+ "notes": "自补:无障碍 + 视觉语义;CSS 层用特异性解决 variant 与满格 success 的冲突,不加 JS 分支",
+ "status": "open"
}
]
}
diff --git a/.ua/index.json b/.ua/index.json
index 29ecd33..549db7a 100644
--- a/.ua/index.json
+++ b/.ua/index.json
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
- "generatedAt": "2026-10-26T05:00:45.858Z",
+ "generatedAt": "2026-10-26T05:03:25.043Z",
"repoRoot": ".",
"packages": [
{
@@ -1252,23 +1252,29 @@
{
"n": "value",
"t": "Signal",
- "d": "当前进度 0-100 信号,变化自动平滑过渡(越界钳制)"
+ "d": "当前进度 0-100 的信号;不传即不确定态(未知时长的加载)"
},
{
"n": "showText",
"t": "boolean",
- "d": "是否显示百分比文字;缺省 true",
- "df": "true"
+ "d": "是否右侧显示百分比;缺省 true(不确定态忽略)"
+ },
+ {
+ "n": "label",
+ "t": "string",
+ "d": "可访问名,如「上传进度」;缺省不确定态念「进行中」"
+ },
+ {
+ "n": "variant",
+ "t": "'default' | 'success' | 'warning' | 'danger'",
+ "d": "填充语义色;缺省 default(满格自动切 success)"
}
],
"example": "const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() + 5) % 105), 400)",
"steps": [
- "时长未知的加载直接 progress() 不传 value:填充块匀速往复,不显示百分比,读屏读作进行中",
- "创建数值信号 pct = signal(0),范围 0-100(越界自动钳制)",
- "传入 value,填充宽度与百分比文字随信号平滑过渡",
- "进行中填充带流动条纹,到 100% 自动变 success 色并停止条纹",
- "不需要百分比文字时传 showText: false",
- "定量进度用 value 信号:满格自动切 success 色并停止条纹,role=progressbar + aria-valuenow 同步"
+ "传 value 信号给定量进度,不传则退化为往复的不确定态",
+ "label 写清这是什么进度,读屏会把名称与百分比一起念出来",
+ "失败或告警用 variant: 'danger' / 'warning',该颜色在满格时也不被 success 覆盖"
]
},
{
diff --git a/apps/demo/main.ts b/apps/demo/main.ts
index 0b033d6..55c44c0 100644
--- a/apps/demo/main.ts
+++ b/apps/demo/main.ts
@@ -364,8 +364,9 @@ const content = h(
alert({ message: '信息提示:这是一条 info 提示条。' }),
alert({ message: '警告提示:操作可能存在风险。', variant: 'warning' }),
h('div', { class: 'row' }, spinner(), spinner({ size: 26 })),
- progress({ value: percent }),
- h('div', { class: 'row' }, h('span', { class: 'out' }, '不确定态:'), progress()),
+ progress({ value: percent, label: '上传进度' }),
+ h('div', { class: 'row' }, h('span', { class: 'out' }, '语义色:'), progress({ value: percent, variant: 'danger', label: '同步失败重试进度' })),
+ h('div', { class: 'row' }, h('span', { class: 'out' }, '不确定态:'), progress({ label: '正在连接' })),
),
section(
'sec-alert',
diff --git a/llms-full.txt b/llms-full.txt
index 1465a9b..6007b03 100644
--- a/llms-full.txt
+++ b/llms-full.txt
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
-> 自动生成于 2026-10-26T05:00:45.858Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
+> 自动生成于 2026-10-26T05:03:25.043Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -644,8 +644,10 @@ spinner(); spinner({ size: 26 })
参数:
-- value:Signal —— 当前进度 0-100 信号,变化自动平滑过渡(越界钳制)
-- showText(默认 true):boolean —— 是否显示百分比文字;缺省 true
+- value:Signal —— 当前进度 0-100 的信号;不传即不确定态(未知时长的加载)
+- showText:boolean —— 是否右侧显示百分比;缺省 true(不确定态忽略)
+- label:string —— 可访问名,如「上传进度」;缺省不确定态念「进行中」
+- variant:'default' | 'success' | 'warning' | 'danger' —— 填充语义色;缺省 default(满格自动切 success)
示例:
@@ -655,12 +657,9 @@ const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() +
手把手:
-1. 时长未知的加载直接 progress() 不传 value:填充块匀速往复,不显示百分比,读屏读作进行中
-2. 创建数值信号 pct = signal(0),范围 0-100(越界自动钳制)
-3. 传入 value,填充宽度与百分比文字随信号平滑过渡
-4. 进行中填充带流动条纹,到 100% 自动变 success 色并停止条纹
-5. 不需要百分比文字时传 showText: false
-6. 定量进度用 value 信号:满格自动切 success 色并停止条纹,role=progressbar + aria-valuenow 同步
+1. 传 value 信号给定量进度,不传则退化为往复的不确定态
+2. label 写清这是什么进度,读屏会把名称与百分比一起念出来
+3. 失败或告警用 variant: 'danger' / 'warning',该颜色在满格时也不被 success 覆盖
现场演示:apps/docs/demo.html#sec-feedback
diff --git a/packages/skin/ui/src/progress.ts b/packages/skin/ui/src/progress.ts
index 3dfe25c..18fd126 100644
--- a/packages/skin/ui/src/progress.ts
+++ b/packages/skin/ui/src/progress.ts
@@ -9,10 +9,13 @@ export function progress(props: ProgressProps = {}): HTMLElement {
const track = h('div', { class: 'ua-progress-track' }, fill);
const text = h('span', { class: 'ua-progress-text' });
const withText = props.showText !== false && !!value; // 不确定态没有百分比可显示
+ const label = props.label; // 可访问名:读屏念「上传进度 50%」而不是干巴巴的百分比
+ const variant = props.variant ?? 'default'; // 语义色:default 之外都带类名,满格时仍以 variant 为准
+ const cls = `ua-progress${variant === 'default' ? '' : ` ua-progress-${variant}`}`;
if (!value) {
fill.classList.add('ua-indeterminate'); // 宽度与往复动画交给 CSS
- return h('div', { class: 'ua-progress', role: 'progressbar', 'aria-label': '进行中' }, track);
+ return h('div', { class: cls, role: 'progressbar', 'aria-label': label ?? '进行中' }, track);
}
effect(() => {
const v = clamp(value()); // 依赖收集:信号变化自动写回
@@ -23,8 +26,9 @@ export function progress(props: ProgressProps = {}): HTMLElement {
return h(
'div',
{
- class: 'ua-progress',
+ class: cls,
role: 'progressbar',
+ 'aria-label': label,
'aria-valuemin': '0',
'aria-valuemax': '100',
'aria-valuenow': () => String(Math.round(clamp(value()))),
diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts
index 8e8c989..26a54f9 100644
--- a/packages/skin/ui/src/types.ts
+++ b/packages/skin/ui/src/types.ts
@@ -314,6 +314,8 @@ export interface SpinnerProps {
export interface ProgressProps {
value?: Signal; // 当前进度 0-100 的信号;不传即不确定态(未知时长的加载)
showText?: boolean; // 是否右侧显示百分比;缺省 true(不确定态忽略)
+ label?: string; // 可访问名,如「上传进度」;缺省不确定态念「进行中」,定量态无名称
+ variant?: 'default' | 'success' | 'warning' | 'danger'; // 填充语义色;缺省 default(满格自动切 success)
}
/*** 标签页入参 ***/
diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json
index 9cad106..7e42430 100644
--- a/packages/skin/ui/ua.manifest.json
+++ b/packages/skin/ui/ua.manifest.json
@@ -1123,23 +1123,29 @@
{
"n": "value",
"t": "Signal",
- "d": "当前进度 0-100 信号,变化自动平滑过渡(越界钳制)"
+ "d": "当前进度 0-100 的信号;不传即不确定态(未知时长的加载)"
},
{
"n": "showText",
"t": "boolean",
- "d": "是否显示百分比文字;缺省 true",
- "df": "true"
+ "d": "是否右侧显示百分比;缺省 true(不确定态忽略)"
+ },
+ {
+ "n": "label",
+ "t": "string",
+ "d": "可访问名,如「上传进度」;缺省不确定态念「进行中」"
+ },
+ {
+ "n": "variant",
+ "t": "'default' | 'success' | 'warning' | 'danger'",
+ "d": "填充语义色;缺省 default(满格自动切 success)"
}
],
"example": "const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() + 5) % 105), 400)",
"steps": [
- "时长未知的加载直接 progress() 不传 value:填充块匀速往复,不显示百分比,读屏读作进行中",
- "创建数值信号 pct = signal(0),范围 0-100(越界自动钳制)",
- "传入 value,填充宽度与百分比文字随信号平滑过渡",
- "进行中填充带流动条纹,到 100% 自动变 success 色并停止条纹",
- "不需要百分比文字时传 showText: false",
- "定量进度用 value 信号:满格自动切 success 色并停止条纹,role=progressbar + aria-valuenow 同步"
+ "传 value 信号给定量进度,不传则退化为往复的不确定态",
+ "label 写清这是什么进度,读屏会把名称与百分比一起念出来",
+ "失败或告警用 variant: 'danger' / 'warning',该颜色在满格时也不被 success 覆盖"
]
},
{
diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css
index 7fda853..fd217b3 100644
--- a/packages/skin/ui/ui.css
+++ b/packages/skin/ui/ui.css
@@ -1364,6 +1364,16 @@ button.ua-step-dot:hover {
animation: none;
opacity: 0;
}
+/* 语义色:显式声明在 ua-done 之后,同特异性以调用方 variant 为准(满格不回退 success) */
+.ua-progress-success .ua-progress-fill {
+ background: var(--ua-color-success);
+}
+.ua-progress-warning .ua-progress-fill {
+ background: var(--ua-color-warning);
+}
+.ua-progress-danger .ua-progress-fill {
+ background: var(--ua-color-danger);
+}
/* 不确定态:固定比例填充块匀速往复,宽度与位移都由动画控制 */
.ua-progress-fill.ua-indeterminate {
width: 35%;