@manohub/ui 0.6.0

package/dist/styles/components/tabs.css

@@ -0,0 +1,234 @@
+/**
+ * Tabs —— 页签条（下划线指示条 + 禁用 + 「更多」页签）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/tabs.css` 与 `src/components/tabs.css`
+ * （区高 26 / 项间距 30 / 字号 14 / 指示条高 3、距文字 3、两端与文字同宽 / 未选字 `#446a9f` /
+ *  滑过 `#529dff` / 选中 `#4e94ff` / 禁用 Te07）。
+ *
+ * 三条必须照做的几何（做错一眼就歪）：
+ *
+ * 1. **不画轨线**：规范明确警告 —— 页签区没有底边框，选中只由指示条表达；加轨线会扣走区高 1px。
+ *    「像不像页签」全靠那道 3px 指示条，不靠一条横线。
+ * 2. **指示条是每个项自己的伪元素**（`::after`），不是一条共享滑块：所有项的指示条常驻，未选 `opacity:0; scale:.75`，
+ *    选中转 `opacity:1; scale:1` —— "滑过去"的观感来自这两个属性的过渡（`display` 直切补间不了）。
+ * 3. **文字贴底**：项高 26 = 文字框 20 + 留白 3 + 指示条 3，故 `align-items:flex-end` +
+ *    `padding-bottom = indicator-gap + indicator-height`。少了这段内距，指示条会压在字上。
+ *
+ * **三源等价**（本仓通例）：原生 `:checked +` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`
+ * 指向同一份声明 —— 原生态给零 JS 用法（原生 radio 互斥 + ← → 换页签），组件态给受控值。
+ */
+.mh-tabs {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--ui-tabs-gap);
+  height: var(--ui-tabs-height);
+}
+
+.mh-tabs__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-end;
+  height: 100%;
+  padding: 0 0 calc(var(--ui-tabs-indicator-gap) + var(--ui-tabs-indicator-height));
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ui-tabs-font-size);
+  line-height: var(--ui-line-body);
+  color: var(--ui-tabs-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+/* 指示条：常驻、与文字同宽（不内缩），靠 opacity + scale 过渡出"滑动感" */
+.mh-tabs__tab::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--ui-tabs-indicator-height);
+  border-radius: var(--ui-tabs-indicator-radius);
+  background: var(--ui-tabs-indicator);
+  opacity: 0;
+  scale: 0.75;
+  transition-property: opacity, scale;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mh-tabs__tab:hover {
+  color: var(--ui-tabs-text-hover);
+}
+.mh-tabs__tab:active {
+  color: var(--ui-tabs-text-active);
+}
+
+/* 选中（三源等价）：字转主色 + 中粗，指示条亮起 */
+.mh-tabs__tab.is-selected,
+.mh-tabs__tab[data-state='active'],
+.mh-tabs > input:checked + .mh-tabs__tab {
+  color: var(--ui-tabs-text-active);
+  font-weight: var(--ui-weight-medium);
+}
+.mh-tabs__tab.is-selected::after,
+.mh-tabs__tab[data-state='active']::after,
+.mh-tabs > input:checked + .mh-tabs__tab::after {
+  opacity: 1;
+  scale: 1;
+}
+
+/* 禁用（三源等价）：字转弱、不可点 */
+.mh-tabs__tab.is-disabled,
+.mh-tabs__tab:disabled,
+.mh-tabs > input:disabled + .mh-tabs__tab {
+  color: var(--ui-tabs-text-disabled);
+  cursor: not-allowed;
+}
+.mh-tabs__tab.is-disabled::after,
+.mh-tabs__tab:disabled::after,
+.mh-tabs > input:disabled + .mh-tabs__tab::after {
+  opacity: 0;
+}
+
+/* 「更多」页签：文字 + 转向箭头（字形来自 `@manohub/icon`，本层只排布） */
+.mh-tabs__tab--more {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+}
+
+/* 原生路径的隐身开关：可聚焦但不可见（焦点环画在可见的项上） */
+.mh-tabs > 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;
+}
+
+/* 键盘焦点环（两条路径各一处，不重叠） */
+.mh-tabs__tab:focus-visible,
+.mh-tabs > input:focus-visible + .mh-tabs__tab {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* ===== 居中档：页签少、要撑满整行时用 ===== */
+.mh-tabs--centered {
+  justify-content: center;
+}
+
+/* ===== 尺寸档（只覆盖令牌） ===== */
+.mh-tabs--sm {
+  --ui-tabs-height: var(--ui-control-height-sm);
+  --ui-tabs-font-size: var(--ui-font-caption);
+  --ui-tabs-gap: var(--ui-space-6);
+}
+.mh-tabs--lg {
+  --ui-tabs-height: var(--ui-control-height-lg);
+  --ui-tabs-font-size: var(--ui-font-heading);
+}
+
+/* ===== 选项卡形态（type="card"） =====
+ * 与内容区连成一体：页签有边框与浅底，选中项转白底 + 顶部主色条；
+ * 底边刻意不画 —— 让内容区自己的上边框接上（面板的 bordered 档就是为此）。 */
+.mh-tabs--card {
+  align-items: flex-end;
+  gap: var(--ui-space-1);
+  height: auto;
+}
+.mh-tabs--card .mh-tabs__tab {
+  align-items: center;
+  height: var(--ui-tabs-height);
+  padding: 0 var(--ui-tabs-card-padding-x);
+  border: 1px solid var(--ui-base-300);
+  border-bottom: none;
+  border-radius: var(--ui-radius-control) var(--ui-radius-control) 0 0;
+  background: var(--ui-base-200);
+  color: var(--ui-base-content-muted);
+}
+/* 卡片档不画指示条：选中由底色与顶边表达（两套选中语汇叠在一起会互相打架） */
+.mh-tabs--card .mh-tabs__tab::after {
+  content: none;
+}
+.mh-tabs--card .mh-tabs__tab:hover {
+  color: var(--ui-primary);
+}
+.mh-tabs--card .mh-tabs__tab.is-selected,
+.mh-tabs--card .mh-tabs__tab[data-state='active'],
+.mh-tabs--card > input:checked + .mh-tabs__tab {
+  background: var(--ui-base-100);
+  color: var(--ui-primary);
+  box-shadow: inset 0 2px 0 var(--ui-primary);
+}
+.mh-tabs--card .mh-tabs__tab.is-disabled {
+  background: var(--ui-base-200);
+  color: var(--ui-tabs-text-disabled);
+}
+
+/* ===== 关闭位 =====
+ * 页签自己是 `<button>`，所以关闭位用 `<span role="button">`（按钮里嵌按钮是非法 HTML）；
+ * 线上档的文字是「贴底」的，故关闭位要自己把底部内距补回来才与文字同一水平线。 */
+.mh-tabs__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-bottom: calc(var(--ui-tabs-indicator-gap) + var(--ui-tabs-indicator-height));
+  margin-left: var(--ui-space-1);
+  border-radius: var(--ui-radius-full);
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+.mh-tabs--card .mh-tabs__close {
+  margin-bottom: 0;
+}
+.mh-tabs__close > svg {
+  width: 12px;
+  height: 12px;
+}
+.mh-tabs__close:hover {
+  opacity: 1;
+  background: rgb(0 0 0 / 0.08);
+}
+
+/* ===== 新增位 ===== */
+.mh-tabs__add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-tabs-height);
+  height: var(--ui-tabs-height);
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-control);
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.mh-tabs__add > svg {
+  width: var(--ui-font-icon); /* 常规图标档 */
+  height: var(--ui-font-icon);
+}
+/* 「更多」的折叠箭头：改前无声明、掉到 `<svg>` 默认 16 —— 与新增位同取常规图标档 */
+.mh-tabs__tab--more > svg {
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+.mh-tabs__add:hover {
+  background: var(--ui-base-200);
+  color: var(--ui-primary);
+}

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

@@ -0,0 +1,30 @@
+/**
+ * tabs —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `tabs.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-tabs-height: var(--ui-control-height-md); /* 标准控件高 32 */
+  --ui-tabs-gap: 30px; /* 项间距（规范实测） */
+  --ui-tabs-font-size: var(--ui-font-body);
+  --ui-tabs-text: var(--ui-base-content); /* 规范未选档 #446a9f（偏蓝的正文色），本仓取正文色 */
+  --ui-tabs-text-hover: var(--ui-primary-hover); /* 规范 #529dff */
+  --ui-tabs-text-active: var(--ui-primary); /* 规范 #4e94ff */
+  --ui-tabs-text-disabled: var(--ui-base-content-subtle); /* 规范 Te07 */
+  --ui-tabs-indicator: var(--ui-primary);
+  --ui-tabs-indicator-gap: 3px; /* 指示条与文字的留白 */
+  --ui-tabs-indicator-height: 3px;
+  --ui-tabs-indicator-radius: var(--ui-radius-full);
+  --ui-tabs-card-padding-x: var(--ui-space-4);
+}

