@godxjp/ui 20.1.0 → 20.2.0

package/dist/tokens/components/shell.css

@@ -45,7 +45,13 @@
   --app-shell-sidebar-width: 16rem;
   --app-shell-sidebar-collapsed-width: 4rem;
 
-  --app-shell-nav-rail-width: 3.5rem;
+  --app-shell-nav-rail-width: 2.5rem;
+
+  --app-shell-nav-rail-item-size: var(--band-height-lg);
+
+  --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-main-background: initial;
@@ -84,6 +90,7 @@
   --sidebar-section-label-padding-x: var(--space-2);
   --sidebar-section-label-padding-bottom: var(--space-1);
 
+  --topbar-search-width: 16rem;
   --topbar-search-max-width: none;
 
   --topbar-height: auto;
@@ -157,6 +164,41 @@
   --app-launcher-group-label-color: var(--muted-foreground);
   --app-launcher-state-min-height: 8rem;
 
+  --app-launcher-launchpad-backdrop-blur-size: 28px;
+  --app-launcher-launchpad-backdrop-alpha: 42%;
+  --app-launcher-launchpad-space-inset: var(--space-8);
+  --app-launcher-launchpad-panel-max-width: 60rem;
+  --app-launcher-launchpad-panel-gap: var(--space-8);
+  --app-launcher-launchpad-grid-gap: var(--space-6);
+  --app-launcher-launchpad-tile-inline-size: 7.5rem;
+  --app-launcher-launchpad-tile-padding: var(--space-3);
+  --app-launcher-launchpad-tile-radius: var(--radius-lg);
+  --app-launcher-launchpad-tile-gap: var(--space-3);
+  --app-launcher-launchpad-tile-hover-background: color-mix(
+    in srgb,
+    hsl(var(--foreground)) 10%,
+    transparent
+  );
+  --app-launcher-launchpad-mark-size: 4rem;
+  --app-launcher-launchpad-mark-radius: var(--radius-lg);
+
+  --app-launcher-launchpad-mark-background: color-mix(
+    in srgb,
+    hsl(var(--card)) 62%,
+    transparent
+  );
+  --app-launcher-launchpad-mark-border-color: color-mix(
+    in srgb,
+    hsl(var(--foreground)) 14%,
+    transparent
+  );
+  --app-launcher-launchpad-mark-font-size: var(--font-size-lg);
+  --app-launcher-launchpad-mark-shadow: var(--shadow-lg);
+  --app-launcher-launchpad-name-font-size: var(--font-size-sm);
+  --app-launcher-launchpad-title-font-size: var(--font-size-2xs);
+  --app-launcher-launchpad-title-letter-spacing: 0.08em;
+  --app-launcher-launchpad-close-space-padding: var(--space-2);
+
   --sidebar-item-active-color: initial;
   --sidebar-item-active-tint: initial;
 
@@ -221,8 +263,8 @@
 
   --auth-shell-registration-card-max-width: 22.5rem;
 
-  --auth-shell-registration-main-padding-block-start: 9.5rem;
-  --auth-shell-registration-main-padding-block-start-mobile: 8.875rem;
+  --auth-shell-registration-main-padding-block-start: 1rem;
+  --auth-shell-registration-main-padding-block-start-mobile: 0.9375rem;
   --auth-shell-registration-main-padding-inline: 1rem;
   --auth-shell-registration-main-padding-inline-mobile: 0.9375rem;
 
@@ -251,6 +293,8 @@
   --auth-footer-content-gap: 0.375rem;
 
   --auth-footer-text-font-size: var(--font-size-2xs);
+
+  --auth-footer-target-min-size: var(--touch-target-min);
   --auth-stack-gap: var(--space-3);
   --auth-shell-field-label-gap: var(--space-1);
 
@@ -293,6 +337,9 @@
 @media (pointer: coarse) {
   :root {
     --app-shell-bar-height: var(--band-height-3xl);
+
+    --app-shell-nav-rail-width: 3rem;
+    --app-shell-nav-rail-item-size: var(--band-height-xl);
   }
 }
 

