@godxjp/ui 25.3.0 → 26.0.0

package/dist/app/theme-axes.js

@@ -60,14 +60,16 @@ function applyPrimaryColor(root, color, foreground) {
     const hue = delta === 0 ? 0 : 60 * (max === r ? ((g - b) / delta + 6) % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4);
     return `${hue} ${saturation * 100}% ${lightness * 100}%`;
   };
-  const away = luminance(text) > 0.5 ? 0 : 1;
-  const shade = (amount) => hsl(rgb.map((channel) => channel * (1 - amount) + away * amount));
+  const polarity = luminance(text) > 0.5 ? "darken" : "lighten";
   const palette = {
     "--primary": hsl(rgb),
     "--primary-foreground": hsl(text),
-    "--primary-hover": shade(0.12),
-    "--primary-active": shade(0.24),
-    "--primary-border": hsl(rgb),
+    "--primary-hover": "initial",
+    "--primary-active": "initial",
+    "--primary-border": "initial",
+    "--control-outline": "initial",
+    "--primary-hover-channels": `var(--primary-hover-${polarity}-channels)`,
+    "--primary-active-channels": `var(--primary-active-${polarity}-channels)`,
     "--ring": hsl(rgb)
   };
   const previous = Object.keys(palette).map((key) => [

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.3.0",
+  "version": "26.0.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/base.css

@@ -100,8 +100,12 @@
   --color-link: hsl(var(--text-link));
   --color-brand: hsl(var(--text-brand));
 
-  --color-primary-hover: hsl(var(--primary-hover));
-  --color-primary-active: hsl(var(--primary-active));
+  --color-primary-hover: hsl(
+    var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels))
+  );
+  --color-primary-active: hsl(
+    var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))
+  );
   --color-secondary-hover: hsl(var(--secondary-hover));
   --color-secondary-active: hsl(var(--secondary-active));
   --color-destructive-hover: hsl(var(--destructive-hover));

package/dist/styles/control.css

@@ -111,7 +111,7 @@
   }
 
   .ui-button--default:hover {
-    background: hsl(var(--primary-hover));
+    background: hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)));
   }
 
   .ui-button--destructive {

package/dist/styles/focus-ring.css

@@ -114,8 +114,29 @@
   :root[data-focus-outline="on"] .ui-otp-slot[data-active="true"],
   :root[data-focus-outline="on"]
     .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    --tw-ring-shadow: var(--focus-field-shadow);
-    box-shadow: var(--focus-field-shadow);
+
+    --tw-ring-shadow: var(
+      --focus-field-shadow,
+      0 0 0 var(--focus-ring-glow-width)
+        hsl(
+          var(
+              --focus-ring-glow-color,
+              var(--control-outline, from hsl(var(--primary)) var(--control-outline-channels))
+            ) /
+            var(--focus-ring-glow-alpha)
+        )
+    );
+    box-shadow: var(
+      --focus-field-shadow,
+      0 0 0 var(--focus-ring-glow-width)
+        hsl(
+          var(
+              --focus-ring-glow-color,
+              var(--control-outline, from hsl(var(--primary)) var(--control-outline-channels))
+            ) /
+            var(--focus-ring-glow-alpha)
+        )
+    );
   }
 
   :root[data-focus-outline="on"]

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 {
@@ -1648,7 +1651,7 @@
         transparent
       )
     );
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary)));
+    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
     font-weight: var(--font-weight-medium);
   }
 
@@ -1765,7 +1768,7 @@
 
   .sb-nav-item--sub[data-active="true"] {
     background: transparent;
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary)));
+    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
     font-weight: var(--font-weight-medium);
   }
 

package/dist/styles/text-layout.css

@@ -231,7 +231,7 @@
     border: 0;
     background: none;
     padding: 0;
-    color: var(--text-action-color);
+    color: var(--text-action-color, hsl(var(--primary)));
     font: inherit;
     cursor: pointer;
     vertical-align: baseline;
