@manohub/ui 0.7.0 → 0.8.0

package/dist/styles/components/{tabs.css → tabbar.css}

@@ -1,7 +1,7 @@
 /**
- * Tabs —— 页签条（下划线指示条 + 禁用 + 「更多」页签）。
+ * TabBar —— 页签条（下划线指示条 + 禁用 + 「更多」页签）。
  *
- * 出处：`@aihub/theme` 的 `playground/components/tabs.css` 与 `src/components/tabs.css`
+ * 出处：`@aihub/theme` 的 `playground/components/tabbar.css` 与 `src/components/tabbar.css`
  * （区高 26 / 项间距 30 / 字号 14 / 指示条高 3、距文字 3、两端与文字同宽 / 未选字 `#446a9f` /
  *  滑过 `#529dff` / 选中 `#4e94ff` / 禁用 Te07）。
  *
@@ -17,38 +17,39 @@
  * **三源等价**（本仓通例）：原生 `:checked +` / 组件下发 `[data-state='active']` / 静态档 `.is-selected`
  * 指向同一份声明 —— 原生态给零 JS 用法（原生 radio 互斥 + ← → 换页签），组件态给受控值。
  */
-.mh-tabs {
+.mh-tabbar {
   display: flex;
   align-items: flex-end;
-  gap: var(--ui-tabs-gap);
-  height: var(--ui-tabs-height);
+  gap: var(--ui-tabbar-gap);
+  height: var(--ui-tabbar-height);
+  flex-shrink: 0;
 }
 
-.mh-tabs__tab {
+.mh-tabbar__tab {
   position: relative;
   display: inline-flex;
   align-items: flex-end;
   height: 100%;
-  padding: 0 0 calc(var(--ui-tabs-indicator-gap) + var(--ui-tabs-indicator-height));
+  padding: 0 0 calc(var(--ui-tabbar-indicator-gap) + var(--ui-tabbar-indicator-height));
   border: none;
   background: transparent;
   font-family: inherit;
-  font-size: var(--ui-tabs-font-size);
+  font-size: var(--ui-tabbar-font-size);
   line-height: var(--ui-line-body);
-  color: var(--ui-tabs-text);
+  color: var(--ui-tabbar-text);
   cursor: pointer;
   white-space: nowrap;
 }
 /* 指示条：常驻、与文字同宽（不内缩），靠 opacity + scale 过渡出"滑动感" */
-.mh-tabs__tab::after {
+.mh-tabbar__tab::after {
   content: '';
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
-  height: var(--ui-tabs-indicator-height);
-  border-radius: var(--ui-tabs-indicator-radius);
-  background: var(--ui-tabs-indicator);
+  height: var(--ui-tabbar-indicator-height);
+  border-radius: var(--ui-tabbar-indicator-radius);
+  background: var(--ui-tabbar-indicator);
   opacity: 0;
   scale: 0.75;
   transition-property: opacity, scale;
@@ -56,49 +57,49 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.mh-tabs__tab:hover {
-  color: var(--ui-tabs-text-hover);
+.mh-tabbar__tab:hover {
+  color: var(--ui-tabbar-text-hover);
 }
-.mh-tabs__tab:active {
-  color: var(--ui-tabs-text-active);
+.mh-tabbar__tab:active {
+  color: var(--ui-tabbar-text-active);
 }
 
 /* 选中（三源等价）：字转主色 + 中粗，指示条亮起 */
-.mh-tabs__tab.is-selected,
-.mh-tabs__tab[data-state='active'],
-.mh-tabs > input:checked + .mh-tabs__tab {
-  color: var(--ui-tabs-text-active);
+.mh-tabbar__tab.is-selected,
+.mh-tabbar__tab[data-state='active'],
+.mh-tabbar > input:checked + .mh-tabbar__tab {
+  color: var(--ui-tabbar-text-active);
   font-weight: var(--ui-weight-medium);
 }
-.mh-tabs__tab.is-selected::after,
-.mh-tabs__tab[data-state='active']::after,
-.mh-tabs > input:checked + .mh-tabs__tab::after {
+.mh-tabbar__tab.is-selected::after,
+.mh-tabbar__tab[data-state='active']::after,
+.mh-tabbar > input:checked + .mh-tabbar__tab::after {
   opacity: 1;
   scale: 1;
 }
 
 /* 禁用（三源等价）：字转弱、不可点 */
-.mh-tabs__tab.is-disabled,
-.mh-tabs__tab:disabled,
-.mh-tabs > input:disabled + .mh-tabs__tab {
-  color: var(--ui-tabs-text-disabled);
+.mh-tabbar__tab.is-disabled,
+.mh-tabbar__tab:disabled,
+.mh-tabbar > input:disabled + .mh-tabbar__tab {
+  color: var(--ui-tabbar-text-disabled);
   cursor: not-allowed;
 }
-.mh-tabs__tab.is-disabled::after,
-.mh-tabs__tab:disabled::after,
-.mh-tabs > input:disabled + .mh-tabs__tab::after {
+.mh-tabbar__tab.is-disabled::after,
+.mh-tabbar__tab:disabled::after,
+.mh-tabbar > input:disabled + .mh-tabbar__tab::after {
   opacity: 0;
 }
 
 /* 「更多」页签：文字 + 转向箭头（字形来自 `@manohub/icon`，本层只排布） */
-.mh-tabs__tab--more {
+.mh-tabbar__tab--more {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-1);
 }
 
 /* 原生路径的隐身开关：可聚焦但不可见（焦点环画在可见的项上） */
-.mh-tabs > input {
+.mh-tabbar > input {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -113,40 +114,40 @@
 }
 
 /* 键盘焦点环（两条路径各一处，不重叠） */
-.mh-tabs__tab:focus-visible,
-.mh-tabs > input:focus-visible + .mh-tabs__tab {
+.mh-tabbar__tab:focus-visible,
+.mh-tabbar > input:focus-visible + .mh-tabbar__tab {
   outline: 2px solid var(--ui-primary);
   outline-offset: -2px;
 }
 
 /* ===== 居中档：页签少、要撑满整行时用 ===== */
-.mh-tabs--centered {
+.mh-tabbar--centered {
   justify-content: center;
 }
 
 /* ===== 尺寸档（只覆盖令牌） ===== */
-.mh-tabs--sm {
-  --ui-tabs-height: var(--ui-control-height-sm);
-  --ui-tabs-font-size: var(--ui-font-caption);
-  --ui-tabs-gap: var(--ui-space-6);
+.mh-tabbar--sm {
+  --ui-tabbar-height: var(--ui-control-height-sm);
+  --ui-tabbar-font-size: var(--ui-font-caption);
+  --ui-tabbar-gap: var(--ui-space-6);
 }
-.mh-tabs--lg {
-  --ui-tabs-height: var(--ui-control-height-lg);
-  --ui-tabs-font-size: var(--ui-font-heading);
+.mh-tabbar--lg {
+  --ui-tabbar-height: var(--ui-control-height-lg);
+  --ui-tabbar-font-size: var(--ui-font-heading);
 }
 
 /* ===== 选项卡形态（type="card"） =====
  * 与内容区连成一体：页签有边框与浅底，选中项转白底 + 顶部主色条；
  * 底边刻意不画 —— 让内容区自己的上边框接上（面板的 bordered 档就是为此）。 */
-.mh-tabs--card {
+.mh-tabbar--card {
   align-items: flex-end;
   gap: var(--ui-space-1);
   height: auto;
 }
-.mh-tabs--card .mh-tabs__tab {
+.mh-tabbar--card .mh-tabbar__tab {
   align-items: center;
-  height: var(--ui-tabs-height);
-  padding: 0 var(--ui-tabs-card-padding-x);
+  height: var(--ui-tabbar-height);
+  padding: 0 var(--ui-tabbar-card-padding-x);
   border: 1px solid var(--ui-base-300);
   border-bottom: none;
   border-radius: var(--ui-radius-control) var(--ui-radius-control) 0 0;
@@ -154,28 +155,28 @@
   color: var(--ui-base-content-muted);
 }
 /* 卡片档不画指示条：选中由底色与顶边表达（两套选中语汇叠在一起会互相打架） */
-.mh-tabs--card .mh-tabs__tab::after {
+.mh-tabbar--card .mh-tabbar__tab::after {
   content: none;
 }
-.mh-tabs--card .mh-tabs__tab:hover {
+.mh-tabbar--card .mh-tabbar__tab:hover {
   color: var(--ui-primary);
 }
-.mh-tabs--card .mh-tabs__tab.is-selected,
-.mh-tabs--card .mh-tabs__tab[data-state='active'],
-.mh-tabs--card > input:checked + .mh-tabs__tab {
+.mh-tabbar--card .mh-tabbar__tab.is-selected,
+.mh-tabbar--card .mh-tabbar__tab[data-state='active'],
+.mh-tabbar--card > input:checked + .mh-tabbar__tab {
   background: var(--ui-base-100);
   color: var(--ui-primary);
   box-shadow: inset 0 2px 0 var(--ui-primary);
 }
-.mh-tabs--card .mh-tabs__tab.is-disabled {
+.mh-tabbar--card .mh-tabbar__tab.is-disabled {
   background: var(--ui-base-200);
-  color: var(--ui-tabs-text-disabled);
+  color: var(--ui-tabbar-text-disabled);
 }
 
 /* ===== 关闭位 =====
  * 页签自己是 `<button>`，所以关闭位用 `<span role="button">`（按钮里嵌按钮是非法 HTML）；
  * 线上档的文字是「贴底」的，故关闭位要自己把底部内距补回来才与文字同一水平线。 */
-.mh-tabs__close {
+.mh-tabbar__close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -183,7 +184,7 @@
   flex: none;
   width: 16px;
   height: 16px;
-  margin-bottom: calc(var(--ui-tabs-indicator-gap) + var(--ui-tabs-indicator-height));
+  margin-bottom: calc(var(--ui-tabbar-indicator-gap) + var(--ui-tabbar-indicator-height));
   margin-left: var(--ui-space-1);
   border-radius: var(--ui-radius-full);
   color: inherit;
@@ -191,26 +192,26 @@
   opacity: 0.5;
   transition: opacity 0.15s ease, background-color 0.15s ease;
 }
-.mh-tabs--card .mh-tabs__close {
+.mh-tabbar--card .mh-tabbar__close {
   margin-bottom: 0;
 }
-.mh-tabs__close > svg {
+.mh-tabbar__close > svg {
   width: 12px;
   height: 12px;
 }
-.mh-tabs__close:hover {
+.mh-tabbar__close:hover {
   opacity: 1;
   background: rgb(0 0 0 / 0.08);
 }
 
 /* ===== 新增位 ===== */
-.mh-tabs__add {
+.mh-tabbar__add {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
-  width: var(--ui-tabs-height);
-  height: var(--ui-tabs-height);
+  width: var(--ui-tabbar-height);
+  height: var(--ui-tabbar-height);
   padding: 0;
   border: none;
   border-radius: var(--ui-radius-control);
@@ -219,16 +220,16 @@
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
 }
-.mh-tabs__add > svg {
+.mh-tabbar__add > svg {
   width: var(--ui-font-icon); /* 常规图标档 */
   height: var(--ui-font-icon);
 }
 /* 「更多」的折叠箭头：改前无声明、掉到 `<svg>` 默认 16 —— 与新增位同取常规图标档 */
-.mh-tabs__tab--more > svg {
+.mh-tabbar__tab--more > svg {
   width: var(--ui-font-icon);
   height: var(--ui-font-icon);
 }
-.mh-tabs__add:hover {
+.mh-tabbar__add:hover {
   background: var(--ui-base-200);
   color: var(--ui-primary);
 }

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

@@ -0,0 +1,30 @@
+/**
+ * tabs —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `tabbar.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌 */
+  --ui-tabbar-height: var(--ui-control-height-md); /* 标准控件高 32 */
+  --ui-tabbar-gap: 30px; /* 项间距（规范实测） */
+  --ui-tabbar-font-size: var(--ui-font-body);
+  --ui-tabbar-text: var(--ui-base-content); /* 规范未选档 #446a9f（偏蓝的正文色），本仓取正文色 */
+  --ui-tabbar-text-hover: var(--ui-primary-hover); /* 规范 #529dff */
+  --ui-tabbar-text-active: var(--ui-primary); /* 规范 #4e94ff */
+  --ui-tabbar-text-disabled: var(--ui-base-content-subtle); /* 规范 Te07 */
+  --ui-tabbar-indicator: var(--ui-primary);
+  --ui-tabbar-indicator-gap: 3px; /* 指示条与文字的留白 */
+  --ui-tabbar-indicator-height: 3px;
+  --ui-tabbar-indicator-radius: var(--ui-radius-full);
+  --ui-tabbar-card-padding-x: var(--ui-space-4);
+}

package/dist/styles/components/table.css

@@ -89,6 +89,29 @@
   min-width: 620px;
 }
 
+/* ===== 固定布局档（`layout="fixed"`）=====
+ * 列宽由 `<colgroup>` 下发（与档位无关），本档只把布局算法换成 `fixed`：
+ * 列宽从此**受声明约束、不再被内容撑破** ⇒ 长文本不会把表格撑得比容器还宽，
+ * 于是「百分比 / 数字权重」可以「吃满容器 + 严格按比例」。
+ *
+ * 代价（调用方要知道）：长文本列必须显式 `ellipsis: true`，否则会**换行**（行高变高，见下条）。 */
+.mh-table--fixed {
+  table-layout: fixed;
+}
+/* 换行兜底：fixed 已保证「不撑破容器」，这条只防**无空格长串**（如 500 字符的 token）
+   溢出单元格、视觉上压到相邻列。`anywhere` 而不是 `break-word`：后者不参与最小内容宽计算。 */
+.mh-table--fixed tbody td {
+  overflow-wrap: anywhere;
+}
+/* 前导列（勾选 / 展开）在 auto 下靠内容把 40px 的「建议宽」撑出去；fixed 下是硬宽，
+   而 `thead th` / `tbody td` 的标准左右内距各 16px ⇒ 可用内容只有 40 − 32 = 8px，
+   装不下 16px 的勾选框（实测该列溢出 19px，还会被上面的 `overflow: hidden` 裁掉）。
+   故本档把前导列的内距清零，靠既有的 `text-align: center` 居中。 */
+.mh-table--fixed .mh-table__col-check,
+.mh-table--fixed .mh-table__col-expand {
+  padding: 0;
+}
+
 /* ===== 表头 =====
  * `border: 0` **不是冗余**：本件只画「表外框 + 表头分割线 + 每行底线」三条，其余边必须显式清零。
  * 特异性和平局只发生在**同一个属性**上 —— 本件只声明 `border-bottom` 时，宿主给单元格下的整圈边框
@@ -110,6 +133,13 @@
 .mh-table thead th.is-hover {
   background: var(--ui-table-head-bg-hover);
 }
+/* 固定档下表头也要裁切：列宽已被 colgroup 钉死，长表头文字会**溢出到相邻列**
+   （实测溢出 97px），必须靠这两条收住。`white-space: nowrap` 上面已有。
+   ⚠️ 只在本档加 —— auto 档下表头参与列宽计算，加裁切会改动老页面的列宽分配。 */
+.mh-table--fixed thead th {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /* 多级表头的组头：下边线不加（组头跨列，加线会切断视觉分组） */
 .mh-table thead th.mh-table__th-group {
   border-bottom: 1px solid var(--ui-table-head-divider);
@@ -192,6 +222,20 @@
 .mh-table__col-actions {
   text-align: right;
 }
+
+/* ⚠️ **表头要把对齐重声明一遍**：上面这几条与 `.mh-table__cell-center` / `.mh-table__cell-amount`
+ * 都只有 **0-1-0**，而 `.mh-table thead th { text-align: left }` 是 **0-1-1** ⇒ 表头被强拉成左对齐、
+ * 与表体不齐：勾选框应居中却贴左（实测表头左留白 0 / 右留白 26，与表体错位 13px）、
+ * 右对齐列的标题应靠右却被拉到左边。
+ * 只用补 `text-align` —— `thead th` 没声明过其它会被这些类覆盖的属性（宽度/内距不冲突）。
+ * 写法沿用 `th.mh-table__th-group`（组头居中）那条既有先例。 */
+.mh-table thead th.mh-table__col-check,
+.mh-table thead th.mh-table__cell-center {
+  text-align: center;
+}
+.mh-table thead th.mh-table__col-actions {
+  text-align: right;
+}
 /* `--sticky-col`：首列钉住（必须自带底，见文件头第 4 条） */
 .mh-table--sticky-col thead th:first-child,
 .mh-table--sticky-col tbody td:first-child {
@@ -227,12 +271,17 @@
 .mh-table__cell-link:hover {
   text-decoration: underline;
 }
+/* 长文本省略（列定义里 `ellipsis: true` 时下发）。
+ * 基础三件套与档位无关；`max-width` **只在 auto 档兜底**：
+ * fixed 档的列宽已由 `<colgroup>` 钉死，再来一条 150px 的 max-width 会把宽列又压回 150（自相矛盾）。 */
 .mh-table__cell-ellipsis {
-  max-width: var(--ui-table-ellipsis);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.mh-table:not(.mh-table--fixed) .mh-table__cell-ellipsis {
+  max-width: var(--ui-table-ellipsis);
+}
 .mh-table__cell-icon {
   display: inline-flex;
   align-items: center;

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

@@ -29,6 +29,9 @@
   --ui-table-link: var(--ui-primary);
   --ui-table-padding-x: var(--ui-space-4); /* 单元格左右内距 16 */
   --ui-table-col-check: 40px;
+  /* 长文本列的兜底上限 —— **只在 `layout="auto"` 下生效**（`.mh-table:not(.mh-table--fixed)`
+     作用域内）。`layout="fixed"` 下列宽由 `<colgroup>` 钉死，本令牌不参与，
+     否则「宽列」会被它压回 150px 而自相矛盾。要按列给宽请用 `TableColumn.width`。 */
   --ui-table-ellipsis: 150px;
   --ui-table-drag-line: var(--ui-primary);
   --ui-table-drag-line-width: 3px;

package/dist/styles/index.css

@@ -86,7 +86,7 @@
 /* 数据与反馈 */
 @import './components/table.tokens.css';
 @import './components/pagination.tokens.css';
-@import './components/tabs.tokens.css';
+@import './components/tabbar.tokens.css';
 @import './components/steps.tokens.css';
 @import './components/toast.tokens.css';
 
@@ -97,7 +97,7 @@
 /* 操作层（零 JS 原语，自身不带面；面由下面的皮肤族并列组合提供） */
 @import './operations/collapse.css';
 @import './operations/popup.css';
-@import './operations/tabset.css';
+@import './operations/tabs.css';
 
 /* 容器与分区 */
 @import './components/page.css'; /* 页面级骨架（唯一；区域级是 Panel） */
@@ -145,7 +145,7 @@
 /* 数据与反馈（表格 / 分页条 / 页签条 / 步骤条 / 消息提示） */
 @import './components/table.css';
 @import './components/pagination.css';
-@import './components/tabs.css';
+@import './components/tabbar.css';
 @import './components/steps.css';
 @import './components/toast.css';
 

package/dist/styles/operations/tabs.css

@@ -0,0 +1,73 @@
+/**
+ * 操作层 · 面板切换骨架（把「一组互斥选项 + 按顺序排列的面板」接起来；只给骨架、不给面）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/tabset.css`（本件当时叫 `Tabset`，0.7.1 起改名 `Tabs`）。
+ * 映射：`--mh-*` → `--ui-*`；类名加 `.mh-` 前缀。
+ *
+ * 本层只做三件事 ——
+ *   ① 操作根（轨道 → 面板组 的呼吸位）；
+ *   ② 面板组与面板的**弹性链**（供抽屉 / 区域容器里的「填满」用法）；
+ *   ③ 面板的**收起态**（`hidden`）。
+ *
+ * **显隐只有一条路径：组件路径。** `Tabs` 按受控值给非选中面板下发 `hidden`，
+ * 与选择控件形态无关（页签条 / 胶囊 / 分段按钮 / 单选卡片都一样）。本层因此：
+ *   · 收起态写在 `.mh-tabs-panel[hidden]` 上（UA 的 `[hidden]` 是**元素级**规则，
+ *     作者源里任何自带 `display` 的类都能压过它，故这里显式落下一次）；
+ *   · **显形态一条规则都不写** —— 面板显形就是它自己的 `display`（块 / 弹性 / 网格归消费方与皮肤）。
+ *
+ * ⚠️ 历史缺陷一（0.7.0 及以前）：当时只有「零 JS 档位表」、没有上面那条收起规则 ⇒ 面板被基线按住，
+ *    而档位表在 `TabBar` 下恒不命中 ⇒ 三块面板全不显示（`apps/mcp` 配置抽屉实测踩到）。
+ * ⚠️ 历史缺陷二（0.7.1 一度这么修、已改回）：组件路径的显形**不能**写成
+ *    `.mh-tabs-panel:not([hidden]) { display: block }` —— 它把面板的 `display` 钉死成 `block`，
+ *    连带顶掉消费方/皮肤给面板的布局（面板里是弹性列时整条高度链当场断掉）。
+ * ⚠️ 已退役（2026-09-24 拍板删除）：**零 JS 路径（原生 radio ↔ 档位表）整段移除**。原写法
+ *    `.mh-tabs:has(input:nth-of-type(n):checked) .mh-tabs-panels > :nth-child(n)` 逐档一条写不出通式，
+ *    且同时受三条硬限制：① 上限 8 档；② 开关必须与面板**同序**，且按「同一父级里第 n 个 input」计数；
+ *    ③ 面板必须是 `.mh-tabs-panels` 的**直接子级**。局限远大于它省下的那点 JS —— 取消。
+ *    （`TabBar` / `Capsule` 各自面向**静态页**的原生 `:checked` 选中态与本文件无关，仍然有效。）
+ *
+ * **与皮肤零互指**：本层不认任何皮肤类名（退役后也不再认识 `input`）。
+ *
+ * 结构契约（轨道项与面板组顺序**一一对应**；面板壳由 `Tabs` 出，消费方不必手写）：
+ *   <div class="mh-tabs">
+ *     <div class="[皮肤：轨道 / 选择控件]">…</div>
+ *     <div class="mh-tabs-panels">
+ *       <section class="mh-tabs-panel [皮肤类]" hidden>…</section>
+ *     </div>
+ *   </div>
+ *
+ * 禁写（与折叠 / 浮层同款）：底 / 边 / 圆角 / 内距 / 宽高 / 字号 / 阴影 —— 写了就顶掉皮肤族属性面。
+ * 面板的面与几何由皮肤族给（卡片一类）；本层只写「收起态」「弹性链」与根上的呼吸位。
+ */
+
+/* ===== 一、操作根：选择控件在上、面板在下 ===== */
+.mh-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-4); /* 控件 → 面板的呼吸位 12px */
+}
+
+/* ===== 二、弹性链：面板组 → 面板 =====
+   只声明「吃满面板组的剩余高度」，**不动面板的 `display`**。
+   用途：抽屉 / 面板级容器里要「页签条固定 + 面板填满 + 面板内部自己滚」时，消费方在自己加到
+   根上的类里写 `height: 100%` 即启用 —— 本层不设任何绝对高度，高度归属始终在消费方容器手里。
+   根高 auto（桌面普通用法）时这些声明不产生高度变化（无剩余空间可分），与块级布局等价。 */
+.mh-tabs-panels {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.mh-tabs-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* ===== 三、收起态：本层唯一一条显隐规则 =====
+   非选中面板一律带 `hidden`（由 `Tabs` 下发，与控件形态无关）。显式落一次「收起 = 不显示」——
+   不依赖 UA 那条 `[hidden]`（它是元素级规则，消费方/皮肤里任何自带 `display` 的类都能压过它）。
+   **不写显形规则**：面板显形就是它自己的 `display`（见文件头「历史缺陷二」）。 */
+.mh-tabs-panel[hidden] {
+  display: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "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.7.0"
+    "@manohub/icon": "^0.8.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",

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

@@ -1,109 +0,0 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-export interface TabsetOption {
-    /** 项文字 */
-    label: string;
-    /** 项值（受控值就是它） */
-    value: string | number;
-    /** 禁用项：不可选（原生 radio 路径下方向键会跳过） */
-    disabled?: boolean;
-}
-export interface TabsetProps {
-    /** 轨道项（顺序即「第 n 项 ↔ 第 n 块面板」的档位表） */
-    options: TabsetOption[];
-    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
-    value?: string | number;
-    /** 非受控初始选中值，缺省第一项 */
-    defaultValue?: string | number;
-    /** 选中变化回调（受控与非受控都会调） */
-    onChange?: (value: string | number) => void;
-}
-/**
- * 面板切换（**操作层骨架 + 组件路径显隐**）。
- *
- * ## 它是什么
- * 把「一组互斥选项」与「按顺序排列的面板」接起来：第 n 个选项对应第 n 块面板。
- * 骨架（根、面板组、档位表）在操作层 `styles/operations/tabset.css`，本件负责：
- * 受控值、面板包装与显隐、把 `select` 交给选择控件。
- *
- * ## 两条显隐路径（结论一致，不冲突）
- * - **原生路径**（推荐）：选择控件用**原生 radio**（如 `Capsule`）→ 操作层的档位表
- *   `:has(input:nth-of-type(n):checked)` 直接显隐，**零 JS**；
- * - **组件路径**：控件不是 radio 时，本件按受控值给非选中面板下发 `hidden`。
- * 两条路径都由同一个值驱动，故同时成立不会互相打架。
- *
- * ## 与皮肤零互指
- * 本件不认识任何选择控件的类名 —— 轨道由 `selector` 插槽提供（作用域参数 `{ value, options, select }`），
- * 放胶囊、分段按钮、单选卡片都行；面板内容由默认插槽按 `options` 顺序给出。
- *
- * @example 胶囊 + 面板（`Capsule` 提供原生 radio，故走零 JS 路径）
- * <Tabset :options="tabs" v-model:value="current">
- *   {{
- *     selector: ({ value, select }) => <Capsule :options="tabs" modelValue={value} onChange={select} />,
- *     default: () => [
- *       <Card key="all">全部：15 条</Card>,
- *       <Card key="doing">进行中：3 条</Card>,
- *     ],
- *   }}
- * </Tabset>
- */
-export declare const Tabset: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    options: {
-        type: PropType<TabsetOption[]>;
-        required: true;
-    };
-    value: {
-        type: PropType<string | number | undefined>;
-        default: undefined;
-    };
-    defaultValue: {
-        type: PropType<string | number | undefined>;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string | number) => void>;
-        default: undefined;
-    };
-    /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
-    lazy: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:value': (value: string | number) => true;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    options: {
-        type: PropType<TabsetOption[]>;
-        required: true;
-    };
-    value: {
-        type: PropType<string | number | undefined>;
-        default: undefined;
-    };
-    defaultValue: {
-        type: PropType<string | number | undefined>;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string | number) => void>;
-        default: undefined;
-    };
-    /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
-    lazy: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    "onUpdate:value"?: ((value: string | number) => any) | undefined;
-}>, {
-    value: string | number | undefined;
-    onChange: (value: string | number) => void;
-    defaultValue: string | number | undefined;
-    lazy: boolean;
-}, SlotsType<{
-    default?: () => VNodeChild;
-    selector?: (context: {
-        value: string | number | undefined;
-        options: TabsetOption[];
-        select: (value: string | number) => void;
-    }) => VNodeChild;
-}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;