@manohub/ui 0.10.5 → 1.0.0

package/dist/styles/components/notification.css

@@ -1,159 +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-badge`，要可关闭走 `.mh-tag`），
- * 操作用按钮族（`.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;
-}
+/**
+ * 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-badge`，要可关闭走 `.mh-tag`），
+ * 操作用按钮族（`.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

@@ -1,37 +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;
-}
+/**
+ * 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;
+}