badge
ui-component用于标注类型、状态或类别的小型标签。
Chiralkit / UI 套件
ChiralUI 规范
探索构成 ChiralUI 的契约：共享令牌、基础组件、模式、对映体、功能与组合。
环层 0
令牌
供所有 UI 模块使用的共享视觉值。直接查看 @chiralkit/tokens 中的 CSS 自定义属性及其当前值。
检查一个 token 层
选择原子层
不带上下文的原始值，例如颜色调色板、间距和字体比例。它们定义有哪些值，而非这些值承担什么角色。
表面、文本和品牌等语义角色，将原始值映射到界面意图。主题可以重新映射这些角色，同时保持原始调色板不变。
组件和状态值描述控件在默认、悬停、焦点、激活和禁用状态下的响应方式，其基础含义继承自语义 token。
碳原子，之后的每个环层都由它构建而成。它的六个质子刻着 0：原始 token 层。六个中子刻着 1：语义层。六个电子也刻着 1：交互层。两个 1 通过形状以及原子下方的托盘区分，托盘上的引用依次为 原始 → 语义 → 交互。主题只会重新分配语义角色；原始值保持不变。
浏览所有生成的 token 声明
颜色与焦点
| CSS 自定义属性 | 源值 |
|---|---|
--ds-color-primary | var(--ds-semantic-color-brand) |
--ds-color-primary-hover | var(--ds-semantic-color-brand-hover) |
--ds-color-secondary | var(--ds-semantic-color-secondary) |
--ds-color-secondary-hover | var(--ds-semantic-color-secondary-hover) |
--ds-color-text-on-primary | var(--ds-semantic-color-text-on-primary) |
--ds-color-text-on-secondary | var(--ds-semantic-color-text-on-secondary) |
--ds-color-focus | var(--ds-interactive-button-focus) |
间距
| CSS 自定义属性 | 源值 |
|---|---|
--ds-spacing-xs | var(--ds-primitive-spacing-xs) |
--ds-spacing-sm | var(--ds-primitive-spacing-sm) |
--ds-spacing-md | var(--ds-primitive-spacing-md) |
--ds-spacing-lg | var(--ds-primitive-spacing-lg) |
--ds-spacing-xl | var(--ds-primitive-spacing-xl) |
圆角
| CSS 自定义属性 | 源值 |
|---|---|
--ds-radius-sm | var(--ds-primitive-radius-sm) |
--ds-radius-md | var(--ds-primitive-radius-md) |
字体
| CSS 自定义属性 | 源值 |
|---|---|
--ds-font-family | var(--ds-primitive-font-family) |
--ds-font-size-md | var(--ds-primitive-font-size-md) |
环层 1a
基础组件
由组件契约定义的独立 UI 构建单元，包括属性、事件、插槽、状态和无障碍行为。
检查图形结构
选择图形部件
来自环层 0 的中心碳原子。它连接氨基和羧基，并携带该残基的两个氢原子。
氮原子及其连接的氢构成甘氨酸的氨基端。在多肽链中，这一端通过肽键连接前一个残基。
羰基碳和两个氧原子构成甘氨酸的羧基端。它与下一个氨基结合时释放水并形成肽键。
甘氨酸分子：一个与环层 0 中相同的碳原子，与氮、氧、氢原子键合成一个氨基酸。
button
ui-component设计系统的基础按钮——提供 primary/secondary 变体及 disabled 状态。
card
ui-component带边框的圆角表面，用于组合内容——无 props，单一 default slot，无 ARIA role。使用者在内部自行组织标题结构。
checkbox
ui-component原生 <input type="checkbox">，封装为设计系统的自定义元素——checked/indeterminate props 会转发到 DOM，dsChange 发出新的布尔状态。保留浏览器默认的 checkbox 渲染，以维持辅助技术（AT）和 forced-colors 模式下的行为。
code-block
ui-component带语言标签和内置复制按钮的代码块。
dialog
ui-component原生 <dialog> 元素，封装为设计系统的自定义元素——showModal() 借助浏览器平台提供模态状态机（焦点陷阱、按 Escape 关闭、背景 inert、焦点归还），而非从零构建的 ARIA。Props：open、label|labelledBy、describedBy。事件：dsOpen、dsClose。
input
ui-component原生 <input>，封装为设计系统的自定义元素——支持 text/email/password/search/tel/url/number 类型，用 invalid+describedBy 表示错误状态，并在每次按键时发出携带当前值的 dsInput。
loader
ui-component由 chiralkit 标志的 path 构成的不确定加载指示器——两个镜像对称的半边围绕圆环中心摆动。
select
ui-component原生 <select>，封装为设计系统的自定义元素——选项通过 prop 传入，发出携带新值的 dsChange。
textarea
ui-component原生 <textarea>，封装为设计系统的自定义元素——带 rows prop 的多行文本框，用 invalid+describedBy 表示错误状态，并在每次按键时触发 dsInput 事件。
环层 1b
模式
由基础组件构建的可复用交互模式，具有明确的状态、事件和无障碍契约。
检查图形结构
选择图形部件
每个残基都是一个甘氨酸单元。重复这些单元，就把环层 1a 的分子延伸成更长的多肽主链。
肽键连接一个残基的羧基碳与下一个残基的氮原子。每形成一个连接都会释放水分子。
多肽链：来自环层 1a 的五个甘氨酸分子通过肽键首尾相连，每形成一个肽键就脱去一分子水。
tabs
ui-componentWAI-ARIA Tabs 模式（从零构建）——仅包含 tablist，支持 roving tabindex、方向键导航、Home/End 和自动激活。使用者在 light DOM 中自行渲染 tabpanel，并在 dsChange 时切换其可见性。设为 shadow:false，以便 tabpanel 通过 aria-labelledby 引用各个 tab 的 id。
tooltip
ui-componentWAI-ARIA Tooltip 模式（从零构建）——将使用者的第一个 Element 子节点包装为触发器，hover 时打开（带 openDelay），focus 时立即打开；按 Escape 关闭，焦点仍留在触发器上；在 blur 或真正的 mouseleave 时关闭。设为 shadow:false，以便触发器上的 aria-describedby 能引用 tooltip 的 id。
环层 2
对映体
UI 对映体共享结构和一个明确命名的镜像轴，在同一系统的相同基底上承担相反功能。仅有变体关系或视觉相似性并不足以构成对映体。
检查图形结构
选择图形部件
生命蛋白质使用的 L 型。它围绕 α 碳的原子排列形成特定的手性结构。
该平面将一种排列反射为另一种。旋转无法让两种结构重合，因此它们互为对映体。
L-丙氨酸的镜像形式。原子和键相同，但排列方向相反。
两个丙氨酸分子，各自是把环层 1a 的甘氨酸中的一个氢替换为甲基而得。被替换的是哪一个氢，决定了它的手性：L 与 D 隔着两者之间的平面互为镜像，任何旋转都无法让二者完全重合。
figure-canvas
ui-component可复用的图形视口，支持缩放、检查控件和可选的水平拖动旋转。
环层 3
功能
功能层将较低环层的契约组合为面向用户的完整能力。
检查图形结构
选择图形部件
膜中的 c 环与中央 γ 轴一同旋转。质子流经 F₀ 驱动转动，并将运动耦合到催化头部。
α₃β₃ 头部围绕旋转轴保持静止。β 亚基利用两者的相对运动催化 ATP 形成。
膜固定 F₀ 转子，并隔开为旋转提供能量的质子梯度。
ATP 合酶，一种完全由 L 手性蛋白质链（环层 2）构成的分子马达。膜中的一圈亚基不断旋转，带动头部内的中央柄转动，而侧柄让头部保持不动。
尚未注册 UI 功能模块。此环层描述功能层，不将未注册的示例列为现有模块。
环层 5
组合
页面与应用组合整合较低环层的契约。布局契约定义区域、必需区域、变体和令牌使用情况。
检查图形结构
选择图形部件
细胞核将遗传物质保存在由膜包围的区室中，此处以带孔的球体呈现。
线粒体具有褶皱的内膜，并容纳环层 3 的 ATP 合酶，将质子梯度与 ATP 生成相耦合。
柔性的脂质边界包围细胞，并将内部与外部环境隔开。
细胞器周围的流体内部含有游离分子和链，它们由前面分子环层中的结构组成。
细胞剖面图，由其下各环层的一切构成：一个细胞核、来自环层 1a 至 2 的游离蛋白质链和氨基酸，以及一个线粒体，其内膜中嵌着环层 3 的分子马达。
app-shell
ui-layout与框架无关的应用布局几何结构，在必需的主区域周围提供可选的主侧栏和次侧栏。
headerprimarymainsecondaryfooter阶段 1 / 6