@manohub/ui 0.10.5 → 1.0.0

package/dist/styles/components/input.css

@@ -1,538 +1,538 @@
-/**
- * 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 行时（如 `Select` 的 `.mh-select`）拦住 UA 的
- *   `flex-start`（它会把值 / 标签顶到上沿）。本件缺省**不给 `display`**，控件是 inline-block，此时
- *   垂直居中来自浏览器对 `<button>` 内容的默认居中 —— 这条声明在那个形态下用不到，留着是与复合件同一份规格；
- * - `text-align: inherit` —— UA 的 `center` 会**继承**给值文本；
- * - `font-weight` / `line-height: inherit` —— UA 的 `font` 简写会把这两项从继承链上摘下来，
- *   而作者源只写了 `font-family` 与 `font-size`（对比：`<input>` 的 UA 不设这两项，故输入框形态天然一致）；
- * - `appearance: none` —— 防仍画原生按钮皮肤的引擎（Safari 一类）。
- *
- * 外加一条**单行契约**（`white-space: nowrap` + `overflow: hidden` + `text-overflow: ellipsis`）：
- * 触发器与输入框同为**单行**控件，值再长也不换行。少了它，长值会在定高框里折成两行 ——
- * 第二行溢出到框的下沿之外、右端图标也被挤走（实测：消费方把值当**裸文本**子节点渲染时必现，
- * 如 `<Input as="button">{{ 部门名 }}</Input>` 放进窄表格单元格）。截断口径与
- * `.mh-input__placeholder` / `.mh-select__value` 同源，这里补的是**控件本身**那一层
- * —— 那两处只管各自的子节点，落在控件上的裸文本没有它们兜。
- *
- * 禁写：本块不碰框 / 色 / 尺寸 / 内距 —— 那些归 `.mh-input` 与表壳，重复声明就是又开一份会漂的规格。 */
-.mh-input--trigger {
-  appearance: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  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;
-}
-
-/* ===== 触发器形态 · 占位文案 =====
- *
- * `<button>` **没有 `::placeholder` 伪元素**，故触发器形态的占位由组件渲染一个 span 承载
- * （判据见 `components/input/index.tsx` 的 `showPlaceholder`）。这里只给它的排版与色。
- *
- * `display: block` 是**必要的**（实测四种父级 × 长/短文案）：span 默认是 inline，而 `overflow`
- * 对行内盒不生效 ⇒ 长占位会直接撑破控件；`block` 之后它撑满控件的内容宽、超长走省略号，
- * 且在**父级是 flex**（如 `Select` 的触发器）时会被 blockify，行为与 inline 一致
- * —— 两种父级下都对，故不要求消费方给控件开 flex。`min-width: 0` 供 flex 父级下允许收缩。
- * `flex: 1` 是给**父级是 flex** 的复合件用的（`Select` 的值区`.mh-select__value` 就是这个配方）：
- * 实测同样的「占位 + 右侧箭头」在 flex 父级下，不给 `flex: 1` 时占位只有**内容宽**（48px）、
- * 给了才撑满到箭头前（207 / 可用 220）—— 少了它会让选择器的占位区窄成一截。
- * 父级不是 flex 时 `flex` 属性被忽略，故对单件用法无副作用。
- * 色与原生 `.mh-input::placeholder` 同档（弱文本），选择器值区的 `--placeholder` 也是这一档。 */
-.mh-input__placeholder {
-  display: block;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--ui-base-content-subtle);
-}
-
-/* ===== 触发器形态 · 整箱热区（命中测试重定向，纯 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);
-}
-/* **只读值档**（`readonly` + `bordered={false}`）：几何照旧（与可编辑输入框同高、同内距），
-   但把「可编辑」的线索全退掉 —— 只读值不该在滑过时亮起浅底、被点中时亮出边框与主色环。
-   仍然可聚焦、可选中复制（只读 ≠ 禁用：要的就是能选、能复制）。
-   它是摘要 / 详情里值回显的推荐写法，也是 `Form.Item` 的 `readonly` 行配的那一档。
-   特异性 0-3-0，压过上面两条（0-2-0）；带壳时框主是壳，同款规则见文件下半部分。 */
-.mh-input--borderless[readonly]:hover,
-.mh-input--borderless[readonly].is-hover,
-.mh-input--borderless[readonly]:focus,
-.mh-input--borderless[readonly].is-focus {
-  border-color: transparent;
-  background: transparent;
-  box-shadow: none;
-}
-
-/* ===== 展示态（下划线，只读值回显） ===== */
-.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);
-}
-/* **只读值档**同款（带壳时框主是壳）：退掉悬停底与聚焦的边框 / 底色 / 主色环。
-   特异性 0-4-0，压过上面两条（0-3-0），并且写在它们之后。 */
-.mh-input__wrap:has(> .mh-input--borderless[readonly]):hover,
-.mh-input__wrap:has(> .mh-input--borderless[readonly]).is-hover {
-  border-color: transparent;
-  background: transparent;
-}
-.mh-input__wrap:has(> .mh-input--borderless[readonly]):focus-within {
-  border-color: transparent;
-  background: transparent;
-  box-shadow: none;
-}
-
-/* ===== 前缀 / 后缀插槽（纯装饰：图标、单位、域名；无底色、不进 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 字形）=====
- *
- * **默认隐形，滑过表壳或聚焦时才显形**：常显会在每一个有内容的输入框右端永远挂一颗深色实心圆点 ——
- * 密集场景（表格内编辑、筛选条、多选触发器、带前后缀的搜索行）里那一列圆点比字段本身还抢眼，
- * 也与「清除是低频动作」的层级不符。
- *
- * 为什么用 `opacity` 而不是 `display` / `visibility`：
- * ① 它仍在流中**占位** —— 显隐时输入区宽度不变；换 `display` 会让文字在鼠标移入的一瞬间横跳；
- * ② 它仍是可命中的**定位元素** —— 触发器形态的整箱热区靠 `position: relative` + DOM 顺序压在
- *    覆盖层之上（见上一节），换 `visibility: hidden` 会连命中一起关掉，那一块反被热区接管。
- *
- * `:focus-within` 是**触屏与键盘**的兜底：没有 hover 的设备上，点进输入框同样要能点到清除
- * （键盘另有一条 `Delete` 路径，见组件）。禁用档不显形：那时本来就不该清，圆点落在灰底上还会
- * 被误读成可用。 */
-.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;
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: 0.15s;
-  transition-timing-function: ease;
-}
-/* 显形：滑过**整件**（内距与附加位区域都算）或任一控件拿到焦点 */
-.mh-input__wrap:hover > .mh-input__clear,
-.mh-input__wrap:focus-within > .mh-input__clear {
-  opacity: 1;
-}
-/* 禁用：整件不可交互，清除位一并收掉（`:has()` 的特异性高于上面那条，故同时压过 hover） */
-.mh-input__wrap:has(> .mh-input:disabled) > .mh-input__clear,
-.mh-input__wrap:has(> .mh-input.is-disabled) > .mh-input__clear {
-  opacity: 0;
-}
-.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);
-}
-/* 明文显示中：图标转主色（同一个 `preview` 字形，靠状态色表达"当前是明文"） */
-.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;
-  /* 右让位一个「拖拽角」：多行是 `resize: vertical`（`.mh-input--textarea`），浏览器于是在框的
-     右下角画一枚原生拖拽柄（Chromium 约 16px 见方），与计数器**同角重叠**——实测截图里
-     `0/1024` 与手柄叠在一起。故计数器在同一行内右移整一档令牌（`--ui-space-4` = 16px）：
-     `bottom` 不动，底部留白口径（见上方 padding-bottom 规则）不受影响。
-     不同平台的手柄宽略有差异（Firefox 略窄），此处取整档、不按浏览器分支。 */
-  right: calc(var(--ui-input-padding-x) + var(--ui-space-4));
-  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);
-}
+/**
+ * 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 行时（如 `Select` 的 `.mh-select`）拦住 UA 的
+ *   `flex-start`（它会把值 / 标签顶到上沿）。本件缺省**不给 `display`**，控件是 inline-block，此时
+ *   垂直居中来自浏览器对 `<button>` 内容的默认居中 —— 这条声明在那个形态下用不到，留着是与复合件同一份规格；
+ * - `text-align: inherit` —— UA 的 `center` 会**继承**给值文本；
+ * - `font-weight` / `line-height: inherit` —— UA 的 `font` 简写会把这两项从继承链上摘下来，
+ *   而作者源只写了 `font-family` 与 `font-size`（对比：`<input>` 的 UA 不设这两项，故输入框形态天然一致）；
+ * - `appearance: none` —— 防仍画原生按钮皮肤的引擎（Safari 一类）。
+ *
+ * 外加一条**单行契约**（`white-space: nowrap` + `overflow: hidden` + `text-overflow: ellipsis`）：
+ * 触发器与输入框同为**单行**控件，值再长也不换行。少了它，长值会在定高框里折成两行 ——
+ * 第二行溢出到框的下沿之外、右端图标也被挤走（实测：消费方把值当**裸文本**子节点渲染时必现，
+ * 如 `<Input as="button">{{ 部门名 }}</Input>` 放进窄表格单元格）。截断口径与
+ * `.mh-input__placeholder` / `.mh-select__value` 同源，这里补的是**控件本身**那一层
+ * —— 那两处只管各自的子节点，落在控件上的裸文本没有它们兜。
+ *
+ * 禁写：本块不碰框 / 色 / 尺寸 / 内距 —— 那些归 `.mh-input` 与表壳，重复声明就是又开一份会漂的规格。 */
+.mh-input--trigger {
+  appearance: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+}
+
+/* ===== 触发器形态 · 占位文案 =====
+ *
+ * `<button>` **没有 `::placeholder` 伪元素**，故触发器形态的占位由组件渲染一个 span 承载
+ * （判据见 `components/input/index.tsx` 的 `showPlaceholder`）。这里只给它的排版与色。
+ *
+ * `display: block` 是**必要的**（实测四种父级 × 长/短文案）：span 默认是 inline，而 `overflow`
+ * 对行内盒不生效 ⇒ 长占位会直接撑破控件；`block` 之后它撑满控件的内容宽、超长走省略号，
+ * 且在**父级是 flex**（如 `Select` 的触发器）时会被 blockify，行为与 inline 一致
+ * —— 两种父级下都对，故不要求消费方给控件开 flex。`min-width: 0` 供 flex 父级下允许收缩。
+ * `flex: 1` 是给**父级是 flex** 的复合件用的（`Select` 的值区`.mh-select__value` 就是这个配方）：
+ * 实测同样的「占位 + 右侧箭头」在 flex 父级下，不给 `flex: 1` 时占位只有**内容宽**（48px）、
+ * 给了才撑满到箭头前（207 / 可用 220）—— 少了它会让选择器的占位区窄成一截。
+ * 父级不是 flex 时 `flex` 属性被忽略，故对单件用法无副作用。
+ * 色与原生 `.mh-input::placeholder` 同档（弱文本），选择器值区的 `--placeholder` 也是这一档。 */
+.mh-input__placeholder {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ui-base-content-subtle);
+}
+
+/* ===== 触发器形态 · 整箱热区（命中测试重定向，纯 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);
+}
+/* **只读值档**（`readonly` + `bordered={false}`）：几何照旧（与可编辑输入框同高、同内距），
+   但把「可编辑」的线索全退掉 —— 只读值不该在滑过时亮起浅底、被点中时亮出边框与主色环。
+   仍然可聚焦、可选中复制（只读 ≠ 禁用：要的就是能选、能复制）。
+   它是摘要 / 详情里值回显的推荐写法，也是 `Form.Item` 的 `readonly` 行配的那一档。
+   特异性 0-3-0，压过上面两条（0-2-0）；带壳时框主是壳，同款规则见文件下半部分。 */
+.mh-input--borderless[readonly]:hover,
+.mh-input--borderless[readonly].is-hover,
+.mh-input--borderless[readonly]:focus,
+.mh-input--borderless[readonly].is-focus {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ===== 展示态（下划线，只读值回显） ===== */
+.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);
+}
+/* **只读值档**同款（带壳时框主是壳）：退掉悬停底与聚焦的边框 / 底色 / 主色环。
+   特异性 0-4-0，压过上面两条（0-3-0），并且写在它们之后。 */
+.mh-input__wrap:has(> .mh-input--borderless[readonly]):hover,
+.mh-input__wrap:has(> .mh-input--borderless[readonly]).is-hover {
+  border-color: transparent;
+  background: transparent;
+}
+.mh-input__wrap:has(> .mh-input--borderless[readonly]):focus-within {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ===== 前缀 / 后缀插槽（纯装饰：图标、单位、域名；无底色、不进 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 字形）=====
+ *
+ * **默认隐形，滑过表壳或聚焦时才显形**：常显会在每一个有内容的输入框右端永远挂一颗深色实心圆点 ——
+ * 密集场景（表格内编辑、筛选条、多选触发器、带前后缀的搜索行）里那一列圆点比字段本身还抢眼，
+ * 也与「清除是低频动作」的层级不符。
+ *
+ * 为什么用 `opacity` 而不是 `display` / `visibility`：
+ * ① 它仍在流中**占位** —— 显隐时输入区宽度不变；换 `display` 会让文字在鼠标移入的一瞬间横跳；
+ * ② 它仍是可命中的**定位元素** —— 触发器形态的整箱热区靠 `position: relative` + DOM 顺序压在
+ *    覆盖层之上（见上一节），换 `visibility: hidden` 会连命中一起关掉，那一块反被热区接管。
+ *
+ * `:focus-within` 是**触屏与键盘**的兜底：没有 hover 的设备上，点进输入框同样要能点到清除
+ * （键盘另有一条 `Delete` 路径，见组件）。禁用档不显形：那时本来就不该清，圆点落在灰底上还会
+ * 被误读成可用。 */
+.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;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}
+/* 显形：滑过**整件**（内距与附加位区域都算）或任一控件拿到焦点 */
+.mh-input__wrap:hover > .mh-input__clear,
+.mh-input__wrap:focus-within > .mh-input__clear {
+  opacity: 1;
+}
+/* 禁用：整件不可交互，清除位一并收掉（`:has()` 的特异性高于上面那条，故同时压过 hover） */
+.mh-input__wrap:has(> .mh-input:disabled) > .mh-input__clear,
+.mh-input__wrap:has(> .mh-input.is-disabled) > .mh-input__clear {
+  opacity: 0;
+}
+.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);
+}
+/* 明文显示中：图标转主色（同一个 `preview` 字形，靠状态色表达"当前是明文"） */
+.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;
+  /* 右让位一个「拖拽角」：多行是 `resize: vertical`（`.mh-input--textarea`），浏览器于是在框的
+     右下角画一枚原生拖拽柄（Chromium 约 16px 见方），与计数器**同角重叠**——实测截图里
+     `0/1024` 与手柄叠在一起。故计数器在同一行内右移整一档令牌（`--ui-space-4` = 16px）：
+     `bottom` 不动，底部留白口径（见上方 padding-bottom 规则）不受影响。
+     不同平台的手柄宽略有差异（Firefox 略窄），此处取整档、不按浏览器分支。 */
+  right: calc(var(--ui-input-padding-x) + var(--ui-space-4));
+  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);
+}