组件
64 个无框架组件，全部消费 --token-* 设计变量——切换右上角预设 / 明暗 / 风格可实时预览效果。点任意卡片进入该组件的文档页。
基础9 个
按钮 btn 5 变体（默认 / primary / danger / ghost / link）+ 3 尺寸（sm / 默认 / lg）+ 图标钮 + loading spinner + 错误态 + block 通栏。 面板 panel 白卡片容器（panel-block）+ 标题栏（panel-title），用于承载一组相关内容。增强：副标题（panel-subtitle）、可折叠（--collapsible + .is-collapsed）、强调变体（--accent）、平面变体（--flat）。 徽章 pill 语义色状态徽章，纪律：仅绿 / 黄 / 红 + 品牌 accent。 标签 tag 中性展示标签（区别于 pill 的状态语义）：可选关闭按钮、选中态、图标、五档语义色与三档尺寸。 标签页 tabs 与 behaviors/tabs 配套的 data 契约分区导航——下面是可点击切换的 live demo。 指标卡 stat stat-grid 自适应网格 + stat-card；支持趋势 delta、图标、交互 hover。增强：横向布局（dashboard 顶栏）、迷你 sparkline 槽、SVG 进度环、加载骨架态。 轻提示 toast 与 behaviors/toast 配套（toast.css 提供容器与滑入动画）：toast.ok / err / warn。 工具条 toolbar 横向承载按钮 / 控件的容器。与 segmented 区别——toolbar 是宽松容器（可分组、可分隔、可换行），segmented 是紧贴互斥分段选择。 分栏拖拽 split-pane 与 behaviors/split-pane 配套：可拖拽的分栏容器，支持水平 / 垂直方向，双击分隔条复位 50%，键盘 ←→ ↑↓ 调整。
表单9 个
表单布局 form 字段结构（form / form-field / form-label / form-hint / form-error）+ 裸 form-input / form-textarea + 页面级 banner-ok / banner-err 横幅。与 input.css 的 wrapper 互补：input 处理"单控件外壳"，form 处理"字段→label→hint 的纵向布局"。 输入框 input wrapper 式输入族：三档尺寸，前后缀、清除钮、密码切换、错误/禁用态，含多行与搜索框。增强：字符计数器（maxlength / data-count）、输入掩码（data-mask）、IME 安全、blur 自动 trim。 选择器 select 触发器与 input 同视觉；弹层支持 ↑↓ 移动、Enter 选中、Esc / 外点关闭，选中值同步隐藏 input。增强：data-select-search 可搜索过滤、data-select-multiple 多选（逗号分隔）、data-select-max 上限。 滑块 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。增强（data-upload-list）：自动渲染文件列表，图片缩略图、大小格式化、单文件移除、accept/max-size/max-files 校验。 日期选择 date-picker 与 behaviors/date-picker 配套：点击触发器弹出日历面板，支持月份导航 / 今日 / 清除 / min-max 限制 / 周首日配置。纯 JS 渲染，零依赖。
浮层6 个
对话框 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 立即出现。 命令面板 command-palette 与 behaviors/command-palette 配套：⌘K / Ctrl+K 唤起的命令面板，搜索过滤、↑↓ 导航、Enter 执行、ESC 关闭，常用于编辑器 / 后台快速跳转。
数据展示14 个
卡片 card 四变体（默认 / elevated / outlined / glass）+ interactive 浮起 + is-selected 双圈选中。 空状态 empty 图标 + 标题 + 描述 + 可选动作按钮。类型预设：--error / --404 / --search / --maintenance / --network，自动改图标底色与基调。 头像 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 配套：箭头 / 自动圆点 / 循环切换（三张色块幻灯）。 徽标 badge 角标式徽标：数字计数 / 纯圆点，挂在外层元素的角上（外层需 position: relative）。区别于 pill（行内状态徽章）。 滚动容器 scroll-area 显式带视觉边界的滚动区。全局已有细薄滚动条（base.css），本组件用于强调"可滚动"或限定方向的场景。
表格2 个
图表10 个
图表总览 charts 零依赖纯 SVG/DOM 渲染（无 ECharts）——10 种图表一站式总览。实际使用时请按需安装细分类型（kit/chart-line 等），只引你需要的图表的 CSS + JS。 折线图 chart-line 面积渐变 + 网格 + 数据点的折线趋势图。独立安装：只引这一份 CSS + renderLine。 柱状图 chart-bar renderVBar 垂直柱状 + renderHBar 水平条形两种形态，同一 kit 入口。 饼图 chart-pie 环形分割图（renderDonut）+ 图例百分比。支持多段、自定义色调与格式化。 雷达图 chart-radar N 轴蛛网雷达图（renderRadar），支持多系列叠加对比 + 图例。 热力图 chart-heatmap GitHub 式贡献图热力格（renderHeatmap）：7 行 × N 周，5 档色阶。支持精确日期或便捷数组。 面积图 chart-area 以面积填充为主体的趋势图（renderArea），与折线同族但视觉更厚重。 堆叠条 chart-stack 100% 堆叠条形图（renderStack），展示各部分占比 + 图例。 仪表盘 chart-gauge 环形单值仪表盘（renderGauge），中心显示百分比，适合 KPI 完成率。 迷你趋势 chart-sparkline 无轴迷你趋势线（renderSparkline），嵌入指标卡 / 表格单元格的利器。
反馈7 个
警示 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 为圆形。 复制按钮 copy 与 behaviors/copy 配套：命中 .copy-btn[data-copy] 写入剪贴板，成功后文本变「已复制」1.4s 还原；图标变体加 data-copy-icon 仅切 .done 类。与 toast 的区别——copy 是原地反馈，toast 是全局通知。 通知栈 notification 与 behaviors/notification 配套：工程级持久通知栈——进度通知、Promise confirm、多按钮、hover 暂停+倒计时进度、优先级置顶、已读未读、自定义图标/头像、详情链接、localStorage 持久化、多容器。与 toast（瞬时）/ alert（内嵌）正交。
导航7 个
顶栏 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。 回到顶部 back-top 与 behaviors/back-top 配套：滚动超过阈值（默认 320px）出现的悬浮按钮，点击平滑滚回顶部。支持手写按钮或 autoCreate 全自动。 布局工具 layout stack / divider / surface / text / grid / center / container / aspect / visually-hidden 全部工具类，无 JS。