@manohub/ui 0.10.5 → 1.0.0

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

@@ -1,43 +1,43 @@
-/**
- * 单件令牌。
- *
- * **本件有一批令牌是「跨分件消费」的**：表壳 `.mh-input__wrap` 是 `.mh-input` 的**父容器**
- * （`.mh-input__wrap > .mh-input` 就是证据），`.mh-input__menu` / `.mh-input__help-tip`
- * 是 popover 面板（不在控件子树里）—— 自定义属性只向下继承，声明在 `.mh-input` 上会让
- * 计数位 / 前后缀 / 标签 / 菜单项取不到值（声明作废，且不报错）。
- *
- * 改前靠「把令牌同时声明在 4 个外层类上」的 workaround 兜；锚到容器后容器是每个分件的祖先，
- * workaround 整块撤掉 —— 这正是本文件从面文件里抽出来的直接原因。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
- * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
- * 「声明在某个组件根类上」这条脆弱假设。
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
- */
-[data-manohub-ui] {
-  /* 展示态是**独立 `<span>`**（不带 `.mh-input`）—— 令牌锚在容器上，它照样取得到 */
-  /* 单件令牌 */
-  --ui-input-height: var(--ui-control-height-md); /* 标准档 32 */
-  --ui-input-height-sm: var(--ui-control-height-sm); /* 小号 24 */
-  --ui-input-height-lg: var(--ui-control-height-lg); /* 大号 40 */
-  --ui-input-padding-x: var(--ui-space-3); /* 12：标准档左右内距 */
-  --ui-input-padding-x-sm: var(--ui-space-2); /* 8 */
-  --ui-input-padding-x-lg: 14px;
-  --ui-input-radius: var(--ui-radius-control); /* 6：控件档（原注释写 8，是旧稿残留） */
-  --ui-input-font-size: var(--ui-font-body); /* 14：控件内容走正文档 */
-  --ui-input-font-size-sm: var(--ui-font-caption); /* 13 */
-  --ui-input-font-size-lg: var(--ui-font-heading); /* 16 */
-  /* 描边取 base-300 —— 这**不是本件自选**，是库级口径：`base-300` 是全库唯一的「线 / 框」色
-     （输入框、按钮、表格、分页项、卡片、面板、分隔线一律取它），`base-400` 只服务勾选类小控件框体。
-     权威出处是 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条（改值前先读那三条）。
-     括注的 `#e6e6e6` 是 **default** 套该槽位的值；**farris** 套同槽位取 Ne08（`#e8ebf2`）——
-     两套值不同、槽位语义相同，别按规范原文给输入框的 Ne04 来反推（那正是本件改前的 base-400）。 */
-  --ui-input-line: var(--ui-base-300);
-  --ui-input-line-hover: var(--ui-primary-hover); /* 滑过 / 聚焦转主色（规范 Th08） */
-  --ui-input-textarea-min-height: 56px; /* 多行最小高（两行正文 + 上下内距） */
-  --ui-input-counter-size: var(--ui-font-caption);
-  --ui-input-icon-size: 14px; /* 清除圆点 */
-  --ui-input-affix-gap: var(--ui-space-2); /* 壳内各附加位的间隔 */
-  --ui-input-affix-size: var(--ui-font-icon); /* 前缀 / 后缀 / 眼睛的图标槽（常规图标档） */
-}
+/**
+ * 单件令牌。
+ *
+ * **本件有一批令牌是「跨分件消费」的**：表壳 `.mh-input__wrap` 是 `.mh-input` 的**父容器**
+ * （`.mh-input__wrap > .mh-input` 就是证据），`.mh-input__menu` / `.mh-input__help-tip`
+ * 是 popover 面板（不在控件子树里）—— 自定义属性只向下继承，声明在 `.mh-input` 上会让
+ * 计数位 / 前后缀 / 标签 / 菜单项取不到值（声明作废，且不报错）。
+ *
+ * 改前靠「把令牌同时声明在 4 个外层类上」的 workaround 兜；锚到容器后容器是每个分件的祖先，
+ * workaround 整块撤掉 —— 这正是本文件从面文件里抽出来的直接原因。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
+ * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
+ * 「声明在某个组件根类上」这条脆弱假设。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
+ */
+[data-manohub-ui] {
+  /* 展示态是**独立 `<span>`**（不带 `.mh-input`）—— 令牌锚在容器上，它照样取得到 */
+  /* 单件令牌 */
+  --ui-input-height: var(--ui-control-height-md); /* 标准档 32 */
+  --ui-input-height-sm: var(--ui-control-height-sm); /* 小号 24 */
+  --ui-input-height-lg: var(--ui-control-height-lg); /* 大号 40 */
+  --ui-input-padding-x: var(--ui-space-3); /* 12：标准档左右内距 */
+  --ui-input-padding-x-sm: var(--ui-space-2); /* 8 */
+  --ui-input-padding-x-lg: 14px;
+  --ui-input-radius: var(--ui-radius-control); /* 6：控件档（原注释写 8，是旧稿残留） */
+  --ui-input-font-size: var(--ui-font-body); /* 14：控件内容走正文档 */
+  --ui-input-font-size-sm: var(--ui-font-caption); /* 13 */
+  --ui-input-font-size-lg: var(--ui-font-heading); /* 16 */
+  /* 描边取 base-300 —— 这**不是本件自选**，是库级口径：`base-300` 是全库唯一的「线 / 框」色
+     （输入框、按钮、表格、分页项、卡片、面板、分隔线一律取它），`base-400` 只服务勾选类小控件框体。
+     权威出处是 `@manohub/theme` 的 `default/colors.css` 头「三条口径」第 2 条（改值前先读那三条）。
+     括注的 `#e6e6e6` 是 **default** 套该槽位的值；**farris** 套同槽位取 Ne08（`#e8ebf2`）——
+     两套值不同、槽位语义相同，别按规范原文给输入框的 Ne04 来反推（那正是本件改前的 base-400）。 */
+  --ui-input-line: var(--ui-base-300);
+  --ui-input-line-hover: var(--ui-primary-hover); /* 滑过 / 聚焦转主色（规范 Th08） */
+  --ui-input-textarea-min-height: 56px; /* 多行最小高（两行正文 + 上下内距） */
+  --ui-input-counter-size: var(--ui-font-caption);
+  --ui-input-icon-size: 14px; /* 清除圆点 */
+  --ui-input-affix-gap: var(--ui-space-2); /* 壳内各附加位的间隔 */
+  --ui-input-affix-size: var(--ui-font-icon); /* 前缀 / 后缀 / 眼睛的图标槽（常规图标档） */
+}

