@linhey/rhine-design 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # 版本记录
 
+## 0.11.1（2026-10-27）
+
+- 补齐嵌套下拉退出到父Modal焦点约束恢复之间的快速Tab保护；连续Shift+Tab不再把焦点留在背景，正常导航恢复后仍可循环。
+
+- 候选列表保持240px上限并按视口缩放约束，避免可用高度反馈；多选内部动作等click完成再收起，避免窄屏缩放中pointerdown/抬起之间位置移动丢失清空。
+
+- 修复 Combobox / RemoteMultiSelect 在祖先 CSS zoom 下的候选浮层定位与视口边界，复用既有浮层缩放处理；保留主题 Portal、搜索、多选与键盘行为。
+- RemoteMultiSelect 可再次点击或方向键+Enter取消已选项，保留真正禁用/锁定项；“完成选择”只收起候选并归焦，不提交宿主表单；支持输入框Tab进入完成、Shift+Tab返回及继续Tab到后继控件；标签×移除和清空后保持收起，输入框Backspace保留原展开态，无可移除项时隐藏清空按钮。
+- `#compact-filters` 补充弹窗内多选与真实浏览器回归；参见[浮层契约](docs/FLOATING_OVERLAYS.md)。
+- 补丁制品从 `v0.11.0` 回补上述修复，主入口仍为67项；main 后续未发布新功能不包含在0.11.1中。消费方固定版本并提交 registry lockfile。
+
+## 0.11.0（2026-10-27）
+
+本版本新增产品评审工具及以下已合并能力；npm 0.10.0 不包含这些新增 API。组件主入口仍为 67 项，默认行为保持兼容；消费方固定 0.11.0 并提交 lockfile。实际发布可用性以 registry 为准。
+
+- #40：新增 `/review`、`/review/vite` 产品评审工具，提供场景协议、目录/控件、URL 状态、合成 iframe、生命周期、独立静态构建与正式包排除检查；附 HTTP 与平台 client 两类例子，静态资源支持项目型站点的嵌套部署路径；补充连接/清理超时恢复、持久错误反馈、折叠高级设置与实际画布尺寸。已在两类真实 App 的隔离副本试用，消费迁移按产品分别验证，见[契约](docs/REVIEW_TOOL.md)。
+
+- `Tabs` / `TabItem` 新增 `description`、`status`，提供带身份摘要与只读状态的页签；契约见[Summary Tabs](docs/SUMMARY_TABS.md)，展台为 `#summary-tabs`。
+- `Toast` 新增 `placement="floating"`，通过主题根 Portal 呈现浮动通知；默认 inline 保持兼容，见[通知契约](components/COMMON_COMPONENTS.md)。
+- `SegmentedControl` 新增 `size="compact"`，支持卡片局部指标切换；见[间距规范](components/SPACING.md)。0.10.0 已有的 `fullWidth` 不受影响。
+- 相邻 `Disclosure` 共用分隔线；补充上下文帮助与主题背景/文字配对规范。
+- 修复 `Disclosure` 在生产 CSS 将 `200ms` 压缩为 `.2s` 时误用 0.2ms 动画的问题；按单位换算为毫秒，保持 200ms 开合、快速反向和减少动态行为。
+- 展台首页和页脚按当前主入口统一为 67 个组件，源码包版本改从 `package.json` 读取；修正轨道主题艺术的版本标记及文档中的旧数量、候选状态。
+
 ## 0.10.0（2026-10-26）
 
 - #31：MediaViewer 说明补齐 caption 12/18/400，EmptyState 标题采用 heading 16/24 与主题标题字重；同类复制反馈、步骤/表单组说明、错误摘要和主题预览状态补齐语义配对，保留既有密度例外。真实回归入口 `#component-typography`。

package/CONTRIBUTING.md

@@ -25,7 +25,7 @@ npm run dev
 npm run check
 ```
 
-它包含测试、类型检查、展台构建和 CSS/SVG 产物检查。视觉变化还需检查 400/520/880 宽度、200% 缩放和相关交互。纯文档修改检查链接与示例即可。
+它包含测试、类型检查、展台构建和 CSS/SVG 产物检查，并构建两个独立产品评审示例。产品评审入口、模拟生命周期与浏览器脚本见 [评审工具](docs/REVIEW_TOOL.md) 和 [验收记录](docs/REVIEW_VERIFICATION.md)。视觉变化还需检查 400/520/880 宽度、200% 缩放和相关交互。纯文档修改检查链接与示例即可。
 
 `dist/` 是展台构建结果；包导出源码。修改打包配置时，请在仓库外安装实际 tarball 验证。不要删除入口和 CSS 的 `sideEffects`；Logo 依赖 SVG `?no-inline`。本地链接消费项目时，Vite 使用 `resolve.dedupe: ['react', 'react-dom']` 避免重复 React。
 
@@ -35,6 +35,8 @@ README 面向首次接触项目的开发者，优先解释用途、安装、示
 
 组件 API 变更时，更新契约、示例以及 skill 的 `references/API_MAP.md` 或 `TASK_MAP.md`。索引指向真实源码，不复制第二份 API 定义；skill 的版本信息随包版本更新。
 
+展台包版本由 `preview/packageInfo.ts` 从 `package.json` 读取；组件数量只统计 `components/index.ts` 的公开组件，不计类型与独立主题入口。新增导出时同步该数量、README 完整清单与组件入口。发布后的源码新增能力写入 CHANGELOG 的“未发布”部分，并在相关契约标明旧包不包含；不要因为源码仍使用同一版本字段，就将新能力归入已发布版本。历史版本介绍与验收记录保留原时点。
+
 ## 提交 Pull Request
 
 说明解决的问题、变更后的行为，以及已执行的验证。涉及视觉或动效时附上截图或录屏；涉及破坏性 API 变更时提供迁移说明并更新 [CHANGELOG](CHANGELOG.md)。

package/README.md

@@ -16,29 +16,25 @@
   <a href="CHANGELOG.md">版本记录</a>
 </p>
 
-Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、管理界面和数据密集型应用。它将设计规范、66 个组件和动效示例放在一起，帮助团队建立一致、可复用的界面语言。
+Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、管理界面和数据密集型应用。它将设计规范、67 个组件和动效示例放在一起，帮助团队建立一致、可复用的界面语言。
 
 - **一致的视觉语言**：色彩、字体、文字层级、间距、几何与焦点规则。
-- **66 个可组合组件**：覆盖布局、表单、数据、导航、浮层和反馈。
+- **67 个可组合组件**：覆盖布局、表单、数据、导航、浮层和反馈。
 - **可验证的动效**：12 组播放 / 重播 / 复位演示，以及三角构架启动编排。
 - **面向开发协作**：组件契约、交互展台和 AI skill 帮助设计与实现保持一致。
 
-**0.4.0 新增能力：**主题 API、三套内置主题，以及导航、表单流程与健康时间轴组件；在线展台跟随 main，安装前请核对[版本记录](CHANGELOG.md)。新增组件及选型见[交互规范](docs/INTERACTION_PATTERNS.md)，参考项目见[GitHub 调研](docs/REFERENCE_RESEARCH.md)。
-
 基于 React 与 Radix UI，采用 [Apache-2.0](LICENSE) 许可证。
 
-**0.5.0 新增能力**：新增背景与多侧栏、复杂表单、受控数据表、媒体与监控图表，共 59 个组件。API、最小接入与版本边界见[应用组件契约](docs/APPLICATION_COMPONENTS.md)。npm 0.4.0 不含这些能力。
-
-**0.8.0 新增能力**：三主题 Three.js 艺术分别为折纸鸟、源石晶簇与草莓甜甜圈，保留原始轨道切换；新增 `NeutronStarBackdrop`、`StatusTimelineList` 、`AppShellToggle` 与 `ButtonLink`，公共组件总数为 66。包含暂停、减少动态、静态降级与资源清理。安装前核对[版本记录](CHANGELOG.md)与 registry；在线展台跟随 main。
+## 版本与源码范围
 
-0.8.0 同时提供 `ButtonLink` 与可传规则的一行 `TimelineLegend`；[紧凑摘要与凭证操作规范](docs/COMPACT_ACCOUNT_PATTERNS.md)说明无框摘要、历史详情与必要操作的组合。真实展台为 `/#compact-account`。
+- **本源码包版本：0.11.0**。主入口导出 67 个组件，统计不含类型及独立 `/theme` 入口的 ThemeProvider、hook 和元数据。发布是否可安装以 npm registry 为准。
+- **0.11.0 新增**：产品评审 `/review`、`/review/vite`，摘要页签 `Tabs description/status`、`Toast placement="floating"`、`SegmentedControl size="compact"` 及相邻 Disclosure 分隔线与生产动效修正。npm 0.10.0 不包含这些新增 API。
+- **展台随源码更新**，在线部署跟随 main；安装包的能力以精确版本和实际导出/实现为准。上述源码变更、历史版本与接入边界统一见[版本记录](CHANGELOG.md)。
 
