agentcss 0.0.0-stage → 0.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (274) hide show
  1. package/01-tokens/README.md +236 -0
  2. package/01-tokens/behavior/dismissable.js +132 -0
  3. package/01-tokens/behavior/emit.js +76 -0
  4. package/01-tokens/behavior/focus-return.js +81 -0
  5. package/01-tokens/behavior/roving.js +152 -0
  6. package/01-tokens/behavior/typeahead.js +124 -0
  7. package/01-tokens/focus-ring-demo.html +133 -0
  8. package/01-tokens/focus-ring.css +102 -0
  9. package/01-tokens/page.css +244 -0
  10. package/01-tokens/polyfill.js +116 -0
  11. package/01-tokens/responsive-demo.html +171 -0
  12. package/01-tokens/scrollbar-demo.html +194 -0
  13. package/01-tokens/scrollbar.css +179 -0
  14. package/01-tokens/theme-toggle.js +103 -0
  15. package/01-tokens/tokens.css +972 -0
  16. package/01-tokens/typography.css +156 -0
  17. package/02-primitives/badge/README.md +71 -0
  18. package/02-primitives/badge/badge.css +141 -0
  19. package/02-primitives/badge/demo.html +101 -0
  20. package/02-primitives/button/README.md +99 -0
  21. package/02-primitives/button/button.css +353 -0
  22. package/02-primitives/button/demo.html +200 -0
  23. package/02-primitives/card/README.md +145 -0
  24. package/02-primitives/card/card.css +246 -0
  25. package/02-primitives/card/demo.html +170 -0
  26. package/02-primitives/choice/README.md +161 -0
  27. package/02-primitives/choice/choice.css +395 -0
  28. package/02-primitives/choice/demo.html +277 -0
  29. package/02-primitives/combobox/README.md +79 -0
  30. package/02-primitives/combobox/combobox.css +223 -0
  31. package/02-primitives/combobox/combobox.js +485 -0
  32. package/02-primitives/combobox/demo.html +109 -0
  33. package/02-primitives/date-range/README.md +100 -0
  34. package/02-primitives/date-range/date-range.css +206 -0
  35. package/02-primitives/date-range/date-range.js +301 -0
  36. package/02-primitives/date-range/demo.html +104 -0
  37. package/02-primitives/input/README.md +170 -0
  38. package/02-primitives/input/demo.html +246 -0
  39. package/02-primitives/input/input.css +239 -0
  40. package/02-primitives/popover/README.md +80 -0
  41. package/02-primitives/popover/demo.html +150 -0
  42. package/02-primitives/popover/popover.css +187 -0
  43. package/02-primitives/popover/popover.js +331 -0
  44. package/02-primitives/progress/README.md +82 -0
  45. package/02-primitives/progress/demo.html +154 -0
  46. package/02-primitives/progress/progress.css +172 -0
  47. package/02-primitives/select/README.md +95 -0
  48. package/02-primitives/select/demo.html +121 -0
  49. package/02-primitives/select/select.css +151 -0
  50. package/02-primitives/select/select.js +549 -0
  51. package/02-primitives/separator/README.md +63 -0
  52. package/02-primitives/separator/demo.html +84 -0
  53. package/02-primitives/separator/separator.css +73 -0
  54. package/02-primitives/skeleton/README.md +69 -0
  55. package/02-primitives/skeleton/demo.html +110 -0
  56. package/02-primitives/skeleton/skeleton.css +96 -0
  57. package/02-primitives/switch/README.md +65 -0
  58. package/02-primitives/switch/demo.html +115 -0
  59. package/02-primitives/switch/switch.css +370 -0
  60. package/03-patterns/accordion/README.md +121 -0
  61. package/03-patterns/accordion/accordion.css +453 -0
  62. package/03-patterns/accordion/accordion.js +369 -0
  63. package/03-patterns/accordion/demo.html +223 -0
  64. package/03-patterns/content/README.md +103 -0
  65. package/03-patterns/content/content.css +286 -0
  66. package/03-patterns/content/demo.html +88 -0
  67. package/03-patterns/drawer/README.md +79 -0
  68. package/03-patterns/drawer/demo.html +101 -0
  69. package/03-patterns/drawer/drawer.css +129 -0
  70. package/03-patterns/drawer/drawer.js +258 -0
  71. package/03-patterns/dropdown/README.md +78 -0
  72. package/03-patterns/dropdown/demo.html +101 -0
  73. package/03-patterns/dropdown/dropdown.css +135 -0
  74. package/03-patterns/dropdown/dropdown.js +451 -0
  75. package/03-patterns/form-validation/README.md +147 -0
  76. package/03-patterns/form-validation/demo.html +280 -0
  77. package/03-patterns/form-validation/form-validation.css +263 -0
  78. package/03-patterns/list/README.md +150 -0
  79. package/03-patterns/list/demo.html +225 -0
  80. package/03-patterns/list/flip.js +201 -0
  81. package/03-patterns/list/list.css +162 -0
  82. package/03-patterns/nav/README.md +225 -0
  83. package/03-patterns/nav/demo.html +131 -0
  84. package/03-patterns/nav/nav.css +314 -0
  85. package/03-patterns/nav/nav.js +430 -0
  86. package/03-patterns/nav/toc.js +111 -0
  87. package/03-patterns/overlay/README.md +196 -0
  88. package/03-patterns/overlay/demo.html +241 -0
  89. package/03-patterns/overlay/overlay.css +319 -0
  90. package/03-patterns/overlay/overlay.js +563 -0
  91. package/03-patterns/pagination/README.md +114 -0
  92. package/03-patterns/pagination/demo.html +165 -0
  93. package/03-patterns/pagination/pagination.css +195 -0
  94. package/03-patterns/pagination/pagination.js +395 -0
  95. package/03-patterns/reveal/README.md +91 -0
  96. package/03-patterns/reveal/demo.html +106 -0
  97. package/03-patterns/reveal/reveal.css +93 -0
  98. package/03-patterns/reveal/reveal.js +172 -0
  99. package/03-patterns/states/README.md +141 -0
  100. package/03-patterns/states/demo.html +240 -0
  101. package/03-patterns/states/states.css +252 -0
  102. package/03-patterns/tabs/README.md +84 -0
  103. package/03-patterns/tabs/demo.html +139 -0
  104. package/03-patterns/tabs/tabs.css +172 -0
  105. package/03-patterns/tabs/tabs.js +307 -0
  106. package/03-patterns/tooltip/README.md +96 -0
  107. package/03-patterns/tooltip/demo.html +78 -0
  108. package/03-patterns/tooltip/tooltip.css +89 -0
  109. package/03-patterns/tooltip/tooltip.js +288 -0
  110. package/03-patterns/tree/README.md +94 -0
  111. package/03-patterns/tree/demo.html +138 -0
  112. package/03-patterns/tree/tree.css +113 -0
  113. package/03-patterns/tree/tree.js +456 -0
  114. package/04-recipes/analysis-report/README.md +80 -0
  115. package/04-recipes/analysis-report/analysis-report.css +187 -0
  116. package/04-recipes/analysis-report/demo.html +274 -0
  117. package/04-recipes/data-showcase/README.md +45 -0
  118. package/04-recipes/data-showcase/demo.html +247 -0
  119. package/04-recipes/detail-page/README.md +93 -0
  120. package/04-recipes/detail-page/demo.html +55 -0
  121. package/04-recipes/detail-page/detail-page.css +190 -0
  122. package/04-recipes/detail-page/full.html +60 -0
  123. package/04-recipes/detail-page/null.html +60 -0
  124. package/04-recipes/detail-page/partial.html +60 -0
  125. package/04-recipes/detail-page/verify-skeleton.py +19 -0
  126. package/04-recipes/longform/README.md +93 -0
  127. package/04-recipes/longform/agc-memory.svg +4 -0
  128. package/04-recipes/longform/content.html +610 -0
  129. package/04-recipes/longform/content.md +51 -0
  130. package/04-recipes/longform/longform.html +627 -0
  131. package/04-recipes/report/README.md +176 -0
  132. package/04-recipes/report/demo.html +355 -0
  133. package/04-recipes/report/report.css +364 -0
  134. package/04-recipes/table/README.md +103 -0
  135. package/04-recipes/table/demo.html +455 -0
  136. package/04-recipes/table/table.css +372 -0
  137. package/04-recipes/tierA-tokens.css +189 -0
  138. package/09-assets/README.md +74 -0
  139. package/09-assets/bar/README.md +94 -0
  140. package/09-assets/bar/bar.css +166 -0
  141. package/09-assets/bar/bar.js +320 -0
  142. package/09-assets/bar/demo.html +176 -0
  143. package/09-assets/echarts-adapter/demo.html +192 -0
  144. package/09-assets/echarts-adapter/echarts-adapter.js +277 -0
  145. package/09-assets/model-viewer/README.md +155 -0
  146. package/09-assets/model-viewer/demo.html +105 -0
  147. package/09-assets/model-viewer/model-viewer.css +143 -0
  148. package/09-assets/model-viewer/model-viewer.js +423 -0
  149. package/09-assets/scientific-plot/README.md +94 -0
  150. package/09-assets/scientific-plot/demo.html +252 -0
  151. package/09-assets/scientific-plot/scientific-plot.css +141 -0
  152. package/09-assets/scientific-plot/scientific-plot.js +610 -0
  153. package/09-assets/sparkline/README.md +153 -0
  154. package/09-assets/sparkline/demo.html +163 -0
  155. package/09-assets/sparkline/sparkline.css +158 -0
  156. package/09-assets/sparkline/sparkline.js +508 -0
  157. package/API.md +332 -0
  158. package/CHANGELOG.md +3116 -0
  159. package/CODE_OF_CONDUCT.md +64 -0
  160. package/CONTRIBUTING.md +89 -0
  161. package/ERRORS.md +1658 -0
  162. package/LICENSE +21 -0
  163. package/README.md +491 -2
  164. package/SECURITY.md +72 -0
  165. package/START-HERE.md +164 -0
  166. package/SUPPORT.md +109 -0
  167. package/adapters/presentation/README.md +113 -0
  168. package/adapters/presentation/check.js +101 -0
  169. package/adapters/presentation/deck.schema.json +74 -0
  170. package/adapters/presentation/to-doc.js +138 -0
  171. package/ai/START-HERE.md +104 -0
  172. package/ai/behaviors.json +380 -0
  173. package/ai/behaviors.schema.json +61 -0
  174. package/ai/capabilities.json +56 -0
  175. package/ai/cli.js +387 -0
  176. package/ai/components.json +1944 -0
  177. package/ai/components.meta.json +168 -0
  178. package/ai/components.schema.json +220 -0
  179. package/ai/contract.schema.json +147 -0
  180. package/ai/deprecations.json +55 -0
  181. package/ai/deprecations.schema.json +85 -0
  182. package/ai/motion-policy.json +22 -0
  183. package/ai/patch.js +323 -0
  184. package/ai/patch.schema.json +63 -0
  185. package/ai/profiles.json +92 -0
  186. package/ai/tokens.audience.json +55 -0
  187. package/ai/tokens.audience.schema.json +73 -0
  188. package/ai/tokens.json +762 -0
  189. package/ai/tokens.schema.json +58 -0
  190. package/ai/tokens.tree.json +752 -0
  191. package/ai/tokens.tree.schema.json +56 -0
  192. package/ai/validate.js +383 -0
  193. package/dist/01-tokens/behavior/dismissable.js +60 -0
  194. package/dist/01-tokens/behavior/emit.js +21 -0
  195. package/dist/01-tokens/behavior/focus-return.js +31 -0
  196. package/dist/01-tokens/behavior/roving.js +77 -0
  197. package/dist/01-tokens/behavior/typeahead.js +61 -0
  198. package/dist/01-tokens/focus-ring.css +1 -0
  199. package/dist/01-tokens/page.css +1 -0
  200. package/dist/01-tokens/polyfill.js +78 -0
  201. package/dist/01-tokens/scrollbar.css +1 -0
  202. package/dist/01-tokens/theme-toggle.js +61 -0
  203. package/dist/01-tokens/tokens.css +1 -0
  204. package/dist/01-tokens/typography.css +1 -0
  205. package/dist/02-primitives/badge/badge.css +1 -0
  206. package/dist/02-primitives/button/button.css +1 -0
  207. package/dist/02-primitives/card/card.css +1 -0
  208. package/dist/02-primitives/choice/choice.css +1 -0
  209. package/dist/02-primitives/combobox/combobox.css +1 -0
  210. package/dist/02-primitives/combobox/combobox.js +439 -0
  211. package/dist/02-primitives/date-range/date-range.css +1 -0
  212. package/dist/02-primitives/date-range/date-range.js +267 -0
  213. package/dist/02-primitives/input/input.css +1 -0
  214. package/dist/02-primitives/popover/popover.css +1 -0
  215. package/dist/02-primitives/popover/popover.js +257 -0
  216. package/dist/02-primitives/progress/progress.css +1 -0
  217. package/dist/02-primitives/select/select.css +1 -0
  218. package/dist/02-primitives/select/select.js +449 -0
  219. package/dist/02-primitives/separator/separator.css +1 -0
  220. package/dist/02-primitives/skeleton/skeleton.css +1 -0
  221. package/dist/02-primitives/switch/switch.css +1 -0
  222. package/dist/03-patterns/accordion/accordion.css +1 -0
  223. package/dist/03-patterns/accordion/accordion.js +219 -0
  224. package/dist/03-patterns/content/content.css +1 -0
  225. package/dist/03-patterns/drawer/drawer.css +1 -0
  226. package/dist/03-patterns/drawer/drawer.js +229 -0
  227. package/dist/03-patterns/dropdown/dropdown.css +1 -0
  228. package/dist/03-patterns/dropdown/dropdown.js +365 -0
  229. package/dist/03-patterns/form-validation/form-validation.css +1 -0
  230. package/dist/03-patterns/list/flip.js +117 -0
  231. package/dist/03-patterns/list/list.css +1 -0
  232. package/dist/03-patterns/nav/nav.css +1 -0
  233. package/dist/03-patterns/nav/nav.js +322 -0
  234. package/dist/03-patterns/nav/toc.js +76 -0
  235. package/dist/03-patterns/overlay/overlay.css +1 -0
  236. package/dist/03-patterns/overlay/overlay.js +398 -0
  237. package/dist/03-patterns/pagination/pagination.css +1 -0
  238. package/dist/03-patterns/pagination/pagination.js +273 -0
  239. package/dist/03-patterns/reveal/reveal.css +1 -0
  240. package/dist/03-patterns/reveal/reveal.js +138 -0
  241. package/dist/03-patterns/states/states.css +1 -0
  242. package/dist/03-patterns/tabs/tabs.css +1 -0
  243. package/dist/03-patterns/tabs/tabs.js +242 -0
  244. package/dist/03-patterns/tooltip/tooltip.css +1 -0
  245. package/dist/03-patterns/tooltip/tooltip.js +213 -0
  246. package/dist/03-patterns/tree/tree.css +1 -0
  247. package/dist/03-patterns/tree/tree.js +383 -0
  248. package/dist/04-recipes/analysis-report/analysis-report.css +1 -0
  249. package/dist/04-recipes/detail-page/detail-page.css +1 -0
  250. package/dist/04-recipes/report/report.css +1 -0
  251. package/dist/04-recipes/table/table.css +1 -0
  252. package/dist/04-recipes/tierA-tokens.css +1 -0
  253. package/dist/09-assets/bar/bar.css +1 -0
  254. package/dist/09-assets/bar/bar.js +222 -0
  255. package/dist/09-assets/echarts-adapter/echarts-adapter.js +185 -0
  256. package/dist/09-assets/model-viewer/model-viewer.css +1 -0
  257. package/dist/09-assets/model-viewer/model-viewer.js +320 -0
  258. package/dist/09-assets/scientific-plot/scientific-plot.css +1 -0
  259. package/dist/09-assets/scientific-plot/scientific-plot.js +568 -0
  260. package/dist/09-assets/sparkline/sparkline.css +1 -0
  261. package/dist/09-assets/sparkline/sparkline.js +265 -0
  262. package/dist/COSTS.md +56 -0
  263. package/docs/AI-CONTRACT.md +197 -0
  264. package/docs/BACKLOG.md +127 -0
  265. package/docs/BENCHMARK.md +252 -0
  266. package/docs/GUIDANCE.md +154 -0
  267. package/docs/INVARIANT.md +372 -0
  268. package/docs/LAYER-BASELINE.md +158 -0
  269. package/docs/RELEASING.md +275 -0
  270. package/docs/RFC-THEME-SCOPE.md +141 -0
  271. package/docs/ROADMAP.md +182 -0
  272. package/index.html +82 -0
  273. package/package.json +107 -4
  274. package/types/index.d.ts +310 -0
