@manohub/ui 0.6.0

package/dist/styles/components/form.css

@@ -0,0 +1,220 @@
+/**
+ * Form + Form.Item（自建表单：label 列 + 控件列 + 错误 / 说明）。
+ *
+ * 依据：`@aihub/theme` 的 `components/field.css`（标签色与列宽 / 必填星标 / 说明与报错）与
+ * 设计稿《MH后台-0911》的表单（`02.1` 高级筛选区：标签 13px、必填星号 `#ff1922`、
+ * 标签与控件间距 10）。**必填星号取 `--ui-required-mark`（专用色），不复用 `--ui-error`**。
+ */
+
+/* ===== Form（自建表单：label + 控件 + 错误 + 说明）=====
+   沿 farris 表单的既有约定：label **右对齐**、必填星号在 label 文本**左侧**。
+   与 farris 动态表单的两处有意差异：① 控件撑满剩余宽度（按需用 controlWidth 收敛），
+   不受 farris「字段 max-width 26.625rem」约束；② 错误与说明走**文档流**排在控件下方
+   （farris 用绝对定位的浮层提示条，在弹窗里会压住下一行控件）。
+
+   label 列宽只由变量驱动：Form / Form.Item 落 `--mh-form-label-width`，默认取令牌，
+   故换宽窄不需要在消费方写 CSS。 */
+
+/* 行距取 8px 档：Form.Item 自己已经是一个完整行（label 与控件等高 + 错误/说明按文档流往下排），
+   再用 16px 行距会把表单拉得很散 —— 尤其是步骤⑤那种「只读文本行」的摘要，行与行之间会显得发虚。
+   要更松的排版属于消费方场景，改这里之前先确认不是想把「行距」当成区块间距在用。 */
+
+.mh-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-2);
+}
+
+/* 两列（Form columns=2）：`auto-fit` + 列最小宽度 ⇒ 容器够宽才并排、窄了**自动回落一列**
+   （不需要媒体查询，也不需要容器查询）。`align-items: start` 让同一行的两个字段各自顶部对齐，
+   不被隔壁那个「错误 + 多行说明」撑高的格子拉扯。 */
+
+.mh-form--two-column {
+  display: grid;
+  /* 上限 2 列 + 最小列宽：track 下限取「最小列宽」与「按 2 列等分」的较大者
+     —— 否则宽表单里 auto-fit 会一路排到 4 列（实测 1400px 得 4 列），
+     而 `columns={2}` 承诺的是"最多 2 列、窄了回落"（与 Layout.Row 同一公式）。 */
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(
+      max(var(--ui-form-column-min), calc((100% - var(--ui-space-2)) / 2)),
+      1fr
+    )
+  );
+  align-items: start;
+}
+
+/* 跨满整行：说明行 / 卡片组 / 表格 / 文本域这类整块内容（单列时 grid-column 无效，无副作用） */
+
+.mh-form-item--full {
+  grid-column: 1 / -1;
+}
+
+.mh-form-item {
+  /* label 列宽：Item 行内下发 --mh-form-label-width；未传时取令牌 */
+  --mh-form-label-width: var(--ui-form-label-width);
+  display: flex;
+  align-items: flex-start;
+}
+
+/* label 列：固定宽 + **右对齐**（与 farris 的动态表单一致，也是水平表单的通行默认）。
+   min-height 取**控件真实高度**（--ui-form-control-height 由桥接层按 farris 控件规则给出）：
+   label 盒与控件盒等高 ⇒ 两侧文字各自居中后落在同一条中线上。
+   曾经写的是 32px 令牌，而 farris 控件实际 ≈24px（rem，随根字号）⇒ label 明显偏低，已修。 */
+
+.mh-form-item__label {
+  flex: 0 0 auto;
+  width: var(--mh-form-label-width);
+  box-sizing: border-box;
+  min-height: var(--ui-form-control-height, auto);
+  padding-right: var(--ui-space-3);
+  display: flex;
+  align-items: center;
+  /* 右对齐：label 文本贴着控件列，短标签也不会在列里留下大段空隙（与 farris 动态表单一致） */
+  justify-content: flex-end;
+  gap: 2px;
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+}
+
+.mh-form-item__required {
+  flex: 0 0 auto;
+  /* **不是** `--ui-error`：星号表达「这里有个必填要求」，不是「这里出错了」。
+     两者放同一枚令牌时，改错误色会顺带改掉全站的必填星号（反之亦然）。
+     设计实证：`02.1 > 高级筛选 > 1..4` 的 `*` = `#ff1922`（比错误色 `#f23030` 更艳）。 */
+  color: var(--ui-required-mark);
+}
+
+/* label 对齐：基类默认右对齐（贴控件列，`labelAlign` 缺省档）；
+   `labelAlign="left"` 时挂这个修饰类改成左对齐 —— 只给「非默认值」挂类，避免两段声明争胜出顺序。
+   位置必须在基类规则之后：`.mh-form-item__label {` 是它的子串，测试取规则体时按首次出现命中。 */
+
+.mh-form-item--label-left .mh-form-item__label {
+  justify-content: flex-start;
+}
+
+/* 只读展示行（`Form.Item` 的 `text` 形态，或显式 `readonly`）的 label 降一档为**次要色**：
+   值与字段名同取正文色时，摘要 / 详情读起来是一串并列文本，分不清哪个是字段名
+   （原型 .sum-group td.k / .field-item .k 用的正是次要色）。值侧不变，仍是正文色。
+   `muted` 而非 `subtle`：空值占位「—」已经是 subtle，label 再用同色会让空行整行同调。
+   位置同样必须在基类 `.mh-form-item__label {` 之后（spec 的 ruleBody 按首次出现取规则体）。 */
+
+.mh-form-item--readonly .mh-form-item__label {
+  color: var(--ui-base-content-muted);
+}
+
+/* label 文本过长时省略而不是换行（换行会把控件列挤错位） */
+
+.mh-form-item__label-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-form-item__control {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 只读文本行（Form.Item 的 text 形态：摘要 / 详情）：正文色与行高，
+   长文案（SQL where、列说明）按词折行；`pre-wrap` 保留换行符（多行过滤条件回显）。 */
+
+.mh-form-item__text {
+  /* 与 label 同一口径：桥接层不给 `--ui-form-control-height` 时退回 auto（不给回退会让整条声明作废） */
+  min-height: var(--ui-form-control-height, auto);
+  display: flex;
+  align-items: center;
+  font-size: var(--ui-font-body);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 空值占位（组件统一给 `—`）：压成次要色，避免它被当成真实取值 */
+
+.mh-form-item__text[data-empty='true'] {
+  color: var(--ui-base-content-subtle);
+}
+
+.mh-form-item__error {
+  margin-top: var(--ui-space-1);
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-error);
+}
+
+.mh-form-item__hint {
+  margin-top: var(--ui-space-1);
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-subtle);
+}
+
+/* ===== 纵向排布（`layout="vertical"`：label 在控件上方） =====
+ * 窄容器（抽屉 / 移动端）与「字段名很长」的场景用纵向 —— 横向时 label 列宽会把控件压得很窄。 */
+.mh-form--vertical .mh-form-item {
+  flex-direction: column;
+  align-items: stretch;
+}
+.mh-form--vertical .mh-form-item__label {
+  width: auto;
+  min-width: 0;
+  justify-content: flex-start;
+  padding-right: 0;
+  padding-bottom: var(--ui-space-1);
+  text-align: left;
+}
+
+/* ===== 表单头（`Form.Header`：单头，成员归位到最前）=====
+   只做**标题排版**与**右端操作位**，不承担区块分组（那是 `Panel` 的职责）。
+   三样（title / extra / description）都没有时组件整块不渲染 —— 空盒子同样占一档
+   `Form` 的 gap，会凭空多出间距。 */
+
+.mh-form__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+}
+
+/* 标题行：14px/600 —— 与字段 label（14px/400）拉开「这是标题」的字重差；
+   有意不打到 16px（`--ui-font-heading` 是弹窗标题那一档）。
+   行高由这一行**最高的孩子**决定：筛选条里是两颗 32px 按钮 ⇒ 这一行就是 32px（与设计稿一致）。 */
+
+.mh-form__title {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  font-size: var(--ui-font-body);
+  font-weight: var(--ui-weight-semibold);
+  line-height: var(--ui-line-body);
+  color: var(--ui-base-content);
+}
+
+/* 标题文本允许被挤窄（右端操作位不参与收缩）；长标题**换行**而不是截断
+   —— 截断会让这一块读不出是什么。 */
+
+.mh-form__title-text {
+  min-width: 0;
+}
+
+/* 右端操作位（`extra` 槽）：贴右由 `margin-left: auto` 表达，不用 `justify-content: space-between`
+   （那条依赖「这一行只有两个子节点」，标题换行或将来再加子节点时就不再贴右）；
+   `flex: none` 让操作位自身不被标题挤变形（与卡片便捷头同一手法）。 */
+
+.mh-form__title-extra {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  flex: none;
+}
+
+.mh-form__description {
+  margin: 0;
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}

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

