@manohub/ui 0.10.5 → 1.0.0

package/dist/styles/operations/popup.css

@@ -1,193 +1,193 @@
-/**
- * 操作层 · 浮层（零 JS，**只给操作、不给任何面**）。
- *
- * 出处：`@aihub/theme` 的 `playground/components/popup.css`。
- * 映射：`--mh-*` → `--ui-*`；类名加 `.mh-` 前缀；**箭头不再取 utils 的 CSS 字形**，改由 `@manohub/icon`
- * 的 `<Icon name="chevron-down" class="mh-popup-caret">` 渲染（本层只负责「展开时转向」）。
- *
- * 面与几何一律来自皮肤族类，面板根上并列两个类即组合：
- *   气泡确认 = 气泡皮肤、下拉层 = 选择面板皮肤、提示 = 提示皮肤、对话框 = 卡片 + 对话框皮肤。
- *
- * 结构（原生 popover，零 JS 即具备轻 dismiss / Esc / top layer 渲染）：
- *   <button popovertarget="p1">触发器</button>
- *   <div id="p1" popover class="mh-popup [皮肤类]" data-side="bottom">…</div>
- *
- * 本层只做五件事：
- *
- * 一、状态根 `.mh-popup` —— 三条状态源等价（与折叠的 `[open]` / `data-state` 同构）：
- *   · 原生 popover：`popovertarget` 开合，`:popover-open` 即展开（本层无需为它写状态规则）；
- *   · 原生 `<dialog>`：`[open]`（`showModal()` 那条路同样接得住）；
- *   · 组件下发：`data-state="open|closed"`（与本仓其它件的 `data-state` 协议同款）。
- *   收起态本该由 UA 的 `display: none` 承担（组件路径则由组件卸载）—— 但皮肤自带 display 的会以作者源
- *   压过 UA（提示皮肤实测踩坑），故收起态仍要按高特异性重新钉一次（见「收起态派生」）。
- *
- * 二、触发器钩子 —— `[popovertarget]`（原生，属性即钩子）/ `.mh-popup-trigger`（组件路径），
- *   只做「可点 + 可键盘 + 焦点环」。**触发器不做 UA 归零**（与折叠清 `<summary>` 三角标相反）：
- *   它本身就是带皮肤的控件，那样清会顶掉按钮皮肤。
- *
- * 三、UA 装饰归零 + 收起态派生 —— 原生 `[popover]` 与 `<dialog>` 会发下 `border` / `padding` /
- *   `background`，不归零就在面板外面多出一圈黑框；收起态则如上条所述要重新钉住 display。
- *   两条都只落在浮层本体，不碰任何皮肤属性面。
- *
- * 四、零 JS 锚定 —— CSS Anchor Positioning：`position-area` 定位档（`data-side` / `data-align`）
- *   + `position-try-fallbacks` 自动翻面；锚点走 `popovertarget` 的**隐式锚**，一个 `anchor-name`
- *   都不用写（隐式锚够不着时才用 `.mh-popup-anchor` / `.mh-popup--anchored` 那一档）。
- *   无 `data-side` 时不落定位档 —— 模态与无锚点浮层退回**件自己声明的**视口居中
- *   （`inset: 0` + `margin: auto`）。⚠️ 这里**不能指望 UA**：UA 确有 `dialog { margin: auto }`，
- *   但作者源无条件压过 UA 源，而宿主的 `* { margin: 0 }` reset 会把它归零 ⇒ 弹窗贴上贴左。
- *   故居中必须由**件**写实（见 `components/dialog.css` 的 `.mh-dialog { margin: auto }`，
- *   2026-09-30 在带 Tailwind 的宿主里实测踩到）。
- *
- * 五、展开态派生 —— 箭头转向：原生路径由宿主 `:has` 反推，组件路径由触发器自带的
- *   `aria-expanded` 反推。
- *
- * 六、hover 档 `.mh-popup--hover` —— 给「非交互提示」的纯 CSS 显形（移入 / 聚焦即出）。
- *   必须存在的原因：popover 只能由点击或 JS 开合，CSS 开合不了；hover 触发的原生属性尚未落地。
- *   代价见该节注释（不进 top layer：会被裁切、要自带 z-index、无 light dismiss）。
- *
- * **硬约束：本层规则一律走 `:where()`（特异性 0）** —— 这是「不顶掉皮肤」的机械保证：
- * 作者源本来就高于 UA 源，故 `:where()` 压得住 UA 装饰；而对皮肤类（0-1-0 起）永远让位
- * （反例即折叠里 `.mh-collapse > button.mh-collapse-header`：那里清的是 UA 按钮装饰，故须高特异性
- * 且只落在组件形态的触发器上；本层结论是「能不动触发器就不动」）。
- * 例外只有三类，都是「必须压过皮肤」的 display 与「只声明身份」的属性：
- *   ① 四条裸类规则（`.mh-popup` / `.mh-popup-anchor` / `.mh-popup-host` / `.mh-popup--anchored`）
- *      —— 声明状态根与锚点身份，皮肤族不碰这些属性面；
- *   ② 收起态规则走 `:is()`（0-3-0）—— 皮肤自带 display 会压过 UA 的收起 display:none；
- *   ③ hover 档两条（`.mh-popup.mh-popup--hover` 0-2-0 / `.mh-popup-host:hover …` 0-3-0）—— 同上。
- *   三条 display 规则都只碰 display（hover 档另加定位与层级），不动任何皮肤属性面。
- *
- * 禁写清单（与折叠同款）：底 / 边 / 圆角 / 内距 / 宽高 / 字号 / 阴影 / 遮罩色 / 动画
- *   —— 遮罩色归对话框皮肤（真实弹出层遮罩由其 `::backdrop` 画），进出场动画归显示层。
- *   层级：popover 档由 top layer 接管（零 z-index），hover 档不进 top layer 故自带一层 z-index。
- */
-/* ===== 一、状态根 ===== */
-.mh-popup {
-  min-width: 0; /* 状态根标记；同时作本族独立基类 */
-}
-
-/* ===== 二、触发器钩子（只做「可点 + 可键盘」） ===== */
-:where(.mh-popup-trigger, [popovertarget]) {
-  cursor: pointer;
-  user-select: none;
-}
-
-/* 可见焦点环：原生按钮有 UA 环，但带皮肤类的控件与普通元素都要有 —— 与折叠取同一句 */
-:where(.mh-popup-trigger:focus-visible, [popovertarget]:focus-visible) {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: -2px;
-}
-
-/* ===== 三、UA 装饰归零（只落浮层本体，不碰任何皮肤属性面） ===== */
-:where(.mh-popup[popover], dialog.mh-popup) {
-  border: 0;
-  padding: 0;
-  background: transparent;
-}
-
-/* 收起态派生（本层唯一一条非 `:where()` 的状态规则，理由在特异性）：
-   原生 popover / dialog 的收起靠 UA 的 `display: none`，而皮肤自带 display 的会以作者源压过 UA
-   —— 提示皮肤的 inline-block 就让收起的面板在流内显形（实测踩坑）。
-   故按「收起的浮层就是 display: none」重新钉一次：`:is()` 取最具体分支，特异性 0-3-0 足以压过任何
-   皮肤类，且只碰 display 一项；组件路径（data-state）由组件卸载，不经此条。 */
-:is(.mh-popup[popover]:not(:popover-open), dialog.mh-popup:not([open])) {
-  display: none;
-}
-
-/* ===== 四、零 JS 锚定（CSS Anchor Positioning） ===== */
-/* 定位档：声明「面板落在锚点的哪一侧」+ 与锚点的呼吸位（4px）。
-   皮肤或消费方要改间距/换侧，用自己的 margin / position-area 覆盖即可 —— 本层恒 0 特异性。
-   锚点 = `popovertarget` 的调用者（隐式锚，`position-anchor: auto` 是初始值，无需声明）。 */
-:where(.mh-popup[data-side='bottom']) {
-  position-area: bottom;
-  margin-block-start: var(--ui-space-1);
-}
-:where(.mh-popup[data-side='top']) {
-  position-area: top;
-  margin-block-end: var(--ui-space-1);
-}
-:where(.mh-popup[data-side='left']) {
-  position-area: left;
-  margin-inline-end: var(--ui-space-1);
-}
-:where(.mh-popup[data-side='right']) {
-  position-area: right;
-  margin-inline-start: var(--ui-space-1);
-}
-
-/* 溢出自动翻面：贴视口边时按块轴 / 行内轴翻到对侧，零 JS 免裁切 */
-:where(.mh-popup[data-side]) {
-  position-try-fallbacks: flip-block, flip-inline;
-}
-
-/* 两侧对齐档（与 reka 同名的 data-align）：top / bottom 沿行内轴、left / right 沿块轴；
-   不写 data-align（或写 center）= 面板中线对齐锚点（position-area 的默认行为，实测中线偏差 0）。
-   **钉边必须用 anchor() 而不是 justify-self / align-self**（实测踩坑）：
-   单关键词的 position-area（如 `bottom`）在另一条轴上是铺满**包含块**的（此处即视口）——
-   于是 `justify-self: start` 会把面板贴到视口左边（实测偏了 409px），而不是锚点左边。 */
-:where(.mh-popup[data-side='top'][data-align='start'],
-  .mh-popup[data-side='bottom'][data-align='start']) {
-  left: anchor(left);
-  right: auto;
-}
-:where(.mh-popup[data-side='top'][data-align='end'],
-  .mh-popup[data-side='bottom'][data-align='end']) {
-  left: auto;
-  right: anchor(right);
-}
-:where(.mh-popup[data-side='left'][data-align='start'],
-  .mh-popup[data-side='right'][data-align='start']) {
-  top: anchor(top);
-  bottom: auto;
-}
-:where(.mh-popup[data-side='left'][data-align='end'],
-  .mh-popup[data-side='right'][data-align='end']) {
-  top: auto;
-  bottom: anchor(bottom);
-}
-
-/* 显式锚档（隐式锚够不着时用：浮层由 JS `showPopover()` 打开、触发器不是 `popovertarget` 元素等）：
-   锚点元素挂 `.mh-popup-anchor` 声明锚点名、浮层加 `.mh-popup--anchored` 接入；
-   同页多实例用 `.mh-popup-host`（两者的共同祖先）把同名锚收敛到子树（`anchor-scope`），
-   否则固定锚点名在整页只有最后一个声明者生效。 */
-.mh-popup-anchor {
-  anchor-name: --mh-popup-anchor;
-}
-.mh-popup-host {
-  anchor-scope: --mh-popup-anchor;
-}
-.mh-popup--anchored {
-  position-anchor: --mh-popup-anchor;
-}
-
-/* ===== 五、展开态派生（箭头转向：字形由 @manohub/icon 给，本层只转向） =====
- * 前三条是**后代**关系（箭头在触发器子树里）；后两条是**兄弟**关系 ——
- * 组合件把箭头挂到触发器的同级附加位槽里（本仓的「触发器形态」：`Select` 的箭头在表壳的
- * `.mh-input__suffix` 里，与 `[popovertarget]` 那个控件是兄弟），后代组合器一条都命不中（实测），
- * 故补 `~ *` 一档：同宿主内、触发器**之后**的任一兄弟（及其子树）里的箭头跟着转向。 */
-:where(.mh-popup-host:has(.mh-popup:popover-open)) [popovertarget] .mh-popup-caret,
-:where(.mh-popup-host:has(dialog.mh-popup[open])) [popovertarget] .mh-popup-caret,
-:where(.mh-popup-trigger[aria-expanded='true']) .mh-popup-caret,
-:where(.mh-popup-host:has(.mh-popup:popover-open)) [popovertarget] ~ * .mh-popup-caret,
-:where(.mh-popup-host:has(dialog.mh-popup[open])) [popovertarget] ~ * .mh-popup-caret {
-  transform: rotate(180deg);
-}
-
-/* ===== 六、hover 档（非交互提示：移入 / 聚焦即显形，移开即消失） =====
- * 为何需要单独一档：原生 popover 的开合只有两个入口 —— JS `showPopover()` 与 `popovertarget`（点击），
- * **CSS 开合不了 popover**；原生给 hover 留的口子（interest invoker）尚未落地。
- * 故 hover 档退回普通定位元素，**不进 top layer**，代价三条，用前先认：
- *   ① 会被祖先 overflow 裁切（popover 档不会）；② 层级要自带一层 z-index；③ 无 light dismiss / Esc
- *   （移开即消失，本就不需要）。换来的是提示语义正确：不吃点击、不抢焦点。
- * 锚点必须显式声明（hover 没有隐式锚）：触发器挂 `.mh-popup-anchor`、面板挂 `.mh-popup--anchored`、
- * 两者共同祖先挂 `.mh-popup-host`（宿主 `:hover` / `:focus-within` 即显形）。`:hover` 按 DOM 祖先传播，
- * 故指针从触发器移到面板上不会闪断。延迟与淡入属显示层 / 组件层，本层不管。
- * 特异性说明：`display` 必须压过皮肤（提示皮肤自带 inline-block），故这两条不走 `:where()`。 */
-.mh-popup.mh-popup--hover {
-  position: fixed;
-  z-index: 1;
-  display: none;
-}
-.mh-popup-host:hover .mh-popup--hover,
-.mh-popup-host:focus-within .mh-popup--hover {
-  display: block;
-}
+/**
+ * 操作层 · 浮层（零 JS，**只给操作、不给任何面**）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/popup.css`。
+ * 映射：`--mh-*` → `--ui-*`；类名加 `.mh-` 前缀；**箭头不再取 utils 的 CSS 字形**，改由 `@manohub/icon`
+ * 的 `<Icon name="chevron-down" class="mh-popup-caret">` 渲染（本层只负责「展开时转向」）。
+ *
+ * 面与几何一律来自皮肤族类，面板根上并列两个类即组合：
+ *   气泡确认 = 气泡皮肤、下拉层 = 选择面板皮肤、提示 = 提示皮肤、对话框 = 卡片 + 对话框皮肤。
+ *
+ * 结构（原生 popover，零 JS 即具备轻 dismiss / Esc / top layer 渲染）：
+ *   <button popovertarget="p1">触发器</button>
+ *   <div id="p1" popover class="mh-popup [皮肤类]" data-side="bottom">…</div>
+ *
+ * 本层只做五件事：
+ *
+ * 一、状态根 `.mh-popup` —— 三条状态源等价（与折叠的 `[open]` / `data-state` 同构）：
+ *   · 原生 popover：`popovertarget` 开合，`:popover-open` 即展开（本层无需为它写状态规则）；
+ *   · 原生 `<dialog>`：`[open]`（`showModal()` 那条路同样接得住）；
+ *   · 组件下发：`data-state="open|closed"`（与本仓其它件的 `data-state` 协议同款）。
+ *   收起态本该由 UA 的 `display: none` 承担（组件路径则由组件卸载）—— 但皮肤自带 display 的会以作者源
+ *   压过 UA（提示皮肤实测踩坑），故收起态仍要按高特异性重新钉一次（见「收起态派生」）。
+ *
+ * 二、触发器钩子 —— `[popovertarget]`（原生，属性即钩子）/ `.mh-popup-trigger`（组件路径），
+ *   只做「可点 + 可键盘 + 焦点环」。**触发器不做 UA 归零**（与折叠清 `<summary>` 三角标相反）：
+ *   它本身就是带皮肤的控件，那样清会顶掉按钮皮肤。
+ *
+ * 三、UA 装饰归零 + 收起态派生 —— 原生 `[popover]` 与 `<dialog>` 会发下 `border` / `padding` /
+ *   `background`，不归零就在面板外面多出一圈黑框；收起态则如上条所述要重新钉住 display。
+ *   两条都只落在浮层本体，不碰任何皮肤属性面。
+ *
+ * 四、零 JS 锚定 —— CSS Anchor Positioning：`position-area` 定位档（`data-side` / `data-align`）
+ *   + `position-try-fallbacks` 自动翻面；锚点走 `popovertarget` 的**隐式锚**，一个 `anchor-name`
+ *   都不用写（隐式锚够不着时才用 `.mh-popup-anchor` / `.mh-popup--anchored` 那一档）。
+ *   无 `data-side` 时不落定位档 —— 模态与无锚点浮层退回**件自己声明的**视口居中
+ *   （`inset: 0` + `margin: auto`）。⚠️ 这里**不能指望 UA**：UA 确有 `dialog { margin: auto }`，
+ *   但作者源无条件压过 UA 源，而宿主的 `* { margin: 0 }` reset 会把它归零 ⇒ 弹窗贴上贴左。
+ *   故居中必须由**件**写实（见 `components/dialog.css` 的 `.mh-dialog { margin: auto }`，
+ *   2026-09-30 在带 Tailwind 的宿主里实测踩到）。
+ *
+ * 五、展开态派生 —— 箭头转向：原生路径由宿主 `:has` 反推，组件路径由触发器自带的
+ *   `aria-expanded` 反推。
+ *
+ * 六、hover 档 `.mh-popup--hover` —— 给「非交互提示」的纯 CSS 显形（移入 / 聚焦即出）。
+ *   必须存在的原因：popover 只能由点击或 JS 开合，CSS 开合不了；hover 触发的原生属性尚未落地。
+ *   代价见该节注释（不进 top layer：会被裁切、要自带 z-index、无 light dismiss）。
+ *
+ * **硬约束：本层规则一律走 `:where()`（特异性 0）** —— 这是「不顶掉皮肤」的机械保证：
+ * 作者源本来就高于 UA 源，故 `:where()` 压得住 UA 装饰；而对皮肤类（0-1-0 起）永远让位
+ * （反例即折叠里 `.mh-collapse > button.mh-collapse-header`：那里清的是 UA 按钮装饰，故须高特异性
+ * 且只落在组件形态的触发器上；本层结论是「能不动触发器就不动」）。
+ * 例外只有三类，都是「必须压过皮肤」的 display 与「只声明身份」的属性：
+ *   ① 四条裸类规则（`.mh-popup` / `.mh-popup-anchor` / `.mh-popup-host` / `.mh-popup--anchored`）
+ *      —— 声明状态根与锚点身份，皮肤族不碰这些属性面；
+ *   ② 收起态规则走 `:is()`（0-3-0）—— 皮肤自带 display 会压过 UA 的收起 display:none；
+ *   ③ hover 档两条（`.mh-popup.mh-popup--hover` 0-2-0 / `.mh-popup-host:hover …` 0-3-0）—— 同上。
+ *   三条 display 规则都只碰 display（hover 档另加定位与层级），不动任何皮肤属性面。
+ *
+ * 禁写清单（与折叠同款）：底 / 边 / 圆角 / 内距 / 宽高 / 字号 / 阴影 / 遮罩色 / 动画
+ *   —— 遮罩色归对话框皮肤（真实弹出层遮罩由其 `::backdrop` 画），进出场动画归显示层。
+ *   层级：popover 档由 top layer 接管（零 z-index），hover 档不进 top layer 故自带一层 z-index。
+ */
+/* ===== 一、状态根 ===== */
+.mh-popup {
+  min-width: 0; /* 状态根标记；同时作本族独立基类 */
+}
+
+/* ===== 二、触发器钩子（只做「可点 + 可键盘」） ===== */
+:where(.mh-popup-trigger, [popovertarget]) {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 可见焦点环：原生按钮有 UA 环，但带皮肤类的控件与普通元素都要有 —— 与折叠取同一句 */
+:where(.mh-popup-trigger:focus-visible, [popovertarget]:focus-visible) {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: -2px;
+}
+
+/* ===== 三、UA 装饰归零（只落浮层本体，不碰任何皮肤属性面） ===== */
+:where(.mh-popup[popover], dialog.mh-popup) {
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+/* 收起态派生（本层唯一一条非 `:where()` 的状态规则，理由在特异性）：
+   原生 popover / dialog 的收起靠 UA 的 `display: none`，而皮肤自带 display 的会以作者源压过 UA
+   —— 提示皮肤的 inline-block 就让收起的面板在流内显形（实测踩坑）。
+   故按「收起的浮层就是 display: none」重新钉一次：`:is()` 取最具体分支，特异性 0-3-0 足以压过任何
+   皮肤类，且只碰 display 一项；组件路径（data-state）由组件卸载，不经此条。 */
+:is(.mh-popup[popover]:not(:popover-open), dialog.mh-popup:not([open])) {
+  display: none;
+}
+
+/* ===== 四、零 JS 锚定（CSS Anchor Positioning） ===== */
+/* 定位档：声明「面板落在锚点的哪一侧」+ 与锚点的呼吸位（4px）。
+   皮肤或消费方要改间距/换侧，用自己的 margin / position-area 覆盖即可 —— 本层恒 0 特异性。
+   锚点 = `popovertarget` 的调用者（隐式锚，`position-anchor: auto` 是初始值，无需声明）。 */
+:where(.mh-popup[data-side='bottom']) {
+  position-area: bottom;
+  margin-block-start: var(--ui-space-1);
+}
+:where(.mh-popup[data-side='top']) {
+  position-area: top;
+  margin-block-end: var(--ui-space-1);
+}
+:where(.mh-popup[data-side='left']) {
+  position-area: left;
+  margin-inline-end: var(--ui-space-1);
+}
+:where(.mh-popup[data-side='right']) {
+  position-area: right;
+  margin-inline-start: var(--ui-space-1);
+}
+
+/* 溢出自动翻面：贴视口边时按块轴 / 行内轴翻到对侧，零 JS 免裁切 */
+:where(.mh-popup[data-side]) {
+  position-try-fallbacks: flip-block, flip-inline;
+}
+
+/* 两侧对齐档（与 reka 同名的 data-align）：top / bottom 沿行内轴、left / right 沿块轴；
+   不写 data-align（或写 center）= 面板中线对齐锚点（position-area 的默认行为，实测中线偏差 0）。
+   **钉边必须用 anchor() 而不是 justify-self / align-self**（实测踩坑）：
+   单关键词的 position-area（如 `bottom`）在另一条轴上是铺满**包含块**的（此处即视口）——
+   于是 `justify-self: start` 会把面板贴到视口左边（实测偏了 409px），而不是锚点左边。 */
+:where(.mh-popup[data-side='top'][data-align='start'],
+  .mh-popup[data-side='bottom'][data-align='start']) {
+  left: anchor(left);
+  right: auto;
+}
+:where(.mh-popup[data-side='top'][data-align='end'],
+  .mh-popup[data-side='bottom'][data-align='end']) {
+  left: auto;
+  right: anchor(right);
+}
+:where(.mh-popup[data-side='left'][data-align='start'],
+  .mh-popup[data-side='right'][data-align='start']) {
+  top: anchor(top);
+  bottom: auto;
+}
+:where(.mh-popup[data-side='left'][data-align='end'],
+  .mh-popup[data-side='right'][data-align='end']) {
+  top: auto;
+  bottom: anchor(bottom);
+}
+
+/* 显式锚档（隐式锚够不着时用：浮层由 JS `showPopover()` 打开、触发器不是 `popovertarget` 元素等）：
+   锚点元素挂 `.mh-popup-anchor` 声明锚点名、浮层加 `.mh-popup--anchored` 接入；
+   同页多实例用 `.mh-popup-host`（两者的共同祖先）把同名锚收敛到子树（`anchor-scope`），
+   否则固定锚点名在整页只有最后一个声明者生效。 */
+.mh-popup-anchor {
+  anchor-name: --mh-popup-anchor;
+}
+.mh-popup-host {
+  anchor-scope: --mh-popup-anchor;
+}
+.mh-popup--anchored {
+  position-anchor: --mh-popup-anchor;
+}
+
+/* ===== 五、展开态派生（箭头转向：字形由 @manohub/icon 给，本层只转向） =====
+ * 前三条是**后代**关系（箭头在触发器子树里）；后两条是**兄弟**关系 ——
+ * 组合件把箭头挂到触发器的同级附加位槽里（本仓的「触发器形态」：`Select` 的箭头在表壳的
+ * `.mh-input__suffix` 里，与 `[popovertarget]` 那个控件是兄弟），后代组合器一条都命不中（实测），
+ * 故补 `~ *` 一档：同宿主内、触发器**之后**的任一兄弟（及其子树）里的箭头跟着转向。 */
+:where(.mh-popup-host:has(.mh-popup:popover-open)) [popovertarget] .mh-popup-caret,
+:where(.mh-popup-host:has(dialog.mh-popup[open])) [popovertarget] .mh-popup-caret,
+:where(.mh-popup-trigger[aria-expanded='true']) .mh-popup-caret,
+:where(.mh-popup-host:has(.mh-popup:popover-open)) [popovertarget] ~ * .mh-popup-caret,
+:where(.mh-popup-host:has(dialog.mh-popup[open])) [popovertarget] ~ * .mh-popup-caret {
+  transform: rotate(180deg);
+}
+
+/* ===== 六、hover 档（非交互提示：移入 / 聚焦即显形，移开即消失） =====
+ * 为何需要单独一档：原生 popover 的开合只有两个入口 —— JS `showPopover()` 与 `popovertarget`（点击），
+ * **CSS 开合不了 popover**；原生给 hover 留的口子（interest invoker）尚未落地。
+ * 故 hover 档退回普通定位元素，**不进 top layer**，代价三条，用前先认：
+ *   ① 会被祖先 overflow 裁切（popover 档不会）；② 层级要自带一层 z-index；③ 无 light dismiss / Esc
+ *   （移开即消失，本就不需要）。换来的是提示语义正确：不吃点击、不抢焦点。
+ * 锚点必须显式声明（hover 没有隐式锚）：触发器挂 `.mh-popup-anchor`、面板挂 `.mh-popup--anchored`、
+ * 两者共同祖先挂 `.mh-popup-host`（宿主 `:hover` / `:focus-within` 即显形）。`:hover` 按 DOM 祖先传播，
+ * 故指针从触发器移到面板上不会闪断。延迟与淡入属显示层 / 组件层，本层不管。
+ * 特异性说明：`display` 必须压过皮肤（提示皮肤自带 inline-block），故这两条不走 `:where()`。 */
+.mh-popup.mh-popup--hover {
+  position: fixed;
+  z-index: 1;
+  display: none;
+}
+.mh-popup-host:hover .mh-popup--hover,
+.mh-popup-host:focus-within .mh-popup--hover {
+  display: block;
+}

package/dist/styles/operations/tabs.css

@@ -1,82 +1,82 @@
-/**
- * 操作层 · 面板切换骨架（把「一组互斥选项 + 按顺序排列的面板」接起来；只给骨架、不给面）。
- *
- * 出处：`@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>
- *
- * 禁写（与折叠 / 浮层同款）：底 / 边 / 圆角 / 内距 / 宽高 / 字号 / 阴影 —— 写了就顶掉皮肤族属性面。
- * 面板的面与几何由皮肤族给（卡片一类）；本层只写「收起态」「弹性链」与根上的呼吸位。
- */
-
-/* ===== 一、操作根：选择控件在上、面板在下 =====
-   呼吸位（`gap`）随 `size` 档走：档位由组件在根上出 `mh-tabs--sm` / `mh-tabs--lg`
-   （`md` 缺省不发类，与 `TabBar` 同口径）。skin 只决定控件长什么样，控件与面板之间的
-   间距归骨架 —— 故本档**与皮肤无关**，传了 `selector` 自定义控件时同样生效。 */
-.mh-tabs {
-  display: flex;
-  flex-direction: column;
-  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 */
-}
-
-/* ===== 二、弹性链：面板组 → 面板 =====
-   只声明「吃满面板组的剩余高度」，**不动面板的 `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;
-}
+/**
+ * 操作层 · 面板切换骨架（把「一组互斥选项 + 按顺序排列的面板」接起来；只给骨架、不给面）。
+ *
+ * 出处：`@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>
+ *
+ * 禁写（与折叠 / 浮层同款）：底 / 边 / 圆角 / 内距 / 宽高 / 字号 / 阴影 —— 写了就顶掉皮肤族属性面。
+ * 面板的面与几何由皮肤族给（卡片一类）；本层只写「收起态」「弹性链」与根上的呼吸位。
+ */
+
+/* ===== 一、操作根：选择控件在上、面板在下 =====
+   呼吸位（`gap`）随 `size` 档走：档位由组件在根上出 `mh-tabs--sm` / `mh-tabs--lg`
+   （`md` 缺省不发类，与 `TabBar` 同口径）。skin 只决定控件长什么样，控件与面板之间的
+   间距归骨架 —— 故本档**与皮肤无关**，传了 `selector` 自定义控件时同样生效。 */
+.mh-tabs {
+  display: flex;
+  flex-direction: column;
+  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 */
+}
+
+/* ===== 二、弹性链：面板组 → 面板 =====
+   只声明「吃满面板组的剩余高度」，**不动面板的 `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;
+}