@@ -242,7 +242,10 @@
   }
   .ui-typography-action:hover,
   .ui-typography-action:focus-visible {
-    color: var(--text-action-color-hover);
+    color: var(
+      --text-action-color-hover,
+      hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))
+    );
   }
 
   .ui-typography-action[data-copied] {

package/dist/tokens/axes.css

@@ -63,8 +63,8 @@
 
 :root[data-focus-outline="on"] {
   --focus-outline: 1;
-  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
-    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
+
+  --focus-field-shadow: initial;
 }
 
 :root[data-focus-outline="off"] {

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/dist/tokens/components/text.css

@@ -12,8 +12,9 @@
 
   --text-action-gap: var(--space-1);
 
-  --text-action-color: hsl(var(--primary));
-  --text-action-color-hover: hsl(var(--primary-hover));
+  --text-action-color: initial;
+
+  --text-action-color-hover: initial;
 
   --text-action-size: 1em;
 

package/dist/tokens/derived.css

@@ -2,17 +2,27 @@
 
 :root {
 
-  --primary-hover: 268.7 100% 41.6%;
+  --primary-hover: initial;
+  --primary-active: initial;
+  --primary-border: initial;
+  --control-outline: initial;
 
-  --primary-active: 268.7 100% 34.5%;
+  --primary-hover-darken-channels: h s calc(l - 8.4);
+  --primary-active-darken-channels: h s calc(l - 15.5);
+  --primary-hover-lighten-channels: h s calc(l + 5.8);
+  --primary-active-lighten-channels: h s calc(l + 11.6 - 17.4 * clamp(0, (l - 83.4) * 1000, 1));
 
-  --primary-border: 268.7 68% 66%;
-  --destructive-hover: 359 50.6% 53.1%;
-  --destructive-active: 355 70.6% 33.3%;
+  --primary-hover-channels: var(--primary-hover-darken-channels);
+  --primary-active-channels: var(--primary-active-darken-channels);
+
+  --primary-border-channels: h calc(s * 0.68) calc(l + 16);
 
-  --control-outline: 268.7 100% 44.7%;
+  --control-outline-channels: h s calc(l - 5.3);
   --control-outline-alpha: 0.11;
 
+  --destructive-hover: 359 50.6% 53.1%;
+  --destructive-active: 355 70.6% 33.3%;
+
   --control-outline-error: 4.3 87.6% 34.7%;
   --control-outline-error-alpha: 0.09;
 
@@ -21,20 +31,36 @@
 
 .dark,
 :root[data-theme="dark"] {
+  --primary-hover-channels: var(--primary-hover-lighten-channels);
+  --primary-active-channels: var(--primary-active-lighten-channels);
 
-  --primary-hover: 268.7 100% 92.7%;
+  --primary-border-channels: h calc(s * 0.467) calc(l * 0.27043);
 
-  --primary-active: 268.7 100% 81.1%;
+  --control-outline-channels: h calc(s * 0.99) calc(l - 25.1);
+  --control-outline-alpha: 0.29;
 
-  --primary-border: 268.7 46.7% 23.5%;
   --destructive-hover: 358.8 42.3% 53.1%;
   --destructive-active: 357.3 50.6% 34.1%;
 
-  --control-outline: 268.7 99% 61.8%;
-  --control-outline-alpha: 0.29;
-
   --control-outline-error: 351.5 98.3% 53.5%;
   --control-outline-error-alpha: 0.06;
 
   --ring: var(--primary);
 }
+
+@supports not (color: hsl(from red h s l)) {
+  :root {
+    --primary-hover: 268.7 100% 41.6%;
+    --primary-active: 268.7 100% 34.5%;
+    --primary-border: 268.7 68% 66%;
+    --control-outline: 268.7 100% 44.7%;
+  }
+
+  .dark,
+  :root[data-theme="dark"] {
+    --primary-hover: 268.7 100% 92.7%;
+    --primary-active: 268.7 100% 81.1%;
+    --primary-border: 268.7 46.7% 23.5%;
+    --control-outline: 268.7 99% 61.8%;
+  }
+}

package/dist/tokens/foundation.css

@@ -125,11 +125,11 @@
   --focus-ring-opacity: 1;
 
   --focus-ring-glow-width: var(--control-outline-width);
-  --focus-ring-glow-color: var(--control-outline);
+
+  --focus-ring-glow-color: initial;
   --focus-ring-glow-alpha: var(--control-outline-alpha);
 
-  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
-    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
+  --focus-field-shadow: initial;
 
   --focus-ring-offset: var(--focus-outline-offset);
 

package/docs/CUSTOMER-THEMING.md

@@ -230,7 +230,43 @@ Scope the overrides under a tenant attribute instead of `:root`. The colour util
 }
 ```
 
-Set `data-tenant` on the app root. Two CSS-inheritance caveats for the **scoped** case (a single `:root` brand theme is unaffected — there, overriding just `--radius` / `--shadow-color` cascades):
+Set `data-tenant` on the app root.
+
+#### What follows `--primary`, and what you still set (gh#678)
+
+The interaction states are **derived from the `--primary` in scope, at the element that paints them** — on `<html>` or on any nested `[data-tenant]` / `[data-program]` element, in both themes. You do not declare them:
+
+| Token | Follows `--primary`? | Default (evaluated at the painting element) |
+| --- | --- | --- |
+| `--primary-hover` | **yes** — Button hover, `bg-primary-hover`, Typography action hover | `hsl(from hsl(var(--primary)) var(--primary-hover-channels))` — light `h s calc(l - 8.4)`, dark `h s calc(l + 5.8)` |
+| `--primary-active` | **yes** — `bg-primary-active`, the open sidebar row's label | light `h s calc(l - 15.5)`; dark one step further up, reflected to one step down past 83.4% L |
+| `--control-outline` | **yes** — the focused field's halo (`--control-outline-alpha` stays per theme) | light `h s calc(l - 5.3)`, dark `h calc(s * 0.99) calc(l - 25.1)` |
+| `--primary-border` | **yes** (painted by no package surface; kept for the measurement in DESIGN-AUTHORITY) | light `h calc(s * 0.68) calc(l + 16)`, dark `h calc(s * 0.467) calc(l * 0.27043)` |
+| `--sidebar-item-active-foreground` | **yes** — defaults to the live `--primary-active` | — |
+| `--primary-foreground` | **no — set it** | the label on a filled primary; you choose it for your seed |
+| `--ring` | **only on the element that declares `--primary`** — set it in a nested scope | `var(--primary)` on `:root` / `.dark`. `--ring` is a public role read as `hsl(var(--ring))` in consumer CSS, so it cannot become a live default; a scope below `<html>` inherits the root's |
+| `--destructive-*`, `--control-outline-error` | no — not brand | literals |
+
+On the package seed these produce exactly the identity kit values the tier used to hard-code (`#6500d4` / `#5400b0` light, `#ecdaff` / `#cd9fff` dark). Engines without CSS relative colour (Chrome/Edge 111–118) get those literals and do **not** follow a consumer seed.
+
+**Rules that come with it:**
+
+- **Override a state only by setting its knob** (`--primary-hover: 221 90% 72%`). A set knob wins over the derived default, in its own scope and below.
+- **Read a state through its fallback, not bare.** The four knobs are `initial` so that the default can resolve at the painting element (docs/TOKENS.md, the freeze rule). `hsl(var(--primary-hover))` on its own therefore paints nothing — use the utility (`bg-primary-hover`) or `hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))`.
+- **Label polarity.** The theme's pair steps AWAY from that theme's default label: `darken` under a light label, `lighten` under a dark one, which keeps a label that clears 4.5:1 at rest at 4.5:1 in hover and pressed for every seed (measured, `derived-seed-sweep.test.ts`). If your seed needs the OTHER polarity of label (a pale yellow with dark text in the light theme), point the pair at it too — `applyPrimaryColor()` does this automatically from the label it picks:
+
+```css
+[data-tenant="sunny"] {
+  --primary: 48 100% 60%;
+  --primary-foreground: 48 9% 9%;
+  --primary-hover-channels: var(--primary-hover-lighten-channels);
+  --primary-active-channels: var(--primary-active-lighten-channels);
+}
+```
+
+- **The open sidebar row** is legible (≥ 4.5:1 on the 12% tint) for any seed that is itself legible as text on the page. A seed that is not (a pale seed on the light page, a very dark one on the dark page) needs `--sidebar-item-active-foreground` set.
+
+Two more CSS-inheritance caveats for the **scoped** case (a single `:root` brand theme is unaffected — there, overriding just `--radius` / `--shadow-color` cascades):
 
 - **Radius & shadow-tint don't cascade from a scoped anchor.** `--radius-{xs…2xl}`, `--card-radius`, `--control-radius` and the `--shadow-{xs…2xl}` ramp are computed at their declaring element, so a scoped `--radius` / `--shadow-color` override won't reach them. For a scoped re-theme, re-declare the derived tokens you need (e.g. `--card-radius: var(--radius)`, or set `--card-shadow` to a literal value).
 ````

package/docs/DESIGN-AUTHORITY.md

@@ -437,11 +437,15 @@ anywhere in `src/`, or leaves a trace in `dist/`. Deleting that gate re-opens th
 spacer. This library takes a different, two-form convention instead — widely used in enterprise
 component libraries, and surveyed across several before it was adopted here:
 
-- **Field** — the boundary RECOLOURS to the primary at its unchanged hairline width, plus
-  `box-shadow: 0 0 0 var(--control-outline-width) var(--control-outline)`. A Select emits the same
+- **Field** — the boundary RECOLOURS to the primary at its unchanged hairline width, plus a
+  `--control-outline-width` halo in the `--control-outline` colour. A Select emits the same
   declarations as an Input, which is why the two focus identically.
-- **Non-field** — an outline outside the box model:
-  `outline: var(--focus-outline-weight) solid var(--primary-border); outline-offset: 1px`.
+- **Non-field** — an outline outside the box model, `--focus-outline-weight` thick in the
+  `--primary-border` colour, `outline-offset: 1px`.
+
+Since 26.0.0 (gh#678) `--control-outline` and `--primary-border` are `initial` knobs whose default
+derives from `--primary` at the painting element, so a bare `var(--control-outline)` paints
+**nothing**. Read them through their fallback — see `docs/CUSTOMER-THEMING.md` §Multi-tenant.
 
 **Why this shape wins.** The library previously shipped an opaque brand ring drawn immediately
 outside an untouched grey border — two outlines of different colours claiming the same edge — and a

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.3.0",
-  "godxUiMcp": "25.3.0",
+  "version": "26.0.0",
+  "godxUiMcp": "26.0.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),
         });
       }