@godxjp/ui 23.4.7 → 23.4.9

package/dist/components/feedback/dialog.d.ts

@@ -142,7 +142,8 @@ declare const AlertDialogAction: typeof DialogAction;
 declare const AlertDialogCancel: typeof DialogCancel;
 /**
  * Preset: confirm / destructive / typed-challenge / step-up without compound markup. Both flows
- * force the destructive tone (button + soft header band).
+ * force the destructive shape: the confirm button plus antd's leading status glyph. The header
+ * surface stays untinted — see the note on `showDangerIcon` below.
  */
 declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, confirmPhrase, challenge, onConfirm, stepUp, keepOpenOnConfirm, pending, }: AlertDialogProp): React.JSX.Element;
 export declare const Dialog: typeof DialogRoot & {

package/dist/components/feedback/dialog.js

@@ -4,7 +4,7 @@ import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
-import { X } from "lucide-react";
+import { AlertCircle, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
@@ -392,7 +392,7 @@ function AlertDialog({
   const needsPhrase = phrase != null && phrase.length > 0;
   const phraseMatches = !needsPhrase || typed === phrase;
   const effectiveVariant = needsPhrase ? "destructive" : variant;
-  const headerTone = effectiveVariant === "destructive" ? "destructive" : "default";
+  const showDangerIcon = effectiveVariant === "destructive";
   const resolvedConfirm = confirmLabel ?? (needsPhrase ? t("common.delete") : t("common.continue"));
   const resolvedCancel = cancelLabel ?? t("common.cancel");
   const busy = pending || verifying;
@@ -429,10 +429,13 @@ function AlertDialog({
     })();
   };
   return /* @__PURE__ */ jsx(AlertDialogRoot, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { tone: headerTone, children: [
-      /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
-      description ? /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }) : null
-    ] }),
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs("div", { className: "ui-dialog-confirm-body", children: [
+      showDangerIcon && /* @__PURE__ */ jsx(AlertCircle, { className: "ui-dialog-confirm-icon", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs("div", { className: "ui-dialog-confirm-text", children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+        description ? /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }) : null
+      ] })
+    ] }) }),
     needsPhrase && /* @__PURE__ */ jsx(FormField, { id: inputId, label: t("common.typeToConfirm", { phrase }), children: /* @__PURE__ */ jsx(
       Input,
       {

package/dist/contracts/measurement.json

@@ -0,0 +1,57 @@
+{
+  "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
+  "version": "23.4.9",
+  "targetSize": {
+    "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
+    "min": 24,
+    "measures": "target",
+    "note": "The TARGET is the region that accepts the pointer action, which is not always the painted box. getBoundingClientRect() returns the border box and cannot see a pseudo-element, so it UNDER-REPORTS every selector listed under `expanders`. Measure with elementFromPoint — see `method` — or treat a listed selector as conforming at `targetMin`.",
+    "method": "docs/MEASUREMENT-CONTRACT.md#measuring-a-target",
+    "expanders": [
+      {
+        "selector": ".ui-control-inline-affix-action",
+        "via": "::after",
+        "source": "src/styles/control.css",
+        "targetMin": 24,
+        "components": [
+          "badge",
+          "date-picker",
+          "input",
+          "tag-input",
+          "textarea",
+          "time-picker"
+        ]
+      },
+      {
+        "selector": ".ui-data-table-sort-button",
+        "via": "::after",
+        "source": "src/styles/table-layout.css",
+        "targetMin": 24,
+        "components": [
+          "data-table"
+        ]
+      },
+      {
+        "selector": ".ui-number-input-step",
+        "via": "::after",
+        "source": "src/styles/control.css",
+        "targetMin": 24,
+        "components": [
+          "number-input"
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "scale": "--space-* measures the distance BETWEEN things: page sections, siblings, a Card and its content.",
+    "doesNotApplyTo": "The INTERIOR of a control. That geometry is derived from the control band, not from --space-*, so a control's own label sits closer to its edge than --space-2 and is not a finding.",
+    "derivation": "interior height = --control-height − (interior padding × 2)",
+    "predicate": "An element is a control when its painted block-size equals the resolved --control-height for its size. Segmented's track, Button, Input and Select all satisfy it — a gate that applies a --space-* floor inside a control flags all four, not just Segmented.",
+    "reference": "docs/SPACING.md#control-interiors-are-not-on-this-scale"
+  },
+  "issues": {
+    "503": "Segmented track padding read against a --space-2 floor that does not govern control interiors.",
+    "506": "NumberInput steppers read as 24×13 (paint); the target is 24×26.",
+    "507": "DatePicker calendar button read as 20×20 (paint); the target is 24×24."
+  }
+}

package/dist/styles/control.css

@@ -470,6 +470,10 @@
     fill: currentColor;
   }
 
+  .ui-radio[data-state="unchecked"] .ui-radio-icon {
+    visibility: hidden;
+  }
+
   .ui-switch:has(input[aria-invalid="true"]) {
     --tw-ring-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
     box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));

package/dist/styles/dialog-layout.css

@@ -123,7 +123,8 @@
     }
   }
 
-  [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-header"] {
+  [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-header"],
+  [data-slot="dialog-header"]:not([data-tone="default"]) {
     margin-inline: calc(-1 * var(--dialog-space-x));
     margin-block-start: calc(-1 * var(--dialog-space-y));
     padding: var(--dialog-space-y) var(--dialog-space-x);
@@ -222,6 +223,26 @@
   [data-slot="dialog-header"]:not([data-tone="default"]) [data-slot="dialog-description"] {
     color: hsl(var(--foreground));
   }
+
+  .ui-dialog-confirm-body {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--dialog-confirm-space-gap);
+  }
+
+  .ui-dialog-confirm-icon {
+    flex: none;
+    inline-size: var(--dialog-confirm-icon-size);
+    block-size: var(--dialog-confirm-icon-size);
+    color: hsl(var(--text-error));
+  }
+
+  .ui-dialog-confirm-text {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--dialog-title-block-space-gap);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/styles/layout.css

@@ -716,6 +716,11 @@
     width: 100%;
   }
 
+  .ui-page-header-extra > .ui-flex[data-direction="row"] {
+    flex-wrap: wrap;
+    max-inline-size: 100%;
+  }
+
   .ui-page-header-title-row {
     display: flex;
     flex-wrap: wrap;
@@ -762,11 +767,6 @@
     .ui-page-header .ui-page-subtitle {
       font-size: var(--page-subtitle-font-size-compact);
     }
-
-    .ui-page-header-extra > .ui-flex[data-direction="row"] {
-      flex-wrap: wrap;
-      max-width: 100%;
-    }
   }
 
   @media (max-width: 639.98px) {

package/dist/tokens/components/feedback.css

@@ -36,6 +36,9 @@
   --dialog-title-block-space-gap: var(--space-1);
   --dialog-extra-space-gap: var(--space-2);
 
+  --dialog-confirm-icon-size: var(--icon-size-xl);
+  --dialog-confirm-space-gap: var(--space-3);
+
   --dialog-header-close-space-inline-end: var(--space-8);
 
   --dialog-close-rest-alpha: 0.7;

package/docs/MEASUREMENT-CONTRACT.md

@@ -0,0 +1,109 @@
+# Measurement contract
+
+**What box this library means when it says a target is 24×24, and where the `--space-*` scale stops
+applying.** The facts below also ship as data at
+`node_modules/@godxjp/ui/dist/contracts/measurement.json`, so a gate can read them without reading
+this page.
+
+## Why this page exists
+
+Three issues — [#503], [#506], [#507] — were each closed and reopened four times between 23.0.0 and
+23.4.5. Every reopening carried a correct measurement. Every closing carried a correct fix. The two
+sides were measuring different boxes:
+
+| issue | the consumer's gate read | what the library ships       |
+| ----- | ------------------------ | ---------------------------- |
+| #507  | `20×20`                  | a **24×24** target           |
+| #506  | `24×13`                  | a **24×26** target           |
+| #503  | text `5.1px` from edge   | 5.1px **derived** from the band |
+
+`getBoundingClientRect()` returns an element's **border box**, and a border box does not include an
+absolutely-positioned pseudo-element. So a gate built on it reports the same number forever no
+matter what the library ships — which means it cannot tell *fixed* from *ignored*, and reopening the
+issue is the correct thing for it to do. Prose could not close that gap either: `docs/SPACING.md`
+carried the #503 derivation from 23.4.0 onward and the issue was reopened twice afterwards, because
+a gate cannot read prose.
+
+## Target size
+
+**WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px.** The criterion measures the
+**target**: the region that accepts the pointer action. That is not always the painted box, and
+carrying the target on a pseudo-element is the technique [Understanding 2.5.8] names.
+
+This library does that in three places, because in each one growing the **paint** would move
+geometry that belongs to something else:
+
+| selector                        | paint stays | why the paint cannot grow                                                   |
+| ------------------------------- | ----------- | --------------------------------------------------------------------------- |
+| `.ui-control-inline-affix-action` | 20×20     | it is an affix inside a 32px field; growing it moves the field's own geometry |
+| `.ui-number-input-step`         | 24×13       | two steppers stacked in a 32px band — 24×2 = 48 does not fit                 |
+| `.ui-data-table-sort-button`     | header size | a header cell's height is the table's row rhythm                            |
+
+The authoritative list is `targetSize.expanders` in `dist/contracts/measurement.json`; it is
+generated from the CSS, and `scripts/check-measurement-contract.mjs` proves every entry in a real
+browser before release, so it cannot claim a target the library does not ship.
+
+### Measuring a target
+
+Scan outward from the centre with `elementFromPoint` until the point stops belonging to the element.
+This reads the real target, and it also catches the case `getBoundingClientRect` misses in the other
+direction — a 44×44 button half-covered by something else still reports 44×44 from its rect.
+
+```js
+function hitRegion(el) {
+  const r = el.getBoundingClientRect();
+  const cx = r.left + r.width / 2;
+  const cy = r.top + r.height / 2;
+  const edge = (dx, dy) => {
+    let reach = 0;
+    for (let i = 0; i <= 40; i += 0.25) {
+      const hit = document.elementFromPoint(cx + dx * i, cy + dy * i);
+      if (hit === el || el.contains(hit)) reach = i;
+      else break;
+    }
+    return reach;
+  };
+  return { width: edge(-1, 0) + edge(1, 0), height: edge(0, -1) + edge(0, 1) };
+}
+```
+
+If your gate cannot run a hit-test, read the contract and treat a listed selector as conforming at
+its `targetMin` instead:
+
+```js
+const contract = require("@godxjp/ui/contracts/measurement.json");
+const expanded = contract.targetSize.expanders.map((e) => e.selector);
+
+// inside the gate, per candidate element:
+if (expanded.some((sel) => el.matches(sel) || el.closest(sel))) return; // target is on a ::after
+```
+
+## Spacing
+
+`--space-*` measures the distance **between** things: page sections, siblings in a stack, a card's
+shell against its content. It is **not** a floor for the **interior** of a control — that geometry
+derives from the control band (`--control-height`, `--control-padding-x`).
+
+```
+interior height = --control-height − (interior padding × 2)
+```
+
+A gate can tell the two apart at runtime without a selector list:
+
+> An element is a control when its painted block-size equals the resolved `--control-height` for its
+> size.
+
+`Segmented`'s track satisfies it, and so do `Button`, `Input` and `Select` — which is the useful part
+of the test: a `--space-2` floor applied inside a control flags all four, not just the one that got
+reported. `docs/SPACING.md` § *Control interiors are NOT on this scale* carries the full derivation
+and the `--segmented-track-padding` knob for a service that wants a roomier control.
+
+## MCP
+
+`get_rule` · `list_audit_rules` · `get_tokens` — and `draft_bug_report` if a measurement taken this
+way still disagrees with what the library claims. Bring the number; that is what this page is for.
+
+[#503]: https://github.com/godx-jp/godxjp-ui/issues/503
+[#506]: https://github.com/godx-jp/godxjp-ui/issues/506
+[#507]: https://github.com/godx-jp/godxjp-ui/issues/507
+[understanding 2.5.8]: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

package/docs/SPACING.md

@@ -89,6 +89,11 @@ this library holds — or the track grows to 44px (28 + 8 × 2) and stops lining
 control. The same derivation is why a `Button`'s own label sits ~5px inside its border. A control
 is sized by its band; the band is what a dense enterprise UI is for.
 
+**For a gate, not a reader.** This derivation also ships as data at
+`dist/contracts/measurement.json` (`spacing`), because gh#503 was reopened twice *after* this
+section was written — prose cannot be read by the browser test that files the bug. See
+`docs/MEASUREMENT-CONTRACT.md`.
+
 **The knob, if a service wants a roomier control.** `--segmented-track-padding` is a published
 component token (`src/tokens/components/segmented.css`); raising it re-derives the item height from
 the same formula, so the track stays exactly one control tall. Do not reach for a Tailwind `p-*` on

package/docs/feedback/danger-confirm.tsx

@@ -7,7 +7,8 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
 /**
  * DangerConfirm recipe (godxui#193) — high-stakes deletion built on the AlertDialog preset.
  * No new component: `challenge` gates the confirm button behind an exact typed slug, and `stepUp`
- * runs an async passkey / 2FA re-auth before onConfirm fires. Both force the destructive tone.
+ * runs an async passkey / 2FA re-auth before onConfirm fires. Both force the destructive shape
+ * (button + leading status glyph, untinted surface — antd `Modal.confirm` parity).
  * Mirrors DXS SCR-203 (org delete by slug) and SCR-209 (refund with step-up).
  */
 export default function Demo() {
@@ -25,8 +26,10 @@ export default function Demo() {
             <CardTitle level={2}>Organization delete · typed slug challenge</CardTitle>
             <CardDescription>
               The confirm button stays disabled until the operator types the exact organization slug
-              (<code>acme-inc</code>). A typed challenge always forces the destructive tone and a
-              soft danger header band.
+              (<code>acme-inc</code>). A typed challenge always forces the destructive shape: the
+              destructive confirm button and antd&rsquo;s leading status glyph. The header surface
+              stays untinted — the glyph is the signal, exactly as <code>Modal.confirm</code> does
+              it.
             </CardDescription>
           </CardHeader>
           <CardContent>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.7",
-  "godxUiMcp": "23.4.7",
+  "version": "23.4.9",
+  "godxUiMcp": "23.4.9",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -52,6 +52,7 @@
     "./styles/*": "./dist/styles/*.css",
     "./theme/*": "./dist/theme/*",
     "./tokens": "./dist/tokens/base.css",
+  "./contracts/measurement.json": "./dist/contracts/measurement.json",
     "./admin": {
       "types": "./dist/components/admin/index.d.ts",
       "import": "./dist/components/admin/index.js"
@@ -335,7 +336,7 @@
     "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",
-    "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: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-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets",
+    "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: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:measurement-contract && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets",
     "verify:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:font-fallback-metrics && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
@@ -399,6 +400,8 @@
     "check:data-entry-frame-runtime": "node scripts/check-data-entry-frame-runtime.mjs",
     "check:data-table-empty-inset": "node scripts/check-data-table-empty-inset.mjs",
     "check:number-input-step-target": "node scripts/check-number-input-step-target.mjs",
+    "check:measurement-contract": "node scripts/gen-measurement-contract.mjs --check",
+    "check:measurement-contract-browser": "node scripts/check-measurement-contract.mjs",
     "check:mcp-token-sync": "node scripts/gen-component-tokens.mjs --check",
     "check:email-token-sync": "node scripts/gen-email-tokens.mjs --check",
     "check:focus-ring-paint": "node scripts/check-focus-ring-paint.mjs",