@@ -0,0 +1,15 @@
+/**
+ * 组件几何令牌：label 列宽 120（与设计稿「标签 + 一行控件」的表单同名宽，需要不同宽度时在表单上
+ * 覆盖 —— 组件只下发 --mh-form-label-width）+ 两列表单的列最小宽度（320 = 「label 120 + 一个还能
+ * 用的输入框」的下限，容器放不下两列时自动回落一列）。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出：这些是**基础值**，锚在 `[data-manohub-ui]`（跨包唯一作用域锚，
+ * 由入口层无条件写在应用容器上）—— 任何落在容器里的分件都取得到值，不再依赖
+ * 「声明在某个组件根类上」这条脆弱假设。
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里（拆开会让档位失效）。
+ */
+[data-manohub-ui] {
+  --ui-form-label-width: 120px;
+  --ui-form-column-min: 320px;
+}

package/dist/styles/components/input.css

@@ -0,0 +1,445 @@
+/**
+ * Input / Textarea —— 输入框族（三档尺寸 + 单行 + 多行 + 展示态 + 前后缀 + 清除/眼睛 + 前置后置标签）。
+ *
+ * 出处：设计稿《MH后台-0911》的搜索框（`0:3945`：高 32 / 圆角 6 / 内距 12 / 图标 16 + 距 8 /
+ * 占位 `#999999` / 边框 `#e6e6e6`）与 `@aihub/theme` 的 `src/components/input.css`
+ * （控件高 32 / 内距 12 / 圆角 6 / 边框 base-300；聚焦 = 主色描边 + 主色环；禁用 = base-200 底 + base-300 边 + subtle 字；
+ *  多行最小高 44 + 右下计数；前置后置标签嵌在同一控件内，标签底 Ne11、高 24）。
+ *
+ * **一处有意差异**：规范把控件最大宽钉在 300px（300px），本仓的控件宽度**由表单列宽驱动**
+ * （`Form.Item` 的控件列 `flex: 1`），故这里 `width: 100%`、不设上限 —— 与 form.css 里
+ * 「不受 farris 字段 max-width 约束」的既有结论同口径。需要定宽的消费方在容器上收敛。
+ * **第二处有意差异（图标档）**：设计注记的「图标 16」按**整库口径**改为**常规图标档**
+ * `--ui-input-affix-size = var(--ui-font-icon)`（14）；前后缀 / 眼睛与全库其它常规图标同径。
+ * 清除圆点内的叉（10）不属于常规图标，仍按设计取小字形。
+ *
+ * **表壳是 flex 行**（`__wrap`）：前置 → 控件 → 清除 → 眼睛 → 后缀 → 计数依次排列，
+ * 间隔统一吃 `--ui-input-affix-gap`。壳内控件 `flex: 1 1 auto + min-width: 0`，
+ * 故任何附加位出现/消失时输入区自动伸缩，**不需要为每个附加组合各写一条让位规则**
+ * （绝对定位 + padding 让位的旧法在「前后缀 + 清除 + 眼睛」同时出现时必然要两两枚举）。
+ *
+ * **高度三档全部吃主题令牌**（`--ui-control-height-sm` / `-md` / `-lg`，default 24 / 32 / 40），
+ * 换主题即换控件尺寸；档位只覆盖令牌，几何规则只有一份。
+ *
+ * **触发器形态（`as="button"`）**：控件元素可以是 `<button>`（`Select` 一类复合件靠它复用整件的
+ * 框 / 内距 / 清除位 / 右侧图标位，同时保留 `<button>` 才有的原生语义，如 `popovertarget`）。
+ * 面层只需两条 —— `.mh-input--trigger` 只归零 `<button>` 的 UA 残留，
+ * `.mh-input__wrap > .mh-input--trigger::after` 是**整箱热区**（见该节），
+ * 两条都**不重写框、不重写状态**：框与状态本来就挂在 `.mh-input` 与表壳上，与元素类型无关。
+ *
+ * **聚焦环不新造阴影令牌**：规范的聚焦阴影槽位映射为本仓的「主色弱底」令牌
+ * `--ui-primary-weak`（同一用途：主色低透明度环）。
+ *
+ * 状态三源等价：原生 `:hover` / `:focus` / `:disabled` / `[aria-invalid]` ⟷ 组件下发 `data-state`
+ * ⟷ 静态档 `.is-*`，同名面共用一份声明。
+ *
+ * 禁写：本件不消费 farris 类；跨件令牌一律进 `theme/`。
+ */
+
+/* 控件本体：**裸用（不带壳）时由控件自己画框** —— Select 的搜索行、静态页写法都靠这一条。
+ * 带壳 / 进组时，后面「壳」「组」两节会把框逐层收归外层（见各节注释）。 */
+.mh-input {
+  width: 100%;
+  height: var(--ui-input-height);
+  padding: 0 var(--ui-input-padding-x);
+  border: 1px solid var(--ui-input-line);
+  border-radius: var(--ui-input-radius);
+  background: var(--ui-base-100);
+  font-family: inherit;
+  font-size: var(--ui-input-font-size);
+  color: var(--ui-base-content);
+  outline: none;
+  transition-property: border-color, box-shadow, background-color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+.mh-input::placeholder {
+  color: var(--ui-base-content-subtle);
+}
+.mh-input:hover,
+.mh-input.is-hover {
+  border-color: var(--ui-input-line-hover);
+}
+.mh-input:focus,
+.mh-input.is-focus {
+  border-color: var(--ui-input-line-hover);
+  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+}
+/* 校验态：走 `aria-invalid`（本仓协议），静态档 `.is-error` 供规格冻结与读图 */
+.mh-input[aria-invalid='true'],
+.mh-input.is-error {
+  border-color: var(--ui-error);
+}
+.mh-input.is-error:focus,
+.mh-input.is-error.is-focus {
+  box-shadow: 0 0 0 2px var(--ui-error-weak);
+}
+/* 警告态（尚未阻断提交，但需要用户注意） */
+.mh-input.is-warning {
+  border-color: var(--ui-warning);
+}
+.mh-input.is-warning:focus,
+.mh-input.is-warning.is-focus {
+  box-shadow: 0 0 0 2px var(--ui-warning-weak);
+}
+.mh-input:disabled,
+.mh-input.is-disabled {
+  background: var(--ui-base-200); /* Ne10 */
+  border-color: var(--ui-base-300); /* Ne05 */
+  color: var(--ui-base-content-subtle); /* Te07 */
+  cursor: not-allowed;
+}
+
+/* ===== 尺寸档 ===== */
+.mh-input--sm {
+  height: var(--ui-input-height-sm);
+  padding: 0 var(--ui-input-padding-x-sm);
+  font-size: var(--ui-input-font-size-sm);
+}
+.mh-input--lg {
+  height: var(--ui-input-height-lg);
+  padding: 0 var(--ui-input-padding-x-lg);
+  font-size: var(--ui-input-font-size-lg);
+}
+
+/* ===== 触发器形态（`as="button"`：控件是 `<button>`，框与状态仍归表壳） =====
+ *
+ * 复用面（框 / 内距 / 附加位 / 三态）**不需要为按钮重写一行**：那些规则要么挂在 `.mh-input` 上
+ * （本身与元素类型无关），要么挂在表壳上（`:has(> .mh-input…)` 对 button 同样命中）。
+ * 这里只补**作者源没覆盖、会被 `<button>` 的原生 UA 样式漏进来的四项**（实测 Chrome 的 html.css：
+ * `button { align-items: flex-start; text-align: center; appearance: auto; font: 400 13.3333px Arial }`）：
+ *
+ * - `align-items: center` —— 控件是 flex 行，UA 的 `flex-start` 会把值 / 标签顶到上沿；
+ * - `text-align: inherit` —— UA 的 `center` 会**继承**给值文本；
+ * - `font-weight` / `line-height: inherit` —— UA 的 `font` 简写会把这两项从继承链上摘下来，
+ *   而作者源只写了 `font-family` 与 `font-size`（对比：`<input>` 的 UA 不设这两项，故输入框形态天然一致）；
+ * - `appearance: none` —— 防仍画原生按钮皮肤的引擎（Safari 一类）。
+ *
+ * 禁写：本块不碰框 / 色 / 尺寸 / 内距 —— 那些归 `.mh-input` 与表壳，重复声明就是又开一份会漂的规格。 */
+.mh-input--trigger {
+  appearance: none;
+  align-items: center;
+  font-weight: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  /* 命中被下面的覆盖层重定向到本控件后，整箱（含内距与附加位）都取这一条光标；
+     禁用态由 `.mh-input:disabled { cursor: not-allowed }`（0-2-0）压过（本条约 0-1-0）。 */
+  cursor: pointer;
+}
+
+/* ===== 触发器形态 · 整箱热区（命中测试重定向，纯 CSS） =====
+ *
+ * 目的：让**整件**（值 / 标签 + 右侧图标 + 左右内距）都等同于点那个原生触发按钮。
+ * 触发器形态的附加位（如右侧箭头）是控件的**兄弟**而不是子孙，点它们本来永远到不了按钮
+ * （实测：只有按钮本体那一格能开面板）。
+ *
+ * 做法：给控件挂一张**透明的绝对定位覆盖层**。伪元素**不产生独立事件目标** —— 命中它即命中
+ * 它的宿主元素，而 `inset: 0` 的包含块是最近的定位祖先，也就是**表壳**（`.mh-input__wrap`
+ * 自带 `position: relative`，见「壳」一节）。于是整个箱子的像素点都归控件：
+ * `popovertarget` 的原生激活、`:active`、mousedown 聚焦一律照旧，**不需要任何 JS 代理**
+ * （JS 代理会丢掉 `:active` 与按下聚焦的原生时序）。
+ *
+ * 层叠：覆盖层是定位元素 → 盖住静态的兄弟（`.mh-input__suffix` 里的箭头等）→ 正是所需；
+ * **清除位必须自己升到覆盖层之上**（它是唯一不该被热区截走的兄弟），故 `.mh-input__clear` 带
+ * `position: relative`，并在 spec 里有断言锁住 —— 漏了点清除会变成开面板。
+ * 消费方若在 `prefix` / `suffix` 里放**可点元素**，同样要自行 `position: relative`。
+ *
+ * 必须写成「表壳 > 控件」：裸写 `.mh-input--trigger::after` 时，无壳场景的包含块会落到页面级
+ * 定位祖先上 —— 那块透明层会铺满一大片并吞掉别人的点击。 */
+.mh-input__wrap > .mh-input--trigger::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+/* ===== 无边框档（表格内编辑 / 行内编辑：没有框也没有底，靠悬停给反馈） ===== */
+.mh-input--borderless {
+  border-color: transparent;
+  background: transparent;
+  border-radius: 0;
+}
+.mh-input--borderless:hover,
+.mh-input--borderless.is-hover {
+  border-color: transparent;
+  background: var(--ui-base-200);
+}
+.mh-input--borderless:focus,
+.mh-input--borderless.is-focus {
+  border-color: var(--ui-input-line-hover);
+  background: var(--ui-base-100);
+  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+}
+
+/* ===== 展示态（下划线，只读值回显） ===== */
+.mh-input--display {
+  display: inline-flex;
+  align-items: center;
+  height: var(--ui-input-height);
+  padding: 0;
+  border: none;
+  border-bottom: 1px solid var(--ui-base-300);
+  border-radius: 0;
+  background: transparent;
+  font-size: var(--ui-input-font-size);
+  color: var(--ui-base-content);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ===== 多行（右下计数同容器） ===== */
+.mh-input--textarea {
+  min-height: var(--ui-input-textarea-min-height);
+  height: auto;
+  padding: var(--ui-space-2) var(--ui-input-padding-x);
+  line-height: var(--ui-line-body);
+  resize: vertical;
+}
+.mh-input--textarea.mh-input--sm {
+  min-height: calc(var(--ui-input-textarea-min-height) - 4px);
+}
+.mh-input--textarea.mh-input--lg {
+  min-height: calc(var(--ui-input-textarea-min-height) + 8px);
+}
+/* 计数在位时给多行留出底部空间，避免遮住最后一行 */
+.mh-input__wrap:has(> .mh-input__counter) > .mh-input--textarea {
+  padding-bottom: calc(var(--ui-space-2) + var(--ui-input-counter-size) + 2px);
+}
+
+/* ===== 壳（附加位的排布容器，**整件的框主**） =====
+ *
+ * 框画在壳上、不画在控件上：壳是一个 flex 行，前缀 / 清除 / 眼睛 / 后缀都在**控件之外**，
+ * 框挂在控件上时附加位就落在框外 —— 带眼睛的密码框实测：壳 220px、带框的控件只到 196px，
+ * 眼睛图标飘在框外。壳定高 + 控件 `height: 100%`，整件仍是可点区域。
+ * **裸 `.mh-input`（不带壳）仍由控件自己画框**（Select 的搜索行就靠它），见上一节。
+ */
+.mh-input__wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-input-affix-gap);
+  width: 100%;
+  height: var(--ui-input-height);
+  padding: 0 var(--ui-input-padding-x);
+  border: 1px solid var(--ui-input-line);
+  border-radius: var(--ui-input-radius);
+  background: var(--ui-base-100);
+  transition-property: border-color, box-shadow, background-color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+.mh-input__wrap:has(> .mh-input--sm) {
+  height: var(--ui-input-height-sm);
+}
+.mh-input__wrap:has(> .mh-input--lg) {
+  height: var(--ui-input-height-lg);
+}
+/* 多行：高归内容（`resize` 要能改高），框仍归壳 */
+.mh-input__wrap:has(> .mh-input--textarea) {
+  height: auto;
+  padding: var(--ui-space-2) var(--ui-input-padding-x);
+}
+/* 壳内控件占满剩余宽度，且允许被压缩（min-width:0）；附加位增减时输入区自动伸缩 */
+.mh-input__wrap > .mh-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  /* 框 / 圆角 / 底色 / 环一并退掉：整件只留壳那一道（与组内同一套口径） */
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+}
+/* 高度只给单行；多行的 `min-height` 与 `resize` 归控件自己 */
+.mh-input__wrap > .mh-input:not(.mh-input--textarea) {
+  height: 100%;
+}
+.mh-input__wrap > .mh-input--textarea {
+  width: 100%;
+  display: block;
+}
+.mh-input__wrap > .mh-input:focus,
+.mh-input__wrap > .mh-input.is-focus {
+  box-shadow: none;
+}
+/* 悬停：反馈画在壳上（壳铺满整件，附加位区域也一起响应） */
+.mh-input__wrap:hover {
+  border-color: var(--ui-input-line-hover);
+}
+/* 聚焦：环画在壳上 —— 壳是框主，环自然跟着整件走 */
+.mh-input__wrap:focus-within,
+.mh-input__wrap:has(> .mh-input.is-focus) {
+  border-color: var(--ui-input-line-hover);
+  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+}
+/* 校验态：色同上提到壳（error 走 `aria-invalid` 协议，另给静态档 `.is-error`） */
+.mh-input__wrap:has(> .mh-input[aria-invalid='true']),
+.mh-input__wrap:has(> .mh-input.is-error) {
+  border-color: var(--ui-error);
+}
+.mh-input__wrap:has(> .mh-input[aria-invalid='true']:focus),
+.mh-input__wrap:has(> .mh-input.is-error:focus),
+.mh-input__wrap:has(> .mh-input.is-error.is-focus) {
+  border-color: var(--ui-error);
+  box-shadow: 0 0 0 2px var(--ui-error-weak);
+}
+.mh-input__wrap:has(> .mh-input.is-warning) {
+  border-color: var(--ui-warning);
+}
+.mh-input__wrap:has(> .mh-input.is-warning:focus),
+.mh-input__wrap:has(> .mh-input.is-warning.is-focus) {
+  border-color: var(--ui-warning);
+  box-shadow: 0 0 0 2px var(--ui-warning-weak);
+}
+/* 禁用：底与边归壳（字色仍在控件上，见 `.mh-input:disabled`） */
+.mh-input__wrap:has(> .mh-input:disabled),
+.mh-input__wrap:has(> .mh-input.is-disabled) {
+  background: var(--ui-base-200);
+  border-color: var(--ui-base-300);
+}
+/* 无边框档（表格内编辑 / 行内编辑）：框与底全退，悬停给浅底、聚焦才显出框 */
+.mh-input__wrap:has(> .mh-input--borderless) {
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
+}
+.mh-input__wrap:has(> .mh-input--borderless):hover {
+  border-color: transparent;
+  background: var(--ui-base-200);
+}
+.mh-input__wrap:has(> .mh-input--borderless):focus-within {
+  border-color: var(--ui-input-line-hover);
+  background: var(--ui-base-100);
+  box-shadow: 0 0 0 2px var(--ui-primary-weak);
+}
+
+/* ===== 前缀 / 后缀插槽（纯装饰：图标、单位、域名；无底色、不进 Tab 序列） ===== */
+.mh-input__prefix,
+.mh-input__suffix {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  color: var(--ui-base-content-subtle);
+}
+/* 槽内图标（消费方直接放 <Icon> 时也给到统一尺寸） */
+.mh-input__prefix > svg,
+.mh-input__suffix > svg {
+  flex: none;
+  width: var(--ui-input-affix-size);
+  height: var(--ui-input-affix-size);
+}
+
+/* ===== 清除（有内容才由组件渲染；圆形 + close 字形） ===== */
+.mh-input__clear {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* `position: relative` 是**触发器形态热区**的必要条件：热区覆盖层是定位元素、会盖住静态兄弟，
+     清除位必须自己也是定位元素才能凭 DOM 顺序压在它之上 —— 否则点清除会被热区截走变成开面板。 */
+  position: relative;
+  width: var(--ui-input-icon-size);
+  height: var(--ui-input-icon-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-base-300); /* 规范 Te10 圆点底 */
+  color: var(--ui-base-100);
+  cursor: pointer;
+}
+.mh-input__clear:hover,
+.mh-input__clear:active {
+  background: var(--ui-base-400); /* 规范 Te08 */
+}
+.mh-input__clear-icon {
+  flex: none;
+}
+
+/* ===== 密码可见性切换（右端图标位；明文态转主色，状态一眼可辨） ===== */
+.mh-input__eye {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-input-affix-size);
+  height: var(--ui-input-affix-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ui-base-content-subtle);
+  cursor: pointer;
+}
+.mh-input__eye:hover {
+  color: var(--ui-primary);
+}
+/* 明文显示中：图标转主色（同一个 `eye` 字形，靠状态色表达"当前是明文"） */
+.mh-input__eye.is-on {
+  color: var(--ui-primary);
+}
+.mh-input__eye-icon {
+  flex: none;
+  width: var(--ui-input-affix-size);
+  height: var(--ui-input-affix-size);
+}
+
+/* ===== 字数计数 =====
+ * 单行：壳内的普通成员（跟在后缀之后，不遮输入区）；
+ * 多行：脱流钉在右下角（`textarea` 与它同容器，见上方的底部留白规则）。 */
+.mh-input__counter {
+  flex: none;
+  font-size: var(--ui-input-counter-size);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-subtle);
+}
+.mh-input__wrap:has(> .mh-input--textarea) > .mh-input__counter {
+  position: absolute;
+  right: var(--ui-input-padding-x);
+  bottom: var(--ui-space-1);
+}
+
+/* 附加位里下拉件的面板皮肤（与操作层并列组合：`class="mh-popup mh-input__menu"`） */
+.mh-input__menu {
+  width: 96px;
+  margin-top: var(--ui-space-1);
+  padding: var(--ui-space-1) 0;
+  border-radius: var(--ui-input-radius);
+  background: var(--ui-base-100);
+  box-shadow: var(--ui-shadow-popover); /* 锚定浮层（下拉菜单），不是居中浮层 */
+}
+.mh-input__menu-item {
+  height: 30px;
+  padding: 0 var(--ui-space-3);
+  font-size: var(--ui-input-font-size);
+  line-height: 30px;
+  color: var(--ui-base-content);
+  cursor: pointer;
+}
+.mh-input__menu-item:hover,
+.mh-input__menu-item.is-hover {
+  background: var(--ui-base-200);
+}
+
+/* ===== 输入说明（说明位 + 气泡皮肤） ===== */
+.mh-input__help {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin-left: var(--ui-space-1);
+  border: 1px solid var(--ui-base-content-muted);
+  border-radius: var(--ui-radius-full);
+  color: var(--ui-base-content-muted);
+  font-size: var(--ui-input-counter-size);
+  line-height: 1;
+  cursor: help;
+}
+/* 气泡：深底浅字（规范 #303c53 底 + 反白字），出血内距按规范 8/24 */
+.mh-input__help-tip {
+  padding: var(--ui-space-2) var(--ui-space-6);
+  border-radius: var(--ui-input-radius);
+  background: var(--ui-base-content);
+  color: var(--ui-base-100);
+  font-size: var(--ui-input-font-size);
+  line-height: var(--ui-line-body);
+  box-shadow: var(--ui-shadow-popover);
+}