@manohub/ui 0.10.5 → 1.0.0

package/dist/styles/components/avatar.tokens.css

@@ -1,24 +1,24 @@
-/**
- * avatar —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `avatar.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌（只服务本件；跨件令牌才进 theme/） */
-  --ui-avatar-size-sm: 24px;
-  --ui-avatar-size-md: 36px;
-  --ui-avatar-size-lg: 60px;
-  --ui-avatar-size-xl: 80px;
-  --ui-avatar-badge-size: 20px; /* 角标高 20，宽按位数撑开 */
-  --ui-avatar-gap: 10px; /* 堆叠重叠量（组件可用 gap 覆盖） */
-}
+/**
+ * avatar —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `avatar.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（只服务本件；跨件令牌才进 theme/） */
+  --ui-avatar-size-sm: 24px;
+  --ui-avatar-size-md: 36px;
+  --ui-avatar-size-lg: 60px;
+  --ui-avatar-size-xl: 80px;
+  --ui-avatar-badge-size: 20px; /* 角标高 20，宽按位数撑开 */
+  --ui-avatar-gap: 10px; /* 堆叠重叠量（组件可用 gap 覆盖） */
+}

package/dist/styles/components/badge.css

@@ -1,266 +1,266 @@
-/**
- * Badge（徽标 / 标签）。
- *
- * 依据：@aihub/theme 的 components/badge.css（徽标高 20 / 胶囊）与 components/tag.css（标签片几何）。
- */
-
-/* ===== Badge（徽标 / 标签）=====
-   批次 5 前 4 个应用各自手搓徽标，这里按设计稿收敛为 tone × shape × size × dot 的正交组合。
-   每个 tone 先铺一组局部变量（前景 / 底色 / 描边 / 圆点），形态类只决定「用哪几个变量」。 */
-
-.mh-badge {
-  --mh-badge-fg: var(--ui-base-content);
-  --mh-badge-bg: transparent;
-  --mh-badge-border: transparent;
-  --mh-badge-dot: var(--ui-base-content-subtle);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  font-size: var(--ui-font-caption);
-  /* `as="button"`（可点形态，`Tag` 的「新增」用）时根是 `<button>`：UA 会把字形换成 Arial、
-     文字居中、并给 padding/border/background —— 后三样本件已自带（`.mh-badge` 的框与各档内距），
-     只有字族漏在外面，这里补上（对 `<span>` 根无副作用：span 本就继承）。 */
-  font-family: inherit;
-  line-height: 1;
-  white-space: nowrap;
-  color: var(--mh-badge-fg);
-  background: var(--mh-badge-bg);
-  border-color: var(--mh-badge-border);
-}
-
-/* 尺寸档的圆角吃**体量档**（`xs` / `sm`），不吃容器档 `md` —— 容器档一改（卡片圆角调整）
-   徽标会跟着变，那是两件无关的事。20 档有设计实证（表格内标签 r3），24 档无实证、按体量就近升一档。
-   高度取**标记体量档**（全局令牌 `--ui-mark-height-sm/md`）：与 `Tag` 的 20 / 24、`Select` 多选
-   标签片的 24 同源 —— 这三处以前各写一份字面量，改一次档要改三处（2026-09-30 收敛）。
-   `Tag` 的基础圆角同日也归到这两档（改前它走控件档 6px）：两族在 20 / 24 上同高同角。 */
-.mh-badge--sm {
-  height: var(--ui-mark-height-sm);
-  padding: 0 6px;
-  min-width: 36px;
-  border-radius: var(--ui-radius-xs);
-}
-
-.mh-badge--md {
-  height: var(--ui-mark-height-md);
-  padding: 0 8px;
-  border-radius: var(--ui-radius-sm);
-}
-
-.mh-badge--default {
-  --mh-badge-fg: var(--ui-base-content);
-  --mh-badge-dot: var(--ui-base-content-subtle);
-}
-
-.mh-badge--primary {
-  --mh-badge-fg: var(--ui-primary);
-  --mh-badge-bg: var(--ui-primary-weak);
-  --mh-badge-border: var(--ui-primary);
-  --mh-badge-dot: var(--ui-primary);
-}
-
-.mh-badge--info {
-  --mh-badge-fg: var(--ui-info);
-  --mh-badge-bg: var(--ui-info-weak);
-  --mh-badge-border: var(--ui-info);
-  --mh-badge-dot: var(--ui-info);
-}
-
-.mh-badge--success {
-  --mh-badge-fg: var(--ui-success);
-  --mh-badge-bg: var(--ui-success-weak);
-  --mh-badge-border: var(--ui-success);
-  --mh-badge-dot: var(--ui-success);
-}
-
-.mh-badge--warning {
-  --mh-badge-fg: var(--ui-warning);
-  --mh-badge-bg: var(--ui-warning-weak);
-  --mh-badge-border: var(--ui-warning);
-  --mh-badge-dot: var(--ui-warning);
-}
-
-.mh-badge--error {
-  --mh-badge-fg: var(--ui-error);
-  --mh-badge-bg: var(--ui-error-weak);
-  --mh-badge-border: var(--ui-error);
-  --mh-badge-dot: var(--ui-error);
-}
-
-/* 浅底标签：只取浅底 + 同色文字（无描边） */
-
-.mh-badge--soft {
-  background: var(--mh-badge-bg);
-  border-color: transparent;
-}
-
-/* 中性软底取 `base-200`（中性面）—— 改前是 `base-50`：那档只比内容底低 1.7 L*，
-   软底淡到与背景不可分（同族 `--primary` 软底也走「弱底」档，此处与之等形）。 */
-.mh-badge--soft.mh-badge--default {
-  --mh-badge-bg: var(--ui-base-200);
-  --mh-badge-fg: var(--ui-base-content-muted);
-}
-
-/* ⚠️ 主色软底取**浅底档** `--ui-primary-weak`（同一槽位的其他消费者：`Tag` 默认底、表壳滑过底、
-   聚焦环）；**不取** `--ui-primary-subtle` —— 那是**选中态底**（树行 / 表格行 / 卡片选中 / 单选卡），
-   两档在 default 主题里差一整档（#EFF5FF → #DBE9FF），取错会让徽标比同排的标签深一档，
-   而徽标表达的是「标记」不是「选中」（2026-09-30 收敛，槽位口径见
-   `@manohub/theme` 的 `default/colors.css` 品牌槽位两条注释）。 */
-.mh-badge--soft.mh-badge--primary {
-  --mh-badge-bg: var(--ui-primary-weak);
-}
-
-/* 描边：浅底 + 同色描边；default 退化为白底 + 中性描边 + 正文色（状态胶囊） */
-
-.mh-badge--outline {
-  background: var(--mh-badge-bg);
-  border-color: var(--mh-badge-border);
-}
-
-.mh-badge--outline.mh-badge--default {
-  --mh-badge-bg: var(--ui-base-100);
-  --mh-badge-border: var(--ui-base-300);
-  --mh-badge-fg: var(--ui-base-content);
-}
-
-/* 无底无框：靠圆点表达状态；成功 / 中性用正文色，错误用危险色 */
-
-.mh-badge--plain {
-  background: transparent;
-  border-color: transparent;
-}
-
-.mh-badge--plain.mh-badge--default {
-  --mh-badge-fg: var(--ui-base-content-muted);
-}
-
-.mh-badge--plain.mh-badge--success {
-  --mh-badge-fg: var(--ui-base-content);
-}
-
-.mh-badge--plain.mh-badge--error {
-  --mh-badge-fg: var(--ui-error);
-}
-
-/* ===== 前置点 / 状态点：**光学对齐**（下移 1px）=====
-   两族的圆点都被 flex 居中在**盒中心**（实测偏心 0px），但**文字的墨迹中心在盒中心之下**：
-   中文（`带点（填充）`）约 +0.5px、纯小写（`sm` / `md`）约 +2px、状态点那族（14px）约 +1px
-   —— 于是盒居中读起来是「点偏高」（2026-09-30 用户反馈，文档站 3× 放大逐档比对确认）。
-   下移 1px 是这几种串的**折中**：中文偏下 0.5px、纯小写偏上 1px。
-   没有再细分的办法 —— 小写字母的墨迹中心本就低于盒中心，任何单一常数都盖不住两种极端。
-   位移走 `top`（绘制层）：不参与 flex 布局，点仍被盒居中，只是看起来对着字。
-   ⚠️ 位移取值在**值区**（`badge.tokens.css` 的 `--ui-badge-dot-shift`）：本件有两个互不嵌套的
-   根类（`.mh-badge` / `.mh-badge--status`），声明在任一**根类**上都到不了另一个根。 */
-
-.mh-badge__dot {
-  width: 8px;
-  height: 8px;
-  flex: none;
-  border-radius: var(--ui-radius-full);
-  position: relative;
-  top: var(--ui-badge-dot-shift);
-}
-
-.mh-badge--dot-filled .mh-badge__dot {
-  background: var(--mh-badge-dot);
-}
-
-.mh-badge--dot-ring .mh-badge__dot {
-  box-sizing: border-box;
-  border: 2px solid var(--mh-badge-dot);
-  background: var(--ui-base-100);
-}
-
-/* ===== 数字角标（count）=====
- * 一份面覆盖两种用法：**独立显示**（无子元素）时它就是一枚胶囊；
- * **包裹子元素**时容器转 `relative`、角标脱流钉在右上角（`:has()` 判别，不需要第二套 DOM）。 */
-.mh-badge--count {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.mh-badge__count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  /* 白圈：钉在头像 / 图标上时与底色分离（没有它，角标会像长在图标里的一块） */
-  border: 2px solid var(--ui-base-100);
-  border-radius: var(--ui-radius-full);
-  font-size: 12px;
-  font-weight: var(--ui-weight-medium);
-  line-height: 1;
-  white-space: nowrap;
-  /* 缺省即「危险红」：数字角标表达的是「有未读 / 有异常」，与主流库同口径 */
-  background: var(--ui-error);
-  color: var(--ui-error-content);
-}
-
-/* 包裹态：角标脱流钉右上角（`translate(50%, -50%)` 让它挂在内容的角上而不是压进去） */
-.mh-badge--count:has(> :not(.mh-badge__count)) > .mh-badge__count {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-}
-
-/* 角标的 tone：实色底 + 反白字（与内容徽标的浅底同色字不同 —— 角标要够跳） */
-.mh-badge__count.mh-badge--primary {
-  background: var(--ui-primary);
-  color: var(--ui-primary-content);
-}
-.mh-badge__count.mh-badge--info {
-  background: var(--ui-info);
-  color: var(--ui-info-content);
-}
-.mh-badge__count.mh-badge--success {
-  background: var(--ui-success);
-  color: var(--ui-success-content);
-}
-.mh-badge__count.mh-badge--warning {
-  background: var(--ui-warning);
-  color: var(--ui-warning-content);
-}
-.mh-badge__count.mh-badge--default {
-  background: var(--ui-base-content);
-  color: var(--ui-base-100);
-}
-
-/* ===== 状态点 + 文字（`● 已完成`）=====
- * 最轻的状态表达：无底无框，只有一个点与一行字；点色复用 tone 的 `--mh-badge-dot`。 */
-.mh-badge--status {
-  --mh-badge-dot: var(--ui-base-content-subtle);
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--ui-font-body);
-  line-height: var(--ui-line-body);
-  color: var(--ui-base-content);
-  white-space: nowrap;
-}
-
-.mh-badge__status-dot {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: var(--ui-radius-full);
-  background: var(--mh-badge-dot);
-  /* 与前置点同一句光学对齐（位移取值见 `__dot` 一节的注释；令牌在 badge.tokens.css） */
-  position: relative;
-  top: var(--ui-badge-dot-shift);
-}
-
-/* `processing`（映射到 primary）加点呼吸：静态点读不出「正在进行」 */
-.mh-badge--status.mh-badge--primary .mh-badge__status-dot {
-  animation: mh-badge-pulse 1.6s ease-in-out infinite;
-}
-@keyframes mh-badge-pulse {
-  50% {
-    opacity: 0.3;
-  }
-}
+/**
+ * Badge（徽标 / 标签）。
+ *
+ * 依据：@aihub/theme 的 components/badge.css（徽标高 20 / 胶囊）与 components/tag.css（标签片几何）。
+ */
+
+/* ===== Badge（徽标 / 标签）=====
+   批次 5 前 4 个应用各自手搓徽标，这里按设计稿收敛为 tone × shape × size × dot 的正交组合。
+   每个 tone 先铺一组局部变量（前景 / 底色 / 描边 / 圆点），形态类只决定「用哪几个变量」。 */
+
+.mh-badge {
+  --mh-badge-fg: var(--ui-base-content);
+  --mh-badge-bg: transparent;
+  --mh-badge-border: transparent;
+  --mh-badge-dot: var(--ui-base-content-subtle);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  font-size: var(--ui-font-caption);
+  /* `as="button"`（可点形态，`Tag` 的「新增」用）时根是 `<button>`：UA 会把字形换成 Arial、
+     文字居中、并给 padding/border/background —— 后三样本件已自带（`.mh-badge` 的框与各档内距），
+     只有字族漏在外面，这里补上（对 `<span>` 根无副作用：span 本就继承）。 */
+  font-family: inherit;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--mh-badge-fg);
+  background: var(--mh-badge-bg);
+  border-color: var(--mh-badge-border);
+}
+
+/* 尺寸档的圆角吃**体量档**（`xs` / `sm`），不吃容器档 `md` —— 容器档一改（卡片圆角调整）
+   徽标会跟着变，那是两件无关的事。20 档有设计实证（表格内标签 r3），24 档无实证、按体量就近升一档。
+   高度取**标记体量档**（全局令牌 `--ui-mark-height-sm/md`）：与 `Tag` 的 20 / 24、`Select` 多选
+   标签片的 24 同源 —— 这三处以前各写一份字面量，改一次档要改三处（2026-09-30 收敛）。
+   `Tag` 的基础圆角同日也归到这两档（改前它走控件档 6px）：两族在 20 / 24 上同高同角。 */
+.mh-badge--sm {
+  height: var(--ui-mark-height-sm);
+  padding: 0 6px;
+  min-width: 36px;
+  border-radius: var(--ui-radius-xs);
+}
+
+.mh-badge--md {
+  height: var(--ui-mark-height-md);
+  padding: 0 8px;
+  border-radius: var(--ui-radius-sm);
+}
+
+.mh-badge--default {
+  --mh-badge-fg: var(--ui-base-content);
+  --mh-badge-dot: var(--ui-base-content-subtle);
+}
+
+.mh-badge--primary {
+  --mh-badge-fg: var(--ui-primary);
+  --mh-badge-bg: var(--ui-primary-weak);
+  --mh-badge-border: var(--ui-primary);
+  --mh-badge-dot: var(--ui-primary);
+}
+
+.mh-badge--info {
+  --mh-badge-fg: var(--ui-info);
+  --mh-badge-bg: var(--ui-info-weak);
+  --mh-badge-border: var(--ui-info);
+  --mh-badge-dot: var(--ui-info);
+}
+
+.mh-badge--success {
+  --mh-badge-fg: var(--ui-success);
+  --mh-badge-bg: var(--ui-success-weak);
+  --mh-badge-border: var(--ui-success);
+  --mh-badge-dot: var(--ui-success);
+}
+
+.mh-badge--warning {
+  --mh-badge-fg: var(--ui-warning);
+  --mh-badge-bg: var(--ui-warning-weak);
+  --mh-badge-border: var(--ui-warning);
+  --mh-badge-dot: var(--ui-warning);
+}
+
+.mh-badge--error {
+  --mh-badge-fg: var(--ui-error);
+  --mh-badge-bg: var(--ui-error-weak);
+  --mh-badge-border: var(--ui-error);
+  --mh-badge-dot: var(--ui-error);
+}
+
+/* 浅底标签：只取浅底 + 同色文字（无描边） */
+
+.mh-badge--soft {
+  background: var(--mh-badge-bg);
+  border-color: transparent;
+}
+
+/* 中性软底取 `base-200`（中性面）—— 改前是 `base-50`：那档只比内容底低 1.7 L*，
+   软底淡到与背景不可分（同族 `--primary` 软底也走「弱底」档，此处与之等形）。 */
+.mh-badge--soft.mh-badge--default {
+  --mh-badge-bg: var(--ui-base-200);
+  --mh-badge-fg: var(--ui-base-content-muted);
+}
+
+/* ⚠️ 主色软底取**浅底档** `--ui-primary-weak`（同一槽位的其他消费者：`Tag` 默认底、表壳滑过底、
+   聚焦环）；**不取** `--ui-primary-subtle` —— 那是**选中态底**（树行 / 表格行 / 卡片选中 / 单选卡），
+   两档在 default 主题里差一整档（#EFF5FF → #DBE9FF），取错会让徽标比同排的标签深一档，
+   而徽标表达的是「标记」不是「选中」（2026-09-30 收敛，槽位口径见
+   `@manohub/theme` 的 `default/colors.css` 品牌槽位两条注释）。 */
+.mh-badge--soft.mh-badge--primary {
+  --mh-badge-bg: var(--ui-primary-weak);
+}
+
+/* 描边：浅底 + 同色描边；default 退化为白底 + 中性描边 + 正文色（状态胶囊） */
+
+.mh-badge--outline {
+  background: var(--mh-badge-bg);
+  border-color: var(--mh-badge-border);
+}
+
+.mh-badge--outline.mh-badge--default {
+  --mh-badge-bg: var(--ui-base-100);
+  --mh-badge-border: var(--ui-base-300);
+  --mh-badge-fg: var(--ui-base-content);
+}
+
+/* 无底无框：靠圆点表达状态；成功 / 中性用正文色，错误用危险色 */
+
+.mh-badge--plain {
+  background: transparent;
+  border-color: transparent;
+}
+
+.mh-badge--plain.mh-badge--default {
+  --mh-badge-fg: var(--ui-base-content-muted);
+}
+
+.mh-badge--plain.mh-badge--success {
+  --mh-badge-fg: var(--ui-base-content);
+}
+
+.mh-badge--plain.mh-badge--error {
+  --mh-badge-fg: var(--ui-error);
+}
+
+/* ===== 前置点 / 状态点：**光学对齐**（下移 1px）=====
+   两族的圆点都被 flex 居中在**盒中心**（实测偏心 0px），但**文字的墨迹中心在盒中心之下**：
+   中文（`带点（填充）`）约 +0.5px、纯小写（`sm` / `md`）约 +2px、状态点那族（14px）约 +1px
+   —— 于是盒居中读起来是「点偏高」（2026-09-30 用户反馈，文档站 3× 放大逐档比对确认）。
+   下移 1px 是这几种串的**折中**：中文偏下 0.5px、纯小写偏上 1px。
+   没有再细分的办法 —— 小写字母的墨迹中心本就低于盒中心，任何单一常数都盖不住两种极端。
+   位移走 `top`（绘制层）：不参与 flex 布局，点仍被盒居中，只是看起来对着字。
+   ⚠️ 位移取值在**值区**（`badge.tokens.css` 的 `--ui-badge-dot-shift`）：本件有两个互不嵌套的
+   根类（`.mh-badge` / `.mh-badge--status`），声明在任一**根类**上都到不了另一个根。 */
+
+.mh-badge__dot {
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: var(--ui-radius-full);
+  position: relative;
+  top: var(--ui-badge-dot-shift);
+}
+
+.mh-badge--dot-filled .mh-badge__dot {
+  background: var(--mh-badge-dot);
+}
+
+.mh-badge--dot-ring .mh-badge__dot {
+  box-sizing: border-box;
+  border: 2px solid var(--mh-badge-dot);
+  background: var(--ui-base-100);
+}
+
+/* ===== 数字角标（count）=====
+ * 一份面覆盖两种用法：**独立显示**（无子元素）时它就是一枚胶囊；
+ * **包裹子元素**时容器转 `relative`、角标脱流钉在右上角（`:has()` 判别，不需要第二套 DOM）。 */
+.mh-badge--count {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.mh-badge__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  /* 白圈：钉在头像 / 图标上时与底色分离（没有它，角标会像长在图标里的一块） */
+  border: 2px solid var(--ui-base-100);
+  border-radius: var(--ui-radius-full);
+  font-size: 12px;
+  font-weight: var(--ui-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  /* 缺省即「危险红」：数字角标表达的是「有未读 / 有异常」，与主流库同口径 */
+  background: var(--ui-error);
+  color: var(--ui-error-content);
+}
+
+/* 包裹态：角标脱流钉右上角（`translate(50%, -50%)` 让它挂在内容的角上而不是压进去） */
+.mh-badge--count:has(> :not(.mh-badge__count)) > .mh-badge__count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+/* 角标的 tone：实色底 + 反白字（与内容徽标的浅底同色字不同 —— 角标要够跳） */
+.mh-badge__count.mh-badge--primary {
+  background: var(--ui-primary);
+  color: var(--ui-primary-content);
+}
+.mh-badge__count.mh-badge--info {
+  background: var(--ui-info);
+  color: var(--ui-info-content);
+}
+.mh-badge__count.mh-badge--success {
+  background: var(--ui-success);
+  color: var(--ui-success-content);
+}
+.mh-badge__count.mh-badge--warning {
+  background: var(--ui-warning);
+  color: var(--ui-warning-content);
+}
+.mh-badge__count.mh-badge--default {
+  background: var(--ui-base-content);
+  color: var(--ui-base-100);
+}
+
+/* ===== 状态点 + 文字（`● 已完成`）=====
+ * 最轻的状态表达：无底无框，只有一个点与一行字；点色复用 tone 的 `--mh-badge-dot`。 */
+.mh-badge--status {
+  --mh-badge-dot: var(--ui-base-content-subtle);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  white-space: nowrap;
+}
+
+.mh-badge__status-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--ui-radius-full);
+  background: var(--mh-badge-dot);
+  /* 与前置点同一句光学对齐（位移取值见 `__dot` 一节的注释；令牌在 badge.tokens.css） */
+  position: relative;
+  top: var(--ui-badge-dot-shift);
+}
+
+/* `processing`（映射到 primary）加点呼吸：静态点读不出「正在进行」 */
+.mh-badge--status.mh-badge--primary .mh-badge__status-dot {
+  animation: mh-badge-pulse 1.6s ease-in-out infinite;
+}
+@keyframes mh-badge-pulse {
+  50% {
+    opacity: 0.3;
+  }
+}

