@manohub/ui 0.10.4 → 0.10.5

package/dist/components/tabs/index.d.ts

@@ -21,11 +21,13 @@ export interface TabsProps {
     /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
     lazy?: boolean;
     /**
-     * **缺省皮肤的尺寸档**（`sm` / `md` / `lg`，即 24 / 32 / 40）—— 只透传给缺省皮肤 `TabBar`。
+     * 尺寸档（`sm` / `md` / `lg`，缺省 `md`）—— 管**两件事**：
      *
-     * 传了 `selector` 插槽时本档**整块失效**：那时尺寸归你放进来的那个控件自己管
-     * （`Capsule` / 分段按钮各有自己的 `size`），本件也不给它加任何类 —— 有意不给
-     * 「一处声明、两处打架」的机会。
+     * 1. **骨架的呼吸位**：`控件 → 面板` 的 `gap`（`4 / 8 / 12px`）。这一条**与皮肤无关** ——
+     *    传了 `selector` 自定义控件时同样生效（间距归骨架，控件长什么样归皮肤）；
+     * 2. **缺省皮肤的尺寸档**：原样透传给 `TabBar`（高度 `24 / 32 / 40` + 同级字号）。
+     *    换了皮肤则这一条不生效：控件的尺寸归你放进来的那个控件自己管
+     *    （`Capsule` / 分段按钮各有自己的 `size`），本件不代它加类。
      */
     size?: ControlSize;
 }
@@ -119,8 +121,9 @@ export declare const TabPanel: import("vue").DefineComponent<import("vue").Extra
  * - 传插槽则整块替换：放 `Capsule`（胶囊）、按钮族的分段形态、单选卡片都行，
  *   作用域参数 `{ value, options, select }` 把值、项（已含从 `TabPanel` 提取的那些）与选中回调
  *   递出来。本件不认识任何选择控件的类名 —— **控制器与骨架零互指**，换皮肤不必动本件。
- * - 尺寸档 `size` **只在缺省这条路上生效**：它原样透传给 `TabBar`（高度 24 / 32 / 40 + 同级字号，
- *   只覆盖 `--ui-tabbar-*` 令牌）；换了皮肤，尺寸归你的控件自己管，本件不代它加类。
+ * - 尺寸档 `size` 管两件事：① 骨架的呼吸位（`.mh-tabs` 的 `gap`，4 / 8 / 12px，**与皮肤无关**）；
+ *   ② 缺省皮肤 `TabBar` 的高与字号（24 / 32 / 40）。换了皮肤则第 ② 条不生效 ——
+ *   控件尺寸归你的控件自己管，本件不代它加类。
  *
  * ## 显隐只有一条路径
  * 本件按受控值给非选中面板下发 `hidden`，**与控件形态无关**（是不是原生 radio 都一样）。

package/dist/components/tabs/index.js