package/dist/styles/components/tag.css

@@ -0,0 +1,200 @@
+/**
+ * Tag —— 标签（常规 / 状态 / 可选 / 新增 / 轻量筛选片）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/tag.css` 与 `src/components/tag.css`
+ * （常规 24 高 / 大号 28；状态档 22 高、小圆角、四色语义；可选档胶囊 + 选中实底主色；
+ *  新增档虚线框；筛选项贴片底 + 主色字）。
+ *
+ * **与 `Badge` 的判据**：`Badge` 是**状态徽标**（固定短、要一眼看出状态色、有圆点/数字档）；
+ * 本件是**内容标签**（描述性文字、可能可选/可加/可关闭，长度由内容决定）。两者不同族，别互相顶替。
+ *
+ * **状态档四色**直接用本仓语义令牌（`--ui-{info,success,warning,error}-weak` / 对应主色），
+ * 不新造一套色板 —— 与 `Badge` / `Notice` 同一批语义槽位。
+ *
+ * **高度三档与图标/关闭位尺寸都在本件令牌上**（`--ui-tag-*`）：档位只覆盖令牌、不复制几何规则。
+ * 自定义色（`color` prop）经组件内联覆盖 `--ui-tag-bg`，故底色的取用点只有一处。
+ */
+.mh-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-tag-gap);
+  height: var(--ui-tag-height);
+  padding: 0 var(--ui-space-3);
+  border-radius: var(--ui-radius-control);
+  background: var(--ui-tag-bg);
+  color: var(--ui-primary);
+  font-size: var(--ui-tag-font-size);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* ===== 尺寸档 =====
+   20 档是设计稿里**唯一有实证**的标签尺寸（`0:2723` 36×20）：小圆角 r3 + 12px 字。
+   左右内距取 8 而不是设计反推的 6：6 不在本包的间距阶（4/8/12/16/20/24）上，
+   为 4px 的总宽差破一档刻度不值当。 */
+.mh-tag--sm {
+  height: var(--ui-tag-height-sm);
+  padding: 0 var(--ui-space-2);
+  border-radius: var(--ui-radius-xs);
+  font-size: var(--ui-font-micro);
+}
+.mh-tag--lg {
+  height: var(--ui-tag-height-lg);
+}
+
+/* ===== 前置图标与关闭位 ===== */
+.mh-tag__icon {
+  flex: none;
+  width: var(--ui-tag-icon-size);
+  height: var(--ui-tag-icon-size);
+}
+.mh-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-tag-close-size);
+  height: var(--ui-tag-close-size);
+  margin-right: calc(-1 * var(--ui-space-1));
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.65;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+.mh-tag__close > svg {
+  flex: none;
+  width: 12px;
+  height: 12px;
+}
+.mh-tag__close:hover {
+  opacity: 1;
+  background: rgb(0 0 0 / 0.08);
+}
+
+/* ===== 描边档（布尔 prop `outline`）：设计稿表格内标签的配方 = 浅主色底 + 浅主色边 =====
+   设计实证 `0:2723`：36×20 / 底 `#eaefff` / 边 `#b7caff` / r3 / 字 12 —— 即
+   `size="sm"` + `outline` 两档合起来的样子。
+   ⚠️ **本条的配方改过**：改前是「透明底 + `1px solid currentColor`」（全色描边）。全色描边在浅底
+   页面上过重，且与 `shape="status"` + `tone` 的观感打架（两者都成了「彩边」）；设计给的正是
+   「同色系浅边」。若某个页面确实需要「透明底 + 全色边」那种更硬的轮廓，请提需求另开形态，
+   不要就地改回去。 */
+.mh-tag--outline {
+  background: var(--ui-primary-weak);
+  border: 1px solid var(--ui-primary-border);
+}
+
+/* ===== 状态标签（22 高 / 四色语义）===== */
+.mh-tag--status {
+  height: var(--ui-tag-height-status);
+  padding: 0 var(--ui-space-2);
+}
+.mh-tag--info {
+  background: var(--ui-info-weak);
+  color: var(--ui-info);
+}
+.mh-tag--success {
+  background: var(--ui-success-weak);
+  color: var(--ui-success);
+}
+.mh-tag--warning {
+  background: var(--ui-warning-weak);
+  color: var(--ui-warning);
+}
+.mh-tag--error {
+  background: var(--ui-error-weak);
+  color: var(--ui-error);
+}
+
+/* ===== 可选标签（胶囊；开关是隐身原生 radio，焦点环画在可见标签上）===== */
+.mh-tag--select {
+  position: relative;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary-weak);
+  color: var(--ui-primary);
+  cursor: pointer;
+  font-family: inherit;
+}
+.mh-tag--select > 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;
+}
+.mh-tag--select:hover {
+  background: var(--ui-base-50);
+  border: 1px solid var(--ui-base-300);
+}
+.mh-tag--select:has(input:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+/* 选中：实底主色白字；三源等价（真实伪类 / 组件下发 / 静态档） */
+.mh-tag--select.is-selected,
+.mh-tag--select[data-state='selected'],
+.mh-tag--select:has(input:checked) {
+  background: var(--ui-primary);
+  color: var(--ui-primary-content);
+}
+/* 选中态里的关闭位：底是主色，悬停用白蒙层而不是黑蒙层 */
+.mh-tag--select.is-selected .mh-tag__close:hover,
+.mh-tag--select:has(input:checked) .mh-tag__close:hover {
+  background: rgb(255 255 255 / 0.24);
+}
+/* 禁用：不可点 + 转弱 */
+.mh-tag--select.is-disabled,
+.mh-tag--select:has(input:disabled) {
+  background: var(--ui-base-200);
+  color: var(--ui-base-content-subtle);
+  cursor: not-allowed;
+}
+
+/* ===== 新增档（虚线框 + 加号由 @manohub/icon 的 plus 渲染）===== */
+.mh-tag--add {
+  height: var(--ui-tag-height);
+  padding: 0 var(--ui-space-2);
+  border: 1px dashed var(--ui-base-400);
+  border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--ui-tag-font-size);
+}
+.mh-tag--add:hover {
+  border-color: var(--ui-primary-hover);
+  color: var(--ui-primary);
+}
+.mh-tag--add:active {
+  border-color: var(--ui-primary);
+  color: var(--ui-primary);
+}
+
+/* ===== 轻量筛选片（浅底 + 主色字）===== */
+.mh-tag--chip {
+  height: var(--ui-tag-height-sm);
+  padding: 0 var(--ui-space-2);
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary-weak);
+  color: var(--ui-primary);
+  font-family: inherit;
+  font-size: var(--ui-font-caption);
+  cursor: pointer;
+}
+.mh-tag--chip[data-state='active'],
+.mh-tag--chip.is-active {
+  background: var(--ui-primary);
+  color: var(--ui-primary-content);
+}

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