package/dist/tokens/foundation.css

@@ -186,6 +186,8 @@
 
   --scaling: 1;
 
+  --touch-target-min: 1.5rem;
+
   --space-0: 0;
   --space-1: calc(0.25rem * var(--scaling));
   --space-2: calc(0.5rem * var(--scaling));

package/docs/data-display/list-row.tsx

@@ -57,13 +57,13 @@ export default function Demo() {
           </CardHeader>
           <CardContent flush>
             <ListRow
-              leading={<Smartphone aria-hidden="true" className="size-4" />}
+              leading={<Smartphone aria-hidden="true" />}
               title="iPhone 15 · Tokyo"
               description="最終アクセス 2分前 · 153.240.x.x"
               trailing={<Badge status="active" />}
             />
             <ListRow
-              leading={<Laptop aria-hidden="true" className="size-4" />}
+              leading={<Laptop aria-hidden="true" />}
               title="MacBook Pro · Osaka"
               description="最終アクセス 3日前 · 126.18.x.x"
               trailing={
@@ -73,7 +73,7 @@ export default function Demo() {
               }
             />
             <ListRow
-              leading={<Laptop aria-hidden="true" className="size-4" />}
+              leading={<Laptop aria-hidden="true" />}
               title="Windows · Nagoya"
               description="最終アクセス 先月 · 49.98.x.x"
               trailing={
@@ -110,7 +110,7 @@ export default function Demo() {
               />
               <ListRow
                 as="li"
-                leading={<KeyRound aria-hidden="true" className="size-4" />}
+                leading={<KeyRound aria-hidden="true" />}
                 title="Passkey · iCloud Keychain"
                 description="2026年3月12日に追加"
                 trailing={<Badge tone="neutral">未使用</Badge>}
@@ -362,14 +362,14 @@ export default function Demo() {
           <CardContent flush>
             <ListRow
               density="default"
-              leading={<Laptop aria-hidden="true" className="size-4" />}
+              leading={<Laptop aria-hidden="true" />}
               title="MacBook Pro · Osaka"
               description={'density="default" · 最終アクセス 3日前'}
               trailing={<Badge status="active" />}
             />
             <ListRow
               density="compact"
-              leading={<Laptop aria-hidden="true" className="size-4" />}
+              leading={<Laptop aria-hidden="true" />}
               title="MacBook Pro · Osaka"
               description={'density="compact" · 最終アクセス 3日前'}
               trailing={<Badge status="active" />}

package/docs/layout/app-launcher.tsx

@@ -145,6 +145,50 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>バー以外の chrome — icon とパネルの向き</CardTitle>
+            <CardDescription>
+              `appearance=&quot;icon&quot;` は正方形の ghost Button。バーではない chrome（nav rail、
+              カードのヘッダ、ツールバー）のための箱で、glyph は同じです。 パネルは既定で chrome
+              から外へ開きます（bar は下＋end、それ以外は inline-end＋start）。 位置を変えられる
+              chrome だけが向きを知っているので、`side` / `align` で明示できます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md">
+              <AppLauncher apps={apps} groups={groups} labels={labels} appearance="icon" />
+              <AppLauncher
+                apps={apps}
+                groups={groups}
+                labels={labels}
+                appearance="icon"
+                side="bottom"
+                align="start"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Launchpad — 画面いっぱい</CardTitle>
+            <CardDescription>
+              `responsive=&quot;fullscreen&quot;` は plaform の start bar のための形。背後のページを
+              ぼかし、その地の上にタイルが並びます（macOS Launchpad / Windows Start）。 幅に関係なく
+              1つの surface に固定。列数だけが surface に合わせて 3 · 4 · 5 · 6 と上がります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AppLauncher
+              apps={apps}
+              groups={groups}
+              labels={labels}
+              appearance="icon"
+              responsive="fullscreen"
+            />
+          </CardContent>
+        </Card>
       </ResponsiveGrid>
     </PageContainer>
   );

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layout";
+import { AppShell, Flex, PageContainer, Sidebar, Topbar, TopbarItem } from "@godxjp/ui/layout";
 import type { SidebarSectionProp } from "@godxjp/ui/layout";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
@@ -95,9 +95,9 @@ export default function Demo() {
       topbar={
         <Topbar
           start={
-            <Button
-              size="sm"
-              variant="ghost"
+            // A bar cell is a TopbarItem, not a Button: a Button in a bar is a --control-height
+            // pill floating in a taller strip, with its own hover fill and its own focus ring.
+            <TopbarItem
               aria-label={collapsed ? "サイドバーを開く" : "サイドバーを閉じる"}
               aria-expanded={!collapsed}
               onClick={() => setCollapsed((c) => !c)}
@@ -107,7 +107,7 @@ export default function Demo() {
               ) : (
                 <PanelLeftClose aria-hidden="true" />
               )}
-            </Button>
+            </TopbarItem>
           }
         />
       }

package/docs/showcase/settings-security-mfa.tsx

@@ -78,7 +78,7 @@ export default function SecurityMfaShowcase() {
           </CardHeader>
           <CardContent flush>
             <ListRow
-              leading={<Mail aria-hidden="true" className="size-4" />}
+              leading={<Mail aria-hidden="true" />}
               title="OTP qua email"
               description="Gửi mã tới t•••@famgia.com"
               trailing={
@@ -91,7 +91,7 @@ export default function SecurityMfaShowcase() {
               }
             />
             <ListRow
-              leading={<Smartphone aria-hidden="true" className="size-4" />}
+              leading={<Smartphone aria-hidden="true" />}
               title="Ứng dụng xác thực"
               description="Chưa thiết lập"
               trailing={
@@ -101,7 +101,7 @@ export default function SecurityMfaShowcase() {
               }
             />
             <ListRow
-              leading={<KeyRound aria-hidden="true" className="size-4" />}
+              leading={<KeyRound aria-hidden="true" />}
               title="Passkey"
               description="1 thiết bị · MacBook Pro"
               trailing={

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "20.1.0",
-  "godxUiMcp": "20.1.0",
+  "version": "20.2.0",
+  "godxUiMcp": "20.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -357,8 +357,8 @@
     "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:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && 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:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && 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",
-    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && 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:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && 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:gate-coverage && pnpm check:mcp-prop-sync",
-    "verify:browser": "pnpm check:contrast && pnpm check:visual-audit",
+    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && 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:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && 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:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions",
+    "verify:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
     "check:release-plan": "node scripts/check-release-command-plan.mjs",
@@ -368,6 +368,7 @@
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-catalog-coverage": "node scripts/check-mcp-catalog-coverage.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
+    "check:catalog-contradictions": "node scripts/check-catalog-contradictions.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
     "check:doc-prop-existence": "node scripts/check-doc-prop-existence.mjs",
     "gen:component-api-manifest": "node scripts/gen-component-api-manifest.mjs",
@@ -404,6 +405,7 @@
     "check:audit-sync": "node scripts/check-audit-sync.mjs",
     "check:gate-coverage": "node scripts/check-gate-coverage.mjs",
     "check:contrast": "node scripts/check-contrast.mjs",
+    "check:text-ink-clip": "node scripts/check-text-ink-clip.mjs",
     "visual-audit": "node scripts/visual-audit.mjs",
     "check:visual-audit": "node scripts/visual-audit-smoke.mjs",
     "check:frame-axe": "node scripts/check-frame-axe.mjs",
@@ -483,6 +485,7 @@
     "react-aria-components": "^1.21.1",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.12.3",
+    "react-stately": "3.50.0",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",

package/scripts/_agent-setup.mjs

@@ -74,8 +74,21 @@ or change a component, page, or form — no exceptions.
   \`rounded border\` div. Text is \`<Text tone size weight truncate>\`, never utility classes.
 
 ## Before writing UI
-1. **MCP-first.** Consult the godx-ui MCP: \`get_component <Name>\`, \`search_components\`,
-   \`list_audit_rules\`, \`list_visual_checks\`. Never guess a prop; never hand-roll what a
+1. **DISCOVERY BEFORE LOOKUP — in this order, every time.**
+   1. \`search_components "<the area you are about to build>"\` FIRST. This is the only call that
+      answers "what already exists here". Ask it before the first line of JSX, not after.
+   2. \`get_component <Name>\` second, once you know the name.
+   \`get_component\` answers "how do I use X" and is USELESS for finding X — you can only look up a
+   name you already have. Skipping step 1 is how a consumer hand-rolled an organization switcher
+   the package ships (\`OrgSwitcher\`) and built three topbar cells out of Buttons instead of
+   \`TopbarItem\`: both were one \`search_components\` call away, and neither was ever searched for.
+   **Existing code in this repo is NOT the authority.** Reading a neighbouring file and copying it
+   is the most common way this rule gets skipped — measured: of four fresh agents given a vague UI
+   task, all four answered correctly but two never called the MCP at all, saying the answer was
+   already in the code. They were only right because that code had just been fixed; a week earlier
+   the same files hand-rolled a switcher and put Buttons in topbar slots, and both agents would
+   have copied it. Search the catalog even when a local file looks like it already answers you.
+   Also \`list_audit_rules\`, \`list_visual_checks\`. Never guess a prop; never hand-roll what a
    primitive already does.
 2. **Real primitives only.** No raw \`<input>/<select>/<button>/<textarea>/<table>\`, no
    styled-div fakes. A labelled control ALWAYS goes in \`<FormField label=…>\` (it owns the
@@ -105,8 +118,21 @@ This app uses @godxjp/ui. EVERY time you build or change UI:
    \`PageContainer\`; siblings go in \`<Flex direction="col" gap>\` / \`<ResponsiveGrid>\`; no
    \`flex\`/\`grid\`/\`gap-*\`/\`p-*\`/\`m-*\` on your own elements; boxes are \`Card\`/\`Badge\`/
    \`ListRow\`/\`Descriptions\`, never a \`rounded border\` div; text is \`<Text tone size weight>\`.
-1. **MCP-first.** Consult the \`godx-ui\` MCP — \`get_component\`, \`search_components\`,
-   \`list_audit_rules\`, \`list_visual_checks\`. Never guess a prop; never hand-roll what a
+1. **DISCOVERY BEFORE LOOKUP — in this order, every time.**
+   1. \`search_components "<the area you are about to build>"\` FIRST. This is the only call that
+      answers "what already exists here". Ask it before the first line of JSX, not after.
+   2. \`get_component <Name>\` second, once you know the name.
+   \`get_component\` answers "how do I use X" and is USELESS for finding X — you can only look up a
+   name you already have. Skipping step 1 is how a consumer hand-rolled an organization switcher
+   the package ships (\`OrgSwitcher\`) and built three topbar cells out of Buttons instead of
+   \`TopbarItem\`: both were one \`search_components\` call away, and neither was ever searched for.
+   **Existing code in this repo is NOT the authority.** Reading a neighbouring file and copying it
+   is the most common way this rule gets skipped — measured: of four fresh agents given a vague UI
+   task, all four answered correctly but two never called the MCP at all, saying the answer was
+   already in the code. They were only right because that code had just been fixed; a week earlier
+   the same files hand-rolled a switcher and put Buttons in topbar slots, and both agents would
+   have copied it. Search the catalog even when a local file looks like it already answers you.
+   Also \`list_audit_rules\`, \`list_visual_checks\`. Never guess a prop; never hand-roll what a
    primitive already does.
 2. **Real primitives only.** No raw \`<input>/<select>/<button>/<textarea>/<table>\`. A labelled
    control ALWAYS goes in \`<FormField label=…>\` — never a bare \`<Label>\`+\`<Input>\`. Semantic
@@ -192,10 +218,13 @@ export function writeWorkflowMd(root) {
   const path = join(root, ".claude", "godxjp-ui-workflow.md");
   mkdirSync(dirname(path), { recursive: true });
   // This file is owned entirely by the package — the CLAUDE.md block tells the consumer to edit
-  // it, but nothing else reads from it, so a stale copy is pure loss. Rewrite when the stamp moves.
+  // it, but nothing else reads from it, so a stale copy is pure loss. It is package-owned end to
+  // end, so the comparison is the BODY: a version check froze every consumer whose stamp already
+  // matched, which meant guidance edited between releases reached nobody while still reading as
+  // current. Same defect as ensureClaudeMd carried, same fix.
   if (existsSync(path)) {
     const cur = readFileSync(path, "utf8");
-    if (stampedVersion(cur) === KIT_VERSION) return false;
+    if (cur.trim() === WORKFLOW_MD.trim()) return false;
     writeFileSync(path, WORKFLOW_MD);
     return "refreshed";
   }
@@ -207,13 +236,34 @@ export function writeWorkflowMd(root) {
  * Append the godxjp-ui mandate to the consumer's CLAUDE.md (created if absent). Idempotent via the
  * markers.
  */
+
+/**
+ * Is the managed region in `existing` already byte-identical to what we would write?
+ *
+ * Digest first (cheap, and survives whitespace-only rewrites of the surrounding file). When the
+ * stamp predates digest stamping there is nothing to compare, so fall back to the region body
+ * itself rather than assuming current — assuming current is the bug this replaced.
+ */
+function blockIsCurrent(existing, block) {
+  const wanted = stampedDigest(block);
+  const have = stampedDigest(existing);
+  if (wanted && have) return wanted === have;
+  const region = (text) => text.slice(text.indexOf("<!-- godxjp-ui:start"), text.indexOf("<!-- godxjp-ui:end -->"));
+  return region(existing).trim() === region(block).trim();
+}
+
 export function ensureClaudeMd(root) {
   const path = join(root, "CLAUDE.md");
   const existing = existsSync(path) ? readFileSync(path, "utf8") : null;
   if (existing?.includes("godxjp-ui:start")) {
     // Present — but at WHICH version? Refresh only the delimited block; anything the consumer
     // wrote around it is untouched.
-    if (stampedVersion(existing) === KIT_VERSION) return "present";
+    // Compare the DIGEST, not the version — which is what the note above already promised and
+    // what this line did not do. Guidance is edited far more often than the package version moves,
+    // so a version check freezes every consumer whose stamp already matches: a rewritten mandate
+    // reached nobody, and the block still read as current. A file written before digest stamping
+    // has no digest at all, so fall back to comparing the rendered body.
+    if (blockIsCurrent(existing, CLAUDE_MD_BLOCK)) return "present";
     writeFileSync(
       path,
       refreshBlock(existing, CLAUDE_MD_BLOCK, "<!-- godxjp-ui:start", "<!-- godxjp-ui:end -->"),

package/scripts/visual-audit.mjs

@@ -109,16 +109,40 @@ function collectInPage() {
       accents.push({ rgb: { r: c.r, g: c.g, b: c.b }, tag: el.tagName.toLowerCase() });
   }
 
-  // Interactive targets — for the 24×24 minimum.
-  const targets = [];
+  // Interactive targets — for the 24x24 minimum of WCAG 2.2 SC 2.5.8, INCLUDING the two exceptions
+  // the criterion itself grants. Reporting the bare 24x24 rule flagged a 16px checkbox standing
+  // alone in white space and every legal link inside a consent sentence — none of which the
+  // criterion requires anyone to change. A checker that over-reports is not stricter, it is wrong,
+  // and it costs the same as under-reporting: readers learn to skip the finding.
+  const rawTargets = [];
   for (const el of document.querySelectorAll(
     "a[href], button, [role=button], input:not([type=hidden]), select, [tabindex]:not([tabindex='-1'])",
   )) {
     if (!visible(el)) continue;
     const r = el.getBoundingClientRect();
     const name = (el.getAttribute("aria-label") || el.textContent || "").trim().slice(0, 40);
-    targets.push({ width: Math.round(r.width), height: Math.round(r.height), name });
+    rawTargets.push({
+      width: Math.round(r.width),
+      height: Math.round(r.height),
+      cx: r.left + r.width / 2,
+      cy: r.top + r.height / 2,
+      // INLINE exception: "the target is in a sentence or its size is otherwise constrained by the
+      // line-height of non-target text". A box participating in a text line is exactly that; an
+      // inline-block/flex control is not, so the test is the computed display, not the tag.
+      inline: getComputedStyle(el).display === "inline",
+      name,
+    });
   }
+  const targets = rawTargets.map((t) => {
+    if (t.inline) return { ...t, exempt: "inline" };
+    // SPACING exception: undersized is allowed when a 24px-DIAMETER circle centred on the target
+    // does not intersect the circle of any other target. Two circles of radius 12 intersect when
+    // their centres are closer than 24px, so that is the whole test.
+    const crowded = rawTargets.some(
+      (o) => o !== t && Math.hypot(o.cx - t.cx, o.cy - t.cy) < 24,
+    );
+    return { ...t, exempt: crowded ? null : "spacing" };
+  });
 
   // Emoji that survived to the rendered DOM.
   const text = document.body ? document.body.innerText : "";
@@ -165,7 +189,11 @@ function collectInPage() {
   const probe = (layer, className, prop, bad) => {
     const el = document.createElement("div");
     el.className = className;
-    el.style.position = "absolute";
+    // No inline `position` here. It used to be set to "absolute" to keep the node out of flow, and
+    // that silently POISONED the one probe that read `position`: the dialog check asked whether
+    // position !== "static" on an element the probe itself had just made absolute, so it passed
+    // whether or not the layer was loaded. An empty hidden div contributes no visible layout, so
+    // the flow guard was never worth a probe that cannot fail.
     el.style.visibility = "hidden";
     document.body.appendChild(el);
     const v = getComputedStyle(el)[prop];
@@ -175,9 +203,18 @@ function collectInPage() {
   const layers = [
     probe("control", "ui-button", "borderRadius", "0px"),
     probe("navigation-layout", "ui-dropdown-menu-content", "borderTopWidth", "0px"),
-    probe("card-layout", "ui-card", "borderTopWidth", "0px"),
+    // `.ui-card` is NOT a class the library sets rules on — Card renders `cn("group/card", …)`
+    // and card-layout.css owns `.ui-card-bar` / `.ui-card-cover` / `.ui-card-inset*` /
+    // `.ui-card-header--banded`. Probing it could never pass, so every consumer page reported a
+    // permanent, meaningless `card-layout is not loaded` error. `.ui-card-inset-x` is a real rule
+    // AND resolves --card-space-inset, so it proves the layer and its token chain together.
+    probe("card-layout", "ui-card-inset-x", "paddingInline", "0px"),
     probe("layout", "ui-page-container", "display", "block"),
-    probe("dialog-layout", "ui-dialog-content", "position", "static"),
+    // `.ui-dialog-content` is not a class either — dialog-layout styles the `[data-slot=
+    // "dialog-content"]` attribute — so this probe named a class nothing declares AND read the
+    // property the probe used to set on itself. `.ui-dialog-overlay` is a real selector and
+    // z-index defaults to "auto", which nothing here writes.
+    probe("dialog-layout", "ui-dialog-overlay", "zIndex", "auto"),
     probe("form-layout", "ui-form-field", "display", "inline"),
   ];
   // Control rows — every control in a row shares the control tier height.
@@ -319,7 +356,8 @@ async function audit(targets, { chromium, AxeBuilder }) {
             );
         }
         for (const t of m.targets) {
-          if (isUndersizedTarget(t))
+          // `exempt` is set by the SC 2.5.8 Inline / Spacing carve-outs measured in the page.
+          if (!t.exempt && isUndersizedTarget(t))
             findings.push(
               buildFinding(
                 "target-size-min",