package/03-patterns/pagination/demo.html ADDED
@@ -0,0 +1,165 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6
+ <meta name="color-scheme" content="light dark">
7
+ <title>分页 ·· frontend-lib</title>
8
+ <link rel="icon" href="data:,">
9
+ <link rel="stylesheet" href="../../01-tokens/tokens.css">
10
+ <link rel="stylesheet" href="../../01-tokens/typography.css">
11
+ <link rel="stylesheet" href="../../01-tokens/focus-ring.css">
12
+ <link rel="stylesheet" href="../../01-tokens/scrollbar.css">
13
+ <link rel="stylesheet" href="../../01-tokens/page.css">
14
+ <link rel="stylesheet" href="pagination.css">
15
+ <style>
16
+ table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
17
+ th, td { text-align: left; padding: var(--sp-2) var(--sp-3);
18
+ border-bottom: 1px solid var(--border-decor); }
19
+ th { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 500; }
20
+ .ok { color: var(--success); }
21
+ .no { color: var(--danger); }
22
+ .demo-box { background: var(--surface); border: 1px solid var(--border-decor);
23
+ border-radius: var(--r-md); padding: var(--sp-4); }
24
+ .rows { margin: 0 0 var(--sp-4); }
25
+ .row { display: flex; justify-content: space-between; gap: var(--sp-3);
26
+ padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-decor);
27
+ font-size: var(--fs-sm); }
28
+ .row:last-child { border-bottom: 0; }
29
+ .row .n { font-family: var(--mono); color: var(--text-tertiary); }
30
+ .row .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
31
+ .live-echo { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--text-tertiary); }
32
+ .live-echo b { color: var(--text-secondary); font-family: var(--mono); }
33
+ </style>
34
+ </head>
35
+ <body class="page page">
36
+ <main class="wrap">
37
+
38
+ <h1>分页</h1>
39
+ <p class="lede">
40
+ <code></code>。依据 <strong>W3C APG</strong> +
41
+ <strong>USWDS</strong> + <strong>MDN</strong> + Component Gallery + Mironsoft（5 个来源口径一致）。
42
+ </p>
43
+
44
+ <h2 class="rule-top">1 · 基本用法</h2>
45
+ <p class="note">
46
+ 共 <b>248 条</b>，每页 <b>20 条</b> ⇒ <b>13 页</b>。
47
+ <br><b>键盘试试</b>：Tab 聚焦到分页后，<code>←</code> <code>→</code> 翻页，
48
+ <code>Home</code> <code>End</code> 跳首末。
49
+ </p>
50
+
51
+ <div class="demo-box">
52
+ <div class="rows" id="rows" tabindex="-1" role="region" aria-label="当前页数据"></div>
53
+
54
+ <nav class="pagination" aria-label="搜索结果分页"
55
+ aria-controls="rows"
56
+ data-pagination data-total="248" data-page-size="20" data-page="1"
57
+ data-pg-scroll-target="rows">
58
+ <ul class="pagination__list" data-pg-list></ul>
59
+ <p class="pagination__status" data-pg-status></p>
60
+ <!-- 🔴 live 区必须常驻 DOM，只改 textContent（依据 USWDS / Mironsoft）-->
61
+ <p class="pagination__live" data-pg-live aria-live="polite"></p>
62
+ </nav>
63
+
64
+ <p class="live-echo">
65
+ 🔴 读屏播报区（<code>aria-live</code>）的内容：
66
+ <b id="echo">（翻页后会更新）</b>
67
+ </p>
68
+ </div>
69
+
70
+ <h2 class="rule-top">2 · 结构：六条硬要求</h2>
71
+ <table>
72
+ <tr><th>要求</th><th>为什么</th></tr>
73
+ <tr><td>包在 <code>&lt;nav aria-label&gt;</code> 里</td>
74
+ <td>页面常有多个 nav（主导航/面包屑/分页），
75
+ 没有 <code>aria-label</code> 读屏器分不清</td></tr>
76
+ <tr><td>用 <code>&lt;ul&gt;+&lt;li&gt;</code>，不用松散的 <code>&lt;a&gt;</code></td>
77
+ <td>列表能传达"共几项""当前在第几项"</td></tr>
78
+ <tr><td>当前页 <code>aria-current="page"</code></td>
79
+ <td><span class="no">⛔ 不用 <code>aria-selected</code></span>
80
+ —— 那是给 tab/option/row 用的</td></tr>
81
+ <tr><td>页码 <code>aria-label="第 4 页"</code></td>
82
+ <td>孤零零的数字脱离上下文没有意义</td></tr>
83
+ <tr><td>首/末页用 <code>disabled</code></td>
84
+ <td><span class="no">看着能点却不工作是最糟的</span></td></tr>
85
+ <tr><td>翻页有 <code>aria-live="polite"</code></td>
86
+ <td>只改文字变化的话，视觉变化对读屏器是<b>静默</b>的</td></tr>
87
+ </table>
88
+ <p class="note">
89
+ ⛔ <b>常见错误</b>：把 <code>role="navigation"</code> 直接放在 <code>&lt;ul&gt;</code> 上
90
+ —— 那会<b>覆盖 ul 的列表语义</b>（Component Gallery 明确点出）。
91
+ </p>
92
+
93
+ <h2 class="rule-top">3 · 当前页仍然是按钮（不是纯文字）</h2>
94
+ <p class="note">
95
+ USWDS 的说明听起来反直觉：<b>当前页也要是链接/按钮</b>，
96
+ 只是用 <code>aria-current</code> 标记 + 视觉高亮。
97
+ <br>理由：读屏器无论用户是<b>浏览</b>还是<b>Tab 焦点</b>，都能播报当前页。
98
+ </p>
99
+
100
+ <h2 class="rule-top">4 · 槽位固定 7 个（USWDS 的规定）</h2>
101
+ <p class="note">
102
+ 永远显示：首页 · 当前页 · 最后一页 · 当前页两侧各一页。
103
+ 有遗漏就显示省略号，<b>且总数固定</b> —— 翻页时按钮位置不跳。
104
+ <br>试试拖到第 5 页、第 11 页看槽位怎么变。
105
+ </p>
106
+
107
+ <h2 class="rule-top">5 · 命中区</h2>
108
+ <p class="note">
109
+ 每个按钮 <b>44×44px</b>，走 <code>--sz-touch</code> 令牌
110
+ （<b>WCAG 2.5.5 Level AAA</b> 的要求；AA 级的 2.5.8 只要 24px，本库按 AAA 做）。
111
+ <br>⚠️ 槽位间距只用 <code>2px</code> —— USWDS 明确说
112
+ <b>过大的水平间距会让视力/行动受限的用户"扫不到"而跳过元素</b>。
113
+ </p>
114
+
115
+ <h2 class="rule-top">6 · 窄屏</h2>
116
+ <p class="note">
117
+ 页码窗口会换行，状态文本另起一行
118
+ ⇒ <b>不产生横向溢出</b>。
119
+ </p>
120
+
121
+ </main>
122
+
123
+ <script src="pagination.js"></script>
124
+ <script>
125
+ // 演示数据（假的，只是为了看翻页效果）
126
+ var ALL = [];
127
+ for (var i = 1; i <= 248; i++) {
128
+ ALL.push({ id: i, name: '记录 ' + i, amount: (i * 37 % 900 + 60) });
129
+ }
130
+
131
+ var node = document.querySelector('[data-pagination]');
132
+ var pg = Pagination.create(node);
133
+ var echo = document.getElementById('echo');
134
+
135
+ function load(page) {
136
+ var start = (page - 1) * 20;
137
+ var slice = ALL.slice(start, start + 20);
138
+ var box = document.getElementById('rows');
139
+ box.innerHTML = '';
140
+ for (var i = 0; i < Math.min(8, slice.length); i++) {
141
+ var r = slice[i];
142
+ var d = document.createElement('div');
143
+ d.className = 'row';
144
+ d.innerHTML = '<span class="n">#' + r.id + '</span><span>' + r.name +
145
+ '</span><span class="v">' + r.amount.toFixed(2) + '</span>';
146
+ box.appendChild(d);
147
+ }
148
+ // 模拟读屏播报（真实场景由 aria-live 自动播）
149
+ echo.textContent = document.querySelector('[data-pg-live]').textContent;
150
+ }
151
+
152
+ /* 🔴 翻页后把焦点放到**数据区**（不是分页按钮）——
153
+ 键盘用户的自然下一步是"继续看数据/再翻页"，
154
+ 焦点留在分页按钮上会让他们以为"没换页"。 */
155
+ pg.onChange = function (page) {
156
+ load(page);
157
+ var box = document.getElementById('rows');
158
+ if (box && document.activeElement && document.activeElement !== document.body) {
159
+ box.focus();
160
+ }
161
+ };
162
+ load(pg.page);
163
+ </script>
164
+ </body>
165
+ </html>
package/03-patterns/pagination/pagination.css ADDED
@@ -0,0 +1,195 @@
1
+ /* ============================================================================
2
+ pagination.css — 分页
3
+ ----------------------------------------------------------------------------
4
+ 🔴 判据：WCAG 2.5.5 Target Size + 键盘 ←→/Home/End 可达。
5
+ ============================================================================
6
+ ⭐ 依据（5 个来源口径一致：W3C APG / MDN / USWDS / Component Gallery / Mironsoft）
7
+ ----------------------------------------------------------------------------
8
+ 结构（**这几条是硬要求，不是"最佳实践"**）：
9
+
10
+ 1. **必须包在 `<nav>` 里**，且 `aria-label` **唯一**
11
+ （一个页面常常有多个 nav —— 主导航、面包屑、分页 ——
12
+ 没有 aria-label，读屏用户分不清哪个是哪个）
13
+ ⚠️ **不要**把 `role="navigation"` 直接放在 `<ul>` 上
14
+ —— 那会**覆盖 ul 的列表语义**（Component Gallery 明确点出这是常见错误）
15
+
16
+ 2. 用 **`<ul>` + `<li>`**，不要用松散的 `<a>`
17
+ （列表能传达"共几项"和"当前在第几项"）
18
+
19
+ 3. 当前页用 **`aria-current="page"`**
20
+ （⚠️ **不要**用 `aria-selected` —— 那是给 tab/option/row 用的）
21
+
22
+ 4. 每个页码的 `aria-label` 要**说人话**："第 4 页"而不是"4"
23
+ （脱离上下文时，孤零零的数字没有意义）
24
+
25
+ 5. 上一页/下一页要有**明确的 aria-label**（"上一页"，不是只有箭头图标）
26
+ 首/末页时用 **`disabled`** 标记（不是"留在 DOM 里但不工作"）
27
+
28
+ 6. ⭐ **客户端翻页必须有 `aria-live="polite"`**
29
+ 且**元素要常驻 DOM**，只改 `textContent`
30
+ （插入新元素的话很多读屏器**播报不出来**）
31
+ ⚠️ 这是 USWDS 与 Mironsoft 都强调的一条
32
+
33
+ 7. 避免过大的水平间距
34
+ （视力/行动受限的用户可能因为"扫不到"而跳过元素）
35
+ ========================================================================== */
36
+
37
+ .pagination {
38
+ display: flex;
39
+ align-items: center;
40
+ gap: var(--sp-2);
41
+ flex-wrap: wrap; /* 窄屏换行，而不是横向溢出 */
42
+ }
43
+
44
+ .pagination__list {
45
+ display: flex;
46
+ align-items: center;
47
+ gap: 2px; /* 🔴 刻意小 —— 依据第 7 条 */
48
+ /* 🔴 必须。7 个页码 × 44px 命中区窄屏放不下一行（393px 下溢出 7px）。
49
+ 父级 .pagination 早写了 flex-wrap，列表自己没写 ⇒ 父级换行、子级照样溢出。 */
50
+ flex-wrap: wrap;
51
+ list-style: none;
52
+ margin: 0;
53
+ padding: 0;
54
+ }
55
+
56
+ .pagination__item { margin: 0; }
57
+
58
+ .pagination__link {
59
+ display: inline-flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ min-width: var(--sz-touch); /* WCAG 2.5.5 命中区 */
63
+ min-height: var(--sz-touch);
64
+ padding: 0 var(--sp-2);
65
+ font-size: var(--fs-sm);
66
+ font-family: var(--mono);
67
+ font-variant-numeric: tabular-nums; /* 数字等宽，小数点才能对齐 */
68
+ color: var(--text-primary);
69
+ text-decoration: none;
70
+ /* 🔴 评审指出「不高级」。真因（实测）：
71
+ 普通页 `background: transparent` + `border: transparent`
72
+ ⇒ 整排只剩**裸文字**，没有"按钮"的实体感。
73
+ 通行做法（USWDS / GitHub / Stripe 一致）：
74
+ **普通页就给轻边框 + 极淡底**，当前页才实心。
75
+ ⇒ 三层视觉层级由此建立：禁用 < 普通 < 当前。 */
76
+ background: var(--surface);
77
+ border: 1px solid var(--border-decor);
78
+ border-radius: var(--r-sm);
79
+ cursor: pointer;
80
+ -webkit-tap-highlight-color: transparent; /* iOS 点击高亮（见 tokens.css）*/
81
+ transition: background var(--dur-fast) var(--ease-out),
82
+ border-color var(--dur-fast) var(--ease-out);
83
+ }
84
+
85
+ .pagination__link:hover:not([aria-disabled="true"]):not([disabled]) {
86
+ background: var(--surface-sunken);
87
+ }
88
+
89
+ .pagination__link:focus-visible {
90
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
91
+ outline-offset: var(--focus-ring-offset);
92
+ }
93
+
94
+ /* --- 禁用（首/末页） --- */
95
+ .pagination__link[aria-disabled="true"],
96
+ .pagination__link:disabled {
97
+ /* 🔴 禁用态用"退到背景里"而不是纯透明 —— 半透明会让人以为还能点 */
98
+ color: var(--text-tertiary);
99
+ background: var(--surface-sunken);
100
+ border-color: transparent;
101
+ cursor: not-allowed;
102
+ }
103
+
104
+ /* --- 当前页 ---
105
+ 🔴 **放在「禁用」规则之后**（实测修 bug）：
106
+ 原来当前页同时带 `aria-current="page"` 与 `aria-disabled="true"`，
107
+ 而禁用规则排在其后 ⇒ **把底色覆盖成透明**，
108
+ 实测 `background = rgba(0,0,0,0)` ⇒ 当前页根本没有底色。
109
+ ⚠️ 这与"引用未定义变量"是同一类陷阱：**静默失效，不报错**。
110
+ ⇒ 现在顺序保证当前页的底色一定生效。 */
111
+ /* 🔴 特异度说明：当前页同时带 aria-current 与 aria-disabled，
112
+ 与禁用规则的选择器**特异性完全相同**（都是 0,2,0）
113
+ ⇒ 后写的赢 ⇒ 必须用 `:not()` 排除，才不会互相覆盖。 */
114
+ .pagination__link[aria-current="page"]:not([disabled]) {
115
+ /* 🔴 依据 USWDS：当前页**仍然是按钮**（不是纯文字）——
116
+ 读屏器无论用户是"浏览"还是"Tab 焦点"都能播报当前页。 */
117
+ color: var(--text-on-accent);
118
+ background: var(--accent);
119
+ border-color: var(--accent);
120
+ font-weight: 600;
121
+ box-shadow: var(--lift-sm); /* 轻微浮起 ⇒ "被选中"的实体感 */
122
+ cursor: default;
123
+ opacity: 1; /* 🔴 必须显式覆盖禁用态的 opacity:.5 */
124
+ z-index: var(--z-raised);
125
+ }
126
+
127
+ /* --- 省略号（overflow indicator） --- */
128
+ .pagination__ellipsis {
129
+ display: inline-flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ min-width: var(--sz-touch);
133
+ min-height: var(--sz-touch);
134
+ color: var(--text-tertiary);
135
+ font-size: var(--fs-sm);
136
+ user-select: none;
137
+ }
138
+
139
+ /* --- 状态文本（"共 12 页"之类） --- */
140
+ .pagination__status {
141
+ margin-inline-start: auto;
142
+ font-size: var(--fs-xs);
143
+ color: var(--text-secondary);
144
+ font-variant-numeric: tabular-nums;
145
+ }
146
+
147
+ .pagination__status:empty { display: none; }
148
+
149
+ /* --- 读屏专用：🔴 必须用 clip 技巧，不能用 display:none --- */
150
+ .pagination__sr {
151
+ position: absolute;
152
+ width: 1px; height: 1px;
153
+ padding: 0; margin: -1px;
154
+ overflow: hidden;
155
+ clip: rect(0, 0, 0, 0);
156
+ white-space: nowrap;
157
+ border: 0;
158
+ }
159
+
160
+ /* 🔴 客户端翻页的播报区 —— 依据第 6 条
161
+ ⚠️ 必须**常驻 DOM**，只更新 textContent。
162
+ 用 JS 新插入这个元素，很多读屏器**不会播报**。 */
163
+ .pagination__live {
164
+ position: absolute;
165
+ width: 1px; height: 1px;
166
+ padding: 0; margin: -1px;
167
+ overflow: hidden;
168
+ clip: rect(0, 0, 0, 0);
169
+ white-space: nowrap;
170
+ border: 0;
171
+ }
172
+
173
+ /* --- 窄屏：状态文本换行 --- */
174
+ @media (max-width: 480px) {
175
+ .pagination__status { margin-inline-start: 0; width: 100%; }
176
+ }
177
+
178
+ /* 🔴 尊重 reduced-motion（见 charter 07） */
179
+ @media (prefers-reduced-motion: reduce) {
180
+ .pagination__link { transition: none; }
181
+ }
182
+
183
+ /* ============================================================================
184
+ 🔴 触屏 hover 门控（hover-gate 门禁要求）
185
+ --------------------------------------------------------------------------
186
+ 为什么必须做：`:hover` 在**触屏设备上会"粘住"** ——
187
+ 点一下按钮，hover 状态一直保持，要点别处才消失
188
+ （移动端根本没有"移开鼠标"这个动作）。
189
+
190
+ 正确做法：只对**真能悬停的设备**（鼠标 / 触控板）生效。
191
+ 依据：Emil Kowalski 的设计规则（ui-benchmark-redesign 技能收录）。
192
+ ========================================================================== */
193
+ @media (hover: hover) and (pointer: fine) {
194
+ .pagination__link:hover:not([aria-disabled="true"]):not([disabled]) { background: var(--surface-sunken); }
195
+ }