原语（统一抽象层）
所有 31 个组件共享同一套抽象：(1) 6 个交互基元 class（HTML 显式组合 API）+
(2) --icen-* 原语 token 层（CSS 自洽消费）。风格 profile 只需覆盖少数变量，
全局 31 个组件自动换肤。
6 个交互基元composition API
用法（任选其一）：
<button class="btn pressable focus-ring"> <!-- 类组合，体积最小 --><button class="btn"> <!-- 自洽，CSS 引用 --icen-* 同一原语 -->下方演示直接挂原语 class（不带任何组件 class），可见其承载的最小可识别交互：
.pressable 可按压基元：hover 顶部高光、focus-visible 双层环、active 下陷、aria-busy 减淡、disabled 50% 透明。 .control 表单控件 wrapper：hover 边框过渡、focus-within 内嵌阴影 + accent 3px 光晕、:invalid 错误态自动接管。 .field 字段容器：label / hint / error 三段式纵向布局，配合 .control 使用。 .lift 可交互卡片浮起：hover / focus-within 上移 1px + accent 边 + card 阴影。 hover 我浮起
.surface-elevated 静态提升表面：surface 底 + line-soft 边 + card 阴影 + md 圆角，无需 hover 反馈。 静态浮起面板
.focus-ring 显式聚焦环工具类：Tab 键聚焦时 ring-2 + offset-1 等价环。 --icen-* 原语 token变量层
所有组件消费这组原语变量；切换风格 profile（如 .style-retro）只覆盖这里的少数变量即可全局生效。
| 变量 | 说明 | 值（modern 风格） |
|---|---|---|
--icen-ring | 聚焦环（focus-visible） | 0 0 0 2px bg, 0 0 0 4px accent 50% |
--icen-ring-soft | 柔和聚焦环（嵌套元素） | 0 0 0 3px accent 16% |
--icen-hover-border | 悬停边框过渡 | accent 30% + line |
--icen-disabled-opacity | 禁用透明度 | 0.5 |
--icen-press | 按下形变 | translateY(1px) scale(.985) |
--icen-control-focus-shadow | 表单控件聚焦阴影 | inset + 3px accent 14% |
--icen-tx-fast | 快速过渡 | 150ms ease-out |
--icen-tx-normal | 标准过渡 | 200ms ease-out |
--icen-tx-slow | 慢速过渡 | 300ms ease-out |
retro profile 覆盖示例：
.style-retro { --icen-ring: 2px solid var(--token-accent); --icen-press: translate(2px, 2px); --icen-hover-border: var(--token-accent); /* 全部 31 个组件自动获得像素风聚焦环 + 按下位移 */}组件契约约定
- 状态命名
.is-loading/.is-error/.is-disabled/.is-open/.is-selected/.is-focused/.is-active- aria 等价
[aria-busy=true]↔is-loading、[data-invalid=true]↔is-error、[aria-disabled=true]/[data-disabled]↔is-disabled、[aria-expanded=true]↔is-open、[aria-selected=true]/[aria-current=page]↔is-active- 颜色纪律
- 仅
--token-success/-warning/-error/-info/-accent五个语义色 - 间距 / 字号 / 控件高度
--density-space-*/--density-font-size-*/--density-input-height-*- 圆角 / 阴影
--radius-*/--token-shadow-*- z-index
--z-base/raised/sticky/chrome/toast/banner/dialog/popover/tooltip