iter(g85): 进度条补可访问名与语义色

.ua/backlog.json

@@ -1036,6 +1036,14 @@
       "acceptance": "width 为数字的列在表头右缘出现手柄：拖动实时改对应 <col> 宽度（下限 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"
     }
   ]
 }

.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<number>",
-                "d": "当前进度 0-100 信号，变化自动平滑过渡（越界钳制）"
+                "d": "当前进度 0-100 的信号；不传即不确定态（未知时长的加载）"
               },
               {
                 "n": "showText",
                 "t": "boolean",
-                "d": "是否显示百分比文字；缺省 true",
+                "d": "是否右侧显示百分比；缺省 true（不确定态忽略）"
-                "df": "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：填充块匀速往复，不显示百分比，读屏读作进行中",
+              "传 value 信号给定量进度，不传则退化为往复的不确定态",
-              "创建数值信号 pct = signal(0)，范围 0-100（越界自动钳制）",
+              "label 写清这是什么进度，读屏会把名称与百分比一起念出来",
-              "传入 value，填充宽度与百分比文字随信号平滑过渡",
+              "失败或告警用 variant: 'danger' / 'warning'，该颜色在满格时也不被 success 覆盖"
-              "进行中填充带流动条纹，到 100% 自动变 success 色并停止条纹",
-              "不需要百分比文字时传 showText: false",
-              "定量进度用 value 信号：满格自动切 success 色并停止条纹，role=progressbar + aria-valuenow 同步"
             ]
           },
           {

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 }),
+    progress({ value: percent, label: '上传进度' }),
-    h('div', { class: 'row' }, h('span', { class: 'out' }, '不确定态：'), progress()),
+    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',

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<number> —— 当前进度 0-100 信号，变化自动平滑过渡（越界钳制）
+- value：Signal<number> —— 当前进度 0-100 的信号；不传即不确定态（未知时长的加载）
-- showText（默认 true）：boolean —— 是否显示百分比文字；缺省 true
+- 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：填充块匀速往复，不显示百分比，读屏读作进行中
+1. 传 value 信号给定量进度，不传则退化为往复的不确定态
-2. 创建数值信号 pct = signal(0)，范围 0-100（越界自动钳制）
+2. label 写清这是什么进度，读屏会把名称与百分比一起念出来
-3. 传入 value，填充宽度与百分比文字随信号平滑过渡
+3. 失败或告警用 variant: 'danger' / 'warning'，该颜色在满格时也不被 success 覆盖
-4. 进行中填充带流动条纹，到 100% 自动变 success 色并停止条纹
-5. 不需要百分比文字时传 showText: false
-6. 定量进度用 value 信号：满格自动切 success 色并停止条纹，role=progressbar + aria-valuenow 同步
 
 现场演示：apps/docs/demo.html#sec-feedback
 

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()))),

packages/skin/ui/src/types.ts

@@ -314,6 +314,8 @@ export interface SpinnerProps {
 export interface ProgressProps {
   value?: Signal<number>; // 当前进度 0-100 的信号；不传即不确定态（未知时长的加载）
   showText?: boolean;     // 是否右侧显示百分比；缺省 true（不确定态忽略）
+  label?: string;         // 可访问名，如「上传进度」；缺省不确定态念「进行中」，定量态无名称
+  variant?: 'default' | 'success' | 'warning' | 'danger'; // 填充语义色；缺省 default（满格自动切 success）
 }
 
 /*** 标签页入参 ***/

packages/skin/ui/ua.manifest.json

@@ -1123,23 +1123,29 @@
           {
             "n": "value",
             "t": "Signal<number>",
-            "d": "当前进度 0-100 信号，变化自动平滑过渡（越界钳制）"
+            "d": "当前进度 0-100 的信号；不传即不确定态（未知时长的加载）"
           },
           {
             "n": "showText",
             "t": "boolean",
-            "d": "是否显示百分比文字；缺省 true",
+            "d": "是否右侧显示百分比；缺省 true（不确定态忽略）"
-            "df": "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：填充块匀速往复，不显示百分比，读屏读作进行中",
+          "传 value 信号给定量进度，不传则退化为往复的不确定态",
-          "创建数值信号 pct = signal(0)，范围 0-100（越界自动钳制）",
+          "label 写清这是什么进度，读屏会把名称与百分比一起念出来",
-          "传入 value，填充宽度与百分比文字随信号平滑过渡",
+          "失败或告警用 variant: 'danger' / 'warning'，该颜色在满格时也不被 success 覆盖"
-          "进行中填充带流动条纹，到 100% 自动变 success 色并停止条纹",
-          "不需要百分比文字时传 showText: false",
-          "定量进度用 value 信号：满格自动切 success 色并停止条纹，role=progressbar + aria-valuenow 同步"
         ]
       },
       {

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%;