@@ -112,7 +112,12 @@ const Tabs = /* @__PURE__ */ defineComponent({
         }, [node]);
       });
       return createVNode("div", {
-        "class": ["mh-tabs", attrs.class].filter(Boolean).join(" "),
+        "class": [
+          "mh-tabs",
+          /* `md` 缺省不发类（与 `TabBar` 同口径）：骨架的呼吸位 `gap` 靠这个档位类改写 */
+          props.size === "md" ? "" : `mh-tabs--${props.size}`,
+          attrs.class
+        ].filter(Boolean).join(" "),
         "style": attrs.style
       }, [slots.selector ? slots.selector({
         value: current,

package/dist/styles/components/form.css

@@ -169,7 +169,13 @@
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;
-  line-height: 1;
+  /* 行盒归零（`font-size: 0` + `line-height: 0`）：`Tooltip` 的宿主里还夹着一层 **inline 的锚点
+     span**（`.mh-popup-anchor`），它会给内含的 `inline-flex` 触发器生成行盒 —— 行盒按基线对齐，
+     于是宿主比图标高出一个 descender 间隙（实测 16px 图标 ⇒ 宿主 17px）。宿主再把这 17px 在
+     label 行里居中，图标中线就比文字中线高 0.5px。归零后宿主高度 === 图标高度，中线才重合。
+     图标 svg 不受影响（它自带尺寸，不读字号）。 */
+  font-size: 0;
+  line-height: 0;
 }
 
 /* 触发器（问号按钮）：`reset` 不代消费方归零控件外观，故边 / 底 / 内距三项自备。
@@ -182,29 +188,18 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--ui-base-content-muted);
+  /* 静止：**浅灰**（`subtle`，同计数器档）；滑过 / 键盘聚焦转**正文色（黑）** ——
+     从 muted(#666) 起手的那版与 hover 后的 content(#1a1a1a) 只差一档，视觉上几乎看不出交互。 */
+  color: var(--ui-base-content-subtle);
   cursor: help;
 }
 
-.mh-form-item__tip-btn:hover,
-.mh-form-item__tip-btn:focus-visible {
+.mh-form-item__tip-btn:hover {
   color: var(--ui-base-content);
 }
 
-/* 键盘可达：气泡显形靠操作层的宿主 `:focus-within` 档，这里只管**焦点可见**（主色环）。 */
 
-.mh-form-item__tip-btn:focus-visible {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: 2px;
-}
 
-/* 图标尺寸：常规图标一律取全局图标档。`<Icon>` 的宽高是**属性**，面层能覆盖；
-   不写就会静默落到组件默认的 16（口径见 `contract-icon-direction.spec.ts`）。 */
-
-.mh-form-item__tip-btn > svg {
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-}
 
 /* label 对齐：基类默认右对齐（贴控件列，`labelAlign` 缺省档）；
    `labelAlign="left"` 时挂这个修饰类改成左对齐 —— 只给「非默认值」挂类，避免两段声明争胜出顺序。

package/dist/styles/components/input.css

@@ -479,7 +479,12 @@
 }
 .mh-input__wrap:has(> .mh-input--textarea) > .mh-input__counter {
   position: absolute;
-  right: var(--ui-input-padding-x);
+  /* 右让位一个「拖拽角」：多行是 `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);
 }
 

package/dist/styles/operations/tabs.css

@@ -40,11 +40,20 @@
  * 面板的面与几何由皮肤族给（卡片一类）；本层只写「收起态」「弹性链」与根上的呼吸位。
  */
 
-/* ===== 一、操作根：选择控件在上、面板在下 ===== */
+/* ===== 一、操作根：选择控件在上、面板在下 =====
+   呼吸位（`gap`）随 `size` 档走：档位由组件在根上出 `mh-tabs--sm` / `mh-tabs--lg`
+   （`md` 缺省不发类，与 `TabBar` 同口径）。skin 只决定控件长什么样，控件与面板之间的
+   间距归骨架 —— 故本档**与皮肤无关**，传了 `selector` 自定义控件时同样生效。 */
 .mh-tabs {
   display: flex;
   flex-direction: column;
-  gap: var(--ui-space-4); /* 控件 → 面板的呼吸位 12px */
+  gap: var(--ui-space-2); /* md（缺省）：8px */
+}
+.mh-tabs--sm {
+  gap: var(--ui-space-1); /* sm：4px */
+}
+.mh-tabs--lg {
+  gap: var(--ui-space-3); /* lg：12px */
 }
 
 /* ===== 二、弹性链：面板组 → 面板 =====

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/ui",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "private": false,
   "type": "module",
   "description": "AIHub 自绘组件层：不依赖 farris 的手写 Vue TSX 组件 + 自带令牌层（Farris 规范视觉 · daisyUI 式语义令牌 · shadcn 式 API 词汇）。",
@@ -46,7 +46,7 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@manohub/icon": "^0.10.4"
+    "@manohub/icon": "^0.10.5"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",