-本轮新增 API 与交互已逐项核对 Ant Design / MUI，修复及明确保留的差异见[对标清单](docs/ANTD_MUI_AUDIT.md)。
+三套主题、轨道艺术、设置导航与主题选择等已有能力见下方组件和规范入口；应用组件的 Ant Design / MUI 对照见[对标清单](docs/ANTD_MUI_AUDIT.md)。
 
 <a id="quick-start"></a>
 
-**0.8.0 新增**：新增 [主题预览与选择](docs/THEME_PICKER.md)、[设置弹窗导航](docs/SETTINGS_DIALOG.md)及[浮层缩放修复](docs/FLOATING_OVERLAYS.md)。0.7.0 候选未发布；本版承接其全部已接受功能。
-
 ## 快速接入
 
 需要 **React 19**。当前已验证的构建环境为 **Vite**，开发建议使用 **Node 24**。
@@ -46,7 +42,7 @@ Rhine Design 是面向 React 应用的开源设计系统，适合桌面工具、
 在你的 React 项目中安装：
 
 ```sh
-npm install --save-exact @linhey/rhine-design@0.10.0
+npm install --save-exact @linhey/rhine-design@0.11.1
 ```
 
 包与版本信息见 [npm](https://www.npmjs.com/package/@linhey/rhine-design)。如需使用未发版的源码，可安装 `git+https://github.com/linhay/rhine-design.git#<commit>`；建议固定版本并提交 lockfile。
@@ -135,13 +131,14 @@ export function App() {
 | 品牌与文字 | Logo · Text |
 | 操作 | Button · ButtonLink⁴ · Icon · IconButton · Link · CopyButton |
 | 布局与背景 | Surface · Toolbar · Divider · Stack · Inline · Grid · Background² · AppShell² · AppShellToggle⁴ · OrbitBackdrop³ · NeutronStarBackdrop⁴ |
-| 表单与选择 | TextField · Fieldset¹ · ErrorSummary¹ · Textarea · Select · Checkbox · RadioGroup · Switch · SearchField · Combobox · SelectionCard · DateField² · DateRangePicker² · NumberField² · TreeSelect² · RemoteMultiSelect² |
+| 表单与选择 | TextField · Fieldset¹ · ErrorSummary¹ · Textarea · Select · Checkbox · RadioGroup · Switch · SearchField · Combobox · SelectionCard · DateField² · DateRangePicker² · NumberField² · TreeSelect² · RemoteMultiSelect² · ThemePicker⁴ · ThemePreview⁴ |
 | 导航与展开 | SideNav¹ · Breadcrumbs¹ · Steps¹ · Tabs · SegmentedControl · Disclosure |
+| 搜索与筛选组合 | ListFilterBar⁵ |
 | 数据与媒体 | Metric · KeyValue · DataTable · Pagination · StatusTimeline¹ · StatusTimelineList⁴ · TimelineLegend¹ · TrendChart² · StackedBar² · MediaCard² · MediaViewer² |
 | 浮层 | Drawer¹ · Dialog · ConfirmDialog · Popover · Menu · Tooltip |
 | 状态与反馈 | Badge · Notice · Toast · Progress · Skeleton · EmptyState |
 
-¹ 自 0.4.0 提供。² 自 0.5.0 提供。³ 自 0.6.0 提供。⁴ 自 0.8.0 提供。
+¹ 自 0.4.0 提供。² 自 0.5.0 提供。³ 自 0.6.0 提供。⁴ 自 0.8.0 提供。⁵ 自 0.9.0 提供。
 
 参数、状态和组合示例见[组件 API](components/README.md)与[常用组件契约](components/COMMON_COMPONENTS.md)。
 
@@ -208,6 +205,12 @@ skill 中提供以下参考入口：
 
 升级组件时请同步更新 skill；如果已做本地定制，先比较差异再合并。其他工具请将同一 skill 目录放入其支持的技能路径。
 
+## 产品设计稿评审工具（自 0.11.0）
+
+新增独立 `/review` 与 `/review/vite` 入口，统一产品场景目录、主题/尺寸/状态控制、URL 分享、隔离画布和静态构建。产品保留页面、HTTP/平台模拟与业务知识，无需复制通用预览壳。**npm 0.10.0 尚不包含此工具**。
+
+源码可运行 `npm run review:http`、`npm run review:platform`，或 `npm run review:build` 构建两个合成消费示例。接入、生命周期、部署与迁移见[产品评审契约](docs/REVIEW_TOOL.md)，实际覆盖与剩余边界见[验收记录](docs/REVIEW_VERIFICATION.md)。
+
 ## 参与贡献
 
 欢迎提交问题、文档改进和组件提案。遇到问题时，请在 [Issues](https://github.com/linhay/rhine-design/issues) 提供组件名、版本、预期行为及最小复现。

package/components/AdvancedForms.tsx

@@ -132,25 +132,33 @@ export interface RemoteMultiSelectProps {
 }
 export function RemoteMultiSelect({ value, onValueChange, options, readOnly = false, clearable = true, closeOnSelect = false, clearQueryOnSelect = false, name, maxVisibleTags, ...props }: RemoteMultiSelectProps) {
   const inputId = useId();
+  const [open, setOpen] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const limit = maxVisibleTags !== undefined && Number.isFinite(maxVisibleTags) ? Math.max(0, Math.floor(maxVisibleTags)) : undefined;
   const collapsible = limit !== undefined && value.length > limit;
   // Clearing or replacing the selection below the limit starts a new compact view.
   if (expanded && !collapsible) setExpanded(false);
   const shown = collapsible && !expanded ? value.slice(0, limit) : value;
-  const focusInput = () => document.getElementById(inputId)?.focus();
-  const remove = (key: string) => {
+  const focusInput = (nextOpen = false) => { document.getElementById(inputId)?.focus(); setOpen(nextOpen); };
+  const remove = (key: string, nextOpen = false) => {
     if (props.disabled || readOnly || value.find(item => item.value === key)?.disabled) return;
-    onValueChange(value.filter(item => item.value !== key)); focusInput();
+    onValueChange(value.filter(item => item.value !== key)); focusInput(nextOpen);
   };
   return <div className={`rhine-multi-select${limit !== undefined ? ' rhine-multi-select--compact' : ''}`}>
-    <Combobox {...props} id={inputId} readOnly={readOnly} selectedValues={value.map(item => item.value)} closeOnSelect={closeOnSelect} onEmptyBackspace={() => { const last = [...value].reverse().find(item => !item.disabled); if (last) remove(last.value); }} options={options.map(option => ({ ...option, disabled: option.disabled || value.some(item => item.value === option.value) }))} value={null} onValueChange={option => { const original = options.find(item => item.value === option.value); if (original && !value.some(item => item.value === original.value)) { onValueChange([...value, original]); if (clearQueryOnSelect) props.onQueryChange(''); } }} />
+    <Combobox {...props} id={inputId} open={open} onOpenChange={setOpen} readOnly={readOnly} selectedValues={value.map(item => item.value)} closeOnSelect={closeOnSelect} completionLabel={closeOnSelect ? undefined : '完成选择'} onEmptyBackspace={() => { const last = [...value].reverse().find(item => !item.disabled); if (last) remove(last.value, open); }} options={options.map(option => ({ ...option, disabled: option.disabled || value.some(item => item.value === option.value && item.disabled) }))} value={null} onValueChange={option => {
+      const original = options.find(item => item.value === option.value);
+      if (!original || original.disabled || props.disabled || readOnly) return;
+      const selected = value.find(item => item.value === original.value);
+      if (selected?.disabled) return;
+      onValueChange(selected ? value.filter(item => item.value !== original.value) : [...value, original]);
+      if (clearQueryOnSelect) props.onQueryChange('');
+    }} />
     {name && value.map(item => <input key={item.value} type="hidden" name={name} value={item.value} disabled={props.disabled} />)}
     <ul id={`${inputId}-tags`} className="rhine-multi-select__tags" aria-label={`${props.label}已选项`} data-expanded={collapsible && expanded || undefined}>{shown.map(item => <li key={item.value}><span>{item.label}</span><Button variant="quiet" disabled={props.disabled || readOnly || item.disabled} aria-label={`移除${item.label}`} onClick={() => remove(item.value)}>×</Button></li>)}</ul>
     <div className="rhine-multi-select__actions">
       {limit !== undefined && <span className="rhine-text rhine-text--caption rhine-text--muted">已选 {value.length} 项</span>}
       {collapsible && <Button variant="quiet" aria-expanded={expanded} aria-controls={`${inputId}-tags`} onClick={() => setExpanded(current => !current)}>{expanded ? '收起已选项' : '展开已选项'}</Button>}
-      {clearable && <Button variant="quiet" disabled={props.disabled || readOnly || !value.some(item => !item.disabled)} onClick={() => { onValueChange(value.filter(item => item.disabled)); focusInput(); }}>清空选择</Button>}
+      {clearable && value.some(item => !item.disabled) && <Button type="button" variant="quiet" disabled={props.disabled || readOnly} onClick={() => { onValueChange(value.filter(item => item.disabled)); focusInput(); }}>清空选择</Button>}
     </div>
   </div>;
 }

package/components/COMMON_COMPONENTS.md

@@ -1,4 +1,4 @@
-# 莱茵设计 · 常用组件契约 V1.4
+# 莱茵设计 · 常用组件契约
 
 本文件定义[莱茵设计](../README.md)的常用组件契约。先固定契约和组件展台，再验证；默认优先复用本目录，页面先改设计稿，再按授权接入App。具体业务由宿主定义，不进入通用契约。
 
@@ -31,7 +31,7 @@ SideNav、Breadcrumbs、Steps、Drawer、Fieldset、ErrorSummary、StatusTimelin
 | Menu | 操作项/禁用/危险项；方向键/Home/End/输入字符跳转；不是表单选择器 |
 | Divider / Stack / Inline / Grid | 语义分隔线、纵排、可换行横排、自适应网格；只消费间距tokens |
 
-共24个新增组件，与已有16个合计40个。复杂浮层使用Radix无样式基础，避免维护重复焦点/菜单/碰撞实现；样式由Rhine Design定义。原生表单、数据与布局不引入额外框架。
+上表以早期 V1.4 文档的 24 个扩展组件为基础，当时与已有 16 个合计 40 个；V1.4 是历史文档阶段编号，不是 npm 包版本。当前完整清单与版本边界见[组件入口](README.md)。复杂浮层使用Radix无样式基础，避免维护重复焦点/菜单/碰撞实现；样式由Rhine Design定义。原生表单、数据与布局不引入额外框架。
 
 ## 动效与状态
 
@@ -72,4 +72,6 @@ SideNav、Breadcrumbs、Steps、Drawer、Fieldset、ErrorSummary、StatusTimelin
 
 ## 设计展台验收
 
-展示40组件的真实实现；新增数据、表单、操作/布局、反馈/浮层四组。合成数据只演示事件与状态；Clipboard仅复制明确的演示字符串。测试覆盖分页边界、请求状态、异步复制失败、IME、候选列表、通知计时、浮层焦点/Escape与窄窗；原生宿主原生平台和屏幕阅读器仍需App接入后单独验收。
+展台使用当前源码的真实组件；本页重点覆盖数据、表单、操作/布局、反馈/浮层四组。合成数据只演示事件与状态；Clipboard仅复制明确的演示字符串。测试覆盖分页边界、请求状态、异步复制失败、IME、候选列表、通知计时、浮层焦点/Escape与窄窗；原生宿主原生平台和屏幕阅读器仍需App接入后单独验收。
+
+Toast 浮动通知（自 0.11.0，npm 0.10.0 不含，见[版本记录](../CHANGELOG.md#01102026-10-27)）：`placement="floating"` 通过 Portal 挂到最近主题根，位于视口右下角，距边缘 16px、最大宽度 400px，窄窗两侧各留 16px。默认 inline 行为保持；浮动通知不占内容流、不抢焦点，关闭后不拦截点击；继承主题与减少动态。反馈展台使用浮动模式。成功沿用 5 秒关闭及悬停/聚焦/隐藏暂停，关键错误仍持久。

package/components/Forms.tsx

@@ -2,6 +2,7 @@ import { useEffect, useId, useLayoutEffect, useRef, useState, type InputHTMLAttr
 import * as PopoverBase from '@radix-ui/react-popover';
 import { Button, type Choice } from './components';
 import { Icon, IconButton } from './Actions';
+import { useFloatingScale } from './useFloatingScale';
 import './checkbox-row.css';
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
@@ -47,14 +48,21 @@ export interface ComboboxProps {
   value: string | null; onValueChange: (option: Choice) => void; options: Choice[];
   loading?: boolean; error?: string; disabled?: boolean;
   readOnly?: boolean; placeholder?: string; hint?: string; id?: string;
-  selectedValues?: string[]; closeOnSelect?: boolean; onEmptyBackspace?: () => void;
+  selectedValues?: string[]; closeOnSelect?: boolean; onEmptyBackspace?: () => void; completionLabel?: string;
+  open?: boolean; onOpenChange?: (open: boolean) => void;
 }
-export function Combobox({ label, query, onQueryChange, value, onValueChange, options, loading = false, error, disabled = false, readOnly = false, placeholder, hint, id: suppliedId, selectedValues, closeOnSelect = true, onEmptyBackspace }: ComboboxProps) {
+export function Combobox({ label, query, onQueryChange, value, onValueChange, options, loading = false, error, disabled = false, readOnly = false, placeholder, hint, id: suppliedId, selectedValues, closeOnSelect = true, onEmptyBackspace, completionLabel, open: controlledOpen, onOpenChange }: ComboboxProps) {
   const generatedId = useId(), id = suppliedId || generatedId; const composing = useRef(false);
+  const floatingRef = useFloatingScale(undefined, 'popover', 240);
+  const exitingWithTab = useRef(false);
+  const releaseTabGuard = useRef<(() => void) | undefined>(undefined);
+  useEffect(() => () => releaseTabGuard.current?.(), []);
   const root = useRef<HTMLDivElement>(null);
   const [container, setContainer] = useState<HTMLElement>();
   useLayoutEffect(() => { setContainer((root.current?.closest('.rhine-theme') as HTMLElement) || document.body); }, []);
-  const [open, setOpen] = useState(false), [active, setActive] = useState<string | null>(null), [draft, setDraft] = useState<string | null>(null);
+  const [internalOpen, setInternalOpen] = useState(false), [active, setActive] = useState<string | null>(null), [draft, setDraft] = useState<string | null>(null);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = (next: boolean) => { if (controlledOpen === undefined) setInternalOpen(next); onOpenChange?.(next); };
   useEffect(() => { if (disabled || readOnly) { setOpen(false); setActive(null); setDraft(null); composing.current = false; } }, [disabled, readOnly]);
   const available = loading || error ? [] : options.filter(option => !option.disabled);
   const activeIndex = options.findIndex(option => option.value === active && !option.disabled);
@@ -62,20 +70,72 @@ export function Combobox({ label, query, onQueryChange, value, onValueChange, op
   useEffect(() => { if (!open || !activeId) return; document.getElementById(activeId)?.scrollIntoView?.({ block: 'nearest' }); }, [activeId, open]);
   const choose = (option: Choice) => { if (readOnly || disabled || loading || error) return; onValueChange(option); if (closeOnSelect) setOpen(false); setActive(null); };
   const visibleOpen = open && !disabled && !readOnly;
-  return <div ref={root} className="rhine-combobox rhine-field" onBlur={event => { if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false); }}><label htmlFor={id}>{label}</label>
+  // Keep a multiselect action in place until its click finishes. Closing on
+  // pointerdown/blur can shift a zoomed page before pointerup reaches the button.
+  const containsInteractionTarget = (target: EventTarget | null) => target instanceof Node && (root.current?.closest('.rhine-multi-select') ?? root.current)?.contains(target);
+  const beginTabExit = () => {
+    exitingWithTab.current = true;
+    releaseTabGuard.current?.();
+    const dialog = root.current?.closest<HTMLElement>('.rhine-dialog[data-state="open"]');
+    if (!dialog) return;
+    const doc = dialog.ownerDocument;
+    let lastInside = doc.activeElement instanceof HTMLElement && dialog.contains(doc.activeElement) ? doc.activeElement : document.getElementById(id);
+    // The nested Radix scope resumes its parent asynchronously on unmount.
+    // Keep that short interval contained even for repeated keyboard events.
+    const guard = (event: FocusEvent) => {
+      if (!dialog.isConnected || dialog.dataset.state !== 'open') return;
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      if (dialog.contains(target)) lastInside = target;
+      else if (!document.getElementById(`${id}-popup`)?.contains(target) && lastInside?.isConnected) {
+        lastInside.focus({ preventScroll: true });
+        if (lastInside.id === id) { setOpen(false); setActive(null); }
+      }
+    };
+    doc.addEventListener('focusin', guard);
+    releaseTabGuard.current = () => { doc.removeEventListener('focusin', guard); releaseTabGuard.current = undefined; };
+  };
+  const complete = () => { document.getElementById(id)?.focus(); setOpen(false); setActive(null); };
+  return <div ref={root} className="rhine-combobox rhine-field" onBlur={event => { if (!containsInteractionTarget(event.relatedTarget) && !document.getElementById(`${id}-popup`)?.contains(event.relatedTarget)) setOpen(false); }}><label htmlFor={id}>{label}</label>
     <PopoverBase.Root open={visibleOpen} onOpenChange={setOpen}><PopoverBase.Anchor asChild><div className="rhine-combobox__input"><input id={id} role="combobox" aria-autocomplete="list" aria-expanded={visibleOpen} aria-controls={visibleOpen ? `${id}-list` : undefined} aria-activedescendant={visibleOpen ? activeId : undefined} aria-invalid={!!error || undefined} aria-describedby={[`${id}-status`, hint && `${id}-hint`].filter(Boolean).join(' ')} value={draft ?? query} disabled={disabled} readOnly={readOnly} placeholder={placeholder}
       onClick={() => { if (!readOnly && !disabled) setOpen(true); }} onFocus={() => { if (!readOnly && !disabled) setOpen(true); }} onChange={event => { if (readOnly || disabled) return; if (composing.current) setDraft(event.target.value); else onQueryChange(event.target.value); setActive(null); setOpen(true); }}
       onCompositionStart={() => { if (!readOnly && !disabled) { composing.current = true; setDraft(query); } }} onCompositionEnd={event => { composing.current = false; setDraft(null); if (!readOnly && !disabled) onQueryChange(event.currentTarget.value); }}
       onKeyDown={event => {
         if (readOnly || disabled || composing.current || event.nativeEvent.isComposing || event.keyCode === 229) return;
+        if (event.key === 'Tab' && open) {
+          if (!event.shiftKey && completionLabel) {
+            const completion = document.getElementById(`${id}-complete`);
+            if (completion) { event.preventDefault(); completion.focus(); return; }
+          }
+          beginTabExit();
+        }
         if (event.key === 'Backspace' && !event.currentTarget.value && onEmptyBackspace) { event.preventDefault(); onEmptyBackspace(); }
         if (event.key === 'Escape' && open) { event.preventDefault(); event.stopPropagation(); setOpen(false); setActive(null); }
         if (['ArrowDown', 'ArrowUp'].includes(event.key)) { event.preventDefault(); setOpen(true); const index = available.findIndex(option => option.value === active); const next = event.key === 'ArrowDown' ? (index + 1) % available.length : (index <= 0 ? available.length : index) - 1; setActive(available[next]?.value ?? null); }
         if (open && ['Home', 'End'].includes(event.key)) { event.preventDefault(); setActive((event.key === 'Home' ? available[0] : available.at(-1))?.value ?? null); }
         if (open && event.key === 'Enter') { event.preventDefault(); const option = available.find(item => item.value === active); if (option) choose(option); }
       }} /><span className="rhine-combobox__arrow"><Icon name="chevronDown" size={16} /></span></div></PopoverBase.Anchor>
-    <PopoverBase.Portal container={container}><PopoverBase.Content asChild sideOffset={4} collisionPadding={12} onOpenAutoFocus={event => event.preventDefault()} onCloseAutoFocus={event => event.preventDefault()} onInteractOutside={event => { if (root.current?.contains(event.target as Node)) event.preventDefault(); }}>
-      <div className="rhine-combobox__list" role="listbox" id={`${id}-list`} aria-label={label} aria-multiselectable={selectedValues ? true : undefined} aria-busy={loading}>{!loading && !error && options.map((option, index) => <div role="option" id={`${id}-option-${index}`} key={option.value} aria-selected={selectedValues ? selectedValues.includes(option.value) : option.value === value} aria-disabled={option.disabled || undefined} data-active={option.value === active} onMouseDown={event => event.preventDefault()} onMouseMove={() => { if (!option.disabled) setActive(option.value); }} onClick={() => { if (!option.disabled) choose(option); }}>{option.label}</div>)}{(loading || error || !options.length) && <div className="rhine-combobox__empty" role="presentation">{loading ? '正在读取…' : error ? '暂不可用' : '暂无匹配结果'}</div>}</div>
+    <PopoverBase.Portal container={container}><PopoverBase.Content asChild updatePositionStrategy="always" sideOffset={4} collisionPadding={12} onOpenAutoFocus={event => event.preventDefault()} onCloseAutoFocus={event => {
+      event.preventDefault();
+      releaseTabGuard.current?.();
+      if (!exitingWithTab.current) return;
+      exitingWithTab.current = false;
+      // Radix resumes the parent scope after this callback. Rapid Tab can
+      // reach a guard or the background during that interval; restore focus
+      // only for a keyboard exit from a still-open Rhine modal.
+      const dialog = root.current?.closest('.rhine-dialog[data-state="open"]');
+      const active = document.activeElement;
+      if (active?.hasAttribute('data-radix-focus-guard') || (dialog && !dialog.contains(active))) complete();
+    }} onInteractOutside={event => { if (containsInteractionTarget(event.target)) event.preventDefault(); }}>
+      <div ref={floatingRef} className="rhine-combobox__list" id={`${id}-popup`} onKeyDown={event => { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); complete(); } }}>
+        <div role="listbox" id={`${id}-list`} aria-label={label} aria-multiselectable={selectedValues ? true : undefined} aria-busy={loading}>{!loading && !error && options.map((option, index) => <div role="option" id={`${id}-option-${index}`} key={option.value} aria-selected={selectedValues ? selectedValues.includes(option.value) : option.value === value} aria-disabled={option.disabled || undefined} data-active={option.value === active} onMouseDown={event => event.preventDefault()} onMouseMove={() => { if (!option.disabled) setActive(option.value); }} onClick={() => { if (!option.disabled) choose(option); }}>{selectedValues && <span className="rhine-combobox__check" aria-hidden="true">{selectedValues.includes(option.value) ? '✓' : ''}</span>}{option.label}</div>)}{(loading || error || !options.length) && <div className="rhine-combobox__empty" role="presentation">{loading ? '正在读取…' : error ? '暂不可用' : '暂无匹配结果'}</div>}</div>
+        {completionLabel && <div className="rhine-combobox__completion"><Button id={`${id}-complete`} type="button" variant="quiet" onMouseDown={event => event.preventDefault()} onClick={complete} onKeyDown={event => {
+          if (event.key !== 'Tab') return;
+          if (event.shiftKey) { event.preventDefault(); document.getElementById(id)?.focus(); }
+          // Restore the input as the origin of the browser's normal forward Tab.
+          else { beginTabExit(); complete(); }
+        }}>{completionLabel}</Button></div>}
+      </div>
     </PopoverBase.Content></PopoverBase.Portal></PopoverBase.Root>
     <span id={`${id}-status`} role="status" className={`rhine-text rhine-text--caption ${error ? 'rhine-text--error' : 'rhine-text--muted'}`}>{loading ? '正在读取候选项…' : error || (options.length ? `${options.length} 个候选项` : '暂无匹配结果')}</span>
     {hint && <span id={`${id}-hint`} className="rhine-field__hint">{hint}</span>}

package/components/README.md

@@ -2,7 +2,7 @@
 
 本目录提供[莱茵设计 · Rhine Design](../README.md)的 React 组件、设计变量和 API 契约。组件接收应用传入的数据与动作，不绑定特定后端或原生平台。包名为`@linhey/rhine-design`；样式变量和类名使用`rhine-`命名空间。
 
-0.8.0 共66个组件，新增 NeutronStarBackdrop、StatusTimelineList、AppShellToggle 与 ButtonLink；0.6.0 为60个；0.5.0为59个，0.4.0为48个，0.3.0为40个。新增导航、表单流程及健康时间轴组件见[场景与交互规范](../docs/INTERACTION_PATTERNS.md)，原24个扩展组件见[常用组件契约](./COMMON_COMPONENTS.md)。[字体与文字规范](./TYPOGRAPHY.md)与[主流系统对照与缺口](../docs/DESIGN_SYSTEM_AUDIT.md)共同约束复用。静态页面样稿也使用同源Toolbar/Select CSS，不运行React。
+当前主入口 `components/index.ts` 共 67 个组件（不含类型及独立 `/theme` 入口）；0.9.0 新增 ListFilterBar 后，0.10.0 保持此数量。0.8.0 为 66 个，包含 NeutronStarBackdrop、StatusTimelineList、AppShellToggle、ButtonLink、ThemePicker 与 ThemePreview；0.6.0 为 60 个，0.5.0 为 59 个，0.4.0 为 48 个，0.3.0 为 40 个。当前源码中的摘要 Tabs、浮动 Toast、紧凑 SegmentedControl 和相邻 Disclosure 分隔线调整不在 npm 0.10.0 中，见[0.11.0 记录](../CHANGELOG.md#01102026-10-27)。新增导航、表单流程及健康时间轴组件见[场景与交互规范](../docs/INTERACTION_PATTERNS.md)，原24个扩展组件见[常用组件契约](./COMMON_COMPONENTS.md)。[字体与文字规范](./TYPOGRAPHY.md)与[主流系统对照与缺口](../docs/DESIGN_SYSTEM_AUDIT.md)共同约束复用。静态页面样稿也使用同源Toolbar/Select CSS，不运行React。
 
 中子星艺术、主题物品和生命周期见[中子星契约](../docs/NEUTRON_STAR_BACKDROP.md)与[轨道背景契约](../docs/ORBIT_BACKDROP.md)。安装版本与源码导出分别核对。
 
@@ -64,12 +64,12 @@ export function Example() {
 | Background（0.5.0） | roleTone=canvas/content/sidebar/surface/overlay/media；decoration=auto/theme/none；appearance={color,textColor,texture,textureSize}；HTML div 属性 | 默认正文纯色；仅画布默认使用主题纹理；局部覆盖不创建主题根或定位上下文；完整配置见[场景背景](../docs/THEMING.md#场景背景050) |
 | SelectionCard | label；selected；onSelectedChange；disabled；showIndicator=true；children | 原生 checkbox 可取消；是否单选由上层控制；showIndicator=false 仅视觉隐藏勾选框，保留键盘与读屏，卡片边界表达选中；内部不嵌套按钮/链接/其他输入 |
 | TextField | label；hint；error；原生 input 属性 | label 与 id 自动关联；错误与提示组成 aria-describedby；输入值由调用方管理 |
-| Tabs | label；items[{value,label,content,disabled?}]；value；onValueChange | value 必须指向有效可用项；唯一 value；左右/Home/End，跳过禁用项；隐藏面板保留挂载但退出可访问树 |
-| SegmentedControl | label；items[{value,label,disabled?}]；value；onValueChange；fullWidth? | 原生 radio，独立 name 防多组干扰；方向键和禁用行为由浏览器提供；fullWidth 为整行等宽选项，标签和选中底色撑满且文字居中 |
+| Tabs | label；items[{value,label,content,disabled?,description?,status?}]；value；onValueChange | value 必须指向有效可用项；唯一 value；左右/Home/End，跳过禁用项；隐藏面板保留挂载但退出可访问树；description/status自0.11.0新增，npm 0.10.0 不含，见下文 |
+| SegmentedControl | label；items[{value,label,disabled?}]；value；onValueChange；fullWidth?；size=default/compact | compact为卡片局部操作的32px视觉/44px命中（自 0.11.0，npm 0.10.0 不含）；原生 radio，独立 name 防多组干扰；方向键和禁用行为由浏览器提供；fullWidth 为整行等宽选项，标签和选中底色撑满且文字居中 |
 | Notice | tone；title；children；action | error 使用 alert，其余 status；调用方决定显示/移除，不自动倒计时关闭错误 |
 | Progress | label；value:number/null；valueText? | null/NaN 为未知进度；数值钳制 0–100；组件不执行或估算真实进度 |
 | Skeleton | label；lines | 1–8 行，默认 3 行；单一可访问加载描述，装饰行隐藏 |
-| Disclosure | title；children；defaultOpen | 非受控原生 details；挂载后 defaultOpen 不作远程控制；支持开合中断与反向，关闭内容退出键盘顺序 |
+| Disclosure | title；children；defaultOpen | 非受控原生 details；挂载后 defaultOpen 不作远程控制；支持开合中断与反向，关闭内容退出键盘顺序；连续分组不加组间 gap，相邻 Disclosure 共用一条分隔线（自 0.11.0，npm 0.10.0 不含） |
 | EmptyState | title；description；action | 说明当前状态并可给一个下一步动作；不将错误伪装成空数据 |
 
 新增24项API与组合示例见[常用组件契约](./COMMON_COMPONENTS.md)。TextField封装单行输入，Select使用原生单选；需要查询候选时用Combobox。复杂浮层采用Radix Dialog、AlertDialog、Popover、DropdownMenu、Tooltip的无样式基础，莱茵设计提供视觉与动效。Toast只处理单条通知；不加入全局队列、表格引擎、图表包或业务数据层。
@@ -141,6 +141,14 @@ export function Example() {
 - 动画不承诺异步任务一定成功；不使用定时器模拟业务完成。预览中的 900ms 保存仅为明确标记的本地演示。
 - 组件不提供全局开启/关闭业务状态的开关；动画是视觉层的可选增强。
 
+### 带说明与状态的 Tabs（自 0.11.0，npm 0.10.0 不含）
+
+完整规格见[带摘要的页签](../docs/SUMMARY_TABS.md)：名称14/22/600、摘要12/18/400，12px上下内距、8px名称/状态、4px摘要间隔、16px页签间距及24px面板间距。独立可交互展台 `/#summary-tabs` 提供局部宽度与状态切换；普通Tabs保持原有间距。
+
+`description?: string` 显示对象身份等辅助信息，`status?: ReactNode` 用只读 Badge 或纯文本表达状态，不嵌套按钮、链接等交互元素。存在这两项时页签等分可用宽度，标题/状态及辅助文字自然换行；普通纯标题 Tabs 布局保持不变。页签可访问名称始终为 `label`，描述和状态经 `aria-describedby` 关联；选中与焦点保持原语义和动效，减少动态沿用现有规则。
+
+状态由宿主持有，每项同时呈现自己的摘要，不能用当前选中项的摘要填充所有页签。身份变化不得改变 `value` 或重建焦点；状态变化不自动切页。展台 `/#selection` 保留普通Tabs，`/#summary-tabs` 集中提供摘要页签的正常、禁用/加载、错误和长说明，支持局部宽度、键盘、主题及减少动态控件。
+
 ## 页面采用顺序
 
 先 Button、TextField、Notice、Badge；再 Tabs、SegmentedControl 与 Surface；随后 SelectionCard、Progress、Skeleton、Disclosure、EmptyState。逐页替换时保持业务 DTO/动作调用不变。
@@ -178,4 +186,4 @@ export function Example() {
 
 - [浮层缩放与边界](../docs/FLOATING_OVERLAYS.md)：Popover、Menu、Tooltip 与时间轴共享 CSS zoom 修正。
 - [设置 Dialog](../docs/SETTINGS_DIALOG.md)：`navigation` 插槽及窄窗/缩放重排。
-- [主题选择](../docs/THEME_PICKER.md)：`ThemePicker` / `ThemePreview`，候选源码新增两项组件至 66；旧版安装包仍按自身导出判断。
+- [主题选择](../docs/THEME_PICKER.md)：`ThemePicker` / `ThemePreview`，自 0.8.0 提供，当时组件总数增至 66；0.9.0 新增 ListFilterBar 后为 67。

package/components/SPACING.md

@@ -52,6 +52,14 @@
 
 页面已有h1时卡片通常用h2；标题等级由结构决定，不能用字号决定。不要为布局引入空Text、空段落或连续br。
 
+### 卡片标题与局部指标切换
+
+卡片继续使用 Surface 24px 内距和 Stack gap=4 的头部/内容间距。头部用 Inline gap=4、justifyContent: space-between：标题使用 Text heading（通常 h2），操作靠右、按内容宽度排列；空间不足自然换行，不挤压标题或固定卡高。只有说明时才加标题/说明 8px 间距。
+
+局部指标切换采用 `SegmentedControl size="compact"`（自 0.11.0，npm 0.10.0 不含，见[版本记录](../CHANGELOG.md#01102026-10-27)）：可见选项最小32px高，文字12/18，水平内距8px；上下各6px透明命中区域保持44px操作高度，单项最小44px宽。控件不使用业务CSS缩放；默认尺寸和整行模式保持原契约。视觉大小与点击范围分别验收，透明命中区计入头部布局，不覆盖相邻内容。三主题沿用选中、禁用与焦点语义。
+
+真实组合见 `#spacing` 的“统计分布”卡片：默认、加载/禁用、错误、长标题与窄窗，以及键盘选择、200%缩放和减少动态。
+
 ### 只承载表格的 Surface
 
 纯表格使用 `<Surface padding="none"><DataTable … /></Surface>`，取消容器外围24px内距，表头和单元格仍使用 DataTable 自身的阅读间距。该公开 prop 自 0.9.1 提供，见 [#24](https://github.com/linhay/rhine-design/issues/24)；默认 `padding="default"` 保持原来行为。
@@ -70,6 +78,7 @@
 | 数据列表 | 同项说明4–8px | 列表项16px；筛选/表格/分页16–24px | Stack +DataTable/Pagination |
 | 浮层 | 标题/说明由浮层组件负责 | 正文组16px；操作区24px | Dialog/Drawer +Stack/Inline |
 | 反馈 | 提示内部由Notice负责 | 与前后内容16px | Notice放入Stack，不覆盖其内部样式 |
+| 带摘要的页签 | 名称/状态8px，名称组/身份4px，上下各12px | 页签16px；面板顶部24px | Tabs description/status；[完整规格](../docs/SUMMARY_TABS.md) |
 
 这些是组合默认值，不重新覆盖现有组件内部的padding、gap或状态样式。要改变组件密度，先在库中定义并验证，不能在业务页用后代选择器临时压缩。
 

package/components/Toast.tsx

@@ -1,10 +1,15 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { IconButton } from './Actions';
 import type { Tone } from './components';
 
-export function Toast({ open, onOpenChange, title, description, tone = 'success', duration = 5000 }: {
-  open: boolean; onOpenChange: (open: boolean) => void; title: string; description?: string; tone?: Tone; duration?: number;
+export function Toast({ open, onOpenChange, title, description, tone = 'success', duration = 5000, placement = 'inline' }: {
+  open: boolean; onOpenChange: (open: boolean) => void; title: string; description?: string; tone?: Tone; duration?: number; placement?: 'inline' | 'floating';
 }) {
+  const anchor = useRef<HTMLSpanElement>(null);
+  const [container, setContainer] = useState<HTMLElement>();
+  // Escape scrolling panels while inheriting the host theme and reduced-motion setting.
+  useLayoutEffect(() => { if (placement === 'floating') setContainer((anchor.current?.closest('.rhine-theme') as HTMLElement) || document.body); }, [placement]);
   const [hover, setHover] = useState(false), [focus, setFocus] = useState(false), [hidden, setHidden] = useState(false);
   const remaining = useRef(duration), close = useRef(onOpenChange);
   close.current = onOpenChange;
@@ -16,10 +21,11 @@ export function Toast({ open, onOpenChange, title, description, tone = 'success'
     const started = Date.now(); const timer = setTimeout(() => close.current(false), Math.max(0, remaining.current));
     return () => { clearTimeout(timer); remaining.current = Math.max(0, remaining.current - (Date.now() - started)); };
   }, [open, hover, focus, hidden, tone, duration, title, description]);
-  return <div className="rhine-toast-region" aria-label="通知">
+  const notification = <div className="rhine-toast-region" data-placement={placement} aria-label="通知">
     <div role={tone === 'error' ? 'alert' : 'status'} aria-atomic="true" className={open ? `rhine-toast rhine-tone-${tone}` : 'rhine-sr-only'}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onFocus={() => setFocus(true)} onBlur={event => { if (!event.currentTarget.contains(event.relatedTarget)) setFocus(false); }}>
       {open && <><div><strong>{title}</strong>{description && <p>{description}</p>}</div><IconButton label="关闭通知" icon="close" onClick={() => onOpenChange(false)} /></>}
     </div>
   </div>;
+  return placement === 'floating' ? <><span ref={anchor} hidden />{container && createPortal(notification, container)}</> : notification;
 }

package/components/common.css

@@ -47,6 +47,8 @@
 .rhine-combobox__list [role=option],.rhine-combobox__empty { padding:12px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; }
 .rhine-combobox__list [role=option][data-active=true],.rhine-combobox__list [role=option][aria-selected=true] { background:var(--rhine-selected); }
 .rhine-combobox__list [role=option][aria-disabled=true],.rhine-combobox__empty { color:var(--rhine-muted); cursor:default; }
+.rhine-combobox__check { display:inline-block; width:1.5em; font-weight:600; }
+.rhine-combobox__completion { position:sticky; bottom:0; display:flex; justify-content:flex-end; padding:var(--rhine-space-1) var(--rhine-space-2); border-top:1px solid var(--rhine-control); background:var(--rhine-overlay-bg); }
 .rhine-overlay-anchor { display:inline-block; vertical-align:middle; max-width:100%; }
 .rhine-overlay { position:fixed; inset:0; background:var(--rhine-backdrop-bg); z-index:40; }
 .rhine-dialog { position:fixed; z-index:41; top:50%; left:50%; transform:translate(-50%,-50%); width:min(480px,calc(100% - 32px)); max-height:calc(100% - 32px); overflow:auto; padding:24px; border:1px solid var(--rhine-line); border-radius:4px; background:var(--rhine-overlay-bg); color:var(--rhine-overlay-text); box-shadow:0 16px 48px #242b2826; }
@@ -72,6 +74,8 @@
 .rhine-tooltip { overflow:auto; z-index:60; background:var(--rhine-ink); color:var(--rhine-surface); padding:8px 12px; border-radius:3px; max-width:min(280px,calc(100vw - 24px)); font-size:12px; line-height:18px; overflow-wrap:anywhere; }
 .rhine-toast-region { position:relative; }.rhine-toast { display:flex; align-items:start; gap:12px; justify-content:space-between; padding:16px; background:var(--rhine-tone-bg); border-left:3px solid var(--rhine-tone); color:var(--rhine-ink); animation:rhine-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
 .rhine-toast p { margin:4px 0 0; overflow-wrap:anywhere; }.rhine-toast strong { overflow-wrap:anywhere; }.rhine-toast>div { min-width:0; }
+.rhine-toast-region[data-placement="floating"] { position:fixed; z-index:60; inset-inline-end:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:min(400px,calc(100% - 32px)); pointer-events:none; }
+.rhine-toast-region[data-placement="floating"] .rhine-toast { pointer-events:auto; box-shadow:0 8px 24px #242b2820; }
 .rhine-dialog[data-state=open],.rhine-overlay[data-state=open] { animation:rhine-overlay-fade var(--rhine-duration-overlay) var(--rhine-ease-standard); }
 .rhine-popover[data-state=open],.rhine-menu[data-state=open],.rhine-combobox__list[data-state=open],.rhine-tooltip[data-state=delayed-open],.rhine-tooltip[data-state=instant-open] { animation:rhine-enter var(--rhine-duration-overlay) var(--rhine-ease-standard); }
 @keyframes rhine-overlay-fade { from { opacity:0; } to { opacity:1; } }

package/components/components.tsx

@@ -45,12 +45,12 @@ export function TextField({ label, hint, error, id: providedId, className, ...pr
   </div>;
 }
 export interface Choice { value: string; label: string; disabled?: boolean }
-export interface TabItem extends Choice { content: ReactNode }
+export interface TabItem extends Choice { content: ReactNode; description?: string; status?: ReactNode }
 export function Tabs({ label, items, value, onValueChange }: { label: string; items: TabItem[]; value: string; onValueChange: (value: string) => void }) {
   const id = useId();
   const buttons = useRef<(HTMLButtonElement | null)[]>([]);
   return <div className="rhine-tabs">
-    <div role="tablist" aria-label={label} className="rhine-tabs__list" onKeyDown={event => {
+    <div role="tablist" aria-label={label} className={classes('rhine-tabs__list', items.some(item => item.description || item.status) && 'rhine-tabs__list--detailed')} onKeyDown={event => {
       if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
       const available = items.map((item, index) => ({ ...item, index })).filter(item => !item.disabled);
       if (!available.length) return;
@@ -61,15 +61,19 @@ export function Tabs({ label, items, value, onValueChange }: { label: string; it
     }}>
       {items.map((item, index) => <button key={item.value} ref={node => { buttons.current[index] = node; }}
         type="button" role="tab" disabled={item.disabled} id={`${id}-tab-${index}`} aria-controls={`${id}-panel-${index}`}
-        aria-selected={value === item.value} tabIndex={value === item.value ? 0 : -1} onClick={() => onValueChange(item.value)}>{item.label}</button>)}
+        aria-label={item.label} aria-describedby={[item.description && `${id}-description-${index}`, item.status && `${id}-status-${index}`].filter(Boolean).join(' ') || undefined}
+        aria-selected={value === item.value} tabIndex={value === item.value ? 0 : -1} onClick={() => onValueChange(item.value)}>
+        {item.description || item.status ? <><span className="rhine-tabs__title">{item.label}{item.status && <span id={`${id}-status-${index}`} className="rhine-tabs__status">{item.status}</span>}</span>
+          {item.description && <span id={`${id}-description-${index}`} className="rhine-tabs__description">{item.description}</span>}</> : item.label}
+      </button>)}
     </div>
     {items.map((item, index) => <div key={item.value} role="tabpanel" id={`${id}-panel-${index}`} aria-labelledby={`${id}-tab-${index}`}
       hidden={value !== item.value} tabIndex={0} className="rhine-tabs__panel">{item.content}</div>)}
   </div>;
 }
-export function SegmentedControl({ label, items, value, onValueChange, fullWidth = false }: { label: string; items: Choice[]; value: string; onValueChange: (value: string) => void; fullWidth?: boolean }) {
+export function SegmentedControl({ label, items, value, onValueChange, fullWidth = false, size = 'default' }: { label: string; items: Choice[]; value: string; onValueChange: (value: string) => void; fullWidth?: boolean; size?: 'default' | 'compact' }) {
   const name = useId();
-  return <fieldset className={classes('rhine-segmented', fullWidth && 'rhine-segmented--full-width')}><legend className="rhine-sr-only">{label}</legend>
+  return <fieldset className={classes('rhine-segmented', fullWidth && 'rhine-segmented--full-width', size === 'compact' && 'rhine-segmented--compact')}><legend className="rhine-sr-only">{label}</legend>
     {items.map(item => <label key={item.value} className="rhine-segmented__option">
       <input type="radio" name={name} value={item.value} checked={value === item.value} disabled={item.disabled} onChange={() => onValueChange(item.value)} />
       <span>{item.label}</span>
@@ -133,8 +137,10 @@ export function Disclosure({ title, children, defaultOpen = false }: { title: st
     const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
     if (reduced || !el.animate) { el.open = expanded; setOpen(expanded); return; }
     const style = getComputedStyle(el);
-    const parsedDuration = parseFloat(style.getPropertyValue('--rhine-duration-notice'));
-    const duration = Number.isFinite(parsedDuration) ? parsedDuration : 200;
+    // Production CSS may normalize 200ms to .2s; Web Animations always takes milliseconds.
+    const durationValue = style.getPropertyValue('--rhine-duration-notice').trim();
+    const parsedDuration = parseFloat(durationValue);
+    const duration = Number.isFinite(parsedDuration) ? parsedDuration * (durationValue.endsWith('s') && !durationValue.endsWith('ms') ? 1000 : 1) : 200;
     if (duration === 0) { el.open = expanded; setOpen(expanded); return; }
     const to = expanded ? el.getBoundingClientRect().height : summary.getBoundingClientRect().height + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
     const next = el.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration, easing: style.getPropertyValue(expanded ? '--rhine-ease-standard' : '--rhine-ease-exit').trim() || 'ease' });

package/components/styles.css

@@ -60,7 +60,14 @@
 .rhine-tabs__list button[aria-selected=true] { color:var(--rhine-ink); }
 .rhine-tabs__list button[aria-selected=true]::after { transform:scaleX(1); }
 .rhine-tabs__list button:disabled { color:var(--rhine-muted); opacity:.6; cursor:default; }
+.rhine-tabs__list--detailed { align-items:stretch; gap:var(--rhine-space-4); }
+.rhine-tabs__list--detailed>button { display:flex; flex-direction:column; align-items:stretch; flex:1 1 0; min-width:0; padding-block:var(--rhine-space-3); text-align:start; overflow-wrap:anywhere; }
+.rhine-tabs__list--detailed>button:hover:not(:disabled) { color:var(--rhine-ink); }
+.rhine-tabs__title { display:flex; align-items:center; flex-wrap:wrap; gap:var(--rhine-space-2); font-weight:var(--rhine-weight-heading); }
+.rhine-tabs__status { display:inline-flex; }
+.rhine-tabs__description { display:block; margin-top:var(--rhine-space-1); color:var(--rhine-muted); font:var(--rhine-weight-regular) var(--rhine-text-caption)/var(--rhine-leading-caption) var(--rhine-font); }
 .rhine-tabs__panel { padding-top:20px; animation:rhine-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-tabs__list--detailed~.rhine-tabs__panel { padding-top:var(--rhine-space-6); }
 .rhine-segmented { display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px; border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); margin:0; min-width:0; }
 .rhine-segmented__option { position:relative; display:flex; flex:1 0 auto; cursor:pointer; }
 .rhine-segmented input { position:absolute; opacity:0; width:1px; height:1px; }
@@ -71,6 +78,10 @@
 .rhine-segmented input:checked+span { background:var(--rhine-ink); color:var(--rhine-surface); }
 .rhine-segmented input:focus-visible+span { outline:2px solid var(--rhine-green); outline-offset:3px; }
 .rhine-segmented input:disabled+span { opacity:.6; cursor:default; }
+.rhine-theme .rhine-segmented--compact { padding:0; border:0; gap:0; background:transparent; }
+.rhine-segmented--compact .rhine-segmented__option { min-width:44px; min-height:44px; padding:6px 0; }
+.rhine-segmented--compact .rhine-segmented__option span { min-height:32px; padding:6px 8px; font-size:12px; line-height:18px; background:var(--rhine-surface); box-shadow:inset 0 0 0 1px var(--rhine-control); }
+.rhine-segmented--compact input:checked+span { background:var(--rhine-ink); color:var(--rhine-surface); }
 .rhine-notice { padding:16px; border-left:3px solid var(--rhine-tone); background:var(--rhine-tone-bg); color:var(--rhine-tone); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; animation:rhine-enter var(--rhine-duration-notice) var(--rhine-ease-standard); }
 .rhine-notice>div { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
 .rhine-notice strong { font-size:14px; font-weight:600; }
@@ -84,6 +95,7 @@
 .rhine-skeleton>span[aria-hidden] { display:block; height:16px; background:var(--rhine-line); animation:rhine-pulse var(--rhine-duration-skeleton) ease-in-out infinite; }
 .rhine-skeleton>span[aria-hidden]:last-child { width:65%; }
 .rhine-disclosure { border-top:1px solid var(--rhine-line); border-bottom:1px solid var(--rhine-line); overflow:hidden; }
+.rhine-disclosure + .rhine-disclosure { border-top:0; }
 .rhine-disclosure summary { min-height:48px; padding:12px 0; list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:500; }
 .rhine-disclosure summary::-webkit-details-marker { display:none; }
 .rhine-theme .rhine-disclosure summary:focus-visible { outline-offset:-3px; }

package/components/useFloatingScale.ts

@@ -29,7 +29,7 @@ export function useFloatingSide(anchor: RefObject<HTMLSpanElement | null>, side:
 }
 
 /** Keep Radix's viewport coordinates unscaled while preserving the user's content zoom. */
-export function useFloatingScale(ref?: RefObject<HTMLDivElement | null>, kind = 'popover') {
+export function useFloatingScale(ref?: RefObject<HTMLDivElement | null>, kind = 'popover', maxHeight?: number) {
   const [content, setContent] = useState<HTMLDivElement | null>(null);
   const attach = useCallback((element: HTMLDivElement | null) => {
     if (ref) ref.current = element;
@@ -62,7 +62,11 @@ export function useFloatingScale(ref?: RefObject<HTMLDivElement | null>, kind =
       content.style.zoom = String(scale);
       const width = `calc((100vw - 24px) / ${scale})`;
       content.style.maxWidth = kind === 'tooltip' ? `min(280px, ${width})` : width;
-      content.style.maxHeight = `calc(var(--radix-${kind}-content-available-height) / ${scale})`;
+      // Bounded suggestion lists retain their own height cap. Feeding Radix's
+      // available-height variable back into their size can cause resize loops.
+      content.style.maxHeight = maxHeight === undefined
+        ? `calc(var(--radix-${kind}-content-available-height) / ${scale})`
+        : `min(${maxHeight}px, calc((100vh - 24px) / ${scale}))`;
       if (kind === 'dropdown-menu') content.style.minWidth = `min(180px, ${width})`;
       constrain();
     };
@@ -91,6 +95,6 @@ export function useFloatingScale(ref?: RefObject<HTMLDivElement | null>, kind =
       content.style.maxHeight = original.maxHeight;
       content.style.minWidth = original.minWidth;
     };
-  }, [content, kind]);
+  }, [content, kind, maxHeight]);
   return attach;
 }

package/docs/APPLICATION_COMPONENTS.md

@@ -108,7 +108,7 @@ SideNav 继续负责当前项、长名称和 aria-current；Drawer 继续负责
 | DateRangePicker | 上述范围 + `value={start,end}`、`presets=[{label,value}]`、`compact?` | 两个原生日期输入，自定义范围、受控预设、清空；compact 合并为一体区间框；结束日期下界取 start/min 较晚者；反向范围显示错误，不静默调换 |
 | NumberField | `value: number\|null`、`onValueChange/min/max/step/precision/disabled/error` | 编辑中保存字符串；失焦/Enter 提交；无效及越界输入保留并报错；上下键/按钮步进与钳制边界；空字符串提交 null |
 | TreeSelect | `nodes/value/onValueChange/expandedKeys/onExpandedChange/multiple`、loading/error/disabled | 节点为 `{id,label,disabled?,children?}`；父子独立选择，默认单选；调用方提供搜索后的树，不做全量过滤 |
-| RemoteMultiSelect | `query/onQueryChange/value/onValueChange/options`、loading/error/disabled、`maxVisibleTags?` | value 是完整 `{value,label,disabled?}[]`，已选标签不依赖本次结果；不重复选中；清空保留禁选标签；maxVisibleTags 限制常显数量并提供展开/收起，展开区域有界滚动 |
+| RemoteMultiSelect | `query/onQueryChange/value/onValueChange/options`、loading/error/disabled、`maxVisibleTags?` | value 是完整 `{value,label,disabled?}[]`，已选标签不依赖本次结果；再次点击已选候选取消；清空保留禁选标签；maxVisibleTags 限制常显数量并提供展开/收起，展开区域有界滚动 |
 
 日期 min/max 约束原生日历和表单有效性；手动编辑、业务校验及最终提交由宿主验证。原生日期面板位于浏览器 UI，不放在受裁剪的自定义浮层。日历外观、屏幕阅读器和移动 WebView 行为由具体浏览器决定，不声称提供自绘日历。预设必须使用宿主计算好的日期；不得以本机时区代替产品时区。没有“今天”隐式计算。
 
@@ -126,7 +126,7 @@ TreeSelect 使用 tree/treeitem/group，Tab 进入一个可见节点，上下/Ho
 
 首次进入优先已选可见节点；字符前缀定位不改变选择，`*` 展开同层分支，Ctrl/⌘+A 仅切换可见可选节点。外部收起时焦点回可见祖先。节点 `selectable=false` 用于结构分组；readOnly 允许浏览展开而禁止选择。`name` 为选中 key 生成同名 hidden inputs，disabled 不提交。
 
-RemoteMultiSelect 复用 Combobox 的方向键、Enter、Escape 和 IME 防误提交。加载或失败时禁止选择旧候选，已选项仍显示且可移除；默认选中后保持候选列表打开，`closeOnSelect=true` 恢复选完关闭。`clearQueryOnSelect` 默认 false；新增 readOnly/clearable/placeholder/hint/name。空查询 Backspace 删除最后一个可移除标签，标签删除/清空后回输入框；锁定标签保留。name 以同名 hidden inputs 提交受控 keys。单选 Combobox 的默认关闭行为不变。异步取消、序列检查、服务端查询和时区解释全部归宿主。展台有可取消的本地延迟结果演示，但不是生产数据层。
+RemoteMultiSelect 复用 Combobox 的方向键、Enter、Escape 和 IME 防误提交。加载或失败时禁止选择旧候选，已选项仍显示且可移除；默认选中后保持候选列表打开，可再次点击或方向键+Enter取消已选候选；真正禁用/锁定项不可更改。打开多选候选时，输入框Tab进入“完成选择”，Shift+Tab返回输入框；从完成按钮继续Tab关闭候选并沿输入框后的正常控件前进。面板底部“完成选择”只收起候选并归焦输入框，保留查询和值，不提交宿主表单；最终保存由宿主负责。Escape或点击外部也保留草稿。`closeOnSelect=true` 恢复选完关闭。`clearQueryOnSelect` 默认 false；新增 readOnly/clearable/placeholder/hint/name。空查询 Backspace 删除最后一个可移除标签，标签×移除与清空统一归焦输入框并收起候选；输入框内空查询Backspace删除则保留原展开/收起状态，不因归焦改变候选状态。仅重新点击、输入或方向键才展开。没有可移除项（含0项或只有锁定项）时隐藏“清空选择”；锁定标签保留。name 以同名 hidden inputs 提交受控 keys。单选 Combobox 的默认关闭行为不变。异步取消、序列检查、服务端查询和时区解释全部归宿主。展台有可取消的本地延迟结果演示，但不是生产数据层。
 
 分组底色 `--rhine-field-group-bg`；树缩进 `--rhine-tree-indent`；其余输入、选择、错误和焦点继续用既有语义 tokens，字号不低于 12px。