package/dist/styles/components/layout.css

@@ -1,200 +1,200 @@
-/**
- * Layout —— 布局原子件族（`Layout.Row` 排「行」/ `Layout.Column` 排「列」）。
- *
- * 出处：应用侧反复抄写 `display:flex; align-items:center; gap:8px` 的收敛 ——「应用侧只写布局」
- * 不等于「布局可以各页各写一套」：抄十遍之后间距档与居中口径必然分叉。
- * 两件只做三件事：**轴向**、**间距档**（令牌档位）、**对齐**。
- *
- * ## 方向口径（与 CSS 属性名相反，是刻意的）
- *
- *   行与行是上下关系 ⇒ `Row` 是**竖排容器**（`.mh-layout-row` = `flex-direction: column`）；
- *   列与列是左右关系 ⇒ `Column` 是**水平容器**（`.mh-layout-column` = `row`）。
- *   判据是「读表格」：`<tr>` 一行行往下堆、一行里的格子左右并排。改这条 = 改口径。
- *
- * ## 栅格公式（`Row` 传了 `columns` 时）
- *
- * 显式 N 条轨道，track 下限取 `min(最小列宽, 均分)`、上限 `1fr`：
- *
- * - 容器够宽 → 每列 = 最小列宽（或更大，被 `1fr` 均分撑满）；
- * - 容器不够宽 → 下限退到「均分」，列**等分收窄**（不会压成窄缝、不会横向溢出）。
- *
- * 公式里的 `%` 解析的是**栅格容器自己的内联尺寸**（不是视口），故放进弹窗 / 分栏同样成立
- * —— 这也是不用媒体查询断点的原因（页面都在弹窗与分栏里，视口宽度代表不了容器）。
- *
- * ⚠️ **别改回 `auto-fit`**：轨道数由「能塞下几条最小列宽」决定，恰好塞不下 N 列时会退化成
- * 「1 条显式 + 1 条隐式」轨道，跨格项把隐式轨道按内容宽度压成窄缝。
- * 浏览器实测（容器 526 / 最小 260 / `columns=2`）：
- * `auto-fit` 版 → 476px + 41px（不等宽）；显式 N 版 → 259px + 259px（等宽）。
- *
- * ## 令牌
- *
- * `--mh-layout-row-*` / `--mh-layout-column-*` 都声明在各自的根类上（可被行内样式覆盖 ——
- * `Layout.Row` 的 `minColumnWidth` 就是这么下发 `--mh-layout-row-min` 的）；
- * 间距值取主题令牌 `--ui-space-1..4`，本文件**不新造色值 / 尺寸字面量**。
- */
-.mh-layout-row {
-  --mh-layout-row-gap: var(--ui-space-2);
-  --mh-layout-row-min: var(--ui-grid-column-min);
-  --mh-layout-row-columns: 2;
-  display: flex;
-  flex-direction: column;
-  gap: var(--mh-layout-row-gap);
-  /* 内距不在本件声明：由 `padding` prop 直接下发实体 `padding`（值来自 prop） */
-  /* 交叉轴（水平）不声明 = CSS 默认的 stretch（子项齐宽）；要居中写 align="center" */
-  /* 放开 min-width：行常被塞进窄格子（表格单元格、限宽控件列）——
-     不放开的 flex 容器压不进窄格，会把外层撑破 */
-  min-width: 0;
-}
-
-/* 一行分 n 列：栅格轨道横向铺，这一行的子项并排（`columns-1` 就是一行一列） */
-.mh-layout-row--grid {
-  display: grid;
-  /* 交叉轴默认回到 stretch（单元等高）；显式 align 的规则排在本条之后，能压过它 */
-  align-items: stretch;
-  /* 列数**恒为 N**（显式轨道，不用 auto-fit：auto-fit 在「N 列刚好放不下」时会退化成
-     1 条显式轨道 + 隐式轨道，跨格项把隐式轨道压成几十像素的窄缝 —— 实测过）。
-     track 下限取 min(最小列宽, 均分)：容器够宽时它就是最小列宽，
-     容器窄时退到均分 —— 于是列始终等宽，既不会被压成窄缝，也不会横向溢出。 */
-  grid-template-columns: repeat(
-    var(--mh-layout-row-columns),
-    minmax(
-      min(
-        var(--mh-layout-row-min),
-        calc(
-          (100% - (var(--mh-layout-row-columns) - 1) * var(--mh-layout-row-gap)) /
-            var(--mh-layout-row-columns)
-        )
-      ),
-      1fr
-    )
-  );
-}
-
-/* 列数上限 → 变量（供上面的栅格公式取用） */
-.mh-layout-row--columns-1 {
-  --mh-layout-row-columns: 1;
-}
-.mh-layout-row--columns-2 {
-  --mh-layout-row-columns: 2;
-}
-.mh-layout-row--columns-3 {
-  --mh-layout-row-columns: 3;
-}
-.mh-layout-row--columns-4 {
-  --mh-layout-row-columns: 4;
-}
-
-/* 间距档 → 变量（落到变量上：行那份栅格公式里要用同一个间距值算轨道下限）。
-   sm/md/lg/xl = --ui-space-1/2/3/4 = 4/8/12/16；none = 0 */
-.mh-layout-row--gap-none {
-  --mh-layout-row-gap: 0;
-}
-.mh-layout-row--gap-sm {
-  --mh-layout-row-gap: var(--ui-space-1);
-}
-.mh-layout-row--gap-md {
-  --mh-layout-row-gap: var(--ui-space-2);
-}
-.mh-layout-row--gap-lg {
-  --mh-layout-row-gap: var(--ui-space-3);
-}
-.mh-layout-row--gap-xl {
-  --mh-layout-row-gap: var(--ui-space-4);
-}
-
-/* --- 列：水平容器（一行里的一格；同时是栅格单元） --- */
-.mh-layout-column {
-  --mh-layout-column-gap: var(--ui-space-2);
-  display: flex;
-  flex-direction: row;
-  /* 默认**垂直居中**：列里多是「徽标 + 文本」「标签 + 值」「控件 + 按钮」这类内容要齐中线；
-     要贴顶写 align="start"、要齐宽写 align="stretch" */
-  align-items: center;
-  gap: var(--mh-layout-column-gap);
-  /* 内距不在本件声明：同 `.mh-layout-row`，由 `padding` prop 直接下发 */
-  min-width: 0;
-}
-
-.mh-layout-column--gap-none {
-  --mh-layout-column-gap: 0;
-}
-.mh-layout-column--gap-sm {
-  --mh-layout-column-gap: var(--ui-space-1);
-}
-.mh-layout-column--gap-md {
-  --mh-layout-column-gap: var(--ui-space-2);
-}
-.mh-layout-column--gap-lg {
-  --mh-layout-column-gap: var(--ui-space-3);
-}
-.mh-layout-column--gap-xl {
-  --mh-layout-column-gap: var(--ui-space-4);
-}
-
-/* 折行属于**水平容器**（列里的内容太宽要折行）；竖排容器没有「折行」这回事，
-   栅格形态的「折行」由自动减列承担 */
-.mh-layout-column--wrap {
-  flex-wrap: wrap;
-}
-
-/* 栅格单元跨格（span 不要超过所在行的 columns，超了 auto-fit 会为它多开轨道） */
-.mh-layout-column--span-2 {
-  grid-column: span 2;
-}
-.mh-layout-column--span-3 {
-  grid-column: span 3;
-}
-.mh-layout-column--span-4 {
-  grid-column: span 4;
-}
-
-/* 对齐（排在 `.mh-layout-row--grid` 的 stretch 之后：显式 align 要能压过它） */
-.mh-layout-row--align-start {
-  align-items: flex-start;
-}
-.mh-layout-column--align-start {
-  align-items: flex-start;
-}
-.mh-layout-row--align-center {
-  align-items: center;
-}
-.mh-layout-column--align-center {
-  align-items: center;
-}
-.mh-layout-row--align-end {
-  align-items: flex-end;
-}
-.mh-layout-column--align-end {
-  align-items: flex-end;
-}
-.mh-layout-row--align-baseline {
-  align-items: baseline;
-}
-.mh-layout-column--align-baseline {
-  align-items: baseline;
-}
-.mh-layout-row--align-stretch {
-  align-items: stretch;
-}
-.mh-layout-column--align-stretch {
-  align-items: stretch;
-}
-
-.mh-layout-row--justify-center {
-  justify-content: center;
-}
-.mh-layout-column--justify-center {
-  justify-content: center;
-}
-.mh-layout-row--justify-end {
-  justify-content: flex-end;
-}
-.mh-layout-column--justify-end {
-  justify-content: flex-end;
-}
-.mh-layout-row--justify-between {
-  justify-content: space-between;
-}
-.mh-layout-column--justify-between {
-  justify-content: space-between;
-}
+/**
+ * Layout —— 布局原子件族（`Layout.Row` 排「行」/ `Layout.Column` 排「列」）。
+ *
+ * 出处：应用侧反复抄写 `display:flex; align-items:center; gap:8px` 的收敛 ——「应用侧只写布局」
+ * 不等于「布局可以各页各写一套」：抄十遍之后间距档与居中口径必然分叉。
+ * 两件只做三件事：**轴向**、**间距档**（令牌档位）、**对齐**。
+ *
+ * ## 方向口径（与 CSS 属性名相反，是刻意的）
+ *
+ *   行与行是上下关系 ⇒ `Row` 是**竖排容器**（`.mh-layout-row` = `flex-direction: column`）；
+ *   列与列是左右关系 ⇒ `Column` 是**水平容器**（`.mh-layout-column` = `row`）。
+ *   判据是「读表格」：`<tr>` 一行行往下堆、一行里的格子左右并排。改这条 = 改口径。
+ *
+ * ## 栅格公式（`Row` 传了 `columns` 时）
+ *
+ * 显式 N 条轨道，track 下限取 `min(最小列宽, 均分)`、上限 `1fr`：
+ *
+ * - 容器够宽 → 每列 = 最小列宽（或更大，被 `1fr` 均分撑满）；
+ * - 容器不够宽 → 下限退到「均分」，列**等分收窄**（不会压成窄缝、不会横向溢出）。
+ *
+ * 公式里的 `%` 解析的是**栅格容器自己的内联尺寸**（不是视口），故放进弹窗 / 分栏同样成立
+ * —— 这也是不用媒体查询断点的原因（页面都在弹窗与分栏里，视口宽度代表不了容器）。
+ *
+ * ⚠️ **别改回 `auto-fit`**：轨道数由「能塞下几条最小列宽」决定，恰好塞不下 N 列时会退化成
+ * 「1 条显式 + 1 条隐式」轨道，跨格项把隐式轨道按内容宽度压成窄缝。
+ * 浏览器实测（容器 526 / 最小 260 / `columns=2`）：
+ * `auto-fit` 版 → 476px + 41px（不等宽）；显式 N 版 → 259px + 259px（等宽）。
+ *
+ * ## 令牌
+ *
+ * `--mh-layout-row-*` / `--mh-layout-column-*` 都声明在各自的根类上（可被行内样式覆盖 ——
+ * `Layout.Row` 的 `minColumnWidth` 就是这么下发 `--mh-layout-row-min` 的）；
+ * 间距值取主题令牌 `--ui-space-1..4`，本文件**不新造色值 / 尺寸字面量**。
+ */
+.mh-layout-row {
+  --mh-layout-row-gap: var(--ui-space-2);
+  --mh-layout-row-min: var(--ui-grid-column-min);
+  --mh-layout-row-columns: 2;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mh-layout-row-gap);
+  /* 内距不在本件声明：由 `padding` prop 直接下发实体 `padding`（值来自 prop） */
+  /* 交叉轴（水平）不声明 = CSS 默认的 stretch（子项齐宽）；要居中写 align="center" */
+  /* 放开 min-width：行常被塞进窄格子（表格单元格、限宽控件列）——
+     不放开的 flex 容器压不进窄格，会把外层撑破 */
+  min-width: 0;
+}
+
+/* 一行分 n 列：栅格轨道横向铺，这一行的子项并排（`columns-1` 就是一行一列） */
+.mh-layout-row--grid {
+  display: grid;
+  /* 交叉轴默认回到 stretch（单元等高）；显式 align 的规则排在本条之后，能压过它 */
+  align-items: stretch;
+  /* 列数**恒为 N**（显式轨道，不用 auto-fit：auto-fit 在「N 列刚好放不下」时会退化成
+     1 条显式轨道 + 隐式轨道，跨格项把隐式轨道压成几十像素的窄缝 —— 实测过）。
+     track 下限取 min(最小列宽, 均分)：容器够宽时它就是最小列宽，
+     容器窄时退到均分 —— 于是列始终等宽，既不会被压成窄缝，也不会横向溢出。 */
+  grid-template-columns: repeat(
+    var(--mh-layout-row-columns),
+    minmax(
+      min(
+        var(--mh-layout-row-min),
+        calc(
+          (100% - (var(--mh-layout-row-columns) - 1) * var(--mh-layout-row-gap)) /
+            var(--mh-layout-row-columns)
+        )
+      ),
+      1fr
+    )
+  );
+}
+
+/* 列数上限 → 变量（供上面的栅格公式取用） */
+.mh-layout-row--columns-1 {
+  --mh-layout-row-columns: 1;
+}
+.mh-layout-row--columns-2 {
+  --mh-layout-row-columns: 2;
+}
+.mh-layout-row--columns-3 {
+  --mh-layout-row-columns: 3;
+}
+.mh-layout-row--columns-4 {
+  --mh-layout-row-columns: 4;
+}
+
+/* 间距档 → 变量（落到变量上：行那份栅格公式里要用同一个间距值算轨道下限）。
+   sm/md/lg/xl = --ui-space-1/2/3/4 = 4/8/12/16；none = 0 */
+.mh-layout-row--gap-none {
+  --mh-layout-row-gap: 0;
+}
+.mh-layout-row--gap-sm {
+  --mh-layout-row-gap: var(--ui-space-1);
+}
+.mh-layout-row--gap-md {
+  --mh-layout-row-gap: var(--ui-space-2);
+}
+.mh-layout-row--gap-lg {
+  --mh-layout-row-gap: var(--ui-space-3);
+}
+.mh-layout-row--gap-xl {
+  --mh-layout-row-gap: var(--ui-space-4);
+}
+
+/* --- 列：水平容器（一行里的一格；同时是栅格单元） --- */
+.mh-layout-column {
+  --mh-layout-column-gap: var(--ui-space-2);
+  display: flex;
+  flex-direction: row;
+  /* 默认**垂直居中**：列里多是「徽标 + 文本」「标签 + 值」「控件 + 按钮」这类内容要齐中线；
+     要贴顶写 align="start"、要齐宽写 align="stretch" */
+  align-items: center;
+  gap: var(--mh-layout-column-gap);
+  /* 内距不在本件声明：同 `.mh-layout-row`，由 `padding` prop 直接下发 */
+  min-width: 0;
+}
+
+.mh-layout-column--gap-none {
+  --mh-layout-column-gap: 0;
+}
+.mh-layout-column--gap-sm {
+  --mh-layout-column-gap: var(--ui-space-1);
+}
+.mh-layout-column--gap-md {
+  --mh-layout-column-gap: var(--ui-space-2);
+}
+.mh-layout-column--gap-lg {
+  --mh-layout-column-gap: var(--ui-space-3);
+}
+.mh-layout-column--gap-xl {
+  --mh-layout-column-gap: var(--ui-space-4);
+}
+
+/* 折行属于**水平容器**（列里的内容太宽要折行）；竖排容器没有「折行」这回事，
+   栅格形态的「折行」由自动减列承担 */
+.mh-layout-column--wrap {
+  flex-wrap: wrap;
+}
+
+/* 栅格单元跨格（span 不要超过所在行的 columns，超了 auto-fit 会为它多开轨道） */
+.mh-layout-column--span-2 {
+  grid-column: span 2;
+}
+.mh-layout-column--span-3 {
+  grid-column: span 3;
+}
+.mh-layout-column--span-4 {
+  grid-column: span 4;
+}
+
+/* 对齐（排在 `.mh-layout-row--grid` 的 stretch 之后：显式 align 要能压过它） */
+.mh-layout-row--align-start {
+  align-items: flex-start;
+}
+.mh-layout-column--align-start {
+  align-items: flex-start;
+}
+.mh-layout-row--align-center {
+  align-items: center;
+}
+.mh-layout-column--align-center {
+  align-items: center;
+}
+.mh-layout-row--align-end {
+  align-items: flex-end;
+}
+.mh-layout-column--align-end {
+  align-items: flex-end;
+}
+.mh-layout-row--align-baseline {
+  align-items: baseline;
+}
+.mh-layout-column--align-baseline {
+  align-items: baseline;
+}
+.mh-layout-row--align-stretch {
+  align-items: stretch;
+}
+.mh-layout-column--align-stretch {
+  align-items: stretch;
+}
+
+.mh-layout-row--justify-center {
+  justify-content: center;
+}
+.mh-layout-column--justify-center {
+  justify-content: center;
+}
+.mh-layout-row--justify-end {
+  justify-content: flex-end;
+}
+.mh-layout-column--justify-end {
+  justify-content: flex-end;
+}
+.mh-layout-row--justify-between {
+  justify-content: space-between;
+}
+.mh-layout-column--justify-between {
+  justify-content: space-between;
+}