@manohub/ui 0.10.4 → 1.0.0

package/dist/styles/components/button.css

@@ -1,460 +1,460 @@
-/**
- * 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);
-  /* 链接形态时本体就是 `<a>`（见组件层），基线不再代管 `a { text-decoration: inherit }`，这里自己摘掉下划线 */
-  text-decoration: none;
-  cursor: pointer;
-  white-space: nowrap;
-  /* 三态补间（底 / 边 / 字 / 影） */
-  transition-property: background-color, border-color, color, box-shadow;
-  transition-duration: 0.15s;
-  transition-timing-function: ease;
-}
-
-/* 危险色修饰：换槽位即可，六型与各自 hover / active 一并跟随
-   （`--ui-button-accent-soft` 随无消费者的孤令牌一并撤除，2026-09-30） */
-.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);
-}
-
-/* 键盘焦点环：画在按钮自身（与 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);
-}
-
-/* ===== 虚线：区域内添加内容 =====
- * 虚线取 `--ui-line-dashed`（= `base-400`，比实线深一档）：同样粗细下虚线的墨迹只有实线的一半，
- * 取实线色（`base-300`）会明显偏浅、整条框看着发虚。
- * 这条口径 2026-09-30 一天内翻过一次：早些时候按「线框色只留一套」把虚线也收敛到 `base-300`，
- * 当日晚按实机观感反转 —— 定稿见 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条。 */
-.mh-button--dashed {
-  background: var(--ui-base-100);
-  border: 1px dashed var(--ui-line-dashed);
-  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);
-}
+/**
+ * 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);
+  /* 链接形态时本体就是 `<a>`（见组件层），基线不再代管 `a { text-decoration: inherit }`，这里自己摘掉下划线 */
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  /* 三态补间（底 / 边 / 字 / 影） */
+  transition-property: background-color, border-color, color, box-shadow;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+
+/* 危险色修饰：换槽位即可，六型与各自 hover / active 一并跟随
+   （`--ui-button-accent-soft` 随无消费者的孤令牌一并撤除，2026-09-30） */
+.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);
+}
+
+/* 键盘焦点环：画在按钮自身（与 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);
+}
+
+/* ===== 虚线：区域内添加内容 =====
+ * 虚线取 `--ui-line-dashed`（= `base-400`，比实线深一档）：同样粗细下虚线的墨迹只有实线的一半，
+ * 取实线色（`base-300`）会明显偏浅、整条框看着发虚。
+ * 这条口径 2026-09-30 一天内翻过一次：早些时候按「线框色只留一套」把虚线也收敛到 `base-300`，
+ * 当日晚按实机观感反转 —— 定稿见 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条。 */
+.mh-button--dashed {
+  background: var(--ui-base-100);
+  border: 1px dashed var(--ui-line-dashed);
+  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);
+}