agentcss 0.24.0 → 0.24.1
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.
- package/01-tokens/focus-ring-demo.html +1 -1
- package/01-tokens/page.css +32 -0
- package/01-tokens/responsive-demo.html +1 -1
- package/01-tokens/scrollbar-demo.html +1 -1
- package/02-primitives/badge/demo.html +1 -1
- package/02-primitives/button/demo.html +1 -1
- package/02-primitives/card/demo.html +1 -1
- package/02-primitives/choice/demo.html +1 -1
- package/02-primitives/combobox/demo.html +1 -1
- package/02-primitives/date-range/demo.html +1 -1
- package/02-primitives/delta/demo.html +1 -1
- package/02-primitives/input/demo.html +1 -1
- package/02-primitives/metric/demo.html +1 -1
- package/02-primitives/popover/demo.html +1 -1
- package/02-primitives/progress/demo.html +1 -1
- package/02-primitives/select/demo.html +1 -1
- package/02-primitives/separator/demo.html +1 -1
- package/02-primitives/skeleton/demo.html +1 -1
- package/02-primitives/switch/demo.html +1 -1
- package/02-primitives/timeline/demo.html +1 -1
- package/03-patterns/accordion/demo.html +1 -1
- package/03-patterns/content/demo.html +1 -1
- package/03-patterns/drawer/demo.html +1 -1
- package/03-patterns/dropdown/demo.html +1 -1
- package/03-patterns/form-validation/demo.html +1 -1
- package/03-patterns/list/demo.html +1 -1
- package/03-patterns/nav/demo.html +1 -1
- package/03-patterns/overlay/demo.html +1 -1
- package/03-patterns/pagination/demo.html +1 -1
- package/03-patterns/states/demo.html +1 -1
- package/03-patterns/tabs/demo.html +1 -1
- package/03-patterns/tooltip/demo.html +1 -1
- package/03-patterns/tree/demo.html +1 -1
- package/04-recipes/app-shell/demo.html +6 -2
- package/09-assets/bar/demo.html +1 -1
- package/09-assets/echarts-adapter/demo.html +1 -1
- package/09-assets/model-viewer/demo.html +1 -1
- package/09-assets/sparkline/demo.html +1 -1
- package/CHANGELOG.md +59 -0
- package/ai/components.json +1 -1
- package/dist/01-tokens/page.css +1 -1
- package/dist/COSTS.md +1 -1
- package/docs/ACCESSIBILITY.md +1 -1
- package/index.html +1 -1
- package/llms-full.txt +1 -1
- package/package.json +1 -1
package/01-tokens/page.css
CHANGED
|
@@ -197,6 +197,38 @@
|
|
|
197
197
|
border-radius: var(--r-xs);
|
|
198
198
|
}
|
|
199
199
|
|
|
200
|
+
/* ============================================================================
|
|
201
|
+
4b. 代码块的兜底：任何 <pre> 自己横向滚，不许把页面撑宽
|
|
202
|
+
----------------------------------------------------------------------------
|
|
203
|
+
🔴 为什么需要（0.24.1 实测，不是推演）
|
|
204
|
+
在 `.page` 环境里放一条 220 字符的长行：
|
|
205
|
+
|
|
206
|
+
裸 <pre> doc=2048 / vw=375 ❌ 撑破
|
|
207
|
+
<pre class="code"> doc=2211 / vw=375 ❌ 撑破 （没有 guide.css 时）
|
|
208
|
+
<div class="prose"><pre> doc=2048 / vw=375 ❌ 撑破 （没有 content.css 时）
|
|
209
|
+
|
|
210
|
+
三种都是 `overflow-x: visible`、`white-space: pre`
|
|
211
|
+
⇒ 长行直接顶到页面上，整页横向滚。
|
|
212
|
+
|
|
213
|
+
现有 84 个页面之所以没红，是因为每个 pre 恰好都另有来源：
|
|
214
|
+
`.prose > pre`（content.css）、`pre.code`（guide.css）。**但那是巧合，不是契约**
|
|
215
|
+
—— 使用者照 page.css 写一页文档、贴一段长代码，就会踩到。
|
|
216
|
+
|
|
217
|
+
🔴 为什么用 `:where(.page)` 而不是 `.page`
|
|
218
|
+
特异性压到 0,0,1（只算 `pre`）⇒ 任何带类的规则都能盖掉它：
|
|
219
|
+
`.prose > pre` (0,1,1) 赢
|
|
220
|
+
`pre.code` (0,1,1) 赢
|
|
221
|
+
这条的定位是**兜底**，不是"给所有 pre 定样式"。写成 `.page pre`（0,1,1）
|
|
222
|
+
会与上面两条**同权重**，胜负取决于加载顺序 —— 那就成了一个随时会翻的脸。
|
|
223
|
+
|
|
224
|
+
⚠️ 只写 `overflow-x`，不写 padding / background / font：
|
|
225
|
+
那些是"代码块长什么样"，属于 content.css / guide.css 的决定。
|
|
226
|
+
这里只管"它不许撑破页面"。加了别的属性就会改动已有页面的观感。
|
|
227
|
+
========================================================================= */
|
|
228
|
+
:where(.page) pre {
|
|
229
|
+
overflow-x: auto;
|
|
230
|
+
}
|
|
231
|
+
|
|
200
232
|
/* ============================================================================
|
|
201
233
|
5. 演示块 `.box`
|
|
202
234
|
----------------------------------------------------------------------------
|
|
@@ -26,7 +26,7 @@ p.small { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.6
|
|
|
26
26
|
var(--text-tertiary) 0 1px, transparent 1px 8px); opacity: .5; margin-bottom: var(--sp-2); }
|
|
27
27
|
</style>
|
|
28
28
|
</head>
|
|
29
|
-
<body class="page
|
|
29
|
+
<body class="page">
|
|
30
30
|
<main class="wrap">
|
|
31
31
|
|
|
32
32
|
<h1>card · hover 无布局跳动</h1>
|
|
@@ -44,7 +44,7 @@ th { font-weight: 600; }
|
|
|
44
44
|
.pp-stage .popover__title { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
|
|
45
45
|
</style>
|
|
46
46
|
</head>
|
|
47
|
-
<body class="page
|
|
47
|
+
<body class="page">
|
|
48
48
|
<main class="wrap">
|
|
49
49
|
<!-- 🔴 0.8.9：axe 报 landmark-one-main（moderate）—— 本页原本没有任何 landmark 容器。
|
|
50
50
|
加 <main> 是语义正确且不改布局的做法（<main> 默认不产生 box）。
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
.pr-note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-secondary); }
|
|
28
28
|
</style>
|
|
29
29
|
</head>
|
|
30
|
-
<body class="page
|
|
30
|
+
<body class="page">
|
|
31
31
|
<main class="wrap">
|
|
32
32
|
<!-- 🔴 0.8.9：axe 报 landmark-one-main（moderate）—— 本页原本没有任何 landmark 容器。
|
|
33
33
|
加 <main> 是语义正确且不改布局的做法（<main> 默认不产生 box）。
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
.sk-box { display: flex; flex-direction: column; gap: var(--sp-2); }
|
|
29
29
|
</style>
|
|
30
30
|
</head>
|
|
31
|
-
<body class="page
|
|
31
|
+
<body class="page">
|
|
32
32
|
<main class="wrap">
|
|
33
33
|
<!-- 🔴 0.8.9：axe 报 landmark-one-main（moderate）—— 本页原本没有任何 landmark 容器。
|
|
34
34
|
加 <main> 是语义正确且不改布局的做法（<main> 默认不产生 box）。
|
|
@@ -40,7 +40,7 @@ p.small { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.6
|
|
|
40
40
|
由 05-audit/css-imports.py 报出（它抓到过这个真问题） -->
|
|
41
41
|
<link rel="stylesheet" href="../../02-primitives/button/button.css">
|
|
42
42
|
</head>
|
|
43
|
-
<body class="page
|
|
43
|
+
<body class="page">
|
|
44
44
|
<main class="wrap">
|
|
45
45
|
|
|
46
46
|
<h1>表单校验</h1>
|
|
@@ -151,8 +151,12 @@
|
|
|
151
151
|
</header>
|
|
152
152
|
<nav class="shell__side" aria-label="主导航（图标）">
|
|
153
153
|
<!-- 品牌在 72px 里放不下名字 ⇒ 只留标记，名字视觉隐藏（不是删掉）。
|
|
154
|
-
标记与文字分成两段是**契约要求**，见 README「图标态的父级元素」。
|
|
155
|
-
|
|
154
|
+
标记与文字分成两段是**契约要求**，见 README「图标态的父级元素」。
|
|
155
|
+
⚠️ `title` 在这里是**必要**的：rail 下只剩一个 20px 的图形，
|
|
156
|
+
鼠标用户没有别的线索知道它是什么。它只负责悬停提示 ——
|
|
157
|
+
名字仍然来自 `.shell__brand-text`（title 会兜出名字，
|
|
158
|
+
但 H2 判的是"文字是否被 display:none 掉"，不靠 title 兜）。 -->
|
|
159
|
+
<a class="shell__brand" href="#" title="金标准 · 财务台">
|
|
156
160
|
<svg class="shell__brand-mark" viewBox="0 0 16 16" width="20" height="20" fill="none"
|
|
157
161
|
stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.6l5.4 3.1v6.6L8 14.4 2.6 11.3V4.7z"/></svg>
|
|
158
162
|
<span class="shell__brand-text">金标准 · 财务台</span>
|
package/09-assets/bar/demo.html
CHANGED
package/CHANGELOG.md
CHANGED
|
@@ -16,6 +16,65 @@
|
|
|
16
16
|
|
|
17
17
|
（无）
|
|
18
18
|
|
|
19
|
+
## [0.24.1] - 2026-10-31
|
|
20
|
+
|
|
21
|
+
### `page.css` 补上 `<pre>` 的兜底（实测出来的，不是推演）
|
|
22
|
+
|
|
23
|
+
在 `.page` 环境里放一条 220 字符的长行，实测三种写法：
|
|
24
|
+
|
|
25
|
+
| 写法 | 结果 |
|
|
26
|
+
|---|---|
|
|
27
|
+
| 裸 `<pre>` | `doc=2048 / vw=375` ❌ 撑破 |
|
|
28
|
+
| `<pre class="code">`（没有 guide.css 时） | `doc=2211 / vw=375` ❌ 撑破 |
|
|
29
|
+
| `<div class="prose"><pre>`（没有 content.css 时） | `doc=2048 / vw=375` ❌ 撑破 |
|
|
30
|
+
|
|
31
|
+
三种都是 `overflow-x: visible` + `white-space: pre` ⇒ 长行顶到页面上，整页横向滚。
|
|
32
|
+
|
|
33
|
+
现有 84 个页面之所以没红，是因为每个 `<pre>` 恰好都另有来源
|
|
34
|
+
（`.prose > pre` 在 content.css、`pre.code` 在 guide.css）—— **那是巧合，不是契约**。
|
|
35
|
+
使用者照 `page.css` 写一页文档、贴一段长代码就会踩到。
|
|
36
|
+
|
|
37
|
+
修法只有两行，关键是选择器：
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
:where(.page) pre { overflow-x: auto; }
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
`:where()` 把特异性压到 `0,0,1`（只算 `pre`），任何带类的规则都能盖掉它 ——
|
|
44
|
+
`.prose > pre` 与 `pre.code` 都是 `0,1,1`，稳赢。
|
|
45
|
+
写成 `.page pre`（同权重）则会变成"胜负取决于加载顺序"的随时会翻的脸。
|
|
46
|
+
|
|
47
|
+
只写 `overflow-x`，**不写** padding / background / font：那些是"代码块长什么样"，
|
|
48
|
+
属于 content.css / guide.css 的决定；这里只管"它不许撑破页面"。
|
|
49
|
+
实测确认：`.prose > pre` 的 `padding 16.3px` / 灰底 / `3px` 竖条 / 12px mono 一点没变，
|
|
50
|
+
裸 `<pre>` 也没有因此获得任何"代码块外观"。
|
|
51
|
+
|
|
52
|
+
### 图标态的品牌补上悬停提示
|
|
53
|
+
|
|
54
|
+
rail 下品牌只剩一个 20px 图形，鼠标用户没有别的线索知道它是什么
|
|
55
|
+
⇒ `demo` 的 `.shell__brand` 加 `title="金标准 · 财务台"`。
|
|
56
|
+
|
|
57
|
+
⚠️ 它只负责悬停提示。名字仍然来自 `.shell__brand-text` —— `title` 会**兜出**名字，
|
|
58
|
+
但 `H2` 判的是"文字是否被 `display: none` 掉"，不靠 `title` 兜，所以这条改动
|
|
59
|
+
不会掩盖"把 brand-text 改成 display:none"的破坏。
|
|
60
|
+
|
|
61
|
+
### 工程卫生：38 个页面写成了 `<body class="page page">`
|
|
62
|
+
|
|
63
|
+
`class` 里同一个类写了两遍。浏览器匹配一次，渲染无差异，但它是手误的化石，
|
|
64
|
+
而且会让人怀疑"是不是有两套 page 类"。
|
|
65
|
+
|
|
66
|
+
全库排查：**没有任何生成器产生它**（`gen-docs.py` 里是 `class="page"`），
|
|
67
|
+
也没有 CSS 选择器依赖双类（`.page.page` 零命中）、没有 JS 读 `className` 精确值
|
|
68
|
+
—— 是纯手写遗留。38 个文件各 1 处，已全部改回 `class="page"`。
|
|
69
|
+
|
|
70
|
+
### 版本同步
|
|
71
|
+
|
|
72
|
+
这一版三处改动都**不改渲染**（`overflow-x` 对已有页面本就是 `auto`；
|
|
73
|
+
`title` 不渲染；重复类名去掉后匹配结果不变），只改内容哈希。
|
|
74
|
+
所以两平台视觉基线重录后应当逐字节不变 —— 变的只有 `_stamp.json` 里的指纹。
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
19
78
|
## [0.24.0] - 2026-10-31
|
|
20
79
|
|
|
21
80
|
### 图标态：把"文档说的"和"示例做的"合回一份
|
package/ai/components.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"generatedBy": "05-audit/gen-ai-contract.py",
|
|
4
|
-
"libraryVersion": "0.24.
|
|
4
|
+
"libraryVersion": "0.24.1",
|
|
5
5
|
"$comment": "机器可读的组件契约。slots = BEM 元素名（在本库里元素名就是插槽名），states.enum = 组件会在 DOM 上写出的 data-* 取值，states.legacyClass = 仍未收敛到 data 属性的历史状态类（INVARIANT I-8 未达标）。",
|
|
6
6
|
"maturityCriteria": {
|
|
7
7
|
"alpha": "缺 demo.html 或缺 05-audit 下的专属门禁 ⇒ 还没被机器验证过，不要用",
|
package/dist/01-tokens/page.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.page {margin:0;min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--text-primary);font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-base);-webkit-text-size-adjust:100%;padding-block:calc(env(safe-area-inset-top, 0px) + var(--sp-6)) calc(env(safe-area-inset-bottom, 0px) + var(--sp-6));padding-inline:max(env(safe-area-inset-right, 0px), var(--sp-4)) max(env(safe-area-inset-left, 0px), var(--sp-4));}.page *, .page *::before, .page *::after {box-sizing:border-box;}.page .wrap {margin-inline:auto;max-width:min(var(--measure-page), 100%);}.page .wrap--prose {max-width:min(var(--measure-prose), 100%);}.page h1 {font-family:var(--sans);font-size:var(--fs-2xl);font-weight:500;letter-spacing:var(--tracking-title);line-height:var(--lh-tight);margin:0 0 var(--sp-3);max-width:var(--measure-title);}.page h2 {font-size:var(--fs-lg);margin:var(--sp-7) 0 var(--sp-3);}.page .rule-top {border-top:1px solid var(--border-decor);padding-top:var(--sp-4);}.page .rule-bottom {border-bottom:1px solid var(--border-decor);padding-bottom:var(--sp-2);margin-bottom:var(--sp-4);}.page code {font-family:var(--mono);font-size:0.9em;background:var(--surface-sunken);padding:1px 4px;border-radius:var(--r-xs);}.page .box {background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-md);padding:var(--sp-5);}.page .box.bad {background:var(--surface-sunken);}.page .cmp {display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--sp-4);}.page .cmp--wide-first {grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);}@media (max-width:640px) {.page .cmp, .page .cmp--wide-first, .page .cmp--clip {grid-template-columns:minmax(0, 1fr);}}.page .cmp__pane {padding:var(--sp-4);border:1px solid var(--border-decor);border-radius:var(--r-md);background:var(--surface-sunken);min-width:0;}.page .cmp--clip .cmp__pane {overflow:hidden;}.page .cmp__pane > h3 {margin:0 0 var(--sp-3);font-size:var(--fs-sm);font-weight:500;}.page .cmp__bad > h3 {color:var(--danger);}.page .cmp__good > h3 {color:var(--success);}.page .cmp__why {margin:var(--sp-3) 0 0;font-size:var(--fs-xs);line-height:1.6;color:var(--text-secondary);}
|
|
1
|
+
.page {margin:0;min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--text-primary);font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-base);-webkit-text-size-adjust:100%;padding-block:calc(env(safe-area-inset-top, 0px) + var(--sp-6)) calc(env(safe-area-inset-bottom, 0px) + var(--sp-6));padding-inline:max(env(safe-area-inset-right, 0px), var(--sp-4)) max(env(safe-area-inset-left, 0px), var(--sp-4));}.page *, .page *::before, .page *::after {box-sizing:border-box;}.page .wrap {margin-inline:auto;max-width:min(var(--measure-page), 100%);}.page .wrap--prose {max-width:min(var(--measure-prose), 100%);}.page h1 {font-family:var(--sans);font-size:var(--fs-2xl);font-weight:500;letter-spacing:var(--tracking-title);line-height:var(--lh-tight);margin:0 0 var(--sp-3);max-width:var(--measure-title);}.page h2 {font-size:var(--fs-lg);margin:var(--sp-7) 0 var(--sp-3);}.page .rule-top {border-top:1px solid var(--border-decor);padding-top:var(--sp-4);}.page .rule-bottom {border-bottom:1px solid var(--border-decor);padding-bottom:var(--sp-2);margin-bottom:var(--sp-4);}.page code {font-family:var(--mono);font-size:0.9em;background:var(--surface-sunken);padding:1px 4px;border-radius:var(--r-xs);}:where(.page) pre {overflow-x:auto;}.page .box {background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-md);padding:var(--sp-5);}.page .box.bad {background:var(--surface-sunken);}.page .cmp {display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--sp-4);}.page .cmp--wide-first {grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);}@media (max-width:640px) {.page .cmp, .page .cmp--wide-first, .page .cmp--clip {grid-template-columns:minmax(0, 1fr);}}.page .cmp__pane {padding:var(--sp-4);border:1px solid var(--border-decor);border-radius:var(--r-md);background:var(--surface-sunken);min-width:0;}.page .cmp--clip .cmp__pane {overflow:hidden;}.page .cmp__pane > h3 {margin:0 0 var(--sp-3);font-size:var(--fs-sm);font-weight:500;}.page .cmp__bad > h3 {color:var(--danger);}.page .cmp__good > h3 {color:var(--success);}.page .cmp__why {margin:var(--sp-3) 0 0;font-size:var(--fs-xs);line-height:1.6;color:var(--text-secondary);}
|
package/dist/COSTS.md
CHANGED
package/docs/ACCESSIBILITY.md
CHANGED
package/index.html
CHANGED
package/llms-full.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# agentcss — full reference (one file)
|
|
2
2
|
|
|
3
|
-
> Generated from `ai/components.json` + `ai/pitfalls*.json` + `ai/behaviors.json` at version **0.24.
|
|
3
|
+
> Generated from `ai/components.json` + `ai/pitfalls*.json` + `ai/behaviors.json` at version **0.24.1**.
|
|
4
4
|
> Do not edit by hand: run `python 05-audit/gen-llms.py` (freshness is gated).
|
|
5
5
|
> Short version: `llms.txt`. Machine contract: `ai/*.json`.
|
|
6
6
|
|