@manohub/ui 0.10.5 → 1.0.1

package/dist/styles/components/drawer.css

@@ -1,143 +1,143 @@
-/**
- * Drawer —— 抽屉皮肤（与操作层并列组合：`class="mh-popup mh-drawer"`）。
- *
- * 与 `Dialog` 同一套行为、只换落位：模态语义 / Esc / 焦点陷阱 / `::backdrop` 遮罩 / top layer
- * 渲染全由原生 `<dialog>` 给（见 `dialog.css` 与组件头注释）；本件**不新建任何浮层机制**，
- * 只把居中的面板改成贴屏幕某一侧、整屏高。
- *
- * 三条几何决策：
- * - **`margin: 0` 必须写**：UA 给 `<dialog>` 的 `margin: auto` 正是「居中」的来源，
- *   不归零则 `inset-inline` 与它对冲，面板会回到中线（实测）。
- * - **整屏高不切圆角**（`--ui-drawer-radius: 0`）：面板上下贴视口边缘，切角会在边缘露出遮罩缺口。
- *   保留成令牌是为了让主题能改（如浮起式抽屉），不是为了默认切角。
- * - **宽度由组件用行内 style 下发**：`width` 既接受像素数也接受任意合法宽度串
- *   （`min(520px, 90vw)` 这类响应式写法），比在面里堆尺寸档更省事，也让「一屏窄了要收窄」可控。
- *
- * 进出场用 **animation**（不用 transition）：位移只碰独立的 `translate` 属性，不碰 `transform`
- * —— 与全库动画令牌的口径一致，且不会覆盖定位。`prefers-reduced-motion` 下整体关闭。
- *
- * **类名与面文件名同根**：`.mh-drawer*`（元素走 `__`），一律 `mh-` 前缀。
- */
-.mh-drawer {
-  position: fixed;
-  inset-block: 0;
-  inset-inline: auto 0; /* 缺省贴右侧（左档在下面覆盖） */
-  margin: 0; /* UA 的 margin:auto 会把面板拉回中线，必须归零 */
-  height: 100%;
-  max-height: 100%;
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  border: none;
-  border-radius: var(--ui-drawer-radius);
-  background: var(--ui-base-100);
-  box-shadow: var(--ui-shadow-card);
-  color: var(--ui-base-content);
-  overflow: hidden;
-}
-.mh-drawer--left {
-  inset-inline: 0 auto; /* 贴左侧 */
-}
-
-/* 真浮层遮罩：`<dialog>` 进 top layer 时才生成 ::backdrop（静态档不生成，对本面无影响） */
-.mh-drawer::backdrop {
-  background: var(--ui-drawer-mask);
-}
-
-/* 进场：从所贴那一侧推入（`translate` 是独立属性，不动 `transform` 与定位） */
-.mh-drawer[open] {
-  animation: mh-drawer-in-right 0.2s ease-out;
-}
-.mh-drawer--left[open] {
-  animation-name: mh-drawer-in-left;
-}
-@keyframes mh-drawer-in-right {
-  from {
-    translate: 100% 0;
-  }
-}
-@keyframes mh-drawer-in-left {
-  from {
-    translate: -100% 0;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .mh-drawer[open] {
-    animation: none;
-  }
-}
-
-/* 页头：标题左、关闭位右（三段之间无分割线，与 Dialog 同一份口径） */
-.mh-drawer__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ui-space-2);
-  flex: none;
-  padding: var(--ui-space-4) var(--ui-space-6) 0;
-  font-size: var(--ui-font-heading);
-  line-height: var(--ui-line-heading);
-  font-weight: var(--ui-weight-medium);
-  color: var(--ui-base-content);
-}
-/* 标题位（插槽版也走这个类，两路渲染同一份排版） */
-.mh-drawer__title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mh-drawer__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: var(--ui-drawer-close-size);
-  height: var(--ui-drawer-close-size);
-  margin: calc(-1 * var(--ui-space-1)); /* 热区比字形大，但视觉上仍与标题同基线 */
-  padding: 0;
-  border: none;
-  border-radius: var(--ui-radius-sm);
-  background: transparent;
-  color: var(--ui-base-content-muted);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-.mh-drawer__close:hover,
-.mh-drawer__close.is-hover {
-  background: var(--ui-base-200);
-  color: var(--ui-base-content);
-}
-.mh-drawer__close:focus-visible {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: 2px;
-}
-
-/* 内容区：**三段里唯一可滚的那段**（页头与底栏固定，抽屉才像抽屉） */
-.mh-drawer__body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding: var(--ui-space-6);
-  font-size: var(--ui-font-body);
-  line-height: var(--ui-line-body);
-  color: var(--ui-base-content);
-}
-/* 首尾孩子不吃外边距：正文里的 <p> 自带 UA margin，会与内容内距叠成一块大空档 */
-.mh-drawer__body > :first-child {
-  margin-top: 0;
-}
-.mh-drawer__body > :last-child {
-  margin-bottom: 0;
-}
-
-/* 底栏：按钮右对齐（按钮的面归按钮族）、间距 8、下内距 16 */
-.mh-drawer__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--ui-space-2);
-  flex: none;
-  padding: 0 var(--ui-space-6) var(--ui-space-4);
-}
+/**
+ * Drawer —— 抽屉皮肤（与操作层并列组合：`class="mh-popup mh-drawer"`）。
+ *
+ * 与 `Dialog` 同一套行为、只换落位：模态语义 / Esc / 焦点陷阱 / `::backdrop` 遮罩 / top layer
+ * 渲染全由原生 `<dialog>` 给（见 `dialog.css` 与组件头注释）；本件**不新建任何浮层机制**，
+ * 只把居中的面板改成贴屏幕某一侧、整屏高。
+ *
+ * 三条几何决策：
+ * - **`margin: 0` 必须写**：UA 给 `<dialog>` 的 `margin: auto` 正是「居中」的来源，
+ *   不归零则 `inset-inline` 与它对冲，面板会回到中线（实测）。
+ * - **整屏高不切圆角**（`--ui-drawer-radius: 0`）：面板上下贴视口边缘，切角会在边缘露出遮罩缺口。
+ *   保留成令牌是为了让主题能改（如浮起式抽屉），不是为了默认切角。
+ * - **宽度由组件用行内 style 下发**：`width` 既接受像素数也接受任意合法宽度串
+ *   （`min(520px, 90vw)` 这类响应式写法），比在面里堆尺寸档更省事，也让「一屏窄了要收窄」可控。
+ *
+ * 进出场用 **animation**（不用 transition）：位移只碰独立的 `translate` 属性，不碰 `transform`
+ * —— 与全库动画令牌的口径一致，且不会覆盖定位。`prefers-reduced-motion` 下整体关闭。
+ *
+ * **类名与面文件名同根**：`.mh-drawer*`（元素走 `__`），一律 `mh-` 前缀。
+ */
+.mh-drawer {
+  position: fixed;
+  inset-block: 0;
+  inset-inline: auto 0; /* 缺省贴右侧（左档在下面覆盖） */
+  margin: 0; /* UA 的 margin:auto 会把面板拉回中线，必须归零 */
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-drawer-radius);
+  background: var(--ui-base-100);
+  box-shadow: var(--ui-shadow-card);
+  color: var(--ui-base-content);
+  overflow: hidden;
+}
+.mh-drawer--left {
+  inset-inline: 0 auto; /* 贴左侧 */
+}
+
+/* 真浮层遮罩：`<dialog>` 进 top layer 时才生成 ::backdrop（静态档不生成，对本面无影响） */
+.mh-drawer::backdrop {
+  background: var(--ui-drawer-mask);
+}
+
+/* 进场：从所贴那一侧推入（`translate` 是独立属性，不动 `transform` 与定位） */
+.mh-drawer[open] {
+  animation: mh-drawer-in-right 0.2s ease-out;
+}
+.mh-drawer--left[open] {
+  animation-name: mh-drawer-in-left;
+}
+@keyframes mh-drawer-in-right {
+  from {
+    translate: 100% 0;
+  }
+}
+@keyframes mh-drawer-in-left {
+  from {
+    translate: -100% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mh-drawer[open] {
+    animation: none;
+  }
+}
+
+/* 页头：标题左、关闭位右（三段之间无分割线，与 Dialog 同一份口径） */
+.mh-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-2);
+  flex: none;
+  padding: var(--ui-space-4) var(--ui-space-6) 0;
+  font-size: var(--ui-font-heading);
+  line-height: var(--ui-line-heading);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+}
+/* 标题位（插槽版也走这个类，两路渲染同一份排版） */
+.mh-drawer__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ui-drawer-close-size);
+  height: var(--ui-drawer-close-size);
+  margin: calc(-1 * var(--ui-space-1)); /* 热区比字形大，但视觉上仍与标题同基线 */
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  background: transparent;
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.mh-drawer__close:hover,
+.mh-drawer__close.is-hover {
+  background: var(--ui-base-200);
+  color: var(--ui-base-content);
+}
+.mh-drawer__close:focus-visible {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 2px;
+}
+
+/* 内容区：**三段里唯一可滚的那段**（页头与底栏固定，抽屉才像抽屉） */
+.mh-drawer__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--ui-space-6);
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+}
+/* 首尾孩子不吃外边距：正文里的 <p> 自带 UA margin，会与内容内距叠成一块大空档 */
+.mh-drawer__body > :first-child {
+  margin-top: 0;
+}
+.mh-drawer__body > :last-child {
+  margin-bottom: 0;
+}
+
+/* 底栏：按钮右对齐（按钮的面归按钮族）、间距 8、下内距 16 */
+.mh-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ui-space-2);
+  flex: none;
+  padding: 0 var(--ui-space-6) var(--ui-space-4);
+}

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

