@manohub/ui 0.6.0

package/dist/styles/components/button.css

@@ -0,0 +1,454 @@
+/**
+ * Button —— 自绘按钮族（六型 + 三档真实尺寸 + 外形 / 危险色 / 整宽修饰 + 加载 + 图标/文本/菜单形态 + 组容器 + 菜单皮肤）。
+ *
+ * 出处（几何以设计稿《MH后台-0911》品牌页为准，规范同值处不再复述）：
+ * - 控件高 **32** / 内距 **12** / 图文距 **4** / 圆角 **6** / 字号 **14/18 w400** / 组间距 8；
+ * - 主要 = 主色实底 **无投影**（`0:3897`）；次要 = 白底 + `#e6e6e6` 描边 + **中性字色**
+ *   （`0:3892`，文本 `#1a1a1a`）；禁用 = `#f2f2f2` 底 + `#888888` 字（`次要按钮备份`）；
+ * - 小号 24、大号 40（设计未覆盖，沿用）；图标槽 = 全局图标档（见 `--ui-button-icon-size`）；加载环 14 · 0.8s linear；
+ *   虚线 = 区域内添加，文本 = 行内操作，图标 = 方形热区；菜单按钮 = 文本区 ‖ 分割线 ‖ 箭头区。
+ *
+ * **色彩槽位走局部变量**（`--ui-button-accent*`）：六型只描述「底 / 边 / 字的取用位置」，
+ * 具体颜色由槽位变量给。危险色只是把槽位换成错误色，故 `danger` 与任意型**天然正交**，
+ * hover / active / 加载态一并跟随，无需为每个型再写一遍危险态（这是本文件的核心结构）。
+ *
+ * **高度三档全部吃主题令牌**（`--ui-control-height-sm` / `-md` / `-lg`，default 24 / 32 / 40）——
+ * 换主题即换控件尺寸，这正是 theme 层的职责。md 与 lg **不同高**：同高会让 `size`
+ * 沦为无视觉差别的语义标签，调用方无从选择。
+ *
+ * **类名一律 `mh-` 前缀**：本包独立发布，不迁就任何下游的既有类名；同一词根在本包内只有一套类（见 AGENTS）。
+ * 自绘件服务「不装 farris」的场景：静态页 / 其他框架 / 微前端里不带 farris 的子应用。
+ *
+ * **投影**：主要与次要两型**不再带投影**（设计稿的按钮是平的，节点上无 effects）。
+ * 图标型的 hover 光晕仍引用 `--ui-shadow-card-hover` —— 那是 hover 反馈，不是静止装饰，
+ * 且投影一律走令牌、不新造字面量（与 shadows.css「拟物重投影一律收敛到令牌」的口径一致）。
+ *
+ * 边界（有意不做）：规范的 `.btn-seg`（分段按钮，原生同名 radio 驱动）**不在这里实现** ——
+ * 它的用途（一组互斥选项的轻量选择器）由 `capsule` 族承担，重复实现会出现两套分段控件。
+ */
+
+/* 几何只挂在按钮本体上：令牌在同名 `.tokens.css`（锚 `[data-manohub-ui]`），几何若跟着挂会把容器也画成按钮 */
+.mh-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-button-gap);
+  height: var(--ui-button-height);
+  padding: 0 var(--ui-button-padding-x);
+  border: none;
+  border-radius: var(--ui-button-radius);
+  font-family: inherit;
+  font-size: var(--ui-button-font-size);
+  line-height: var(--ui-line-body);
+  cursor: pointer;
+  white-space: nowrap;
+  /* 三态补间（底 / 边 / 字 / 影） */
+  transition-property: background-color, border-color, color, box-shadow;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+
+/* 危险色修饰：换槽位即可，六型与各自 hover / active 一并跟随 */
+.mh-button--danger {
+  --ui-button-accent: var(--ui-error);
+  --ui-button-accent-hover: color-mix(in srgb, var(--ui-error) 88%, black);
+  --ui-button-accent-content: var(--ui-error-content);
+  --ui-button-accent-soft: var(--ui-error-weak);
+}
+
+/* 键盘焦点环：画在按钮自身（与 radio / tag 同一句） */
+.mh-button:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+.mh-button__icon {
+  flex: none;
+  width: var(--ui-button-icon-size);
+  height: var(--ui-button-icon-size);
+}
+
+/* ===== 尺寸档 ===== */
+.mh-button--sm {
+  height: var(--ui-button-height-sm);
+  padding: 0 var(--ui-button-padding-x-sm);
+  font-size: var(--ui-button-font-size-sm);
+}
+.mh-button--sm .mh-button__icon,
+.mh-button--sm .mh-button__caret {
+  width: var(--ui-button-icon-size-sm);
+  height: var(--ui-button-icon-size-sm);
+}
+.mh-button--lg {
+  height: var(--ui-button-height-lg);
+  padding: 0 var(--ui-button-padding-x-lg);
+  font-size: var(--ui-button-font-size-lg);
+}
+.mh-button--lg .mh-button__icon,
+.mh-button--lg .mh-button__caret {
+  width: var(--ui-button-icon-size-lg);
+  height: var(--ui-button-icon-size-lg);
+}
+/* 尺寸档的菜单结构：文字区内距与分割线高度必须跟着档位走 */
+.mh-button--sm.mh-button--menu .mh-button__label {
+  padding: 0 var(--ui-button-padding-x-sm);
+}
+.mh-button--lg.mh-button--menu .mh-button__label {
+  padding: 0 var(--ui-button-padding-x-lg);
+}
+.mh-button--sm .mh-button__divider {
+  height: var(--ui-button-height-sm);
+}
+.mh-button--lg .mh-button__divider {
+  height: var(--ui-button-height-lg);
+}
+
+/* ===== 外形修饰（与型正交） ===== */
+.mh-button--round {
+  border-radius: var(--ui-radius-full);
+}
+.mh-button--circle {
+  width: var(--ui-button-height);
+  height: var(--ui-button-height);
+  padding: 0;
+  border-radius: var(--ui-radius-full);
+}
+.mh-button--sm.mh-button--circle {
+  width: var(--ui-button-height-sm);
+  height: var(--ui-button-height-sm);
+}
+.mh-button--lg.mh-button--circle {
+  width: var(--ui-button-height-lg);
+  height: var(--ui-button-height-lg);
+}
+/* 整宽：表单底栏 / 移动端主操作；用 flex 而非 width 单给，保证菜单结构的内部分布不变 */
+.mh-button--block {
+  display: flex;
+  width: 100%;
+}
+
+/* ===== 主要：主色实底（**无投影**） =====
+   设计实证：`0:3897` 是纯 `#2660ff` 实底 + r6，节点上没有任何 effects。
+   改前挂的 `--ui-shadow-card-hover` 会让按钮在设计里「浮起来」，属多余装饰。 */
+.mh-button--primary {
+  background: var(--ui-button-accent);
+  color: var(--ui-button-accent-content);
+}
+.mh-button--primary:hover,
+.mh-button--primary.is-hover {
+  background: var(--ui-button-accent-hover);
+}
+.mh-button--primary:active,
+.mh-button--primary.is-active {
+  background: color-mix(in srgb, var(--ui-button-accent) 88%, black); /* 规范按下档比滑过更沉 */
+}
+
+/* ===== 次要：白底描边 + **中性字色**（无投影） =====
+   设计实证：`0:3892` = 白底 + `#e6e6e6` 描边 + r6 + 文本 `#1a1a1a`（**中性**，不是主色蓝）。
+   改前用 `--ui-button-accent`（主色蓝）+ `--ui-shadow-card`，页头上会出现「蓝字带投影」的次要按钮，
+   与设计的「黑字平贴」观感不同。白底按钮在浅色页面上本就靠描边成形，**不需要投影**。 */
+.mh-button--secondary {
+  background: var(--ui-base-100);
+  border: 1px solid var(--ui-base-300);
+  color: var(--ui-base-content);
+}
+.mh-button--secondary:hover,
+.mh-button--secondary.is-hover {
+  border-color: var(--ui-button-accent-hover);
+  color: var(--ui-button-accent-hover);
+}
+.mh-button--secondary:active,
+.mh-button--secondary.is-active {
+  border-color: var(--ui-button-accent);
+  color: var(--ui-button-accent);
+}
+
+/* ===== 虚线：区域内添加内容 ===== */
+.mh-button--dashed {
+  background: var(--ui-base-100);
+  border: 1px dashed var(--ui-base-400);
+  color: var(--ui-button-accent);
+}
+.mh-button--dashed:hover,
+.mh-button--dashed.is-hover {
+  border-color: var(--ui-button-accent-hover);
+  color: var(--ui-button-accent-hover);
+}
+.mh-button--dashed:active,
+.mh-button--dashed.is-active {
+  border-color: var(--ui-button-accent);
+  color: var(--ui-button-accent);
+}
+
+/* ===== 文本按钮（**只用于行内 / 批量操作**：表格操作列、批量条、列表行内操作；
+ * 页头与区块的操作区一律用 primary + secondary —— 与规范 README 同口径） ===== */
+.mh-button--text {
+  padding: 0 var(--ui-space-1);
+  background: transparent;
+  color: var(--ui-button-accent);
+}
+.mh-button--text:hover,
+.mh-button--text.is-hover {
+  color: var(--ui-button-accent-hover);
+}
+.mh-button--text:active,
+.mh-button--text.is-active {
+  color: color-mix(in srgb, var(--ui-button-accent) 80%, black);
+}
+
+/* ===== 链接按钮（跳转语义：带下划线，与「行内文本操作」的 text 档区分开） ===== */
+.mh-button--link {
+  padding: 0;
+  background: transparent;
+  color: var(--ui-button-accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.mh-button--link:hover,
+.mh-button--link.is-hover {
+  color: var(--ui-button-accent-hover);
+}
+.mh-button--link:active,
+.mh-button--link.is-active {
+  color: color-mix(in srgb, var(--ui-button-accent) 80%, black);
+}
+
+/* ===== 图标按钮（方形热区 + 16 字形；滑过/点击带主色光晕） ===== */
+.mh-button--icon {
+  width: var(--ui-button-height);
+  height: var(--ui-button-height);
+  padding: 0; /* 显式清 UA 给 <button> 的内距，否则 border-box 下字形被挤扁 */
+  background: transparent;
+  color: var(--ui-base-content);
+}
+.mh-button--sm.mh-button--icon {
+  width: var(--ui-button-height-sm);
+  height: var(--ui-button-height-sm);
+}
+.mh-button--lg.mh-button--icon {
+  width: var(--ui-button-height-lg);
+  height: var(--ui-button-height-lg);
+}
+.mh-button--icon:hover,
+.mh-button--icon.is-hover {
+  color: var(--ui-button-accent-hover);
+  box-shadow: var(--ui-shadow-card-hover);
+}
+.mh-button--icon:active,
+.mh-button--icon.is-active {
+  color: var(--ui-button-accent);
+}
+/* 危险色 + 图标 / 文本 / 链接：这三型的字色不走 accent 槽（分别是中性 / 主色语义），单列一条 */
+.mh-button--danger.mh-button--icon,
+.mh-button--danger.mh-button--text,
+.mh-button--danger.mh-button--link {
+  color: var(--ui-error);
+}
+.mh-button--danger.mh-button--icon:hover,
+.mh-button--danger.mh-button--text:hover,
+.mh-button--danger.mh-button--link:hover {
+  color: color-mix(in srgb, var(--ui-error) 88%, black);
+}
+
+/* ===== 禁用（各类通用；用专用令牌而非 opacity，避免禁用态被底色影响）
+ *
+ * 描边走 **inset 阴影而不是 `border`**：`border: 1px` 会把「无边框」的常态按钮撑宽 2px，
+ * 按钮一进禁用就在底栏里抖一下 —— inset 阴影画的还是同一圈 1px、位置也一致，但元素尺寸不变。
+ *
+ * **加载态排除在外**（`:not()`）：`loading` 虽然也置原生 disabled（吞点击），但它**外观保持本型**
+ * —— 点击前后只有「文字 → 环」这一处变化，不换底 / 不换边 / 不换字。不排除的话，禁用档
+ * （2 个类）会压过 `.mh-button--loading`（1 个类），全屏最显眼的主操作会在点下去的一瞬间
+ * 整块变成禁用灰，观感突兀（浏览器实测过：底 `rgb(241,242,245)` + 灰字 + 灰边）。 */
+.mh-button:disabled:not(.mh-button--loading),
+.mh-button.is-disabled:not(.mh-button--loading),
+.mh-button[aria-disabled='true']:not(.mh-button--loading) {
+  background: var(--ui-button-bg-disabled);
+  box-shadow: inset 0 0 0 1px var(--ui-button-border-disabled);
+  color: var(--ui-button-text-disabled);
+  cursor: not-allowed;
+}
+/* 文本 / 链接 / 图标三型没有底与边，禁用只换字色 */
+.mh-button--text:disabled:not(.mh-button--loading),
+.mh-button--text.is-disabled:not(.mh-button--loading),
+.mh-button--text[aria-disabled='true']:not(.mh-button--loading),
+.mh-button--link:disabled:not(.mh-button--loading),
+.mh-button--link.is-disabled:not(.mh-button--loading),
+.mh-button--link[aria-disabled='true']:not(.mh-button--loading),
+.mh-button--icon:disabled:not(.mh-button--loading),
+.mh-button--icon.is-disabled:not(.mh-button--loading),
+.mh-button--icon[aria-disabled='true']:not(.mh-button--loading) {
+  background: transparent;
+  border: none;
+  color: var(--ui-button-text-disabled);
+  box-shadow: none;
+  text-decoration: none;
+}
+
+/* ===== 加载（**本型外观 + 主色降透明 + 环**） =====
+ *
+ * 加载态不改色彩角色：`primary` 还是主色、`danger` 还是错误色、`secondary` 还是白底黑字 ——
+ * 只是实底型的**主色底**按 `--ui-button-loading-mix` 与面板色显式合成一档更淡的同色。
+ * 忙碌时的按钮该是「同一个按钮淡了一点点、在转圈」，而不是换一副面孔（整块变灰或换档色都太突兀）。
+ *
+ * **为什么是显式合成而不是 `opacity`**：`opacity` 压的是整块，连文案与加载环一起淡 ——
+ * 忙碌时的文案恰恰要读得清；写成 `color-mix(主色 × mix, 面板色)` 只让**底**淡一档。
+ * （也别用覆盖层：主色实底上再盖一层同色半透明层等于什么都没做 —— 那是条死路。）
+ *
+ * 其余五型（`secondary` / `dashed` / `text` / `link` / `icon`）的「主色」在描边或字上，
+ * 底本来就是白的或透明的 —— 再降一档只会把边与字读淡，故它们加载时**外观完全不变**，只多一个环。
+ * 环取 **`currentColor`**：一条规则自动跟上六型与 `danger`（实底型白环、浅底与图标型本型字色环、
+ * 透明底型主色环），既不必逐型特判，也不额外引令牌。 */
+.mh-button--loading {
+  cursor: not-allowed; /* 禁用档被排除了，`:disabled` 那条已不匹配它 */
+}
+/* 实底型的加载底：主色与面板色按令牌比例显式混出。
+   写在 hover / active 之后：同特异性（0.2.0）下后者胜出，故加载中滑过、按下都不会回到满主色 */
+.mh-button--loading.mh-button--primary {
+  background: color-mix(
+    in srgb,
+    var(--ui-button-accent) var(--ui-button-loading-mix),
+    var(--ui-base-100)
+  );
+}
+.mh-button__spinner {
+  flex: none;
+  width: var(--ui-button-spinner-size);
+  height: var(--ui-button-spinner-size);
+  border: 1.5px solid currentColor; /* 跟随按钮的字色，六型通用 */
+  border-top-color: transparent;
+  border-radius: var(--ui-radius-full);
+  animation: mh-button-spin 0.8s linear infinite; /* 规范 0.8s linear */
+}
+@keyframes mh-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ===== 下拉箭头槽 =====
+ * **只给槽位尺寸，不给字形**：字形由 `@manohub/icon` 的 `<Icon name="chevron-down">` 画，
+ * 展开时的转向由操作层 `popup.css` 的 `.mh-popup-caret` 承担（本件不定义第二份 mask / 第二处转向）。
+ * 故组件把两个类同时挂在图标上：`class="mh-button__caret mh-popup-caret"`。 */
+.mh-button__caret {
+  flex: none;
+  width: var(--ui-button-icon-size);
+  height: var(--ui-button-icon-size);
+}
+
+/* ===== 菜单按钮（文本区 ‖ 分割线 ‖ 箭头区；只管结构，色调随修饰符） ===== */
+.mh-button--menu {
+  padding: 0;
+  gap: 0;
+}
+.mh-button__label {
+  padding: 0 var(--ui-button-padding-x);
+}
+.mh-button--menu .mh-button__caret {
+  margin: 0 var(--ui-button-gap);
+}
+
+/* 竖分割线（1px，跟按钮同高） */
+.mh-button__divider {
+  flex: none;
+  width: 1px;
+  height: var(--ui-button-height);
+  background: var(--ui-base-300);
+}
+
+/* ===== 组容器（组件层结构，不是排版行）：组内间距恒 8 ===== */
+.mh-button__group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-button-group-gap);
+}
+/* 组内文本按钮把水平内距交还容器 —— 间距只由 gap 单一拥有（否则 4+8+4=16） */
+.mh-button__group > .mh-button--text {
+  padding-inline: 0;
+}
+/* 连体档：相邻按钮边重合、中间圆角归零（工具条形态；首末保留圆角） */
+.mh-button__group--compact {
+  gap: 0;
+}
+.mh-button__group--compact > .mh-button {
+  border-radius: 0;
+}
+.mh-button__group--compact > .mh-button:first-child {
+  border-radius: var(--ui-button-radius) 0 0 var(--ui-button-radius);
+}
+.mh-button__group--compact > .mh-button:last-child {
+  border-radius: 0 var(--ui-button-radius) var(--ui-button-radius) 0;
+}
+.mh-button__group--compact > .mh-button + .mh-button {
+  margin-left: -1px; /* 相邻描边重合，避免连体处出现 2px 双线 */
+}
+
+/* ===== 连体切换（选中半区 + 未选半区连体；状态由组件或静态档给） ===== */
+.mh-button__switch {
+  display: inline-flex;
+  border-radius: var(--ui-button-radius);
+}
+.mh-button__switch > .mh-button {
+  border-radius: 0;
+}
+.mh-button__switch > .mh-button:first-child {
+  border-radius: var(--ui-button-radius) 0 0 var(--ui-button-radius);
+}
+.mh-button__switch > .mh-button:last-child {
+  border-radius: 0 var(--ui-button-radius) var(--ui-button-radius) 0;
+}
+.mh-button--off {
+  background: var(--ui-base-100);
+  border: 1px solid var(--ui-base-300);
+  color: var(--ui-base-content);
+  box-shadow: var(--ui-shadow-card);
+}
+.mh-button--off:hover,
+.mh-button--off.is-hover {
+  border-color: var(--ui-button-accent-hover);
+  color: var(--ui-button-accent-hover);
+}
+
+/* ===== 按钮当「文件选择器」触发器（upload 族复用：点按钮即唤起系统选择，零 JS） ===== */
+.mh-button > input[type='file'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none;
+}
+/* 焦点环画在按钮上（隐身的 file input 没有可见焦点） */
+.mh-button:has(> input[type='file']:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* ===== 子菜单浮层皮肤（与操作层并列组合：`class="mh-popup mh-button__menu"`） =====
+ * 只给面（底 / 圆角 / 内距 / 阴影 / 选项行），开合、Esc、点外部关闭、顶层渲染、定位档全在 popup.css。 */
+.mh-button__menu {
+  width: 130px;
+  padding: var(--ui-space-1) 6px;
+  /* 圆角取容器档（原为硬编码 10px —— 与令牌里的容器档同义却写死，改版时不会跟随）；
+     投影取锚定浮层档（`--ui-shadow-popover`），不是居中浮层档。 */
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-base-100);
+  box-shadow: var(--ui-shadow-popover);
+}
+.mh-button__menu-item {
+  height: 30px;
+  padding: 0 var(--ui-space-2);
+  border-radius: var(--ui-button-radius);
+  font-size: var(--ui-button-font-size);
+  line-height: 30px;
+  color: var(--ui-base-content);
+  cursor: pointer;
+}
+.mh-button__menu-item:hover,
+.mh-button__menu-item.is-hover {
+  background: var(--ui-base-200);
+}

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

