@manohub/ui 0.10.4 → 1.0.0

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

@@ -1,23 +1,23 @@
-/**
- * loading —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `loading.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌 */
-  --ui-loading-spinner-size: var(--ui-font-icon);
-  --ui-loading-gap: var(--ui-space-2);
-  /* 无规范取值：由主题底色派生（本包唯一的面色令牌），不新造色值 */
-  --ui-loading-mask: color-mix(in srgb, var(--ui-base-100) 72%, transparent);
-  --ui-loading-text-color: var(--ui-base-content-muted);
-}
+/**
+ * loading —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `loading.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-loading-spinner-size: var(--ui-font-icon);
+  --ui-loading-gap: var(--ui-space-2);
+  /* 无规范取值：由主题底色派生（本包唯一的面色令牌），不新造色值 */
+  --ui-loading-mask: color-mix(in srgb, var(--ui-base-100) 72%, transparent);
+  --ui-loading-text-color: var(--ui-base-content-muted);
+}

package/dist/styles/components/nav.css

@@ -1,48 +1,48 @@
-/**
- * Nav（侧栏导航：list / tree 两态，行渲染复用 Tree）。
- *
- * 依据：@aihub/theme 的 pages/tree-page.css（导航区 12/14）+ components/tree.css（行几何）。
- */
-
-/* ===== Nav（侧栏导航：list / tree 两态，行渲染复用 Tree）=====
-   根件不滚（滚动归导航体）。宽度只认 --mh-nav-width（组件按 `width` prop 下发，缺省填满所在栏），
-   与 .mh-tree 的缩进同一手法：几何载荷走变量，公式留在 CSS。 */
-
-.mh-nav {
-  display: flex;
-  flex-direction: column;
-  /* 缺省填满所在栏：列宽归 Page.Split / 外层布局（导航件不重复锁一个可能与栏宽不符的数） */
-  width: var(--mh-nav-width, 100%);
-  min-width: 0;
-  height: 100%;
-  overflow: hidden;
-}
-
-.mh-nav__title {
-  flex-shrink: 0;
-  padding: var(--ui-space-2);
-  font-size: var(--ui-font-body);
-  line-height: var(--ui-line-body);
-  font-weight: var(--ui-weight-semibold);
-  color: var(--ui-base-content);
-}
-
-/* 导航体：侧栏内滚动的唯一归属（同 Panel.Body 的口径） */
-
-.mh-nav__body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding: var(--ui-space-1) 0;
-}
-
-/* list 态：扁平导航没有层级，隐藏箭头占位（那一段留给树对齐用） */
-
-.mh-nav--list .mh-tree__caret {
-  display: none;
-}
-
-/* ===== 右侧分隔线（侧栏贴在页面容器里时用） ===== */
-.mh-nav--bordered {
-  border-right: 1px solid var(--ui-base-300);
-}
+/**
+ * Nav（侧栏导航：list / tree 两态，行渲染复用 Tree）。
+ *
+ * 依据：@aihub/theme 的 pages/tree-page.css（导航区 12/14）+ components/tree.css（行几何）。
+ */
+
+/* ===== Nav（侧栏导航：list / tree 两态，行渲染复用 Tree）=====
+   根件不滚（滚动归导航体）。宽度只认 --mh-nav-width（组件按 `width` prop 下发，缺省填满所在栏），
+   与 .mh-tree 的缩进同一手法：几何载荷走变量，公式留在 CSS。 */
+
+.mh-nav {
+  display: flex;
+  flex-direction: column;
+  /* 缺省填满所在栏：列宽归 Page.Split / 外层布局（导航件不重复锁一个可能与栏宽不符的数） */
+  width: var(--mh-nav-width, 100%);
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.mh-nav__title {
+  flex-shrink: 0;
+  padding: var(--ui-space-2);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  font-weight: var(--ui-weight-semibold);
+  color: var(--ui-base-content);
+}
+
+/* 导航体：侧栏内滚动的唯一归属（同 Panel.Body 的口径） */
+
+.mh-nav__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--ui-space-1) 0;
+}
+
+/* list 态：扁平导航没有层级，隐藏箭头占位（那一段留给树对齐用） */
+
+.mh-nav--list .mh-tree__caret {
+  display: none;
+}
+
+/* ===== 右侧分隔线（侧栏贴在页面容器里时用） ===== */
+.mh-nav--bordered {
+  border-right: 1px solid var(--ui-base-300);
+}

package/dist/styles/components/notice.css

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

@@ -1,17 +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;
-}
+/**
+ * 组件几何令牌：取自 @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;
+}