@godxjp/ui 25.2.0 → 25.3.0
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/dist/components/data-entry/calendar.js +1 -1
- package/dist/components/data-entry/date-picker.js +2 -0
- package/dist/contracts/measurement.json +1 -1
- package/dist/props/components/data-entry.prop.d.ts +10 -2
- package/dist/styles/control.css +10 -6
- package/dist/tokens/components/control.css +2 -0
- package/docs/DEVELOPMENT.md +2 -2
- package/docs/FRAME-A11Y-CI.md +39 -28
- package/docs/README.md +1 -1
- package/docs/data-entry/calendar.tsx +46 -0
- package/docs/data-entry/date-picker.tsx +30 -0
- package/package.json +2 -2
|
@@ -49,6 +49,7 @@ function DatePicker(props) {
|
|
|
49
49
|
toDate,
|
|
50
50
|
disabledDate,
|
|
51
51
|
cellRender,
|
|
52
|
+
bordered,
|
|
52
53
|
allowClear,
|
|
53
54
|
triggerLabel,
|
|
54
55
|
format: formatProp,
|
|
@@ -381,6 +382,7 @@ function DatePicker(props) {
|
|
|
381
382
|
onMonthChange: setViewAnchor,
|
|
382
383
|
locale: dayPickerLocale,
|
|
383
384
|
cellRender,
|
|
385
|
+
bordered,
|
|
384
386
|
showWeekNumber: showWeek,
|
|
385
387
|
startMonth: minimum,
|
|
386
388
|
endMonth: maximum,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.3.0",
|
|
4
4
|
"targetSize": {
|
|
5
5
|
"standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
|
|
6
6
|
"min": 24,
|
|
@@ -725,8 +725,10 @@ export type CalendarProp = DayPickerProps & CalendarFooterProp & {
|
|
|
725
725
|
* What a month grid needs is the ruling BETWEEN days, so a week reads as a row of cells the
|
|
726
726
|
* eye can track across.
|
|
727
727
|
*
|
|
728
|
-
* Default `
|
|
729
|
-
*
|
|
728
|
+
* Default `true` — the owner's call, from a real screen: with no ruling the month read as a
|
|
729
|
+
* cloud of numbers and was "very hard to read". Pass `bordered={false}` for the floating-button
|
|
730
|
+
* look. The line colour is `--calendar-grid-border-color` (default `--input`, the ≥3:1 tier;
|
|
731
|
+
* the decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
|
|
730
732
|
*/
|
|
731
733
|
bordered?: boolean;
|
|
732
734
|
/** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
|
|
@@ -861,6 +863,12 @@ export type DatePickerBaseProp = FieldA11yProps & PickerChromeProp & {
|
|
|
861
863
|
toDate?: Date;
|
|
862
864
|
/** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
|
|
863
865
|
cellRender?: CalendarCellRenderProp;
|
|
866
|
+
/**
|
|
867
|
+
* Rule the day grid in the panel — forwarded to `Calendar bordered`, and defaults to `true`
|
|
868
|
+
* like it. Applies to the DAY grid (`picker="date"` / `"week"`, single, `multiple` and `range`);
|
|
869
|
+
* the month / quarter / year period grid has no day cells to rule and ignores it.
|
|
870
|
+
*/
|
|
871
|
+
bordered?: boolean;
|
|
864
872
|
/**
|
|
865
873
|
* Forbid individual dates by predicate — the rule `minDate`/`maxDate` cannot express, because a
|
|
866
874
|
* business calendar is rarely one contiguous range: 土日, a closed accounting period, a 祝日, a
|
package/dist/styles/control.css
CHANGED
|
@@ -2180,13 +2180,13 @@
|
|
|
2180
2180
|
|
|
2181
2181
|
.ui-calendar[data-bordered="true"] .ui-calendar-day,
|
|
2182
2182
|
.ui-calendar[data-bordered="true"] .ui-calendar-weekday {
|
|
2183
|
-
border-inline-start: 1px solid hsl(var(--
|
|
2184
|
-
border-block-start: 1px solid hsl(var(--
|
|
2183
|
+
border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
|
|
2184
|
+
border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
|
|
2185
2185
|
}
|
|
2186
2186
|
|
|
2187
2187
|
.ui-calendar[data-bordered="true"] .ui-calendar-week,
|
|
2188
2188
|
.ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
|
|
2189
|
-
border-inline-end: 1px solid hsl(var(--
|
|
2189
|
+
border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
|
|
2190
2190
|
}
|
|
2191
2191
|
|
|
2192
2192
|
.ui-calendar[data-bordered="true"] .ui-calendar-weekday {
|
|
@@ -2198,7 +2198,7 @@
|
|
|
2198
2198
|
}
|
|
2199
2199
|
|
|
2200
2200
|
.ui-calendar[data-bordered="true"] .ui-calendar-grid {
|
|
2201
|
-
border-block-end: 1px solid hsl(var(--
|
|
2201
|
+
border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
|
|
2202
2202
|
}
|
|
2203
2203
|
|
|
2204
2204
|
.ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
|
|
@@ -2219,8 +2219,12 @@
|
|
|
2219
2219
|
|
|
2220
2220
|
.ui-calendar[data-bordered="true"] .ui-calendar-week-number,
|
|
2221
2221
|
.ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
|
|
2222
|
-
border-inline-start: 1px solid hsl(var(--
|
|
2223
|
-
border-block-start: 1px solid hsl(var(--
|
|
2222
|
+
border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
|
|
2223
|
+
border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
|
|
2224
|
+
}
|
|
2225
|
+
|
|
2226
|
+
.ui-calendar[data-bordered="true"] .ui-calendar-day {
|
|
2227
|
+
inline-size: var(--control-height);
|
|
2224
2228
|
}
|
|
2225
2229
|
|
|
2226
2230
|
.ui-calendar[data-bordered="true"] .ui-calendar-day-button {
|
package/docs/DEVELOPMENT.md
CHANGED
|
@@ -122,7 +122,7 @@ pnpm test # FULL suite — CI only, never from an agent loop
|
|
|
122
122
|
pnpm preview:build # integration test: examples + docs must build — at most once, pre-PR
|
|
123
123
|
pnpm audit # godxjp-ui-audit — 0 errors for touched files
|
|
124
124
|
pnpm check:mcp-sync # MCP registry ↔ library export drift guard
|
|
125
|
-
pnpm check:frame-axe # WCAG 2.2 AA over every frame —
|
|
125
|
+
pnpm check:frame-axe # WCAG 2.2 AA over every frame — LOCAL ONLY, never in CI (FRAME-A11Y-CI.md)
|
|
126
126
|
```
|
|
127
127
|
|
|
128
128
|
`pnpm verify` and `pnpm verify:release` run these together (verify:release also builds) — **both include the full suite, so both belong to CI.** Locally, run them at most once immediately before opening a PR, never inside an edit loop and never while other agents are working on the same machine. It needs `pnpm exec playwright install chromium` once locally; see [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) for how to run/scope it, read the evidence, and regenerate its baseline after an accessibility fix.
|
|
@@ -190,5 +190,5 @@ npm versions are immutable, so you can never "fix" a bad published version in pl
|
|
|
190
190
|
- [README](../README.md) — overview, component groups, consumer setup.
|
|
191
191
|
- [CONSUMER-RULES.md](./CONSUMER-RULES.md) — the ten rules every consumer follows (the audit enforces them).
|
|
192
192
|
- `docs/TOKENS.md`, `docs/SPACING.md`, `docs/PROPS-VOCABULARY.md`, `docs/PROPS-REGISTRY.md`.
|
|
193
|
-
- [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) — per-frame axe a11y + geometry + coverage
|
|
193
|
+
- [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) — per-frame axe a11y (**local only, never in CI**) + geometry + coverage gates.
|
|
194
194
|
- **`godx-ui-component-placement`** skill — decide whether a component belongs here.
|
package/docs/FRAME-A11Y-CI.md
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
# Per-frame accessibility
|
|
1
|
+
# Per-frame accessibility — `check:frame-axe` (LOCAL ONLY)
|
|
2
2
|
|
|
3
|
-
One ruler, run in the repository that owns the CSS
|
|
3
|
+
One ruler, run in the repository that owns the CSS — **on a developer machine, never in CI/CD.**
|
|
4
|
+
|
|
5
|
+
> **Owner's standing rule (2026-09-17): axe must not run in any GitHub Actions workflow.** It is a
|
|
6
|
+
> local measurement only. gh#643 had wired it into `ci-browser.yml` (four shards on every merge) and
|
|
7
|
+
> `ci-browser-full.yml` (nightly); both jobs are removed. `check:gate-coverage` lists
|
|
8
|
+
> `check:frame-axe` as EXEMPT with this reason, so its absence from the workflows is a declaration,
|
|
9
|
+
> not a dead gate. **Do not re-wire it into a workflow.** The file keeps its historical name so
|
|
10
|
+
> existing links still resolve.
|
|
4
11
|
|
|
5
12
|
## Why it exists (gh#643)
|
|
6
13
|
|
|
@@ -234,41 +241,45 @@ which changes what `color-contrast` resolves a background to). Two sweeps after
|
|
|
234
241
|
|
|
235
242
|
## Cost
|
|
236
243
|
|
|
237
|
-
| |
|
|
238
|
-
| ------------------------------------- |
|
|
239
|
-
| full sweep | **
|
|
240
|
-
| sequential | ~55 min — the three viewport passes run concurrently, which is the whole difference
|
|
241
|
-
| showcase only (`--scope=showcase`) | 30s
|
|
242
|
-
|
|
|
244
|
+
| | |
|
|
245
|
+
| ------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
246
|
+
| full sweep | **2m14s** locally, with the overlay scope — 215 routes × 3 viewports |
|
|
247
|
+
| sequential | ~55 min — the three viewport passes run concurrently, which is the whole difference |
|
|
248
|
+
| showcase only (`--scope=showcase`) | ~30s |
|
|
249
|
+
| one route (`pnpm check:frame-axe /isolate/…`) | seconds — the loop to use while fixing |
|
|
243
250
|
|
|
244
251
|
The overlay pass is bounded by declaration: only the 7 declaring routes pay it (21 extra scans plus
|
|
245
|
-
their open steps), and no `/showcase/**` route declares one, so `--scope=showcase`
|
|
246
|
-
|
|
252
|
+
their open steps), and no `/showcase/**` route declares one, so `--scope=showcase` is unchanged by it.
|
|
253
|
+
|
|
254
|
+
## Where it runs: your machine
|
|
247
255
|
|
|
248
|
-
|
|
249
|
-
names, which costs nothing here because none of them is in `REQUIRED_CI_CHECK_RUNS`.
|
|
256
|
+
**Never in CI/CD** — see the rule at the top. The procedure:
|
|
250
257
|
|
|
251
|
-
|
|
258
|
+
```bash
|
|
259
|
+
pnpm build && pnpm preview:build # the STATIC preview — not `pnpm dev` / `pnpm preview`
|
|
260
|
+
pnpm check:frame-axe # full sweep; must end with 0 baselined entries, 0 nodes
|
|
261
|
+
pnpm check:frame-axe /isolate/<frame> # one route, while fixing
|
|
262
|
+
```
|
|
252
263
|
|
|
253
|
-
|
|
264
|
+
Run it before a PR that touches markup, ARIA, focus behaviour or colour, and commit what it writes —
|
|
265
|
+
`audit-evidence/frame-axe/results.json` and, only when a full sweep genuinely changed it,
|
|
266
|
+
`frame-axe-baseline.json`.
|
|
254
267
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
268
|
+
**The static preview, not the dev server.** Against the vite dev server the sweep produces 1–3
|
|
269
|
+
spurious `route-did-not-render` / `axe-did-not-run` rows on different routes each run — 30s
|
|
270
|
+
`page.goto` timeouts while three viewport contexts hammer an on-demand-transforming server. Each is
|
|
271
|
+
clean alone. The static build does not do this.
|
|
259
272
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
repository already reserves for wide matrices.
|
|
273
|
+
**`--shard=i/n` and `--scope=` are for splitting a LOCAL run**, e.g. across two terminals. Two guards
|
|
274
|
+
hold for both: `--update` refuses under either (a partial run would rewrite the ledger from a fraction
|
|
275
|
+
of the frames and delete the rest), and the "no longer fires" report is suppressed on a partial run
|
|
276
|
+
(every other partition's rows would read as fixed). Regenerate the baseline from a full sweep only.
|
|
265
277
|
|
|
266
|
-
|
|
267
|
-
measured 653–745s, and that decision is not reopened here.
|
|
278
|
+
### What leaving CI costs, stated rather than discovered
|
|
268
279
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
280
|
+
A regression is now caught when someone runs this, not on merge. Nothing in the pipeline will turn
|
|
281
|
+
red on a new `aria-*` defect, a nameless button or a sub-24px target. That is the trade the rule
|
|
282
|
+
makes, and the only thing that closes it is the local run above actually happening before a PR.
|
|
272
283
|
|
|
273
284
|
## Related
|
|
274
285
|
|
package/docs/README.md
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
| [SPACING.md](./SPACING.md) | Golden ratio (φ) macro spacing — PageContainer sections, Flex gap, Card rhythm |
|
|
13
13
|
| [FORMS.md](./FORMS.md) | **Mandatory** react-hook-form + Zod 4 |
|
|
14
14
|
| [TESTING.md](./TESTING.md) | **Mandatory** Vitest per component |
|
|
15
|
-
| [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) | Per-frame axe a11y + geometry + coverage
|
|
15
|
+
| [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) | Per-frame axe a11y (LOCAL ONLY, never CI) + geometry + coverage gates — how to run/regenerate |
|
|
16
16
|
| [../README.md](../README.md) | Setup, workspace wiring, theme |
|
|
17
17
|
|
|
18
18
|
## Preview
|
|
@@ -29,6 +29,10 @@ export default function Demo() {
|
|
|
29
29
|
from: new Date(2026, 3, 1),
|
|
30
30
|
to: new Date(2026, 3, 30),
|
|
31
31
|
});
|
|
32
|
+
const [ruledRange, setRuledRange] = useState<DateRange | undefined>({
|
|
33
|
+
from: new Date(2026, 3, 13),
|
|
34
|
+
to: new Date(2026, 3, 22),
|
|
35
|
+
});
|
|
32
36
|
const [shiftDays, setShiftDays] = useState<Date[] | undefined>([
|
|
33
37
|
new Date(2026, 3, 6),
|
|
34
38
|
new Date(2026, 3, 13),
|
|
@@ -67,6 +71,48 @@ export default function Demo() {
|
|
|
67
71
|
</CardContent>
|
|
68
72
|
</Card>
|
|
69
73
|
|
|
74
|
+
<Card>
|
|
75
|
+
<CardHeader>
|
|
76
|
+
<CardTitle level={2}>
|
|
77
|
+
罫線 (bordered) · 既定で表示 / bordered={"{false}"} で解除
|
|
78
|
+
</CardTitle>
|
|
79
|
+
<CardDescription>
|
|
80
|
+
日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定
|
|
81
|
+
--input、背景に対し 3:1
|
|
82
|
+
以上)。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
|
|
83
|
+
罫線の中でも判別できる。罫線なしの浮いたボタン表示にしたい場合のみ bordered=
|
|
84
|
+
{"{false}"} を渡す。
|
|
85
|
+
</CardDescription>
|
|
86
|
+
</CardHeader>
|
|
87
|
+
<CardContent>
|
|
88
|
+
<Flex gap="lg" wrap>
|
|
89
|
+
<Calendar
|
|
90
|
+
mode="range"
|
|
91
|
+
selected={ruledRange}
|
|
92
|
+
onSelect={setRuledRange}
|
|
93
|
+
defaultMonth={new Date(2026, 3, 1)}
|
|
94
|
+
today={new Date(2026, 3, 8)}
|
|
95
|
+
locale={ja}
|
|
96
|
+
disabled={[new Date(2026, 3, 5), new Date(2026, 3, 27)]}
|
|
97
|
+
aria-label="罫線あり (既定) の期間カレンダー"
|
|
98
|
+
data-testid="calendar-ruled"
|
|
99
|
+
/>
|
|
100
|
+
<Calendar
|
|
101
|
+
mode="range"
|
|
102
|
+
selected={ruledRange}
|
|
103
|
+
onSelect={setRuledRange}
|
|
104
|
+
defaultMonth={new Date(2026, 3, 1)}
|
|
105
|
+
today={new Date(2026, 3, 8)}
|
|
106
|
+
locale={ja}
|
|
107
|
+
disabled={[new Date(2026, 3, 5), new Date(2026, 3, 27)]}
|
|
108
|
+
bordered={false}
|
|
109
|
+
aria-label="罫線なし (bordered=false) の期間カレンダー"
|
|
110
|
+
data-testid="calendar-unruled"
|
|
111
|
+
/>
|
|
112
|
+
</Flex>
|
|
113
|
+
</CardContent>
|
|
114
|
+
</Card>
|
|
115
|
+
|
|
70
116
|
<Card>
|
|
71
117
|
<CardHeader>
|
|
72
118
|
<CardTitle level={2}>範囲選択 · Popover 内</CardTitle>
|
|
@@ -55,6 +55,36 @@ export default function Demo() {
|
|
|
55
55
|
</CardContent>
|
|
56
56
|
</Card>
|
|
57
57
|
|
|
58
|
+
<Card>
|
|
59
|
+
<CardHeader>
|
|
60
|
+
<CardTitle level={2}>カレンダーの罫線 (bordered)</CardTitle>
|
|
61
|
+
<CardDescription>
|
|
62
|
+
ポップアップのカレンダーは既定で日ごとに罫線を引く (Calendar bordered を転送)。
|
|
63
|
+
bordered={"{false}"} で罫線なしに戻せる。range / multiple / week
|
|
64
|
+
でも同じ。月・四半期・年の グリッドには日のセルがないため対象外。
|
|
65
|
+
</CardDescription>
|
|
66
|
+
</CardHeader>
|
|
67
|
+
<CardContent>
|
|
68
|
+
<Flex gap="lg" wrap>
|
|
69
|
+
<FormField id="ruled-date" label="罫線あり (既定)">
|
|
70
|
+
<DatePicker
|
|
71
|
+
id="ruled-date"
|
|
72
|
+
name="ruled_date"
|
|
73
|
+
defaultValue={new Date(2026, 0, 15)}
|
|
74
|
+
/>
|
|
75
|
+
</FormField>
|
|
76
|
+
<FormField id="unruled-date" label="罫線なし (bordered={false})">
|
|
77
|
+
<DatePicker
|
|
78
|
+
id="unruled-date"
|
|
79
|
+
name="unruled_date"
|
|
80
|
+
defaultValue={new Date(2026, 0, 15)}
|
|
81
|
+
bordered={false}
|
|
82
|
+
/>
|
|
83
|
+
</FormField>
|
|
84
|
+
</Flex>
|
|
85
|
+
</CardContent>
|
|
86
|
+
</Card>
|
|
87
|
+
|
|
58
88
|
<Card>
|
|
59
89
|
<CardHeader>
|
|
60
90
|
<CardTitle level={2}>fromDate で過去日を無効化</CardTitle>
|