@manohub/ui 0.10.4 → 1.0.0

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

@@ -1,44 +1,44 @@
-/**
- * select —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `select.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 本件有三处「跨分件消费」的令牌，改前靠把它们同时声明在下面几个类上兜 —— 现在都靠容器锚取到值：
-     - 表壳 `.mh-select-host`：箭头槽（`.mh-input__suffix`）挂在壳里、**不在控件子树里** ——
-       少了这一条，箭头的 `width: var(--ui-select-icon-size)` 整条作废、会被输入面的槽规则顶成 16px
-       （实测：chrome 里量到 16px 才发现的）；
-     - 面板 `.mh-select__panel`：挂在 `.mh-popup-host` 下、与触发器**兄弟**（不在 `.mh-select`
-       子树里）—— 否则圆角、行高、字号、选中底全失效。 */
-  /* 单件令牌
-     ## 选项行与树行同源（2026-09-30 由使用方拍板对齐）
-     面板里的选项行与 `mh-tree__row`（`SelectTree` 的面板内容）现在是**同一套行**：
-     下面的行高 / 基础内距 / 字号 / 滑过底四项都取树行那份值（选中底两处本来就同源），
-     故面板里列表形态与树形态不会再长成两套行。改树行的行几何 = 选项行一起动（有意）。
-     ⚠️ 与全局 `--ui-row-height`（36，Skeleton / Collapse 头行在用）**不是一档**：
-     对齐目标是树行（34），不是全库行高 —— 别再按「行高就该 36」改回来。 */
-  --ui-select-height: var(--ui-control-height-md); /* 标准档 32（日期格与面板内部用；触发器的框高归输入面） */
-  --ui-select-padding-x: var(--ui-space-2); /* 8 = 树行的基础内距（缩进之外的左右呼吸位） */
-  --ui-select-radius: var(--ui-radius-md); /* 8：设计 `0:4025` 下拉面板 r8（原注释写 8 但取的是控件档 6） */
-  --ui-select-font-size: var(--ui-font-caption); /* 13 = 树行字号（不是触发器的 14） */
-  --ui-select-option-height: var(--ui-tree-row-height); /* 34 = 树行高（同源引用，两处不会各自漂） */
-  --ui-select-option-hover: var(--ui-primary-weak); /* 滑过 / 键盘高亮：与树行的滑过同档（**不再是中性灰**） */
-  --ui-select-option-selected: var(--ui-primary-subtle); /* 选中底：与树行的选中同档 */
-  --ui-select-chip-height: var(--ui-mark-height-md); /* 多选标签（规范复用标签族 24 档）⇒ 标记体量档，与徽标 / 标签同源 */
-  --ui-select-icon-size: var(--ui-font-icon); /* 下拉箭头：常规图标档 */
-  /* 面板限高（**列表与树两形态共用**）：面板整体（含搜索行）不超此高，超出即内容区滚动。
-     320px ≈ 8 行（行高 34 + 面板上下内距 8）—— 列表与树两形态的节距现在是同一个数
-     （树行 2026-09-30 起也去掉了行距），有无搜索行会差一行上下。
-     要改高度改这枚令牌，不要在业务侧压 max-height。 */
-  --ui-select-panel-max-height: 320px;
-}
+/**
+ * select —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `select.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 本件有三处「跨分件消费」的令牌，改前靠把它们同时声明在下面几个类上兜 —— 现在都靠容器锚取到值：
+     - 表壳 `.mh-select-host`：箭头槽（`.mh-input__suffix`）挂在壳里、**不在控件子树里** ——
+       少了这一条，箭头的 `width: var(--ui-select-icon-size)` 整条作废、会被输入面的槽规则顶成 16px
+       （实测：chrome 里量到 16px 才发现的）；
+     - 面板 `.mh-select__panel`：挂在 `.mh-popup-host` 下、与触发器**兄弟**（不在 `.mh-select`
+       子树里）—— 否则圆角、行高、字号、选中底全失效。 */
+  /* 单件令牌
+     ## 选项行与树行同源（2026-09-30 由使用方拍板对齐）
+     面板里的选项行与 `mh-tree__row`（`SelectTree` 的面板内容）现在是**同一套行**：
+     下面的行高 / 基础内距 / 字号 / 滑过底四项都取树行那份值（选中底两处本来就同源），
+     故面板里列表形态与树形态不会再长成两套行。改树行的行几何 = 选项行一起动（有意）。
+     ⚠️ 与全局 `--ui-row-height`（36，Skeleton / Collapse 头行在用）**不是一档**：
+     对齐目标是树行（34），不是全库行高 —— 别再按「行高就该 36」改回来。 */
+  --ui-select-height: var(--ui-control-height-md); /* 标准档 32（日期格与面板内部用；触发器的框高归输入面） */
+  --ui-select-padding-x: var(--ui-space-2); /* 8 = 树行的基础内距（缩进之外的左右呼吸位） */
+  --ui-select-radius: var(--ui-radius-md); /* 8：设计 `0:4025` 下拉面板 r8（原注释写 8 但取的是控件档 6） */
+  --ui-select-font-size: var(--ui-font-caption); /* 13 = 树行字号（不是触发器的 14） */
+  --ui-select-option-height: var(--ui-tree-row-height); /* 34 = 树行高（同源引用，两处不会各自漂） */
+  --ui-select-option-hover: var(--ui-primary-weak); /* 滑过 / 键盘高亮：与树行的滑过同档（**不再是中性灰**） */
+  --ui-select-option-selected: var(--ui-primary-subtle); /* 选中底：与树行的选中同档 */
+  --ui-select-chip-height: var(--ui-mark-height-md); /* 多选标签（规范复用标签族 24 档）⇒ 标记体量档，与徽标 / 标签同源 */
+  --ui-select-icon-size: var(--ui-font-icon); /* 下拉箭头：常规图标档 */
+  /* 面板限高（**列表与树两形态共用**）：面板整体（含搜索行）不超此高，超出即内容区滚动。
+     320px ≈ 8 行（行高 34 + 面板上下内距 8）—— 列表与树两形态的节距现在是同一个数
+     （树行 2026-09-30 起也去掉了行距），有无搜索行会差一行上下。
+     要改高度改这枚令牌，不要在业务侧压 max-height。 */
+  --ui-select-panel-max-height: 320px;
+}