@@ -0,0 +1,30 @@
+/**
+ * tag —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `tag.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌。
+     软底**只有一档**：改前是 `#e1edff`(24) 与 `#f0faff`(28) 两个字面量，与主题的主色浅底档
+     `--ui-primary-weak`(#EFF5FF) 差 ≤ 6/255 —— 三个近值并存的典型症状，本轮并入主题档。
+     设计实证：表格内标签 `0:2723` 底 `#eaefff`。 */
+  --ui-tag-bg: var(--ui-primary-weak);
+  --ui-tag-height: 24px;
+  --ui-tag-height-sm: 20px;
+  --ui-tag-height-lg: 28px;
+  --ui-tag-height-status: 22px;
+  --ui-tag-font-size: var(--ui-font-caption);
+  --ui-tag-icon-size: var(--ui-font-icon); /* 常规图标档（本件不再自定数值） */
+  --ui-tag-close-size: 14px;
+  --ui-tag-gap: var(--ui-space-1);
+}

package/dist/styles/components/toast.css

@@ -0,0 +1,150 @@
+/**
+ * Toast —— 消息提示（一行提示 + 语义图标 + 可选动作；可堆叠）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/toast.css` 与 `src/components/toast.css`
+ * （宽 240 / 最大 560 / 最小高 52 / r8 / 1px 描边 / 内距 10 16 10 24 / 图标 18 圆 / 图标与文字间距 12 /
+ *  投影 `0 2 12` 黑 10% / 正文 15；loading 样张 240x93 且图标顶对齐；带动作样张宽 360）。
+ *
+ * **与规范的一处有意偏差**：loading 那张 240x93 的样张是「多行加载文案」的尺寸，照搬成最小高后，
+ * 单行提示会撑出一张上挤下空的空卡 —— 故本档高度回归常态（与其它档同为 52 起，内容多时自然撑高），
+ * 只保留图标差异（透明底 + 主色转圈）。
+ *
+ * 三件事必须与规范一致（容易做错）：
+ *
+ * 1. **图标是「圆形色底 + 白色字形」**，不是一个字形图标 —— 只有 loading 例外（透明底 + 2px 主色描边，
+ *    **上边留缺口**造成转圈感）；
+ * 2. **动作按钮靠 `margin-left: auto` 顶到最右**，不是跟在文字后面；
+ * 3. **转圈动画的键名归本族**（`mh-toast-spin`）：动画名是全局标识，加 `mh-` 前缀避免与页面上别的库撞名。
+ *
+ * 零 JS 能表达的：全部静态形态 + 转圈。**必须 JS**：自动消失计时、多条的出队、以及把 loading 换成结果态
+ * （那三件都在组件层，本面不预设）。
+ *
+ * 堆叠容器（`.mh-toast-stack`）是随本族给的一层薄皮：定在视口顶部居中、纵向 8 间距 —— 位置与堆叠是
+ * 「一族怎么摆」的事，做成类比让每个应用各写一份靠谱。
+ */
+.mh-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-toast-gap);
+  width: var(--ui-toast-width);
+  max-width: var(--ui-toast-width-max);
+  min-height: var(--ui-toast-min-height);
+  padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-3) var(--ui-space-6);
+  border: 1px solid var(--ui-toast-border);
+  border-radius: var(--ui-toast-radius);
+  background: var(--ui-base-100);
+  box-shadow: var(--ui-shadow-elevated);
+}
+
+/* loading：**不另设样张高**（高度与其它档一致，见文件头的「有意偏差」）—— 本档只差图标（转圈） */
+/* 带动作：更宽的样张宽 */
+.mh-toast--action {
+  width: 360px;
+}
+
+/* 图标：圆形色底 + 白色字形（18×18） */
+.mh-toast__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-toast-icon-size);
+  height: var(--ui-toast-icon-size);
+  border-radius: var(--ui-radius-full);
+  color: var(--ui-base-100);
+  font-size: var(--ui-font-caption);
+  line-height: 1;
+}
+.mh-toast__icon--info {
+  background: var(--ui-info);
+}
+.mh-toast__icon--success {
+  background: var(--ui-success);
+}
+.mh-toast__icon--warning {
+  background: var(--ui-warning);
+}
+.mh-toast__icon--error {
+  background: var(--ui-error);
+}
+/* loading 档：透明底 + 主色字形 + 匀速转圈。
+   规范此处是「2px 描边 + 上边缺口」的自画法，本仓改用意形（图标包的 `loading`）——
+  硬约束是「图标一律来自图标包、不用文字符号或自画形状冒充」，视觉等价（都是转圈环）。 */
+.mh-toast__icon--loading {
+  background: transparent;
+  color: var(--ui-primary);
+  animation: mh-toast-spin 0.8s linear infinite;
+}
+@keyframes mh-toast-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.mh-toast__text {
+  /* 占满剩余宽度：动作位 / 关闭位都被顶到右端。
+     不写成「每个右侧位各给 margin-left: auto」—— 两个 auto 会平分剩余空间，
+     而本族的常驻提示可能同时带动作与关闭位（那样动作钮会被推到卡片中间）。 */
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--ui-toast-text-size);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+}
+
+/* 动作位：文本按钮样，顶到最右（面归按钮族时可直接用 `.mh-button--text`，本类只给定位与默认字色） */
+.mh-toast__action {
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ui-font-caption);
+  color: var(--ui-primary);
+  cursor: pointer;
+}
+.mh-toast__action:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+
+/* ===== 堆叠容器（顶部居中、纵向 8） ===== */
+.mh-toast-stack {
+  position: fixed;
+  top: var(--ui-space-6);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1080; /* 高于页面内容、低于模态层（原生 <dialog> 的 top layer 不受影响） */
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-2);
+  align-items: center;
+  pointer-events: none; /* 容器不挡点击；每条自己恢复 */
+}
+.mh-toast-stack > .mh-toast {
+  pointer-events: auto;
+}
+
+/* ===== 关闭位（`duration=0` 的常驻提示必须给用户一个关掉的入口） =====
+   靠右由 `.mh-toast__text` 的弹性占位实现 —— 本件不写 `margin-left: auto`：
+   与动作位同时存在时两个 auto 会平分剩余空间，反而把动作钮推到卡片中间 */
+.mh-toast__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+.mh-toast__close:hover {
+  opacity: 1;
+}
+.mh-toast__close-icon {
+  flex: none;
+}

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

@@ -0,0 +1,26 @@
+/**
+ * toast —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `toast.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-toast-width: 240px;
+  --ui-toast-width-max: 560px;
+  --ui-toast-min-height: 52px;
+  --ui-toast-radius: var(--ui-radius-md); /* 规范 r8 */
+  --ui-toast-border: var(--ui-base-300); /* 规范 #d8dce6 */
+  --ui-toast-gap: var(--ui-space-3); /* 图标与文字间距 12 */
+  --ui-toast-icon-size: 18px;
+  --ui-toast-text-size: 15px; /* 规范实测（本仓字阶无 15，按实测值给） */
+}