@godxjp/ui 25.2.0 → 25.4.0

package/dist/components/data-entry/calendar.js

@@ -22,7 +22,7 @@ function Calendar({
   onClose,
   footer,
   width = "auto",
-  bordered = false,
+  bordered = true,
   cellRender,
   month: monthProp,
   onMonthChange,

package/dist/components/data-entry/date-picker.js

@@ -49,6 +49,7 @@ function DatePicker(props) {
     toDate,
     disabledDate,
     cellRender,
+    bordered,
     allowClear,
     triggerLabel,
     format: formatProp,
@@ -381,6 +382,7 @@ function DatePicker(props) {
     onMonthChange: setViewAnchor,
     locale: dayPickerLocale,
     cellRender,
+    bordered,
     showWeekNumber: showWeek,
     startMonth: minimum,
     endMonth: maximum,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "25.2.0",
+  "version": "25.4.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/components/data-entry.prop.d.ts

@@ -725,8 +725,10 @@ export type CalendarProp = DayPickerProps & CalendarFooterProp & {
      * What a month grid needs is the ruling BETWEEN days, so a week reads as a row of cells the
      * eye can track across.
      *
-     * Default `false`, because a picker popover wants the opposite: floating day buttons with no
-     * ruling, so the selected day is the only shape in the panel.
+     * Default `true` — the owner's call, from a real screen: with no ruling the month read as a
+     * cloud of numbers and was "very hard to read". Pass `bordered={false}` for the floating-button
+     * look. The line colour is `--calendar-grid-border-color` (default `--input`, the ≥3:1 tier;
+     * the decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
      */
     bordered?: boolean;
     /** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
@@ -861,6 +863,12 @@ export type DatePickerBaseProp = FieldA11yProps & PickerChromeProp & {
     toDate?: Date;
     /** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
     cellRender?: CalendarCellRenderProp;
+    /**
+     * Rule the day grid in the panel — forwarded to `Calendar bordered`, and defaults to `true`
+     * like it. Applies to the DAY grid (`picker="date"` / `"week"`, single, `multiple` and `range`);
+     * the month / quarter / year period grid has no day cells to rule and ignores it.
+     */
+    bordered?: boolean;
     /**
      * Forbid individual dates by predicate — the rule `minDate`/`maxDate` cannot express, because a
      * business calendar is rarely one contiguous range: 土日, a closed accounting period, a 祝日, a

package/dist/styles/control.css

@@ -2180,13 +2180,13 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
-    border-inline-start: 1px solid hsl(var(--border));
-    border-block-start: 1px solid hsl(var(--border));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
-    border-inline-end: 1px solid hsl(var(--border));
+    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
@@ -2198,7 +2198,7 @@
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-grid {
-    border-block-end: 1px solid hsl(var(--border));
+    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
@@ -2219,8 +2219,12 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number,
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
-    border-inline-start: 1px solid hsl(var(--border));
-    border-block-start: 1px solid hsl(var(--border));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input)));
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-day {
+    inline-size: var(--control-height);
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day-button {

package/dist/styles/shell-layout.css

@@ -285,7 +285,10 @@
 
   .app-main .ui-page-container {
     width: 100%;
-    max-width: var(--app-shell-page-max-width);
+  }
+
+  .app-main :where(.ui-page-header, .ui-page-toolbar, .ui-page-body) {
+    max-inline-size: var(--app-shell-page-max-width);
   }
 
   .ui-auth-shell {

package/dist/tokens/components/control.css

@@ -290,6 +290,8 @@
 
   --calendar-bordered-weekday-padding-block: var(--space-1);
 
+  --calendar-grid-border-color: initial;
+
   --transfer-pane-min-height: 14rem;
   --transfer-pane-radius: var(--radius-md);
   --transfer-panes-space-gap: var(--space-3);

package/dist/tokens/components/shell.css

@@ -53,7 +53,8 @@
   --app-shell-nav-rail-height: var(--app-shell-nav-rail-width);
 
   --app-shell-nav-rail-inset: var(--space-3);
-  --app-shell-page-max-width: 80rem;
+
+  --app-shell-page-max-width: none;
 
   --app-shell-main-background: initial;
   --app-shell-mobile-nav-width: 22.5rem;

package/docs/DEVELOPMENT.md

@@ -122,7 +122,7 @@ pnpm test                 # FULL suite — CI only, never from an agent loop
 pnpm preview:build        # integration test: examples + docs must build — at most once, pre-PR
 pnpm audit                # godxjp-ui-audit — 0 errors for touched files
 pnpm check:mcp-sync       # MCP registry ↔ library export drift guard
-pnpm check:frame-axe      # WCAG 2.2 AA over every frame — see FRAME-A11Y-CI.md
+pnpm check:frame-axe      # WCAG 2.2 AA over every frame — LOCAL ONLY, never in CI (FRAME-A11Y-CI.md)
 ```
 
 `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
 - [README](../README.md) — overview, component groups, consumer setup.
 - [CONSUMER-RULES.md](./CONSUMER-RULES.md) — the ten rules every consumer follows (the audit enforces them).
 - `docs/TOKENS.md`, `docs/SPACING.md`, `docs/PROPS-VOCABULARY.md`, `docs/PROPS-REGISTRY.md`.
-- [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) — per-frame axe a11y + geometry + coverage CI gates.
+- [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) — per-frame axe a11y (**local only, never in CI**) + geometry + coverage gates.
 - **`godx-ui-component-placement`** skill — decide whether a component belongs here.

package/docs/FRAME-A11Y-CI.md

@@ -1,6 +1,13 @@
-# Per-frame accessibility CI — `check:frame-axe`
+# Per-frame accessibility — `check:frame-axe` (LOCAL ONLY)
 
-One ruler, run in the repository that owns the CSS.
+One ruler, run in the repository that owns the CSS — **on a developer machine, never in CI/CD.**
+
+> **Owner's standing rule (2026-09-17): axe must not run in any GitHub Actions workflow.** It is a
+> local measurement only. gh#643 had wired it into `ci-browser.yml` (four shards on every merge) and
+> `ci-browser-full.yml` (nightly); both jobs are removed. `check:gate-coverage` lists
+> `check:frame-axe` as EXEMPT with this reason, so its absence from the workflows is a declaration,
+> not a dead gate. **Do not re-wire it into a workflow.** The file keeps its historical name so
+> existing links still resolve.
 
 ## Why it exists (gh#643)
 
@@ -234,41 +241,45 @@ which changes what `color-contrast` resolves a background to). Two sweeps after
 
 ## Cost
 
-|                                       |                                                                                                                |
-| ------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| full sweep                            | **3m20s** locally · **12m01s** on the self-hosted runner — 215 routes × 3 viewports                            |
-| sequential                            | ~55 min — the three viewport passes run concurrently, which is the whole difference                            |
-| showcase only (`--scope=showcase`)    | 30s                                                                                                            |
-| full sweep **with the overlay scope** | **2m14s** on the machine gh#643 item 4 was built on, same 215 × 3 — the runner number has not been re-measured |
+|                                       |                                                                                     |
+| ------------------------------------- | ----------------------------------------------------------------------------------- |
+| full sweep                            | **2m14s** locally, with the overlay scope — 215 routes × 3 viewports                |
+| sequential                            | ~55 min — the three viewport passes run concurrently, which is the whole difference |
+| showcase only (`--scope=showcase`)    | ~30s                                                                                |
+| one route (`pnpm check:frame-axe /isolate/…`) | seconds — the loop to use while fixing                                      |
 
 The overlay pass is bounded by declaration: only the 7 declaring routes pay it (21 extra scans plus
-their open steps), and no `/showcase/**` route declares one, so `--scope=showcase` — the merge lane —
-is unchanged.
+their open steps), and no `/showcase/**` route declares one, so `--scope=showcase` is unchanged by it.
+
+## Where it runs: your machine
 
-`--shard=i/n` is in the script for the day the sweep outgrows the lane. Using it adds check-run
-names, which costs nothing here because none of them is in `REQUIRED_CI_CHECK_RUNS`.
+**Never in CI/CD** — see the rule at the top. The procedure:
 
-## Where it runs
+```bash
+pnpm build && pnpm preview:build        # the STATIC preview — not `pnpm dev` / `pnpm preview`
+pnpm check:frame-axe                    # full sweep; must end with 0 baselined entries, 0 nodes
+pnpm check:frame-axe /isolate/<frame>   # one route, while fixing
+```
 
-Two lanes, split on a **measurement taken on the runner, not on a laptop**:
+Run it before a PR that touches markup, ARIA, focus behaviour or colour, and commit what it writes —
+`audit-evidence/frame-axe/results.json` and, only when a full sweep genuinely changed it,
+`frame-axe-baseline.json`.
 
-| lane                                                              | what                                      | when                                                           | measured                               |
-| ----------------------------------------------------------------- | ----------------------------------------- | -------------------------------------------------------------- | -------------------------------------- |
-| `ci-browser.yml` · `Per-frame axe (showcases, WCAG 2.2 AA)`       | `--scope=showcase` — 30 whole-page frames | every push to `main`                                           | 30s locally                            |
-| `ci-browser-full.yml` · `Per-frame axe (all frames, WCAG 2.2 AA)` | the full 215-route sweep                  | nightly, `workflow_dispatch`, or a `run-browser` label on a PR | **12m01s on the pool** (3m20s locally) |
+**The static preview, not the dev server.** Against the vite dev server the sweep produces 1–3
+spurious `route-did-not-render` / `axe-did-not-run` rows on different routes each run — 30s
+`page.goto` timeouts while three viewport contexts hammer an on-demand-transforming server. Each is
+clean alone. The static build does not do this.
 
-The full sweep went into the merge lane first, on the local 3m20s. On the pool's runner the same
-job took **12m01s** — three times the local wall clock and more than twice CONTRACT.md L4's
-five-minute budget for that whole lane. So the merge lane keeps the showcases, which are the only
-frames here shaped like the screens a consumer ships, and the wide matrix moved to the lane this
-repository already reserves for wide matrices.
+**`--shard=i/n` and `--scope=` are for splitting a LOCAL run**, e.g. across two terminals. Two guards
+hold for both: `--update` refuses under either (a partial run would rewrite the ledger from a fraction
+of the frames and delete the rest), and the "no longer fires" report is suppressed on a partial run
+(every other partition's rows would read as fixed). Regenerate the baseline from a full sweep only.
 
-**Not** the PR lane: that file's own header lists axe among what it deliberately excludes, at a
-measured 653–745s, and that decision is not reopened here.
+### What leaving CI costs, stated rather than discovered
 
-The job is not in `REQUIRED_CI_CHECK_RUNS` (#492 removed it from the release proof map and this does
-not put it back). It still protects a release through `assertCiProvenance`'s collateral rule — **any**
-red check run on the SHA being published refuses the publish.
+A regression is now caught when someone runs this, not on merge. Nothing in the pipeline will turn
+red on a new `aria-*` defect, a nameless button or a sub-24px target. That is the trade the rule
+makes, and the only thing that closes it is the local run above actually happening before a PR.
 
 ## Related
 

package/docs/README.md

@@ -12,7 +12,7 @@
 | [SPACING.md](./SPACING.md)                   | Golden ratio (φ) macro spacing — PageContainer sections, Flex gap, Card rhythm                                                                                                                                        |
 | [FORMS.md](./FORMS.md)                       | **Mandatory** react-hook-form + Zod 4                                                                                                                                                                                 |
 | [TESTING.md](./TESTING.md)                   | **Mandatory** Vitest per component                                                                                                                                                                                    |
-| [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md)       | Per-frame axe a11y + geometry + coverage CI gates — how to run/regenerate locally                                                                                                                                     |
+| [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md)       | Per-frame axe a11y (LOCAL ONLY, never CI) + geometry + coverage gates — how to run/regenerate                                                                                                                         |
 | [../README.md](../README.md)                 | Setup, workspace wiring, theme                                                                                                                                                                                        |
 
 ## Preview

package/docs/data-entry/calendar.tsx

@@ -29,6 +29,10 @@ export default function Demo() {
     from: new Date(2026, 3, 1),
     to: new Date(2026, 3, 30),
   });
+  const [ruledRange, setRuledRange] = useState<DateRange | undefined>({
+    from: new Date(2026, 3, 13),
+    to: new Date(2026, 3, 22),
+  });
   const [shiftDays, setShiftDays] = useState<Date[] | undefined>([
     new Date(2026, 3, 6),
     new Date(2026, 3, 13),
@@ -67,6 +71,48 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              罫線 (bordered) · 既定で表示 / bordered={"{false}"} で解除
+            </CardTitle>
+            <CardDescription>
+              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定
+              --input、背景に対し 3:1
+              以上)。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
+              罫線の中でも判別できる。罫線なしの浮いたボタン表示にしたい場合のみ bordered=
+              {"{false}"} を渡す。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="lg" wrap>
+              <Calendar
+                mode="range"
+                selected={ruledRange}
+                onSelect={setRuledRange}
+                defaultMonth={new Date(2026, 3, 1)}
+                today={new Date(2026, 3, 8)}
+                locale={ja}
+                disabled={[new Date(2026, 3, 5), new Date(2026, 3, 27)]}
+                aria-label="罫線あり (既定) の期間カレンダー"
+                data-testid="calendar-ruled"
+              />
+              <Calendar
+                mode="range"
+                selected={ruledRange}
+                onSelect={setRuledRange}
+                defaultMonth={new Date(2026, 3, 1)}
+                today={new Date(2026, 3, 8)}
+                locale={ja}
+                disabled={[new Date(2026, 3, 5), new Date(2026, 3, 27)]}
+                bordered={false}
+                aria-label="罫線なし (bordered=false) の期間カレンダー"
+                data-testid="calendar-unruled"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>範囲選択 · Popover 内</CardTitle>

package/docs/data-entry/date-picker.tsx

@@ -55,6 +55,36 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>カレンダーの罫線 (bordered)</CardTitle>
+            <CardDescription>
+              ポップアップのカレンダーは既定で日ごとに罫線を引く (Calendar bordered を転送)。
+              bordered={"{false}"} で罫線なしに戻せる。range / multiple / week
+              でも同じ。月・四半期・年の グリッドには日のセルがないため対象外。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex gap="lg" wrap>
+              <FormField id="ruled-date" label="罫線あり (既定)">
+                <DatePicker
+                  id="ruled-date"
+                  name="ruled_date"
+                  defaultValue={new Date(2026, 0, 15)}
+                />
+              </FormField>
+              <FormField id="unruled-date" label="罫線なし (bordered={false})">
+                <DatePicker
+                  id="unruled-date"
+                  name="unruled_date"
+                  defaultValue={new Date(2026, 0, 15)}
+                  bordered={false}
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>fromDate で過去日を無効化</CardTitle>

package/docs/layout/app-shell-states.tsx

@@ -24,7 +24,11 @@ import {
  * single page:
  *
  *   ?topbarSpan=content|full   ?navRail=start|end|top|bottom   ?collapsed=1   ?sidebar=none
- *   ?responsive=docked
+ *   ?responsive=docked   ?measure=narrow|medium   ?footer=1
+ *
+ * `measure` and `footer` feed `scripts/check-app-shell-page-width.mjs` (gh#672): the page is fluid
+ * in the main column at every sidebar state, and a sticky footer band always spans `.app-main`,
+ * even when a service caps content with `--app-shell-page-max-width` or the page sets `measure`.
  *
  * With no query it is `topbarSpan="full"` without a rail — the state gh#474 found collapsing
  * `main` into a 170px implicit track below 900px, with the page actions laid out past the edge.
@@ -61,11 +65,13 @@ function readState() {
     hasSidebar: params.get("sidebar") !== "none",
     responsiveNavigation:
       params.get("responsive") === "docked" ? ("docked" as const) : ("drawer" as const),
+    measure: (["narrow", "medium"] as const).find((m) => m === params.get("measure")),
+    hasFooter: params.get("footer") === "1",
   };
 }
 
 export default function Demo() {
-  const [{ topbarSpan, navRail, collapsed, hasSidebar, responsiveNavigation }] =
+  const [{ topbarSpan, navRail, collapsed, hasSidebar, responsiveNavigation, measure, hasFooter }] =
     useState(readState);
   const [activeId, setActiveId] = useState("dashboard");
   const strip = navRail === "top" || navRail === "bottom";
@@ -113,6 +119,18 @@ export default function Demo() {
       <PageContainer
         title="請求書"
         subtitle="株式会社アクメ · 2026年5月"
+        measure={measure}
+        footer={
+          hasFooter ? (
+            <Flex gap="sm" align="center" justify="end">
+              <Button size="sm" variant="outline">
+                下書き保存
+              </Button>
+              <Button size="sm">コメントを送信する</Button>
+            </Flex>
+          ) : undefined
+        }
+        stickyFooter={hasFooter}
         extra={
           <Flex gap="sm" wrap>
             <Button size="sm" variant="outline">

package/docs/showcase/case5-shift-calendar.tsx

@@ -555,12 +555,16 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                         opacity: cell.dim ? 0.5 : 1,
                       }}
                     >
-                      <button
-                        type="button"
+                      <Button
+                        variant="ghost"
+                        shape="sharp"
+                        fullWidth
+                        wrap
+                        align="start"
                         onClick={() => onPick(cell)}
-                        className="hover:bg-accent focus-visible:ring-ring min-h-[96px] w-full text-start transition-colors focus:outline-none focus-visible:ring-2"
+                        className="min-h-[96px]"
                       >
-                        <Flex direction="col" gap="xs">
+                        <Flex direction="col" gap="xs" fill>
                           <Flex align="center" justify="between">
                             <Text
                               as="span"
@@ -604,7 +608,7 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                             ) : null}
                           </Flex>
                         </Flex>
-                      </button>
+                      </Button>
                     </TableCell>
                   );
                 })}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "25.2.0",
-  "godxUiMcp": "25.2.0",
+  "version": "25.4.0",
+  "godxUiMcp": "25.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -334,8 +334,9 @@
     "check:choice-hit-target": "node scripts/check-choice-hit-target.mjs",
     "check:state-legible": "node scripts/check-state-legible.mjs",
     "check:app-shell-narrow-grid": "node scripts/check-app-shell-narrow-grid.mjs",
+    "check:app-shell-page-width": "node scripts/check-app-shell-page-width.mjs",
     "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
-    "check:frame-runtime": "pnpm check:data-entry-touch-aria && pnpm check:app-shell-narrow-grid && pnpm check:choice-hit-target",
+    "check:frame-runtime": "pnpm check:data-entry-touch-aria && pnpm check:app-shell-narrow-grid && pnpm check:app-shell-page-width && pnpm check:choice-hit-target",
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
     "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
     "verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",

package/scripts/ui-audit.mjs

@@ -145,6 +145,19 @@ const EMOJI_FLAG = /\p{Regional_Indicator}/u;
  */
 const ATTRS = String.raw`(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|=>|[^>"'])*`;
 
+/**
+ * A raw lowercase HTML opening tag, wherever its line ends (gh#673).
+ *
+ * The control rules were `/<button[\s>]/` run ONE LINE at a time. Prettier leaves `<button` alone on
+ * its line when it wraps an element, and the newline after the tag name is not part of that line, so
+ * every wrapped element was invisible: a consumer's audit reported 0 `no-raw-button` while ~166
+ * multi-line `<button` remained, and "0" read as "migration finished". Matched over the whole file
+ * (`spansElement`), the lookahead `[\s/>]` accepts that newline while `<buttonish`, `<Button` and
+ * `</button` stay unmatched. `[^\n]*` only carries the rest of the line into the snippet — and keeps
+ * one finding per line, which is what the per-line rule reported for a single-line element.
+ */
+const rawTag = (tag) => new RegExp(`<${tag}(?=[\\s/>])[^\\n]*`, "g");
+
 /**
  * @type {{id:string, severity:'error'|'warn', test:RegExp, message:string, standard?:string,
  *         exempt?:RegExp, classOnly?:boolean}[]}
@@ -185,7 +198,9 @@ const RULES = [
     severity: "error",
     // A hand-rolled flex/grid container. The primitives exist precisely so a row is <Flex>, a
     // stack is <Flex direction="col">, a grid is <ResponsiveGrid> — token gaps, RTL, density.
-    test: /className=(?:"[^"]*|'[^']*|\{`[^`]*)(?<![\w-])(?:flex|inline-flex|grid|inline-grid)(?![\w-])/,
+    // Whole-file: a className template literal can hold `flex` several lines below `className=` (gh#673).
+    spansElement: true,
+    test: /className=(?:"[^"]*|'[^']*|\{`[^`]*)(?<![\w-])(?:flex|inline-flex|grid|inline-grid)(?![\w-])/g,
     message:
       'No hand-rolled flex/grid — use <Flex> (row), <Flex direction="col"> (stack) or <ResponsiveGrid> (docs/CONSUMER-RULES.md §3).',
   },
@@ -203,17 +218,23 @@ const RULES = [
     // rounded-full` dot was clean, `prettier --write` reordered it to `rounded-full bg-current`,
     // and the warning appeared with no source change. A rule a formatter can flip is a rule
     // nobody can trust.
-    test: (line) => {
-      const m = line.match(/className=(?:"([^"]*)"|'([^']*)'|\{`([^`]*)`)/);
-      if (!m) return false;
-      const cls = m[1] ?? m[2] ?? m[3] ?? "";
-      // A MARKER is not a surface. `size-1` is 4px — a dot, a pip, a status bead. The primitives
-      // this rule points at (Card, Badge, Avatar, ListRow, Descriptions, EmptyState) all start at
-      // control height, so none of them can express one, and flagging it sends the reader looking
-      // for a component that does not exist. The cut-off is `size-2` / 8px: below that there is no
-      // room for the padding and type that make something a surface.
-      if (/\b(?:size|[wh])-(?:0\.5|1|1\.5|2)\b/.test(cls)) return false;
-      return /\brounded(?:-(?:full|sm|md|lg|xl|2xl))?\b/.test(cls) && /\b(?:border|bg-)/.test(cls);
+    //
+    // Whole-file, one verdict per className: a template literal spread over lines puts `rounded`
+    // and `border` on lines of their own, where a per-line read saw neither (gh#673).
+    spansElement: true,
+    matches: function* (source) {
+      for (const m of source.matchAll(/className=(?:"([^"]*)"|'([^']*)'|\{`([^`]*)`)/g)) {
+        const cls = m[1] ?? m[2] ?? m[3] ?? "";
+        // A MARKER is not a surface. `size-1` is 4px — a dot, a pip, a status bead. The primitives
+        // this rule points at (Card, Badge, Avatar, ListRow, Descriptions, EmptyState) all start at
+        // control height, so none of them can express one, and flagging it sends the reader looking
+        // for a component that does not exist. The cut-off is `size-2` / 8px: below that there is no
+        // room for the padding and type that make something a surface.
+        if (/\b(?:size|[wh])-(?:0\.5|1|1\.5|2)\b/.test(cls)) continue;
+        if (/\brounded(?:-(?:full|sm|md|lg|xl|2xl))?\b/.test(cls) && /\b(?:border|bg-)/.test(cls)) {
+          yield m;
+        }
+      }
     },
     message:
       "Hand-rolled surface (rounded + border/bg) — use Card, Badge, Avatar, ListRow, Descriptions or EmptyState so height, padding and radius come from the tokens (docs/CONSUMER-RULES.md §4). A read-only sample of a colour a USER chose is Swatch, which takes that value as a prop.",
@@ -360,14 +381,16 @@ const RULES = [
     replacement: "Select",
     scope: "consumer-control",
     severity: "error",
-    test: /<select[\s>]/,
+    spansElement: true,
+    test: rawTag("select"),
     message: "Use <Select> from @godxjp/ui, not a raw <select> (rules §3).",
   },
   {
     id: "no-raw-table",
     replacement: "DataTable / Table",
     severity: "error",
-    test: /<table[\s>]/,
+    spansElement: true,
+    test: rawTag("table"),
     message: "Use the <Table> family from @godxjp/ui, not a raw <table> (rules §3).",
   },
   {
@@ -375,7 +398,8 @@ const RULES = [
     replacement: "Textarea",
     scope: "consumer-control",
     severity: "warn",
-    test: /<textarea[\s>]/,
+    spansElement: true,
+    test: rawTag("textarea"),
     message: "Use <Textarea> from @godxjp/ui, not a raw <textarea> (rules §3).",
   },
   {
@@ -392,7 +416,8 @@ const RULES = [
     replacement: "Button",
     scope: "consumer-control",
     severity: "error",
-    test: /<button[\s>]/,
+    spansElement: true,
+    test: rawTag("button"),
     message: "Use <Button> from @godxjp/ui, not a raw <button> (rules §3).",
   },
   {
@@ -423,7 +448,9 @@ const RULES = [
   {
     id: "manual-field-helper",
     severity: "warn",
-    test: /<p[^>]*className="text-xs text-muted-foreground"/,
+    // Whole-file: prettier wraps `<p` and its className onto separate lines (gh#673).
+    spansElement: true,
+    test: new RegExp(`<p${ATTRS}className="text-xs text-muted-foreground"`, "g"),
     message:
       "Field helper text should use <FormField helper=…>, not a hand-rolled <p> (rules §1). OK only for checkbox/radio groups.",
   },
@@ -541,7 +568,9 @@ const RULES = [
      * — one of ten standing warnings here. Flagging it would push every consumer doing the right
      * thing toward either a suppression comment or a worse glyph.
      */
-    test: />\s*[✕✖×╳]\s*</,
+    // Whole-file: prettier puts a wrapped element's text on its own line, `>` and `<` elsewhere (gh#673).
+    spansElement: true,
+    test: />\s*[✕✖×╳]\s*</g,
     exempt: /<VisuallyHidden\b|sr-only/,
     standard: "WAI-ARIA 1.2 (dialog) · WCAG 2.2 SC 4.1.2 · @godxjp/ui Alert/Dialog anatomy",
     message:
@@ -1190,7 +1219,11 @@ for (const dir of SCAN_DIRS) {
           continue;
         const lineNo = scanContent.slice(0, match.index).split("\n").length;
         if (suppressed(rule.id, lineNo - 1)) continue;
-        if (isExempt(rule, origLines[lineNo - 1], origLines[lineNo - 2])) continue;
+        // "The line after" is the one after the match ENDS: a wrapped glyph's name follows its `</span>`.
+        const endLineNo = lineNo + (match[0].match(/\n/g)?.length ?? 0);
+        if (isExempt(rule, origLines[lineNo - 1], origLines[lineNo - 2], origLines[endLineNo])) {
+          continue;
+        }
         findings.push({
           file: rel,
           line: lineNo,
@@ -1198,6 +1231,7 @@ for (const dir of SCAN_DIRS) {
           severity: rule.severity,
           standard: rule.standard,
           message: rule.message,
+          replacement: rule.replacement,
           snippet: match[0].replace(/\s+/g, " ").slice(0, 120),
         });
       }