组件
43 个无框架组件，全部消费 --token-* 设计变量——切换右上角预设 / 明暗 / 风格可实时预览效果。点任意卡片进入该组件的文档页。
基础7 个
按钮 btn 基础按钮：默认 / primary / danger / sm 四种变体。 面板 panel 白卡片容器（panel-block）+ 标题栏（panel-title），用于承载一组相关内容。 徽章 pill 语义色状态徽章，纪律：仅绿 / 黄 / 红 + 品牌 accent。 标签页 tabs 与 behaviors/tabs 配套的 data 契约分区导航——下面是可点击切换的 live demo。 指标卡 stat stat-grid 自适应网格 + stat-card；数字支持 accent / warn 变体。 表格 table table-wrap 负责窄屏横向滚动；行 hover 高亮，ops 列右对齐放 btn-sm。 轻提示 toast 与 behaviors/toast 配套（toast.css 提供容器与滑入动画）：toast.ok / err / warn。
表单7 个
输入框 input wrapper 式输入族：三档尺寸，前后缀、清除钮、密码切换、错误/禁用态，含多行与搜索框。 选择器 select 触发器与 input 同视觉；弹层支持 ↑↓ 移动、Enter 选中、Esc / 外点关闭，选中值同步隐藏 input。 滑块 slider 透明原生 range 覆盖层驱动填充与滑块；双滑块带选中段与 lo ≤ hi − step 钳制。 标签输入 tag-input Enter / 逗号提交、重复静默清空、空草稿 Backspace 删尾、blur 提交；达到 data-max 边框转 warning 色并拒加。 开关与选择 switch 纯 CSS 状态组件：开关两档尺寸；勾选框三态（未选 / 已选 / 半选）；单选行组排他。 分段选择 segmented 同族四件：分段控件（两档尺寸）、toggle-group、数字步进器、OTP 单元格（输入跳格 / 粘贴分摊）。 上传 upload 点击 / Enter / Space 打开文件选择；拖入高亮，drop 后文件写入 input.files 并派发 change。
浮层5 个
对话框 modal data-modal 契约 + behaviors/modal：焦点陷阱、滚动锁、Esc/遮罩关闭、焦点还原；Sheet 四向贴边滑入。 下拉菜单 dropdown trigger + [data-dropdown-menu] 模板；面板 fixed 定位在 trigger 下方 4px，视口 12px margin 内 clamp，空间不足翻上。 右键菜单 context-menu 全局单例：registerContextMenu(id, items) 注册，[data-context-menu="id"] 命中；支持 header / separator / danger / disabled，触屏长按触发。 浮层 popover computePopoverLayout 纯函数选侧（prefer → 翻对侧 → 取大侧）；openPopover 负责 portal、跟随重算与外点/Esc 关闭。 提示 tooltip 纯 CSS：data-tooltip 文案 + data-tooltip-side 方向；hover 延迟 400ms，键盘 focus-visible 立即出现。
数据18 个
卡片 card 四变体（默认 / elevated / outlined / glass）+ interactive 浮起 + is-selected 双圈选中。 空状态 empty 图标 + 标题 + 描述 + 可选动作按钮。 警示 alert info / success / warning / error 四态警示条，带关闭按钮（演示 JS 点击移除）。 结果页 result 终态展示（success 一例；另有 error / warning / info 变体）。 进度条 progress 默认 6px 轨道 / progress--sm 4px，右侧 tabular-nums 百分比标签。 加载指示 spinner sm 16px / 默认 20px / lg 32px，1s 线性旋转。 骨架屏 skeleton 呼吸脉冲占位块；skeleton--circle 为圆形。 头像 avatar xs 20 / sm 28 / 默认 36 / lg 48；文字兜底或 img 填充（object-fit: cover）。 媒体卡 media-card 2/3 封面（此处用色块代替图片）；hover 上浮 6px + accent 辉光，底部信息条滑出（延迟 80ms）。 评分 rating is-filled 实星 / is-half 半星（warning 色）；另有 rating--sm / rating--lg 尺寸。 键盘键 kbd 按键帽（含 kbd--sm）与行内代码片 code-inline。 列表 list 行间 1px 分隔线 + hover 底色的分隔列表。 折叠面板 accordion 与 behaviors/accordion 配套；本例容器带 data-single（展开一项自动收起其余）。 时间线 timeline 五档语义色圆点 + 连接线，时间右对齐 tabular-nums。 描述列表 desc desc--bordered 格线列表（--desc-cols 控制列数，--desc-span 跨列）。 树形 tree 与 behaviors/tree 配套：三层可折叠 + 叶子单选 + 禁用节点。 轮播 carousel 与 behaviors/carousel 配套：箭头 / 自动圆点 / 循环切换（三张色块幻灯）。 图表 charts 与 behaviors/charts 配套：vbar / hbar / stack / donut / line 五种，DOM 全部由 behavior 渲染。
导航6 个
顶栏 nav 三段式玻璃顶栏（左 / 中 / 右）+ pill 导航钮；data-scroll-reactive 时滚动超过 12px 切 .is-scrolled。 侧栏 sidebar 分组可折叠（grid 0fr↔1fr 动画，chevron 随开合旋转），条目支持图标与 .is-active。 面包屑 breadcrumb 分隔符由 .breadcrumb-sep 的 ::after（›）提供；当前页挂 aria-current="page"。 分页 pagination 纯样式契约（翻页逻辑归消费方）：1 … 4 [5] 6 … 12 静态演示，含禁用态与省略号。 步骤条 steps 三态 finish / process / wait，连接线颜色跟随已完成步骤；横向与垂直共用同一 DOM，仅容器加 .steps--vertical。 布局工具 layout stack / divider / surface / text / grid / center / container / aspect / visually-hidden 全部工具类，无 JS。