StateDot 状态点

一个 8px 的生命周期指示点：光晕与实心点在同一个元素里，两层都用 currentColor，因此一个状态是一条颜色规则，而不是两个令牌。

适用场景：某一行需要表明一件事进行到哪一步（排队中、进行中、已完成、失败），又不值得为它单开一行时。<r-tool-card> 和会话压缩标记用的都是它。

快速开始

基础用法

<r-state-dot state="idle"></r-state-dot>
<r-state-dot state="running"></r-state-dot>
<r-state-dot state="success"></r-state-dot>
<r-state-dot state="warning"></r-state-dot>
<r-state-dot state="error"></r-state-dot>

running 会脉动，其余都是静止的。无法识别的值渲染为 idle 而不是消失，这样一来，生产端新增、页面还没学会的状态，仍然占着它在行里的位置。

与文字并排

点只用颜色表示状态，不解释颜色代表什么。永远不要让颜色成为区分两行的唯一线索，详见 设计规范。

API 参考

属性

无障碍

没有 label 时这个点是 aria-hidden 的。 如果同一行的文字已经说明了结果，点在屏幕阅读器里就是噪音，把「进行中」念两遍帮不了任何人。只有当点是状态的唯一载体时才设置 label：

<!-- 文字已经说了：让点保持沉默 -->
<r-state-dot state="error"></r-state-dot> <span>构建失败</span>

<!-- 单元格里只有点：给它命名 -->
<r-state-dot state="error" label="构建失败"></r-state-dot>

Part

样式

每个状态只需要一个颜色：光晕是该颜色的 16%，实心点是它内缩 60% 的结果，两层都由 currentColor 绘制。所以一个状态是一个令牌，而不是两个：

running 是脉动实心点而不是旋转：8px 太小，转动看不出方向；在 prefers-reduced-motion 下脉动会停止。