@@ -0,0 +1,56 @@
+/**
+ * 单件令牌（只服务本件，故只随本包走，不进 `@manohub/theme`）。
+ *
+ * **本件有一批令牌是「跨分件消费」的**：`--ui-button-group-gap` 归组容器 `.mh-button__group`、
+ * 组内分割线高度与菜单项圆角归 `.mh-button__menu`（popover 面板，与按钮**兄弟**、
+ * 不在它的子树里）—— 自定义属性只向下继承，声明在 `.mh-button` 上这类分件取不到值
+ * （声明在计算值阶段作废，且不报任何错）。
+ *
+ * 改前靠「把令牌同时声明在 4 个外层类上」的 workaround 兜（历史症状：组内间距变 0、
+ * 组内分割线高度 0、连体切换与菜单项圆角 0）；锚到容器后，**容器是每个分件的祖先**，
+ * 这类 workaround 整块撤掉 —— 这正是本文件从面文件里抽出来的直接原因。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
+ * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
+ * 「声明在某个组件根类上」这条脆弱假设。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（只服务本件，故不随主题进 `@manohub/theme`） */
+  --ui-button-height: var(--ui-control-height-md); /* 标准档 32 */
+  --ui-button-height-sm: var(--ui-control-height-sm); /* 小号 24 */
+  --ui-button-height-lg: var(--ui-control-height-lg); /* 大号 40 */
+  /* 左右内距 12：设计实测反推 —— 次要按钮「删除」52 宽 = 12 + 文本 28 + 12；
+     主要按钮「新增」70 宽 = 12 + 28 + 4(图文距) + 14(图标) + 12。改前为 15（两字按钮会宽出 6px）。 */
+  --ui-button-padding-x: 12px;
+  --ui-button-padding-x-sm: 8px;
+  --ui-button-padding-x-lg: 20px;
+  --ui-button-gap: var(--ui-space-1); /* 图文/箭头间距 4 */
+  --ui-button-radius: var(--ui-radius-control); /* 6 */
+  /* 图标槽：**常规图标一律取全局图标档**（`--ui-font-icon` = 14）。
+     与设计反推自洽：主要按钮「新增」70 宽 = 12 + 文本 28 + 4(图文距) + **14(图标)** + 12。
+     档距沿用原表的 ±2（小号 −2 / 大号 +2），改全局图标档时三档同步缩放。
+     ⚠️ 与规范登记的偏差：规范「图标按钮字形」实测 **16**；本轮按「常规图标统一取全局图标档」取 14 ——
+     图标按钮与文本按钮共用同一图标槽（同一类 `mh-button__icon`），不为此分叉。 */
+  --ui-button-icon-size: var(--ui-font-icon);
+  --ui-button-icon-size-sm: calc(var(--ui-font-icon) - 2px);
+  --ui-button-icon-size-lg: calc(var(--ui-font-icon) + 2px);
+  --ui-button-spinner-size: 14px; /* 加载环（与正文档图标同径） */
+  --ui-button-font-size: var(--ui-font-body); /* 14：控件内容走正文档 */
+  --ui-button-font-size-sm: var(--ui-font-caption); /* 13：小号回归说明文档 */
+  --ui-button-font-size-lg: var(--ui-font-heading); /* 16：大号升到标题档 */
+  --ui-button-group-gap: var(--ui-space-2); /* 同组按钮恒 8 */
+  --ui-button-bg-disabled: var(--ui-base-200); /* 设计「次要按钮备份」底 #f2f2f2 */
+  --ui-button-border-disabled: var(--ui-base-300);
+  --ui-button-text-disabled: var(--ui-base-content-subtle); /* 设计禁用字 #888888 → 并入 subtle 档 */
+  /* 加载态「主色降透明」的混合比例（规范 0.65）：实底型的底 = 主色 × 本值 + 面板色 × (1 − 本值)。
+     等效「主色 65% 透明叠在页面上」，但**只作用于底** —— 字与环保持纯色（见「加载」节）。
+     嫌淡嫌深都改这一处，不必去动任何一条色彩规则。 */
+  --ui-button-loading-mix: 65%;
+  /* 色彩槽位：危险色只换这四个变量（设计见文件头） */
+  --ui-button-accent: var(--ui-primary);
+  --ui-button-accent-hover: var(--ui-primary-hover);
+  --ui-button-accent-content: var(--ui-primary-content);
+  --ui-button-accent-soft: var(--ui-primary-subtle); /* 危险的浅底（次级实心档） */
+}