package/dist/styles/components/badge.tokens.css

@@ -1,24 +1,24 @@
-/**
- * badge —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `badge.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值、组内间距变 0）。
- *
- * 本件为什么需要本文件：`Badge` 有**两个互不嵌套的根类** —— `.mh-badge`（内容徽标 / 数字角标）
- * 与 `.mh-badge--status`（状态点 + 文字，它不带 `.mh-badge`）。前置点与状态点共用同一枚
- * 光学对齐位移，声明在任何**根类**上都到不了另一个根（自定义属性只向下继承），故按本仓口径
- * 落到容器锚上。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 前置点 / 状态点的**光学对齐**位移（数字见面文件 `__dot` 一节：盒居中读起来偏高）。 */
-  --ui-badge-dot-shift: 1px;
-}
+/**
+ * badge —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `badge.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值、组内间距变 0）。
+ *
+ * 本件为什么需要本文件：`Badge` 有**两个互不嵌套的根类** —— `.mh-badge`（内容徽标 / 数字角标）
+ * 与 `.mh-badge--status`（状态点 + 文字，它不带 `.mh-badge`）。前置点与状态点共用同一枚
+ * 光学对齐位移，声明在任何**根类**上都到不了另一个根（自定义属性只向下继承），故按本仓口径
+ * 落到容器锚上。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 前置点 / 状态点的**光学对齐**位移（数字见面文件 `__dot` 一节：盒居中读起来偏高）。 */
+  --ui-badge-dot-shift: 1px;
+}