@manohub/ui 0.6.0

package/dist/styles/components/notice.css

@@ -0,0 +1,153 @@
+/**
+ * Notice（说明条 / 警告提示，自建）。
+ *
+ * 依据：@aihub/theme 的 components/alert.css（通栏高 42 / 圆角 6 / 投影 / 语义「底·边·字」三件套）；
+ * 与主题包的两处有意差异（success·warning 取 -strong 档、警示/错误底取专页实测值）见下方原注释。
+ */
+
+/* ===== Notice（说明条 / 警告提示，自建）=====
+   规范对齐 `@aihub/theme` 的 Alert（`.sem-bar`）：通栏 100% 宽、高 42、圆角 6、
+   投影 0 2 10 黑 8%、文案 15px、语义「底 / 边 / 字」三件套；操作位为文字按钮。
+
+   与主题包的两处有意差异（都不改结构，只保可读性）：
+   1. 文案色：success/warning 取 `-strong` 档（主题包调色板另给了该槽位）——直接用 500 档主色
+      在浅底上对比度不足（如 #22C55E on #ECFDF5 ≈ 1.9:1），属可读性缺陷；
+   2. 警示 / 错误的底色仍按主题包 Alert 专页实测值（#FDF4EA / #FDECEC），不用语义 03 档。 */
+
+.mh-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  width: 100%;
+  min-height: var(--ui-notice-height);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border-radius: var(--ui-radius-control);
+  box-shadow: var(--ui-notice-shadow);
+  font-size: var(--ui-notice-font);
+  line-height: var(--ui-line-body);
+}
+
+.mh-notice__body {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 说明文案可能是多段（原页面按段落渲染），块间距交给容器，避免与外层再叠一层间距 */
+
+.mh-notice__body p {
+  margin: 0;
+}
+
+.mh-notice__action {
+  flex-shrink: 0;
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  /* 文字按钮取主色（主题包 --f-alert-action-text = --f-primary） */
+  color: var(--ui-primary);
+  cursor: pointer;
+}
+
+.mh-notice__close {
+  flex-shrink: 0;
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: var(--ui-font-caption);
+  /* 主题包为 --f-text-muted（Te07），本仓对应 --ui-base-content-muted */
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+}
+
+.mh-notice--info {
+  background: var(--ui-info-weak);
+  border: 1px solid var(--ui-info-border);
+  color: var(--ui-info);
+}
+
+.mh-notice--success {
+  background: var(--ui-success-weak);
+  border: 1px solid var(--ui-success-border);
+  color: var(--ui-success-strong);
+}
+
+.mh-notice--warning {
+  background: var(--ui-notice-warning-bg);
+  border: 1px solid var(--ui-warning-border);
+  color: var(--ui-warning-strong);
+}
+
+.mh-notice--error {
+  background: var(--ui-notice-error-bg);
+  border: 1px solid var(--ui-error-border);
+  color: var(--ui-error);
+}
+
+/* ===== 语义图标 / 两行排版 / 关闭位 ===== */
+.mh-notice__icon {
+  flex: none;
+  /* 语义图标是常规图标：尺寸取全局图标档（改前硬写 16） */
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+  margin-top: 1px; /* 与首行文字视觉对齐（文字行高比图标高） */
+}
+.mh-notice__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+.mh-notice__message {
+  font-weight: var(--ui-weight-medium);
+}
+.mh-notice__description {
+  color: inherit;
+}
+.mh-notice__close {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  flex: none;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+.mh-notice__close:hover {
+  opacity: 1;
+}
+.mh-notice__close-icon {
+  flex: none;
+  width: 14px;
+  height: 14px;
+}
+.mh-notice__close-text {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+/* 只给读屏的文本（关闭位缺省只有图标，必须补一个可读名字） */
+.mh-notice__visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+/* 两行排版（有 `message`）：整体改顶对齐 —— 两行内容在条里居中会让上下空得奇怪 */
+.mh-notice--titled {
+  align-items: flex-start;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 组件几何令牌：取自 @aihub/theme 的 components/alert.css 实测（通栏高 42 / 文案 15px /
+ * 警示与错误底取 Alert 专页样张，与语义 03 档两说时以专页为准）
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
+ * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
+ * 「声明在某个组件根类上」这条脆弱假设。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
+ */
+[data-manohub-ui] {
+  --ui-notice-height: 42px;
+  --ui-notice-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  --ui-notice-font: 15px;
+  --ui-notice-warning-bg: #fdf4ea;
+  --ui-notice-error-bg: #fdecec;
+}

package/dist/styles/components/notification.css

@@ -0,0 +1,159 @@
+/**
+ * Notification —— 通知卡（带标题 / 正文 / 头像 / 标签 / 操作 / 关闭的结构）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/notification.html` 与 `src/components/toast.css`
+ * 里的 `--mh-notice-*` 令牌（面板 430 宽 / 最小高 100 / 正文最大高 180 / 圆角 10 / 左边线 6px；
+ * 语义淡底五档；标题 16px Te01、正文 14px Te04、关闭槽 10x10 Te07；内距 上下右 16、左 24）。
+ * ⚠️ 关闭字形按**组件内联 12** 渲染（规范注记的 10x10 登记为偏差；关闭位是贴小控件的字形，
+ * 不并入常规图标档 —— 改前静态样例页按规范画 10、与组件不一致，已同步为 12）。
+ *
+ * **与 `Notice` 的判据**（两者都在本仓，别互相顶替）：
+ * - `Notice`（`.mh-notice*`）= **条状提示**（对齐规范 alert 族）：一行话 + 可选操作，不带头像 / 标签 / 关闭；
+ * - 本件（`.mh-notification*`）= **通知卡**：有标题行（含关闭位）、可带头像与标签、多行正文。
+ * 类名刻意不同前缀 —— 规范里两族的类名都叫 `.notice*`，本仓若照抄就会出现两套 `.mh-notice*` 互撞。
+ *
+ * **左边线用绝对定位伪元素画，不用 `border-left` + `border-image`**：后者会吃掉圆角（规范踩过这个坑）。
+ * 语义八档的线色是规范 04 档**渐变**，色板编号写在令牌注释里；底色复用本仓语义弱底令牌（一处定义）。
+ *
+ * **标签位与操作位不重复实现**：标签用标签族的 `mh-tag mh-tag--status mh-tag--error|--warning`，
+ * 操作用按钮族（`.mh-button--sm`）—— 本件只给它们的容器与间距。
+ */
+.mh-notification {
+  position: relative;
+  overflow: hidden; /* 让伪元素画的左边线跟着圆角走 */
+  display: flex;
+  gap: var(--ui-space-3);
+  width: var(--ui-notification-width);
+  min-height: var(--ui-notification-min-height);
+  padding: var(--ui-notification-pad) var(--ui-notification-pad) var(--ui-notification-pad)
+    var(--ui-notification-pad-left);
+  border-radius: var(--ui-notification-radius);
+  background: var(--ui-info-weak); /* 缺省档 = info 淡底（规范通知淡底） */
+  box-shadow: var(--ui-shadow-elevated);
+}
+.mh-notification::before {
+  content: '';
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--ui-notification-line-width);
+  background: var(--ui-notification-line);
+}
+
+/* 语义档：底色与左边线成对换（`submit` 与 `success` 共用底色，只换线 —— 与规范同构） */
+.mh-notification--info {
+  background: var(--ui-info-weak);
+  --ui-notification-line: var(--ui-notification-line-info);
+}
+.mh-notification--success {
+  background: var(--ui-success-weak);
+  --ui-notification-line: var(--ui-notification-line-success);
+}
+.mh-notification--warning {
+  background: var(--ui-warning-weak);
+  --ui-notification-line: var(--ui-notification-line-warning);
+}
+.mh-notification--error {
+  background: var(--ui-error-weak);
+  --ui-notification-line: var(--ui-notification-line-error);
+}
+.mh-notification--submit {
+  background: var(--ui-success-weak);
+  --ui-notification-line: var(--ui-notification-line-submit);
+}
+
+/* 正文列：有头像时占余宽 */
+.mh-notification__body {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 标题行：标题左、关闭位右（`space-between` 让关闭位贴右） */
+.mh-notification__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-2);
+  margin: 0;
+  font-size: var(--ui-font-heading); /* 规范 16px */
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+}
+.mh-notification__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-notification-close-size);
+  height: var(--ui-notification-close-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+}
+.mh-notification__close:hover,
+.mh-notification__close.is-hover {
+  color: var(--ui-base-content);
+}
+.mh-notification__close:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+.mh-notification__text {
+  max-height: var(--ui-notification-max-height);
+  margin: var(--ui-space-1) 0 0;
+  font-size: var(--ui-font-body); /* 规范 14px */
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content-muted); /* Te04 */
+}
+
+/* 头像位（静态页 / 无 Avatar 时的兜底字标） */
+.mh-notification__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-notification-avatar-size);
+  height: var(--ui-notification-avatar-size);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary-weak);
+  color: var(--ui-primary);
+  font-size: var(--ui-font-caption);
+}
+
+/* 操作位与标签位（标签/按钮的面各归其族，这里只给容器与间距） */
+.mh-notification__actions {
+  display: inline-flex;
+  gap: var(--ui-space-2);
+  margin-top: var(--ui-space-1);
+}
+.mh-notification__tags {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-1);
+  margin-top: var(--ui-space-1);
+}
+
+/* 叠放（多条通知纵向排） */
+.mh-notification + .mh-notification {
+  margin-top: var(--ui-space-2);
+}
+
+/* ===== 语义图标 / 标题行占位 / 关闭位图标 ===== */
+.mh-notification__icon {
+  flex: none;
+  /* 语义图标是常规图标：尺寸取全局图标档（改前硬写 16） */
+  width: var(--ui-font-icon);
+  height: var(--ui-font-icon);
+}
+/* 标题文字占满剩余宽度：关闭位自然贴到行尾（不靠 padding 硬挤） */
+.mh-notification__title-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mh-notification__close-icon {
+  flex: none;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * notification —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `notification.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（几何与线色） */
+  --ui-notification-width: 430px; /* 规范标准宽 */
+  --ui-notification-min-height: 100px;
+  --ui-notification-max-height: 180px; /* 正文区最大高 */
+  /* 10：规范对「通知条」给的实测值就是 r10（见 `@aihub/theme` 的 `components/toast.css`）。
+     **有意不复用 `--ui-radius-md`** —— 该档在 default 主题是 **10**、在 farris 主题是 **8**
+     （规范的卡片圆角），引用它会让通知卡在两套主题下不是同一个体量。 */
+  --ui-notification-radius: 10px;
+  --ui-notification-line-width: 6px; /* 规范左边线实测 6px */
+  --ui-notification-pad: var(--ui-space-4); /* 上下右 16 */
+  --ui-notification-pad-left: var(--ui-space-6); /* 左 24：让开 6px 线后与内容左缘对齐 */
+  --ui-notification-line: var(--ui-primary); /* 缺省档 = info 线 */
+  /* 语义左边线：规范 04 档渐变（色板编号见注释，逐条有出处） */
+  --ui-notification-line-info: linear-gradient(135deg, #657cff, #4190ff); /* Focus04 常规 */
+  --ui-notification-line-submit: linear-gradient(135deg, #12bfd3, #41d5b9); /* Submit04 提交 */
+  --ui-notification-line-success: linear-gradient(135deg, #3ca78d, #7bca8b); /* Success04 成功 */
+  --ui-notification-line-warning: linear-gradient(135deg, #fc8249, #fe9539); /* Warning04 警告 */
+  --ui-notification-line-error: linear-gradient(135deg, #e55875, #ff7878); /* Danger04 失败 */
+  --ui-notification-close-size: 10px; /* 规范关闭槽 10x10（Te07） */
+  --ui-notification-avatar-size: 36px;
+}