package/dist/styles/components/skeleton.css

@@ -1,60 +1,60 @@
-/**
- * Skeleton —— 骨架屏（骨架行 / 列表骨架 / 块状骨架）。
- *
- * 出处：`@aihub/theme` 的 `playground/components/skeleton.css` 与 `src/components/skeleton.css`
- * （行高 30 与表格行高一致、圆角 6、行间距 10、shimmer 微光 1.6s ease-in-out）。
- *
- * **微光动画与色值在本包只有这一处定义**（`--ui-skeleton-*` + `@keyframes mh-skeleton-shimmer`）：
- * `query-state.css` 的加载态骨架复用这里的令牌与动画名，不再自带一份 —— 两处各写一份必然漂
- * （时长/色值改一处漏一处，同一屏出现两种呼吸节奏）。
- *
- * 动画降级：`prefers-reduced-motion` 下应压平（本件只声明动画，压平由消费方或后续统一的降级策略负责，
- * 与 theme 包 `base/motion.css` 的分工一致）。
- */
-.mh-skeleton {
-  height: var(--ui-skeleton-height);
-  border-radius: var(--ui-skeleton-radius);
-  background: var(--ui-skeleton-bg);
-  animation: var(--ui-skeleton-animation);
-}
-
-/* 行与行之间（纵向列表的默认节奏） */
-.mh-skeleton + .mh-skeleton {
-  margin-top: var(--ui-skeleton-gap);
-}
-
-/* 骨架列表容器：只做纵向排布，不写任何面（行自己的样子由 `.mh-skeleton` 给） */
-.mh-skeleton-list {
-  display: flex;
-  flex-direction: column;
-}
-
-/* 块状骨架：给一段区间的占位（如卡片体 / 详情页），不参与「行间距」节奏 */
-.mh-skeleton--block {
-  height: auto;
-  min-height: var(--ui-skeleton-height);
-}
-
-/* 微光动画（唯一来源；名字带 mh- 前缀防撞） */
-@keyframes mh-skeleton-shimmer {
-  0% {
-    background-color: var(--ui-skeleton-bg);
-  }
-  50% {
-    background-color: var(--ui-skeleton-highlight);
-  }
-  100% {
-    background-color: var(--ui-skeleton-bg);
-  }
-}
-
-/* ===== 胶囊档（标签 / 头像 / 次按钮的占位） ===== */
-.mh-skeleton--round {
-  border-radius: var(--ui-radius-full);
-}
-
-/* ===== 静态档：关掉微光 =====
- * 静态摆样、截图与打印时用 —— 动着的占位会让截图前后不一致。 */
-.mh-skeleton-list--static .mh-skeleton {
-  animation: none;
-}
+/**
+ * Skeleton —— 骨架屏（骨架行 / 列表骨架 / 块状骨架）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/skeleton.css` 与 `src/components/skeleton.css`
+ * （行高 30 与表格行高一致、圆角 6、行间距 10、shimmer 微光 1.6s ease-in-out）。
+ *
+ * **微光动画与色值在本包只有这一处定义**（`--ui-skeleton-*` + `@keyframes mh-skeleton-shimmer`）：
+ * `query-state.css` 的加载态骨架复用这里的令牌与动画名，不再自带一份 —— 两处各写一份必然漂
+ * （时长/色值改一处漏一处，同一屏出现两种呼吸节奏）。
+ *
+ * 动画降级：`prefers-reduced-motion` 下应压平（本件只声明动画，压平由消费方或后续统一的降级策略负责，
+ * 与 theme 包 `base/motion.css` 的分工一致）。
+ */
+.mh-skeleton {
+  height: var(--ui-skeleton-height);
+  border-radius: var(--ui-skeleton-radius);
+  background: var(--ui-skeleton-bg);
+  animation: var(--ui-skeleton-animation);
+}
+
+/* 行与行之间（纵向列表的默认节奏） */
+.mh-skeleton + .mh-skeleton {
+  margin-top: var(--ui-skeleton-gap);
+}
+
+/* 骨架列表容器：只做纵向排布，不写任何面（行自己的样子由 `.mh-skeleton` 给） */
+.mh-skeleton-list {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 块状骨架：给一段区间的占位（如卡片体 / 详情页），不参与「行间距」节奏 */
+.mh-skeleton--block {
+  height: auto;
+  min-height: var(--ui-skeleton-height);
+}
+
+/* 微光动画（唯一来源；名字带 mh- 前缀防撞） */
+@keyframes mh-skeleton-shimmer {
+  0% {
+    background-color: var(--ui-skeleton-bg);
+  }
+  50% {
+    background-color: var(--ui-skeleton-highlight);
+  }
+  100% {
+    background-color: var(--ui-skeleton-bg);
+  }
+}
+
+/* ===== 胶囊档（标签 / 头像 / 次按钮的占位） ===== */
+.mh-skeleton--round {
+  border-radius: var(--ui-radius-full);
+}
+
+/* ===== 静态档：关掉微光 =====
+ * 静态摆样、截图与打印时用 —— 动着的占位会让截图前后不一致。 */
+.mh-skeleton-list--static .mh-skeleton {
+  animation: none;
+}

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

@@ -1,27 +1,27 @@
-/**
- * skeleton —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `skeleton.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌（只服务本件） */
-  --ui-skeleton-bg: var(--ui-base-200); /* Ne10 底 */
-  --ui-skeleton-highlight: var(--ui-base-100); /* Ne12 扫过高光 */
-  --ui-skeleton-radius: var(--ui-radius-control);
-  /* 与通用行高档一致（36）。⚠️ 原注释写「规范：30 对齐表格行高」是**误导**：30 是表格行高
-     （设计实测），而本令牌是通用行高档。表格骨架若要贴合 30，请在消费侧覆盖本令牌，
-     不要改 `--ui-row-height`（它还供 Collapse 头行使用）。 */
-  --ui-skeleton-height: var(--ui-row-height);
-  --ui-skeleton-gap: var(--ui-space-3); /* 行间距 10 */
-  --ui-skeleton-animation: mh-skeleton-shimmer 1.6s ease-in-out infinite;
-}
+/**
+ * skeleton —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `skeleton.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（只服务本件） */
+  --ui-skeleton-bg: var(--ui-base-200); /* Ne10 底 */
+  --ui-skeleton-highlight: var(--ui-base-100); /* Ne12 扫过高光 */
+  --ui-skeleton-radius: var(--ui-radius-control);
+  /* 与通用行高档一致（36）。⚠️ 原注释写「规范：30 对齐表格行高」是**误导**：30 是表格行高
+     （设计实测），而本令牌是通用行高档。表格骨架若要贴合 30，请在消费侧覆盖本令牌，
+     不要改 `--ui-row-height`（它还供 Collapse 头行使用）。 */
+  --ui-skeleton-height: var(--ui-row-height);
+  --ui-skeleton-gap: var(--ui-space-3); /* 行间距 10 */
+  --ui-skeleton-animation: mh-skeleton-shimmer 1.6s ease-in-out infinite;
+}