package/dist/styles/components/capsule.css

@@ -0,0 +1,120 @@
+/**
+ * Capsule —— 胶囊选择器（一组互斥选项，选中项白底胶囊浮在轨道上）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/capsule.css` 与 `src/components/capsule.css`
+ * （轨道 32 高 / 内距 2 / 项 28 高 / 项内距 14 / 字号 14 / 圆角全；选中 = 白底 + 主色字 + medium +
+ *  1px 4px 主色投影；未选字 Te05、滑过转主色、禁用 Te07；轨道底 Au04）。
+ *
+ * **外形档**（`shape`）：规范只有「圆角全」的胶囊形态；`.mh-capsule--square` 是**本仓新增**的圆角矩形档
+ * （与方角控件并排排版时用），圆角取**复选框档**令牌 `--ui-radius-sm`（比控件档更方，具体值随主题变）。
+ * 两档只差圆角令牌一处，其余几何与颜色一律不变。
+ *
+ * **操作是原生的**：一组同名 radio —— 开关与项**平级相邻、开关在前**，开关由本族隐身但保持可聚焦
+ * （Tab 进组、方向键换项、空格选中）。焦点环画在可见项上。
+ *
+ * 状态三源等价：原生 `input:checked` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`。
+ *
+ * **与面板组合**：要「选中即切面板」，外面套 `styles/operations/tabset.css` 的 `.mh-tabset` ——
+ * 本族不认识它、它也不认识本族（两层零互指），壳层挂类即可。
+ *
+ * **与 `Tabset` 的判据**：`Tabset` 是操作层（只给行为与档位表、不带面），面可由本件或按钮族的分段形态担任；
+ * 本件是**带自己轨道与选中胶囊的轻量选择控件**。
+ */
+.mh-capsule {
+  display: inline-flex;
+  align-items: center;
+  gap: 0; /* 胶囊相邻无间隙 */
+  min-height: var(--ui-capsule-height);
+  padding: var(--ui-capsule-inset);
+  border-radius: var(--ui-capsule-radius);
+  background: var(--ui-capsule-track-bg);
+}
+
+/* 隐身开关：视觉隐藏但保持可聚焦（1px 盒 + clip-path，同 checkbox / radio 配方） */
+.mh-capsule__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  appearance: none;
+  pointer-events: none; /* 别让这 1px 盒抢走轨道上的点击 */
+}
+
+.mh-capsule__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--ui-capsule-item-height);
+  padding: 0 var(--ui-capsule-item-padding-x);
+  border: none;
+  border-radius: var(--ui-capsule-radius);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ui-capsule-font-size);
+  line-height: var(--ui-line-body);
+  color: var(--ui-capsule-text);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 滑过：未选项文字转主色滑过档（白底项保持自己的字色） */
+.mh-capsule__item:hover,
+.mh-capsule__item.is-hover {
+  color: var(--ui-primary-hover);
+}
+
+/* 键盘焦点环画在可见项上（隐身开关没有可见焦点；环随项自身圆角 = 胶囊形） */
+.mh-capsule__input:focus-visible + .mh-capsule__item {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* 禁用：原生 disabled 与静态档同款（方向键会自动跳过禁用项，这是原生 radio 组的行为） */
+.mh-capsule__item.is-disabled,
+.mh-capsule__input:disabled + .mh-capsule__item {
+  color: var(--ui-base-content-subtle); /* Te07 */
+  cursor: not-allowed;
+}
+
+/* 选中：白底胶囊 + 主色字 + 投影（三源等价；下划线只属已退役的线性档，本族不画） */
+.mh-capsule__item.is-selected,
+.mh-capsule__item[data-state='active'],
+.mh-capsule__input:checked + .mh-capsule__item {
+  background: var(--ui-capsule-item-bg);
+  color: var(--ui-primary);
+  font-weight: var(--ui-weight-medium);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--ui-primary) 30%, transparent);
+}
+
+/* ===== 尺寸档（只覆盖令牌，几何规则只有一份） ===== */
+.mh-capsule--sm {
+  --ui-capsule-height: var(--ui-control-height-sm);
+  --ui-capsule-item-height: calc(var(--ui-control-height-sm) - 4px);
+  --ui-capsule-font-size: var(--ui-font-caption);
+}
+.mh-capsule--lg {
+  --ui-capsule-height: var(--ui-control-height-lg);
+  --ui-capsule-item-height: calc(var(--ui-control-height-lg) - 4px);
+  --ui-capsule-font-size: var(--ui-font-body);
+}
+
+/* ===== 外形档（只覆盖圆角令牌，几何与颜色规则只有一份） ===== */
+.mh-capsule--square {
+  --ui-capsule-radius: var(--ui-radius-sm); /* 复选框档：比控件档更方（值随主题变） */
+}
+
+/* ===== 整宽档：每项等分（移动端 / 表单里占满一行） ===== */
+.mh-capsule--block {
+  display: flex;
+  width: 100%;
+}
+.mh-capsule--block > .mh-capsule__item {
+  flex: 1;
+  min-width: 0;
+  justify-content: center;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * capsule —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `capsule.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（项高 28 + 内距 2×2 = 轨道 32，与规范实测一致） */
+  --ui-capsule-height: 32px;
+  --ui-capsule-item-height: 28px;
+  --ui-capsule-inset: 2px; /* 规范实测 2（本仓间距刻度从 4 起，取 4 会让轨道变 36，故按实测值给） */
+  --ui-capsule-item-padding-x: 14px; /* 规范实测（项宽 84 = 14 + 文字 56 + 14） */
+  --ui-capsule-font-size: var(--ui-font-body); /* 规范字号档 md（14）对位 */
+  --ui-capsule-track-bg: var(--ui-primary-weak); /* 规范 Au04 轨道底 */
+  --ui-capsule-item-bg: var(--ui-base-100); /* 选中 = 白底 */
+  --ui-capsule-text: var(--ui-base-content-muted); /* 未选 Te05 */
+  --ui-capsule-radius: var(--ui-radius-full); /* 缺省胶囊形；方形档覆盖为复选框档（见「外形档」） */
+}