@@ -1,22 +1,22 @@
-/**
- * drawer —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `drawer.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌 */
-  --ui-drawer-radius: 0; /* 整屏高面板不切角；改它才会出现内缘圆角 */
-  --ui-drawer-close-size: 28px; /* 关闭件的点击热区（字形 14 居中） */
-  /* 与 Dialog 同一份遮罩取值（规范 Mask01 黑 45%）：两件并列出现时不该有两种遮罩深度 */
-  --ui-drawer-mask: rgba(0, 0, 0, 0.45);
-}
+/**
+ * drawer —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `drawer.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-drawer-radius: 0; /* 整屏高面板不切角；改它才会出现内缘圆角 */
+  --ui-drawer-close-size: 28px; /* 关闭件的点击热区（字形 14 居中） */
+  /* 与 Dialog 同一份遮罩取值（规范 Mask01 黑 45%）：两件并列出现时不该有两种遮罩深度 */
+  --ui-drawer-mask: rgba(0, 0, 0, 0.45);
+}

package/dist/styles/components/filter.css

@@ -1,29 +1,29 @@
-/**
- * Filter（筛选条）：**本件无自有面 —— 零规则**。
- *
- * 它现在是一层**纯壳**：只给 `Form` 传「排布档 + label 列宽（可选）+ 值模型 + 字段区回车」，
- * 字段行的排布与几何**全部沿用 `Form`**：
- *
- * 1. 字段排布 = `Form` 的多列动态档（本件传 `columns="auto"`）—— 网格轨道**跨行共用**，
- *    因此换行下来的字段与上一行**逐列对齐**。从前本件自建 flex 字段区
- *    （`flex: 1 1 240px` + `wrap`），而 flex 的 `grow` 是**按行分配**的：末行只剩一项时
- *    它独占该行剩余宽度，被拉成通栏 —— 那正是本件 2026-09 交出机制的起因；
- * 2. label 列宽 / 行距 / 列距 / 字段最小宽 = `Form` 的默认档（令牌 + `.mh-form` 的 8px 档）。
- *    本件**不设默认值、也不落行内值** —— 写死就是第二份默认值，`Form` 调档时不会跟着变；
- *    消费方要收紧筛选条的几何，在容器上覆盖 `Form` 的那两个令牌即可（继承生效）；
- * 3. 表头（`Form.Header`）与字段行（`Form.Item`）一律沿用 `Form`，本件不重画任何一个。
- *
- * ## 为什么还留着这个文件（而不是删掉）
- *
- * 「组件与面一一配对」是本包的机械护栏（用例 `contract-class-surface` 要求每个组件目录
- * 都有同名面文件）。本件确实没有自己的类与几何，故这里只留说明文字。它对外的唯一类名是
- * `.mh-filter__form` —— **结构锚点**（消费方与用例靠它定位这个壳，几何沿用 `.mh-form`），
- * 已登记在共用台账「只做结构 / 测试锚点、面上没有样式声明的类」里。
- *
- * ## 与设计稿的关系
- *
- * 稿（Figma「MH后台 0911」node 0:3355，页面「01.1 技能权限分配」的筛选区）只用来确定
- * **筛选条由哪些部件组成**（上行两颗按钮 + 下行若干字段）；几何**不再照抄**稿里的
- * 68 / 16 / 24 / 240，自 2026-09 起统一走 `Form` 的默认档 —— 取舍见
- * `components/filter/index.tsx` 的文件头。
- */
+/**
+ * Filter（筛选条）：**本件无自有面 —— 零规则**。
+ *
+ * 它现在是一层**纯壳**：只给 `Form` 传「排布档 + label 列宽（可选）+ 值模型 + 字段区回车」，
+ * 字段行的排布与几何**全部沿用 `Form`**：
+ *
+ * 1. 字段排布 = `Form` 的多列动态档（本件传 `columns="auto"`）—— 网格轨道**跨行共用**，
+ *    因此换行下来的字段与上一行**逐列对齐**。从前本件自建 flex 字段区
+ *    （`flex: 1 1 240px` + `wrap`），而 flex 的 `grow` 是**按行分配**的：末行只剩一项时
+ *    它独占该行剩余宽度，被拉成通栏 —— 那正是本件 2026-09 交出机制的起因；
+ * 2. label 列宽 / 行距 / 列距 / 字段最小宽 = `Form` 的默认档（令牌 + `.mh-form` 的 8px 档）。
+ *    本件**不设默认值、也不落行内值** —— 写死就是第二份默认值，`Form` 调档时不会跟着变；
+ *    消费方要收紧筛选条的几何，在容器上覆盖 `Form` 的那两个令牌即可（继承生效）；
+ * 3. 表头（`Form.Header`）与字段行（`Form.Item`）一律沿用 `Form`，本件不重画任何一个。
+ *
+ * ## 为什么还留着这个文件（而不是删掉）
+ *
+ * 「组件与面一一配对」是本包的机械护栏（用例 `contract-class-surface` 要求每个组件目录
+ * 都有同名面文件）。本件确实没有自己的类与几何，故这里只留说明文字。它对外的唯一类名是
+ * `.mh-filter__form` —— **结构锚点**（消费方与用例靠它定位这个壳，几何沿用 `.mh-form`），
+ * 已登记在共用台账「只做结构 / 测试锚点、面上没有样式声明的类」里。
+ *
+ * ## 与设计稿的关系
+ *
+ * 稿（Figma「MH后台 0911」node 0:3355，页面「01.1 技能权限分配」的筛选区）只用来确定
+ * **筛选条由哪些部件组成**（上行两颗按钮 + 下行若干字段）；几何**不再照抄**稿里的
+ * 68 / 16 / 24 / 240，自 2026-09 起统一走 `Form` 的默认档 —— 取舍见
+ * `components/filter/index.tsx` 的文件头。
+ */