入门
JavaScript JavaScript
可选运行时 pivcss.min.js：主题、Modal、Dropdown、Popover、Tab、Off-canvas、Lightbox、Toast。
源码结构
运行时按组件拆在 site-kit/js/pivcss/，PivCss.register() 注册后 boot() 统一初始化。业务页扩展在 pivcss-site.min.js（不进 npm 开源包）。详见 site-kit/js/pivcss/README.md。
引入
交互组件需要 pivcss.min.js；纯 layout / 排版类可不引。
html
<script src="/assets/pivcss.min.js" defer></script><script src="/assets/pivcss.min.js" defer></script>数据属性
| 类名 | 说明 |
|---|---|
data-pvs-theme-toggle | 明亮 / 暗黑 |
data-pvs-modal-open / close | Modal 开关 |
data-pvs-dropdown-toggle | Dropdown |
data-pvs-popover-toggle | Popover 弹出说明 |
data-pvs-tabs | Tab 面板 |
data-pvs-nav-toggle | Navbar 移动菜单 |
data-pvs-offcanvas-open / close | Off-canvas |
data-pvs-lightbox-open / close | Lightbox |
data-pvs-toast-dismiss | 关闭 Toast |
data-pvs-infinite | 无限滚动哨兵（URL 或 pvs-infinite:load） |
data-pvs-toast-demo | 演示页 Toast 触发（可选） |
键盘
pivcss.min.js 内置：
| 类名 | 说明 |
|---|---|
Esc | 关闭最上层浮层（Dropdown → Popover → Lightbox → Modal → Off-canvas）；Dropdown/Modal/Popover/Lightbox/Off-canvas 关闭后焦点回到触发按钮 |
Dropdown | 触发器 ↓/Enter/Space 打开；菜单内 ↑↓/Home/End；Tab 关闭菜单 |
Popover | 触发器 Enter/Space 切换；Esc 关闭并回焦 |
Modal | Tab 在 .pvs-modal__dialog 内循环（焦点陷阱） |
Lightbox | Tab 在 .pvs-lightbox__stage 内循环；Esc/关闭回触发器 |
Off-canvas | Tab 在抽屉内循环；Esc/关闭回 data-pvs-offcanvas-open 按钮 |
Tab | ←→/↑↓/Home/End 切换；JS 补 role="tablist" 与 aria-selected |
Navbar 子菜单 | 小屏 Enter/Space 展开；Esc 收起（aria-expanded） |
无障碍建议
PivCSS 组件尽量用语义 HTML + ARIA；交互由 pivcss.min.js 辅助时仍须保留可键盘操作：
| 类名 | 说明 |
|---|---|
Modal | role="dialog"、aria-modal="true"、Tab 焦点陷阱、Esc 回到打开按钮；打开时 inert 屏蔽背景 |
Form / Button | :focus-visible 键盘焦点环；鼠标点击控件不显示外环 |
Link / Close / Dropdown 项 | :focus-visible 轮廓或背景高亮 |
Pagination / Breadcrumb / Navbar / Tab | 导航类链接与 Tab 按钮 :focus-visible |
SideNav / List group | 侧栏链接、summary、可点击列表项 :focus-visible |
Accordion / Tree | details summary 与树节点 :focus-visible |
Dropdown | 触发器 aria-expanded；↑↓ 项间导航；Esc 回触发器 |
Popover | Enter/Space 切换；Esc 回触发器 |
Tab | data-pvs-tab 与 data-pvs-panel 配对；当前项 is-active |
Tooltip | 纯 CSS：role="tooltip" + 触发器 aria-describedby（见 Tooltip） |
Navbar 折叠 | aria-controls + aria-expanded 与 data-pvs-nav-toggle |
Off-canvas | 打开时 body.pvs-offcanvas-open 锁滚动；Tab 焦点陷阱；Esc 回触发器 |
完整 WCAG 审计不在本库范围；主题站请自行走查对比度（暗色模式见 暗黑模式）。