Surface

Bootstrap 2.3.2 被动视觉表面，语义与交互事实由消费者拥有。

bootstrap-2-3-2-surface-root 是 draft 工作区 Surface 原子。它保留一个内容槽、消费视觉输入，不变成 Button、链接、代码面板、预览面板或页面专用组件。Bootstrap 2.3.2 通过 asSurfaceRoot() 继承 Base Surface 契约，再由家族反馈 Rule 实现呈现。

这是常规、无折射的 Surface 投射。默认 outline 不透明，transparent 与 scrim 是显式的普通绘制变体；不代表完整家族覆盖，也不承诺兼容上游同名组件 API。这个被动原子由 Proto UI 编写，不宣称复刻 Bootstrap 2.3.2 组件 API。

Web Components React Vue Vue 2

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。

Demo 将明确的被动状态传给真实包原型。focus、press 样本是视觉事实，不是可点击或可聚焦的控件。外层间距与内部内容 padding 属于示例，不通过添加事件处理把 Surface 冒充 Button。

使用 Surface

import * as React from 'react';
import { createReactAdapter } from '@proto.ui/adapter-react';
import { surfaceRoot } from '@proto.ui/prototypes-bootstrap-2-3-2/surface';

const Surface = createReactAdapter(React)(surfaceRoot);

export function Summary() {
  return (
    <Surface variant="muted" radius="md" border="none">
      <div style={{ padding: '1rem' }}>Saved locally</div>
    </Surface>
  );
}

/surface subpath 与包根导出 surfaceRoot；SurfaceRootProps、SurfaceRootExposes 描述共用契约。Base 还导出用于家族编写的 asSurfaceRoot 和 SurfaceRootAsHookContract。不要在交互 owner 内加入 Surface 后，再给它另一份 role、tab stop 或激活处理。使用原生 anchor 时，导航、键盘行为、target、download 仍归该 anchor。

输入

Prop	Values	Default
`variant`	`transparent`, `outline`, `secondary`, `muted`, `accent`, `solid`, `scrim`	`outline`
`radius`	`default`, `none`, `sm`, `md`, `lg`, `xl`, `full`	`default`
`border`	`all`, `bottom`, `none`	`all`
`elevation`	`none`, `raised`	`none`
`transitionState`	`closed`, `entering`, `entered`, `leaving`	`entered`
`fade`	boolean	`false`
`hovered`	boolean	`false`
`focusVisible`	boolean	`false`
`pressed`	boolean	`false`
`current`	boolean	`false`

hovered、focusVisible、pressed、current 都是现有语义 owner 提供的事实；Surface 不自行检测指针、焦点、键盘、选择或导航状态。它没有 exposed state、event、method、无障碍 role 或 native property。current 是呈现输入，不是 aria-current 实现；需要真实 Button 时应组合受治理的 Button 协议。

移除输入后恢复默认值。secondary 选择家族的次级前景/背景，不通过 elevation 推断变体。默认圆角和绘制由各家族决定，共用 prop 词汇不等于外观一致。内容与布局继续归消费者；当带风格的 Text 子项需要保留外层 Surface 前景时，使用 tone="inherit"。

观察已有 Transition

fade 显式启用家族拥有的 opacity 呈现。在带风格投射中，fade=true 时 closed、leaving 对应 opacity 0，entering、entered 对应 opacity 1。transitionState 是既有 Transition owner 提供的事实；Surface 不创建第二个时钟、调度策略、阶段事件或完成信号。fade=false 时，阶段输入不会启用这组 opacity 映射。

Web 的 surface-fade token 消费 --pui-surface-transition-duration，默认 0ms。Web composition 可通过该变量传入既有 owner 解析后的 duration，并负责验证毫秒数有限且非负。不存在通用 220ms 默认值，也没有 Surface duration prop。reduced-motion 与起始 opacity 属于有界 Web 样式行为，不证明原生目标支持动态 CSS 变量。

scrim 选择家族的常规遮暗绘制，不增加材质采样、模糊或折射。opacity 0 不代表禁用、inert、卸载或移除语义 owner：交互门控、presence 与焦点仍归既有 Dialog/Transition 等语义 owner，Surface 不接管这些责任。

Host 与 Compiler 边界

Surface 经由普通公开 Prototype、Props、Feedback 路径工作。有界符合性 slice 覆盖 Web Components、React、Vue 3、Vue 2。从源码构建的 CLI 为这四种 facade target 注册 <family>-surface，Web 样式编译器消费真实家族 token；gpui facade 生成为明确不支持。其 Web Adapter 与 compiler 证据应分别阅读：显示 Web 投射不等于完整原生支持或任意 Prototype AOT。Surface 不隐藏宿主特定材质后端、截图捕获、导航服务或代码 renderer。不支持的目标或样式诊断应明确保留，不能当成等价输出。

依据

P-BOOTSTRAP-2-3-2-SURFACE与 T-SURFACE-0001 治理此 draft slice。源码：packages/prototypes/bootstrap-2-3-2/src/surface/.