@godxjp/ui 21.0.0 → 23.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (154) hide show
  1. package/README.md +4 -4
  2. package/dist/app/app-provider.js +2 -1
  3. package/dist/components/data-display/badge.d.ts +28 -1
  4. package/dist/components/data-display/badge.js +2 -0
  5. package/dist/components/data-display/data-table.d.ts +18 -2
  6. package/dist/components/data-display/data-table.js +4 -0
  7. package/dist/components/data-display/index.d.ts +1 -1
  8. package/dist/components/data-display/popover.d.ts +19 -1
  9. package/dist/components/data-display/popover.js +9 -1
  10. package/dist/components/data-display/progress.d.ts +37 -0
  11. package/dist/components/data-display/progress.js +57 -5
  12. package/dist/components/data-display/scroll-area.d.ts +24 -4
  13. package/dist/components/data-display/scroll-area.js +34 -72
  14. package/dist/components/data-entry/cascader.js +8 -6
  15. package/dist/components/data-entry/checkbox.js +2 -0
  16. package/dist/components/data-entry/choice-hit-target.d.ts +24 -0
  17. package/dist/components/data-entry/choice-hit-target.js +12 -0
  18. package/dist/components/data-entry/control-surface.d.ts +8 -0
  19. package/dist/components/data-entry/control-surface.js +10 -1
  20. package/dist/components/data-entry/date-picker.d.ts +10 -3
  21. package/dist/components/data-entry/date-picker.js +503 -238
  22. package/dist/components/data-entry/form-field.d.ts +1 -1
  23. package/dist/components/data-entry/form-field.js +7 -3
  24. package/dist/components/data-entry/form.js +10 -1
  25. package/dist/components/data-entry/index.d.ts +0 -6
  26. package/dist/components/data-entry/index.js +0 -6
  27. package/dist/components/data-entry/label.d.ts +14 -1
  28. package/dist/components/data-entry/label.js +6 -1
  29. package/dist/components/data-entry/radio.d.ts +27 -6
  30. package/dist/components/data-entry/radio.js +89 -43
  31. package/dist/components/data-entry/search-select.js +226 -89
  32. package/dist/components/data-entry/select.d.ts +76 -14
  33. package/dist/components/data-entry/select.js +497 -163
  34. package/dist/components/data-entry/slider.d.ts +3 -11
  35. package/dist/components/data-entry/slider.js +582 -93
  36. package/dist/components/data-entry/switch.d.ts +6 -3
  37. package/dist/components/data-entry/switch.js +36 -11
  38. package/dist/components/layout/mobile-shell.d.ts +1 -1
  39. package/dist/components/layout/mobile-shell.js +2 -0
  40. package/dist/components/navigation/dropdown-menu.d.ts +11 -3
  41. package/dist/components/navigation/dropdown-menu.js +190 -15
  42. package/dist/components/navigation/index.d.ts +0 -3
  43. package/dist/components/navigation/index.js +0 -78
  44. package/dist/components/navigation/steps.d.ts +1 -1
  45. package/dist/components/navigation/steps.js +3 -1
  46. package/dist/components/navigation/tabs-scroll.d.ts +27 -0
  47. package/dist/components/navigation/tabs-scroll.js +52 -1
  48. package/dist/components/navigation/tabs.d.ts +2 -2
  49. package/dist/components/navigation/tabs.js +88 -23
  50. package/dist/components/ui/index.d.ts +0 -4
  51. package/dist/components/ui/index.js +0 -4
  52. package/dist/components/ui/input-otp.d.ts +1 -1
  53. package/dist/components/ui/segmented.d.ts +15 -1
  54. package/dist/components/ui/segmented.js +15 -6
  55. package/dist/components/ui/tag-input.js +3 -5
  56. package/dist/i18n/messages/en.json +3 -2
  57. package/dist/i18n/messages/ja.json +3 -2
  58. package/dist/i18n/messages/vi.json +3 -2
  59. package/dist/lib/datetime/picker-format.d.ts +18 -0
  60. package/dist/lib/datetime/picker-format.js +35 -1
  61. package/dist/lib/field-a11y.d.ts +12 -0
  62. package/dist/lib/field-a11y.js +14 -1
  63. package/dist/lib/select-options.d.ts +21 -0
  64. package/dist/lib/select-options.js +46 -0
  65. package/dist/props/components/data-display.prop.d.ts +16 -6
  66. package/dist/props/components/data-entry.prop.d.ts +503 -129
  67. package/dist/props/components/index.d.ts +2 -2
  68. package/dist/props/components/layout.prop.d.ts +12 -1
  69. package/dist/props/components/navigation.prop.d.ts +93 -1
  70. package/dist/props/registry.d.ts +79 -16
  71. package/dist/props/registry.js +85 -15
  72. package/dist/props/vocabulary/data.prop.d.ts +12 -0
  73. package/dist/props/vocabulary/index.d.ts +2 -2
  74. package/dist/props/vocabulary/layout.prop.d.ts +11 -0
  75. package/dist/styles/badge-layout.css +4 -0
  76. package/dist/styles/card-layout.css +6 -6
  77. package/dist/styles/control.css +220 -29
  78. package/dist/styles/data-display-layout.css +94 -23
  79. package/dist/styles/focus-ring.css +6 -4
  80. package/dist/styles/fonts.css +88 -4
  81. package/dist/styles/navigation-layout.css +36 -236
  82. package/dist/styles/shell-layout.css +149 -139
  83. package/dist/styles/table-layout.css +41 -3
  84. package/dist/tokens/components/control.css +4 -0
  85. package/dist/tokens/components/data-display.css +9 -5
  86. package/dist/tokens/components/navigation.css +9 -5
  87. package/dist/tokens/components/scroll-area.css +7 -0
  88. package/dist/tokens/components/segmented.css +0 -2
  89. package/dist/tokens/components/shell.css +2 -0
  90. package/dist/tokens/components/table.css +3 -0
  91. package/dist/tokens/foundation.css +7 -0
  92. package/docs/COMPONENTS.md +14 -14
  93. package/docs/CONSUMER-RULES.md +24 -1
  94. package/docs/CUSTOMER-THEMING.md +7 -1
  95. package/docs/FRAME-COVERAGE-REPORT.md +5 -11
  96. package/docs/TOKENS.md +65 -0
  97. package/docs/data-display/badge.tsx +37 -0
  98. package/docs/data-display/data-table/index.tsx +45 -1
  99. package/docs/data-display/popover.tsx +43 -5
  100. package/docs/data-display/progress.tsx +28 -0
  101. package/docs/data-display/scroll-area.tsx +51 -45
  102. package/docs/data-entry/calendar.tsx +2 -2
  103. package/docs/data-entry/date-picker.tsx +144 -5
  104. package/docs/data-entry/form/examples/invoice-form.tsx +2 -2
  105. package/docs/data-entry/form-field/examples/a11y-contract.tsx +3 -5
  106. package/docs/data-entry/form.tsx +4 -4
  107. package/docs/data-entry/input-otp.tsx +5 -2
  108. package/docs/data-entry/number-input.tsx +31 -0
  109. package/docs/data-entry/segmented.tsx +143 -2
  110. package/docs/data-entry/select-matrix.tsx +1 -2
  111. package/docs/data-entry/select.tsx +108 -3
  112. package/docs/data-entry/slider.tsx +125 -47
  113. package/docs/feedback/dialog.tsx +1 -2
  114. package/docs/feedback/sheet.tsx +1 -2
  115. package/docs/layout/app-shell-states.tsx +143 -0
  116. package/docs/layout/mobile-shell.tsx +5 -0
  117. package/docs/navigation/dropdown-menu.tsx +75 -4
  118. package/docs/navigation/tabs.tsx +149 -0
  119. package/docs/roadmap/antd-parity.md +35 -34
  120. package/docs/roadmap/parity-audit-data-entry.md +196 -172
  121. package/docs/roadmap/parity-audit-layout-navigation-general.md +304 -310
  122. package/docs/roadmap/parity-backlog.md +8 -10
  123. package/docs/showcase/acme-portal.tsx +7 -0
  124. package/package.json +28 -64
  125. package/scripts/ui-audit.mjs +18 -5
  126. package/scripts/visual-audit-rules.mjs +0 -7
  127. package/scripts/visual-audit.mjs +6 -27
  128. package/dist/components/data-entry/date-range-picker.d.ts +0 -11
  129. package/dist/components/data-entry/date-range-picker.js +0 -349
  130. package/dist/components/data-entry/month-picker.d.ts +0 -10
  131. package/dist/components/data-entry/month-picker.js +0 -241
  132. package/dist/components/data-entry/month-range-picker.d.ts +0 -10
  133. package/dist/components/data-entry/month-range-picker.js +0 -301
  134. package/dist/components/navigation/context-menu.d.ts +0 -21
  135. package/dist/components/navigation/context-menu.js +0 -149
  136. package/dist/components/navigation/menubar.d.ts +0 -21
  137. package/dist/components/navigation/menubar.js +0 -136
  138. package/dist/components/navigation/navigation-menu.d.ts +0 -10
  139. package/dist/components/navigation/navigation-menu.js +0 -91
  140. package/dist/components/ui/context-menu.d.ts +0 -1
  141. package/dist/components/ui/context-menu.js +0 -2
  142. package/dist/components/ui/date-range-picker.d.ts +0 -1
  143. package/dist/components/ui/date-range-picker.js +0 -2
  144. package/dist/components/ui/menubar.d.ts +0 -1
  145. package/dist/components/ui/menubar.js +0 -2
  146. package/dist/components/ui/navigation-menu.d.ts +0 -1
  147. package/dist/components/ui/navigation-menu.js +0 -2
  148. package/docs/FRAME-A11Y-CI.md +0 -349
  149. package/docs/data-entry/date-range-picker.tsx +0 -175
  150. package/docs/data-entry/month-picker.tsx +0 -101
  151. package/docs/data-entry/month-range-picker.tsx +0 -115
  152. package/docs/navigation/context-menu.tsx +0 -128
  153. package/docs/navigation/menubar.tsx +0 -141
  154. package/docs/navigation/navigation-menu.tsx +0 -158
@@ -31,18 +31,19 @@ What is real, ordered by how badly it hurts:
31
31
  just antd's `defaultCurrent`.
32
32
  3. **The shell's collapse contract is half-built.** `AppShell` takes `sidebarCollapsed`
33
33
  (`src/components/layout/app-shell.tsx:30`) with **no** change handler and **no** built-in trigger,
34
- so every consumer hand-rolls the toggle *and* its `aria-expanded`/`aria-controls`; and the 900px
34
+ so every consumer hand-rolls the toggle _and_ its `aria-expanded`/`aria-controls`; and the 900px
35
35
  collapse step is a hardcoded media query (`src/styles/shell-layout.css:1119`,
36
- `@media (width <= 56.25rem)`), not a token — while the overlay family's equivalent step *is* a
36
+ `@media (width <= 56.25rem)`), not a token — while the overlay family's equivalent step _is_ a
37
37
  token (`--sheet-responsive-breakpoint-width`). antd's `Sider collapsible`/`trigger`/`breakpoint`/
38
38
  `onCollapse`/`onBreakpoint` are all on the far side of that line.
39
39
  4. **Submenu open state is unreachable.** `Sidebar` keeps group expansion in local state
40
40
  (`src/components/layout/sidebar.tsx:271`), route-synchronised but not controllable — so
41
41
  "which sections the user left open" cannot be persisted. antd `openKeys`/`onOpenChange`.
42
- 5. **Horizontal overflow has no affordance, twice.** `NavigationMenu`
43
- (`src/components/navigation/navigation-menu.tsx`) is a thin 8-export Radix wrapper with no
44
- overflow handling antd `Menu overflowedIndicator`. This is the same defect already logged as
45
- P1 for `Tabs moreIcon`, and it is a WCAG 1.4.10 / 2.4.3 problem, not a cosmetic one.
42
+ 5. **Horizontal overflow has no affordance.** `Tabs moreIcon` is still the open P1 (WCAG 1.4.10 /
43
+ 2.4.3, not cosmetic). The second instance of this defect, `NavigationMenu`, was DELETED in v23
44
+ along with `ContextMenu` and `Menubar`: no consumer imported any of the three. If a horizontal
45
+ menu is ever wanted again, antd's `Menu mode="horizontal"` is the shape to build and
46
+ `overflowedIndicator` is part of it from the first commit, not a follow-up.
46
47
 
47
48
  Honourable mention, because it is an i18n/a11y gap rather than a parity one: **there is no
48
49
  `copyable` anywhere in the library** (`grep -rn "copyable" src/` → 0 hits), yet `ErrorSurface`
@@ -59,9 +60,6 @@ renders `requestId` in monospace explicitly "so it can be read out or copied acc
59
60
  - **`AspectRatio`** (`src/components/ui/aspect-ratio.tsx`) — antd has no counterpart; `ratio` +
60
61
  `asChild` is the whole capability.
61
62
  - **`Logo`** (`src/components/general/logo.tsx`) — antd has no counterpart.
62
- - **`ContextMenu`** (`src/components/navigation/context-menu.tsx`) — antd expresses this as
63
- `Dropdown trigger={['contextMenu']}`; the dedicated primitive here IS the coverage.
64
- - **`Menubar`** (`src/components/navigation/menubar.tsx`) — antd has no counterpart.
65
63
  - **`Topbar` / `TopbarItem`** (`src/props/components/layout.prop.ts:1212`, `:1236`) — antd's
66
64
  `Layout.Header` is a bare box; both are ahead of it.
67
65
  - **`MobileShell`, `AuthShell`, `CenteredShell`, `LegalDocumentShell`, `MasterDetail`,
@@ -72,271 +70,269 @@ renders `requestId` in monospace explicitly "so it can be read out or copied acc
72
70
 
73
71
  ### 2.2 `Button` vs antd `Button`
74
72
 
75
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
76
- | --- | --- | --- | --- |
77
- | `type` — `primary`/`dashed`/`link`/`text`/`default` | `RENAMED` | `ButtonVariantProp`, `src/props/vocabulary/interaction.prop.ts:17` (`default`/`dashed`/`link`/`ghost`/`bare`/…) | antd `text` = `ghost`; antd `default` = `outline` |
78
- | `danger` — destructive styling | `RENAMED` | same line — `variant="destructive"` | — |
79
- | `shape: round` | `RENAMED` | `ShapeProp`, `interaction.prop.ts:24` — `pill` | — |
80
- | `shape: circle` | `COVERED-ELSEWHERE` | `shape="pill"` + `size="icon"`, `src/components/general/button.tsx:38-51` | Two existing axes; no third |
81
- | `size: large\|middle\|small` | `RENAMED` | `ButtonSizeProp`, `interaction.prop.ts:101` | but see next row |
82
- | `size` includes the alias `"default"` | `MISSING` | `ButtonSizeProp = SizeProp \| "default" \| "icon" …`, `interaction.prop.ts:101`; `button.tsx:34-35` maps `default` and `md` to the same class | Deprecate `"default"` → `md` (STANDARDS rule 10: never `"default"`) |
83
- | `block` — full parent width | `RENAMED` | `fullWidth`, `src/props/components/general.prop.ts` (`ButtonProp.fullWidth`) | — |
84
- | `loading` (boolean) | `PRESENT` | `ButtonProp.loading`, `general.prop.ts`; spinner + `aria-busy` + activation block | — |
85
- | `loading: { delay }` — suppress spinner flash | `MISSING` | no `delay` in `ButtonProp`; `grep -n "delay" src/components/general/button.tsx` → nothing | Add `loadingDelay?: number` |
86
- | `loading: { icon }` | `WONT-PORT` | — | Design knob → `--button-*` token (rule #44) |
87
- | `icon` + `iconPlacement` | `COVERED-ELSEWHERE` | icons are children; DOM order IS the placement (`button.tsx` icon sizing rules) | No work |
88
- | `htmlType` | `PRESENT` | `ButtonProp extends React.ButtonHTMLAttributes` → native `type` | — |
89
- | `href` / `target` | `COVERED-ELSEWHERE` | `asChild` + `<a>`/router `Link`, `ButtonProp.asChild` | Catalog already documents this |
90
- | `ghost` — transparent + inverted on a coloured ground | `WONT-PORT` | — | Per-region role scoping (`COMPOSITION-VS-COMPONENT.md` §4.3), not a prop |
91
- | `autoInsertSpace` — CJK two-char spacing | `WONT-PORT` | — | Typographic knob; belongs to `text-spacing-trim` in the token layer |
92
- | `color` × `variant` matrix (v5.21) | `WONT-PORT` | — | `variant` + `tone` already own this; a third dialect is the defect rule #1 names |
93
- | `classNames` / `styles` semantic DOM | `WONT-PORT` | — | Ground rule §0.4 (inline-style twins) |
94
- | **`Button.Group` / `Space.Compact`** — joined controls | `MISSING` | `grep -rn "ButtonGroup\|SplitButton\|Space.Compact" src/ mcp/src/data/components.ts` → 0 hits; `ToggleGroup` (`src/components/ui/toggle-group.tsx`) joins **toggles** only | Add `ButtonGroup` — GATE-0 ledger in §4.1 |
95
- | `count` / `overflowCount` / `showZero` | `PRESENT` | `general.prop.ts` (`ButtonProp.count`…) | Beyond antd Button (antd needs a wrapping Badge) |
73
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
74
+ | ------------------------------------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
75
+ | `type` — `primary`/`dashed`/`link`/`text`/`default` | `RENAMED` | `ButtonVariantProp`, `src/props/vocabulary/interaction.prop.ts:17` (`default`/`dashed`/`link`/`ghost`/`bare`/…) | antd `text` = `ghost`; antd `default` = `outline` |
76
+ | `danger` — destructive styling | `RENAMED` | same line — `variant="destructive"` | — |
77
+ | `shape: round` | `RENAMED` | `ShapeProp`, `interaction.prop.ts:24` — `pill` | — |
78
+ | `shape: circle` | `COVERED-ELSEWHERE` | `shape="pill"` + `size="icon"`, `src/components/general/button.tsx:38-51` | Two existing axes; no third |
79
+ | `size: large\|middle\|small` | `RENAMED` | `ButtonSizeProp`, `interaction.prop.ts:101` | but see next row |
80
+ | `size` includes the alias `"default"` | `MISSING` | `ButtonSizeProp = SizeProp \| "default" \| "icon" …`, `interaction.prop.ts:101`; `button.tsx:34-35` maps `default` and `md` to the same class | Deprecate `"default"` → `md` (STANDARDS rule 10: never `"default"`) |
81
+ | `block` — full parent width | `RENAMED` | `fullWidth`, `src/props/components/general.prop.ts` (`ButtonProp.fullWidth`) | — |
82
+ | `loading` (boolean) | `PRESENT` | `ButtonProp.loading`, `general.prop.ts`; spinner + `aria-busy` + activation block | — |
83
+ | `loading: { delay }` — suppress spinner flash | `MISSING` | no `delay` in `ButtonProp`; `grep -n "delay" src/components/general/button.tsx` → nothing | Add `loadingDelay?: number` |
84
+ | `loading: { icon }` | `WONT-PORT` | — | Design knob → `--button-*` token (rule #44) |
85
+ | `icon` + `iconPlacement` | `COVERED-ELSEWHERE` | icons are children; DOM order IS the placement (`button.tsx` icon sizing rules) | No work |
86
+ | `htmlType` | `PRESENT` | `ButtonProp extends React.ButtonHTMLAttributes` → native `type` | — |
87
+ | `href` / `target` | `COVERED-ELSEWHERE` | `asChild` + `<a>`/router `Link`, `ButtonProp.asChild` | Catalog already documents this |
88
+ | `ghost` — transparent + inverted on a coloured ground | `WONT-PORT` | — | Per-region role scoping (`COMPOSITION-VS-COMPONENT.md` §4.3), not a prop |
89
+ | `autoInsertSpace` — CJK two-char spacing | `WONT-PORT` | — | Typographic knob; belongs to `text-spacing-trim` in the token layer |
90
+ | `color` × `variant` matrix (v5.21) | `WONT-PORT` | — | `variant` + `tone` already own this; a third dialect is the defect rule #1 names |
91
+ | `classNames` / `styles` semantic DOM | `WONT-PORT` | — | Ground rule §0.4 (inline-style twins) |
92
+ | **`Button.Group` / `Space.Compact`** — joined controls | `MISSING` | `grep -rn "ButtonGroup\|SplitButton\|Space.Compact" src/ mcp/src/data/components.ts` → 0 hits; `ToggleGroup` (`src/components/ui/toggle-group.tsx`) joins **toggles** only | Add `ButtonGroup` — GATE-0 ledger in §4.1 |
93
+ | `count` / `overflowCount` / `showZero` | `PRESENT` | `general.prop.ts` (`ButtonProp.count`…) | Beyond antd Button (antd needs a wrapping Badge) |
96
94
 
97
95
  ### 2.3 `Text` vs antd `Typography.Text` / `.Paragraph` / `.Link`
98
96
 
99
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
100
- | --- | --- | --- | --- |
101
- | `type: secondary\|success\|warning\|danger` | `RENAMED` | `TextToneProp`, `src/props/vocabulary/interaction.prop.ts:40` — `tone` | STANDARDS rule 9 |
102
- | `strong` | `RENAMED` | `TextProp.weight` / `as="strong"`, `src/props/components/general.prop.ts` | — |
103
- | `underline` / `delete` | `RENAMED` | `TextProp.decoration` (`underline` \| `line-through`) | — |
104
- | `code` | `RENAMED` | `TextProp.chip` + `as="code"` | — |
105
- | `keyboard` | `COVERED-ELSEWHERE` | `as="kbd"` — the element union in `general.prop.ts` | — |
106
- | `italic` | `COVERED-ELSEWHERE` | `as="em"` | Semantic emphasis beats a visual flag |
107
- | `disabled` | `COVERED-ELSEWHERE` | `tone="muted"` | — |
108
- | `mark` — highlighted run | `MISSING` | no `mark` in `TextProp`, `general.prop.ts:44-120`; no `<mark>` in the `as` union | Add `as="mark"` to the element union (search-result highlighting) |
109
- | `ellipsis` (boolean) | `PRESENT` | `TextProp.truncate`, `general.prop.ts:69` | — |
110
- | `ellipsis.rows` | `RENAMED` | `TextProp.clamp`, `general.prop.ts:72` | — |
111
- | `ellipsis.expandable` / `expanded` / `defaultExpanded` / `symbol` / `onExpand` | `MISSING` | `grep -rn "expandable" src/props/components/general.prop.ts` → nothing | Add `expandable` + the `expanded`/`defaultExpanded`/`onExpandedChange` triad on `clamp` |
112
- | `ellipsis.tooltip` — tooltip only when truncated | `MISSING` | not in `TextProp` | Add `truncateTooltip?: boolean`; a bare `<Tooltip>` wrap fires even when nothing is clipped |
113
- | `ellipsis.suffix` / `onEllipsis` | `MISSING` | not in `TextProp` | P2, add alongside `expandable` |
114
- | **`copyable`** (+ `text`/`format`/`icon`/`tooltips`/`onCopy`) | `MISSING` | `grep -rn "copyable" src/ mcp/src/data/components.ts` → **0 hits**; nearest is `CredentialReveal.onCopy` (`mcp/src/data/components.ts:4026`), a secret-field component, not a text affordance | Add `copyable` on `Text`/`Heading` (see priority list) |
115
- | `editable` (+ `triggerType`/`maxLength`/`autoSize`/`onChange`/`onCancel`) | `MISSING` | `grep -rn "editable" src/props/components/general.prop.ts` → nothing | GATE-0 ledger §4.1 — inline edit owns real behaviour |
116
- | `actions` operation bar (v6.4) | `WONT-PORT` | — | Composition: `Flex` + `Button` |
117
- | `Typography.Paragraph` | `COVERED-ELSEWHERE` | `Text as="p"` | — |
118
- | `Typography.Link` | `COVERED-ELSEWHERE` | `TextProp.link` (`general.prop.ts`, with the underline/focus-mark contract) | Better than antd — it is an affordance, not a colour |
119
- | `classNames` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
97
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
98
+ | ------------------------------------------------------------------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
99
+ | `type: secondary\|success\|warning\|danger` | `RENAMED` | `TextToneProp`, `src/props/vocabulary/interaction.prop.ts:40` — `tone` | STANDARDS rule 9 |
100
+ | `strong` | `RENAMED` | `TextProp.weight` / `as="strong"`, `src/props/components/general.prop.ts` | — |
101
+ | `underline` / `delete` | `RENAMED` | `TextProp.decoration` (`underline` \| `line-through`) | — |
102
+ | `code` | `RENAMED` | `TextProp.chip` + `as="code"` | — |
103
+ | `keyboard` | `COVERED-ELSEWHERE` | `as="kbd"` — the element union in `general.prop.ts` | — |
104
+ | `italic` | `COVERED-ELSEWHERE` | `as="em"` | Semantic emphasis beats a visual flag |
105
+ | `disabled` | `COVERED-ELSEWHERE` | `tone="muted"` | — |
106
+ | `mark` — highlighted run | `MISSING` | no `mark` in `TextProp`, `general.prop.ts:44-120`; no `<mark>` in the `as` union | Add `as="mark"` to the element union (search-result highlighting) |
107
+ | `ellipsis` (boolean) | `PRESENT` | `TextProp.truncate`, `general.prop.ts:69` | — |
108
+ | `ellipsis.rows` | `RENAMED` | `TextProp.clamp`, `general.prop.ts:72` | — |
109
+ | `ellipsis.expandable` / `expanded` / `defaultExpanded` / `symbol` / `onExpand` | `MISSING` | `grep -rn "expandable" src/props/components/general.prop.ts` → nothing | Add `expandable` + the `expanded`/`defaultExpanded`/`onExpandedChange` triad on `clamp` |
110
+ | `ellipsis.tooltip` — tooltip only when truncated | `MISSING` | not in `TextProp` | Add `truncateTooltip?: boolean`; a bare `<Tooltip>` wrap fires even when nothing is clipped |
111
+ | `ellipsis.suffix` / `onEllipsis` | `MISSING` | not in `TextProp` | P2, add alongside `expandable` |
112
+ | **`copyable`** (+ `text`/`format`/`icon`/`tooltips`/`onCopy`) | `MISSING` | `grep -rn "copyable" src/ mcp/src/data/components.ts` → **0 hits**; nearest is `CredentialReveal.onCopy` (`mcp/src/data/components.ts:4026`), a secret-field component, not a text affordance | Add `copyable` on `Text`/`Heading` (see priority list) |
113
+ | `editable` (+ `triggerType`/`maxLength`/`autoSize`/`onChange`/`onCancel`) | `MISSING` | `grep -rn "editable" src/props/components/general.prop.ts` → nothing | GATE-0 ledger §4.1 — inline edit owns real behaviour |
114
+ | `actions` operation bar (v6.4) | `WONT-PORT` | — | Composition: `Flex` + `Button` |
115
+ | `Typography.Paragraph` | `COVERED-ELSEWHERE` | `Text as="p"` | — |
116
+ | `Typography.Link` | `COVERED-ELSEWHERE` | `TextProp.link` (`general.prop.ts`, with the underline/focus-mark contract) | Better than antd — it is an affordance, not a colour |
117
+ | `classNames` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
120
118
 
121
119
  ### 2.4 `Heading` vs antd `Typography.Title`
122
120
 
123
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
124
- | --- | --- | --- | --- |
125
- | `level: 1..5` | `MISSING` (partial) | `HeadingLevelProp = 1 \| 2 \| 3 \| 4`, `src/props/vocabulary/interaction.prop.ts` | P2 — either add `5` or document the 4-level canon in the catalog entry as deliberate |
126
- | `type` | `RENAMED` | `HeadingProp.tone` | — |
127
- | `ellipsis` (boolean) | `PRESENT` | `HeadingProp.truncate`, `general.prop.ts` | — |
128
- | `ellipsis.rows` / `.expandable` / `.tooltip` | `MISSING` | no `clamp` on `HeadingProp` | P2 — a wrapped two-line page title is common |
129
- | `copyable` / `editable` | `MISSING` | as 2.3 | Same rows as `Text` |
130
- | `code`/`mark`/`underline`/`delete`/`italic` | `COVERED-ELSEWHERE` | wrap the run in `Text` | Headings do not need six inline flags |
121
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
122
+ | -------------------------------------------- | ------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
123
+ | `level: 1..5` | `MISSING` (partial) | `HeadingLevelProp = 1 \| 2 \| 3 \| 4`, `src/props/vocabulary/interaction.prop.ts` | P2 — either add `5` or document the 4-level canon in the catalog entry as deliberate |
124
+ | `type` | `RENAMED` | `HeadingProp.tone` | — |
125
+ | `ellipsis` (boolean) | `PRESENT` | `HeadingProp.truncate`, `general.prop.ts` | — |
126
+ | `ellipsis.rows` / `.expandable` / `.tooltip` | `MISSING` | no `clamp` on `HeadingProp` | P2 — a wrapped two-line page title is common |
127
+ | `copyable` / `editable` | `MISSING` | as 2.3 | Same rows as `Text` |
128
+ | `code`/`mark`/`underline`/`delete`/`italic` | `COVERED-ELSEWHERE` | wrap the run in `Text` | Headings do not need six inline flags |
131
129
 
132
130
  ### 2.5 `Flex` vs antd `Flex` + `Space`
133
131
 
134
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
135
- | --- | --- | --- | --- |
136
- | `vertical` / `orientation` | `RENAMED` | `FlexProp.direction`, `src/props/components/layout.prop.ts:161` — and it takes a responsive object, which antd's does not | — |
137
- | `justify` / `align` | `PRESENT` | `FlexJustifyProp` / `FlexAlignProp`, `layout.prop.ts:142-143` | Closed unions, deliberately |
138
- | `wrap` (boolean) | `PRESENT` | `layout.prop.ts:216` | — |
139
- | `wrap: "wrap-reverse"` | `MISSING` | boolean only, `layout.prop.ts:216` | P2 — negligible demand |
140
- | `gap` presets + numeric | `PRESENT` | `GapProp` + the `gapRaw` escape hatch, `layout.prop.ts:164`,`:193` | Ahead of antd (the escape is counted via `data-gap-raw`) |
141
- | per-axis gap `[row, column]` | `MISSING` | `gap?: GapProp` is a single step, `layout.prop.ts:164` | P2 — `gap={{row,column}}` |
142
- | `flex` (CSS shorthand) | `COVERED-ELSEWHERE` | `fill` / `grow` / `shrink` / `width`, `layout.prop.ts:162-163`,`:242`,`:252` | Named axes beat a CSS passthrough |
143
- | `component` — render as | `RENAMED` | `FlexProp.as`, `layout.prop.ts:154` (closed union) | Narrower on purpose |
144
- | `Space.separator` / `split` — a rule BETWEEN children | `MISSING` | `grep -n "separator" src/components/layout/flex.tsx` → nothing | **Composition** — interleave `<Separator orientation="vertical" />`; document it in the catalog `related` |
145
- | `Space.Compact` | `MISSING` | see 2.2 | `ButtonGroup`, §4.1 |
146
- | `Space.align: baseline` | `PRESENT` | `FlexAlignProp` includes `baseline`, `layout.prop.ts:142` | — |
132
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
133
+ | ----------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
134
+ | `vertical` / `orientation` | `RENAMED` | `FlexProp.direction`, `src/props/components/layout.prop.ts:161` — and it takes a responsive object, which antd's does not | — |
135
+ | `justify` / `align` | `PRESENT` | `FlexJustifyProp` / `FlexAlignProp`, `layout.prop.ts:142-143` | Closed unions, deliberately |
136
+ | `wrap` (boolean) | `PRESENT` | `layout.prop.ts:216` | — |
137
+ | `wrap: "wrap-reverse"` | `MISSING` | boolean only, `layout.prop.ts:216` | P2 — negligible demand |
138
+ | `gap` presets + numeric | `PRESENT` | `GapProp` + the `gapRaw` escape hatch, `layout.prop.ts:164`,`:193` | Ahead of antd (the escape is counted via `data-gap-raw`) |
139
+ | per-axis gap `[row, column]` | `MISSING` | `gap?: GapProp` is a single step, `layout.prop.ts:164` | P2 — `gap={{row,column}}` |
140
+ | `flex` (CSS shorthand) | `COVERED-ELSEWHERE` | `fill` / `grow` / `shrink` / `width`, `layout.prop.ts:162-163`,`:242`,`:252` | Named axes beat a CSS passthrough |
141
+ | `component` — render as | `RENAMED` | `FlexProp.as`, `layout.prop.ts:154` (closed union) | Narrower on purpose |
142
+ | `Space.separator` / `split` — a rule BETWEEN children | `MISSING` | `grep -n "separator" src/components/layout/flex.tsx` → nothing | **Composition** — interleave `<Separator orientation="vertical" />`; document it in the catalog `related` |
143
+ | `Space.Compact` | `MISSING` | see 2.2 | `ButtonGroup`, §4.1 |
144
+ | `Space.align: baseline` | `PRESENT` | `FlexAlignProp` includes `baseline`, `layout.prop.ts:142` | — |
147
145
 
148
146
  ### 2.6 `ResponsiveGrid` vs antd `Grid` (`Row` / `Col`)
149
147
 
150
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
151
- | --- | --- | --- | --- |
152
- | `Row.gutter` (number/object) | `RENAMED` | `ResponsiveGridProps.gap`, `src/components/layout/responsive-grid.tsx:16` | — |
153
- | `Row.gutter: [horizontal, vertical]` | `MISSING` | single `gap`, `responsive-grid.tsx:16` | P2 |
154
- | `Row.justify` / `Row.align` | `MISSING` | `grep -n "justify\|align" src/components/layout/responsive-grid.tsx` → nothing | P2 — `align` matters for unequal-height cards |
155
- | `Col.span` + responsive `xs..xxl` | `PRESENT` | `ResponsiveGridItem span`, `responsive-grid.tsx:115-135` (takes `{base,sm,md,lg}`) | **Not in the MCP catalog** — sync gap, see §5 |
156
- | breakpoint steps above `lg` | `MISSING` | `ResponsiveGridColumnsProp = number \| {base,sm,md,lg}`, `src/props/components/layout.prop.ts:256`, while `BreakpointProp` has `xl` (`interaction.prop.ts:140`) | P2 — add `xl` for consistency |
157
- | `Col.order` | `MISSING` | not in `ResponsiveGridItem`, `responsive-grid.tsx:115` | P2 — real for mobile reordering |
158
- | `Col.offset` / `push` / `pull` | `WONT-PORT` | — | 12-column raster arithmetic; this system counts columns, it does not index them |
159
- | `Grid.useBreakpoint()` | `WONT-PORT` | — | Container queries + `--responsive-grid-*` are the model; a JS viewport hook re-introduces the thing they replace |
160
- | `Row.wrap` | `PRESENT` | CSS Grid wraps by definition | — |
148
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
149
+ | ------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
150
+ | `Row.gutter` (number/object) | `RENAMED` | `ResponsiveGridProps.gap`, `src/components/layout/responsive-grid.tsx:16` | — |
151
+ | `Row.gutter: [horizontal, vertical]` | `MISSING` | single `gap`, `responsive-grid.tsx:16` | P2 |
152
+ | `Row.justify` / `Row.align` | `MISSING` | `grep -n "justify\|align" src/components/layout/responsive-grid.tsx` → nothing | P2 — `align` matters for unequal-height cards |
153
+ | `Col.span` + responsive `xs..xxl` | `PRESENT` | `ResponsiveGridItem span`, `responsive-grid.tsx:115-135` (takes `{base,sm,md,lg}`) | **Not in the MCP catalog** — sync gap, see §5 |
154
+ | breakpoint steps above `lg` | `MISSING` | `ResponsiveGridColumnsProp = number \| {base,sm,md,lg}`, `src/props/components/layout.prop.ts:256`, while `BreakpointProp` has `xl` (`interaction.prop.ts:140`) | P2 — add `xl` for consistency |
155
+ | `Col.order` | `MISSING` | not in `ResponsiveGridItem`, `responsive-grid.tsx:115` | P2 — real for mobile reordering |
156
+ | `Col.offset` / `push` / `pull` | `WONT-PORT` | — | 12-column raster arithmetic; this system counts columns, it does not index them |
157
+ | `Grid.useBreakpoint()` | `WONT-PORT` | — | Container queries + `--responsive-grid-*` are the model; a JS viewport hook re-introduces the thing they replace |
158
+ | `Row.wrap` | `PRESENT` | CSS Grid wraps by definition | — |
161
159
 
162
160
  ### 2.7 `Separator` vs antd `Divider`
163
161
 
164
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
165
- | --- | --- | --- | --- |
166
- | `orientation` (axis) | `PRESENT` | `SeparatorProp.orientation`, `src/props/components/layout.prop.ts:573` | — |
167
- | `children` / title | `PRESENT` | `SeparatorProp.label`, `layout.prop.ts:579` | Plus a real `role="separator"` when labelled — ahead of antd |
168
- | `titlePlacement: start\|end\|center` | `RENAMED` | `SeparatorProp.labelAlign`, `layout.prop.ts:581` | — |
169
- | `plain` | `COVERED-ELSEWHERE` | `labelSize` + `tone`, `layout.prop.ts:568`,`:586` | — |
170
- | `size: small\|medium` (spacing) | `RENAMED` | `SeparatorProp.space: GapProp`, `layout.prop.ts:569` | — |
171
- | `variant: solid\|dashed\|dotted` / `dashed` | `MISSING` | `grep -n "dashed\|dotted" src/props/components/layout.prop.ts` → nothing in `SeparatorProp` | **Token** — `--separator-rule-style` (rule #44); not a prop |
172
- | `orientationMargin` | `WONT-PORT` | — | Pixel offset (ground rule §0.4) → `--separator-label-inset`, which already exists |
173
- | `classNames` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
162
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
163
+ | ------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
164
+ | `orientation` (axis) | `PRESENT` | `SeparatorProp.orientation`, `src/props/components/layout.prop.ts:573` | — |
165
+ | `children` / title | `PRESENT` | `SeparatorProp.label`, `layout.prop.ts:579` | Plus a real `role="separator"` when labelled — ahead of antd |
166
+ | `titlePlacement: start\|end\|center` | `RENAMED` | `SeparatorProp.labelAlign`, `layout.prop.ts:581` | — |
167
+ | `plain` | `COVERED-ELSEWHERE` | `labelSize` + `tone`, `layout.prop.ts:568`,`:586` | — |
168
+ | `size: small\|medium` (spacing) | `RENAMED` | `SeparatorProp.space: GapProp`, `layout.prop.ts:569` | — |
169
+ | `variant: solid\|dashed\|dotted` / `dashed` | `MISSING` | `grep -n "dashed\|dotted" src/props/components/layout.prop.ts` → nothing in `SeparatorProp` | **Token** — `--separator-rule-style` (rule #44); not a prop |
170
+ | `orientationMargin` | `WONT-PORT` | — | Pixel offset (ground rule §0.4) → `--separator-label-inset`, which already exists |
171
+ | `classNames` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
174
172
 
175
173
  ### 2.8 `AppShell` + `Sidebar` vs antd `Layout` / `Layout.Sider`
176
174
 
177
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
178
- | --- | --- | --- | --- |
179
- | `Layout.hasSider` (SSR flicker guard) | `COVERED-ELSEWHERE` | the track is derived from `sidebar` presence at render, `src/components/layout/app-shell.tsx:301` | No work |
180
- | `Sider.collapsed` | `PRESENT` | `AppShellProp.sidebarCollapsed`, `src/props/components/layout.prop.ts:328`; `SidebarProp.collapsed`, `:1164` | — |
181
- | **`Sider.onCollapse`** | `MISSING` | `AppShellProp` (`layout.prop.ts:318-421`) has no `onSidebarCollapsedChange`; `grep -n "onCollapse\|CollapsedChange" src/components/layout/app-shell.tsx` → nothing | Add `onSidebarCollapsedChange` — the `open`/`onOpenChange` triad shape the mobile drawer already uses (`layout.prop.ts:418-420`) |
182
- | **`Sider.collapsible` + `Sider.trigger`** (built-in toggle) | `MISSING` | no toggle in `app-shell.tsx`; `mobileNav` gets one, the docked rail does not | Add a library-owned collapse trigger carrying `aria-expanded` + `aria-controls`. Today every consumer re-authors that ARIA pair |
183
- | `Sider.defaultCollapsed` | `MISSING` | `sidebarCollapsed = false` is a plain default, `app-shell.tsx:30` | P2 — comes free with the triad above |
184
- | **`Sider.breakpoint` + `onBreakpoint`** | `MISSING` | the step is a hardcoded query — `src/styles/shell-layout.css:1119` `@media (width <= 56.25rem)`; `grep -n "900\|breakpoint" src/tokens/components/shell.css` returns only prose | Tokenize as `--app-shell-collapse-breakpoint-width`, mirroring `--sheet-responsive-breakpoint-width` (`src/components/feedback/sheet.tsx:46`) |
185
- | `Sider.width` / `collapsedWidth` | `COVERED-ELSEWHERE` | `--app-shell-sidebar-width` / `--app-shell-nav-rail-width`, documented at `layout.prop.ts:333`,`:349` | Component tokens (rule #44) — no prop |
186
- | `Sider.theme: light\|dark` | `WONT-PORT` | — | Theme is a global token axis (`AppProviderProp.theme`), never a per-component prop |
187
- | `Sider.reverseArrow` / `zeroWidthTriggerStyle` | `WONT-PORT` | — | Physical spelling + inline style (ground rule §0.4) |
188
- | `Header` / `Content` / `Footer` slots | `PRESENT` | `AppShellProp.topbar`/`children`/`footer`, `layout.prop.ts:322`,`:321`,`:327` | Plus `navRail`, `navRailPosition`, `mobileNav` — well ahead |
175
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
176
+ | ----------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
177
+ | `Layout.hasSider` (SSR flicker guard) | `COVERED-ELSEWHERE` | the track is derived from `sidebar` presence at render, `src/components/layout/app-shell.tsx:301` | No work |
178
+ | `Sider.collapsed` | `PRESENT` | `AppShellProp.sidebarCollapsed`, `src/props/components/layout.prop.ts:328`; `SidebarProp.collapsed`, `:1164` | — |
179
+ | **`Sider.onCollapse`** | `MISSING` | `AppShellProp` (`layout.prop.ts:318-421`) has no `onSidebarCollapsedChange`; `grep -n "onCollapse\|CollapsedChange" src/components/layout/app-shell.tsx` → nothing | Add `onSidebarCollapsedChange` — the `open`/`onOpenChange` triad shape the mobile drawer already uses (`layout.prop.ts:418-420`) |
180
+ | **`Sider.collapsible` + `Sider.trigger`** (built-in toggle) | `MISSING` | no toggle in `app-shell.tsx`; `mobileNav` gets one, the docked rail does not | Add a library-owned collapse trigger carrying `aria-expanded` + `aria-controls`. Today every consumer re-authors that ARIA pair |
181
+ | `Sider.defaultCollapsed` | `MISSING` | `sidebarCollapsed = false` is a plain default, `app-shell.tsx:30` | P2 — comes free with the triad above |
182
+ | **`Sider.breakpoint` + `onBreakpoint`** | `MISSING` | the step is a hardcoded query — `src/styles/shell-layout.css:1119` `@media (width <= 56.25rem)`; `grep -n "900\|breakpoint" src/tokens/components/shell.css` returns only prose | Tokenize as `--app-shell-collapse-breakpoint-width`, mirroring `--sheet-responsive-breakpoint-width` (`src/components/feedback/sheet.tsx:46`) |
183
+ | `Sider.width` / `collapsedWidth` | `COVERED-ELSEWHERE` | `--app-shell-sidebar-width` / `--app-shell-nav-rail-width`, documented at `layout.prop.ts:333`,`:349` | Component tokens (rule #44) — no prop |
184
+ | `Sider.theme: light\|dark` | `WONT-PORT` | — | Theme is a global token axis (`AppProviderProp.theme`), never a per-component prop |
185
+ | `Sider.reverseArrow` / `zeroWidthTriggerStyle` | `WONT-PORT` | — | Physical spelling + inline style (ground rule §0.4) |
186
+ | `Header` / `Content` / `Footer` slots | `PRESENT` | `AppShellProp.topbar`/`children`/`footer`, `layout.prop.ts:322`,`:321`,`:327` | Plus `navRail`, `navRailPosition`, `mobileNav` — well ahead |
189
187
 
190
188
  ### 2.9 `Sidebar` / `NavList` vs antd `Menu`
191
189
 
192
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
193
- | --- | --- | --- | --- |
194
- | `items` config array | `PRESENT` | `SidebarProp.sections` / `NavListProp.items`, `src/props/components/layout.prop.ts:1146`,`:870` | House `items` dialect |
195
- | `mode="inline"` + submenus | `PRESENT` | `SidebarItemProp.children`, `layout.prop.ts:858` | — |
196
- | `inlineCollapsed` + collapsed tooltips/flyout | `PRESENT` | `src/components/layout/sidebar.tsx:436-531`; flyout entries at `:398-409` | Ahead of antd (real `menuitem` roles) |
197
- | `selectedKeys` / `defaultSelectedKeys` | `RENAMED` | `SidebarProp.activeId`, `layout.prop.ts:1144` | Single-selection route rail |
198
- | **`openKeys` / `defaultOpenKeys` / `onOpenChange`** | `MISSING` | expansion is local state — `src/components/layout/sidebar.tsx:271` `const [open, setOpen] = React.useState(active)` | Add `openIds` / `defaultOpenIds` / `onOpenIdsChange` (house triad spelling for a set) |
199
- | `items[].icon` | `PRESENT` (required) | `SidebarItemProp.icon`, `layout.prop.ts:840` | Stricter than antd, deliberately |
200
- | `items[].extra` | `RENAMED` | `SidebarItemProp.badge`, `layout.prop.ts:845` | — |
201
- | `items[].title` (collapsed tooltip) | `PRESENT` | collapsed-rail tooltip via `SidebarLinkProp["aria-label"]`, `layout.prop.ts:901` | — |
202
- | `items[].danger` | `MISSING` | `SidebarBadgeToneProp` tones the **badge**, not the row (`layout.prop.ts:829`) | P2 — a destructive row is rare in a route rail; add as `tone` on the item if a screen asks |
203
- | `items[].disabled` | `PRESENT` | `layout.prop.ts:851` | — |
204
- | `type: "group"` / `"divider"` | `PRESENT` | `SidebarSectionProp.label`, `layout.prop.ts:945` | — |
205
- | `inlineIndent` | `COVERED-ELSEWHERE` | `--sidebar-nav-*` component tokens | Rule #44 |
206
- | `expandIcon` | `MISSING` | fixed `ChevronDown`, `src/components/layout/sidebar.tsx:284`,`:506` | **Token**, not a prop (rule #44) |
207
- | `multiple` / `selectable={false}` | `WONT-PORT` | — | A route rail has one current page |
208
- | `triggerSubMenuAction` / `subMenuOpenDelay` / `subMenuCloseDelay` | `WONT-PORT` | — | APG disclosure is click; hover-only expansion fails keyboard parity |
209
- | `theme` | `WONT-PORT` | — | Global token axis |
210
- | `overflowedIndicator` (horizontal mode) | `COVERED-ELSEWHERE` | that is `NavigationMenu`'s axis — see 2.10 | — |
211
- | `forceSubMenuRender` | `WONT-PORT` | — | Renders hidden content to the a11y tree for no user-visible gain |
212
-
213
- ### 2.10 `NavigationMenu` vs antd `Menu mode="horizontal"`
214
-
215
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
216
- | --- | --- | --- | --- |
217
- | `mode="horizontal"` | `PRESENT` | `orientation`, `mcp/src/data/components.ts:12486` entry | — |
218
- | open state control | `PRESENT` | `value` / `defaultValue` / `onValueChange`, catalog entry | Full triad |
219
- | `subMenuOpenDelay` | `RENAMED` | `delayDuration` (default 200), catalog entry | |
220
- | `subMenuCloseDelay` | `MISSING` | only `delayDuration` exists | P2 |
221
- | **`overflowedIndicator` a "more" menu when items do not fit** | `MISSING` | `src/components/navigation/navigation-menu.tsx` is 8 thin Radix re-exports (`Root`/`List`/`Item`/`Trigger`/`Content`/`Link`/`Indicator`/`Viewport`); `grep -n "overflow" ` nothing | **P1** — same class as the recorded `Tabs moreIcon` P1. Unreachable destinations = WCAG 2.4.3 / 1.4.10 |
222
- | `items[].disabled` | `MISSING` | no `disabled` on `NavigationMenuItem`/`Link` in `navigation-menu.tsx` | P2 |
223
- | `items` config array | `WONT-PORT` | — | Compound-part composition is the house style for overlay menus |
224
- | `theme` / `classNames` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
190
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
191
+ | ----------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
192
+ | `items` config array | `PRESENT` | `SidebarProp.sections` / `NavListProp.items`, `src/props/components/layout.prop.ts:1146`,`:870` | House `items` dialect |
193
+ | `mode="inline"` + submenus | `PRESENT` | `SidebarItemProp.children`, `layout.prop.ts:858` | — |
194
+ | `inlineCollapsed` + collapsed tooltips/flyout | `PRESENT` | `src/components/layout/sidebar.tsx:436-531`; flyout entries at `:398-409` | Ahead of antd (real `menuitem` roles) |
195
+ | `selectedKeys` / `defaultSelectedKeys` | `RENAMED` | `SidebarProp.activeId`, `layout.prop.ts:1144` | Single-selection route rail |
196
+ | **`openKeys` / `defaultOpenKeys` / `onOpenChange`** | `MISSING` | expansion is local state — `src/components/layout/sidebar.tsx:271` `const [open, setOpen] = React.useState(active)` | Add `openIds` / `defaultOpenIds` / `onOpenIdsChange` (house triad spelling for a set) |
197
+ | `items[].icon` | `PRESENT` (required) | `SidebarItemProp.icon`, `layout.prop.ts:840` | Stricter than antd, deliberately |
198
+ | `items[].extra` | `RENAMED` | `SidebarItemProp.badge`, `layout.prop.ts:845` | — |
199
+ | `items[].title` (collapsed tooltip) | `PRESENT` | collapsed-rail tooltip via `SidebarLinkProp["aria-label"]`, `layout.prop.ts:901` | — |
200
+ | `items[].danger` | `MISSING` | `SidebarBadgeToneProp` tones the **badge**, not the row (`layout.prop.ts:829`) | P2 — a destructive row is rare in a route rail; add as `tone` on the item if a screen asks |
201
+ | `items[].disabled` | `PRESENT` | `layout.prop.ts:851` | — |
202
+ | `type: "group"` / `"divider"` | `PRESENT` | `SidebarSectionProp.label`, `layout.prop.ts:945` | — |
203
+ | `inlineIndent` | `COVERED-ELSEWHERE` | `--sidebar-nav-*` component tokens | Rule #44 |
204
+ | `expandIcon` | `MISSING` | fixed `ChevronDown`, `src/components/layout/sidebar.tsx:284`,`:506` | **Token**, not a prop (rule #44) |
205
+ | `multiple` / `selectable={false}` | `WONT-PORT` | — | A route rail has one current page |
206
+ | `triggerSubMenuAction` / `subMenuOpenDelay` / `subMenuCloseDelay` | `WONT-PORT` | — | APG disclosure is click; hover-only expansion fails keyboard parity |
207
+ | `theme` | `WONT-PORT` | — | Global token axis |
208
+ | `overflowedIndicator` (horizontal mode) | `WONT-PORT` (for now) | the horizontal menu that owned this axis, `NavigationMenu`, was deleted in v23 — see 2.10 | — |
209
+ | `forceSubMenuRender` | `WONT-PORT` | — | Renders hidden content to the a11y tree for no user-visible gain |
210
+
211
+ ### 2.10 `NavigationMenu` vs antd `Menu mode="horizontal"` — REMOVED in v23
212
+
213
+ `NavigationMenu` was deleted (v23) together with `ContextMenu` and `Menubar`. Measured before
214
+ removing them: across the nine repositories that depend on `@godxjp/ui`, not one file imported any
215
+ of the three, and inside this package they were reachable only through the `components/ui` barrel
216
+ re-export. The rows this section used to track (`overflowedIndicator`, `items[].disabled`,
217
+ `subMenuCloseDelay`) are therefore not gaps any more there is no component to have them.
218
+
219
+ Nothing replaces a horizontal menu today. If one is wanted, antd's `Menu mode="horizontal"` is the
220
+ shape to build, and its `overflowedIndicator` must ship with it (see §1 item 5).
225
221
 
226
222
  ### 2.11 `DropdownMenu` vs antd `Dropdown` (+ `Dropdown.Button`)
227
223
 
228
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
229
- | --- | --- | --- | --- |
230
- | `open` / `onOpenChange` | `PRESENT` | `mcp/src/data/components.ts:7588` entry | — |
231
- | `placement` (12 anchors) | `PRESENT` (6, logical) | `DropdownMenuPlacementProp`, `src/props/components/navigation.prop.ts` — `bottomStart`/`topEnd`… | antd's inline-side `left*`/`right*` are a documented `WONT-PORT` (physical in RTL) |
232
- | `arrow` | `PRESENT` | `DropdownMenuContentProps.arrow`, `src/components/navigation/dropdown-menu.tsx:353` | Sized from `--dropdown-arrow-*` |
233
- | `autoAdjustOverflow` | `PRESENT` | RAC popover collision handling, `dropdown-menu.tsx:383-404` | Always on |
234
- | `disabled` | `COVERED-ELSEWHERE` | the trigger's own `disabled` (`DropdownMenuTrigger`, `dropdown-menu.tsx:232`) | — |
235
- | `menu.items` config array | `WONT-PORT` | — | Compound parts; the catalog `usage` block mandates the full tree |
236
- | `trigger: ['contextMenu']` | `COVERED-ELSEWHERE` | `ContextMenu` (`mcp/src/data/components.ts:12384`) | Cross-link exists on both sides |
237
- | `trigger: ['hover']` | `WONT-PORT` | | An APG menu button opens on click; hover-only is a keyboard/AT trap |
238
- | `destroyOnHidden` / `forceRender` | `PRESENT` | `forceMount` kept for contract shape, `dropdown-menu.tsx:364` | — |
239
- | `getPopupContainer` | `WONT-PORT` | — | Portal escape hatch |
240
- | `popupRender` / `dropdownRender` | `WONT-PORT` | — | Render-prop escape past the a11y contract (ground rule) |
241
- | `menu.items[].danger` | `PRESENT` | `DropdownMenuItem variant="destructive"`, catalog `usage` | — |
242
- | **`Dropdown.Button`** — split primary + menu | `MISSING` | `grep -rn "SplitButton\|Dropdown.Button" src/` → 0 hits | **Composition once `ButtonGroup` exists** (§4.1); do not add a third component |
243
- | `Dropdown.Button.loading` | `MISSING` | as above | Same row |
224
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
225
+ | -------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
226
+ | `open` / `onOpenChange` | `PRESENT` | `mcp/src/data/components.ts:7588` entry | — |
227
+ | `placement` (12 anchors) | `PRESENT` (6, logical) | `DropdownMenuPlacementProp`, `src/props/components/navigation.prop.ts` — `bottomStart`/`topEnd`… | antd's inline-side `left*`/`right*` are a documented `WONT-PORT` (physical in RTL) |
228
+ | `arrow` | `PRESENT` | `DropdownMenuContentProps.arrow`, `src/components/navigation/dropdown-menu.tsx:353` | Sized from `--dropdown-arrow-*` |
229
+ | `autoAdjustOverflow` | `PRESENT` | RAC popover collision handling, `dropdown-menu.tsx:383-404` | Always on |
230
+ | `disabled` | `PRESENT` | `disabled` on the root (antd's shape: it empties the trigger list), plus the trigger's own `disabled` | — |
231
+ | `menu.items` config array | `WONT-PORT` | — | Compound parts; the catalog `usage` block mandates the full tree |
232
+ | `trigger: ['contextMenu']` | `PRESENT` | `DropdownMenu trigger={['contextMenu']}`, `src/components/navigation/dropdown-menu.tsx` | v23: replaced the dedicated `ContextMenu`, which was deleted |
233
+ | `trigger: ['hover']` | `PRESENT` | `trigger` + `mouseEnterDelay`/`mouseLeaveDelay`, `dropdown-menu.tsx` | The earlier `WONT-PORT` said hover-only is a keyboard trap; it is not one here, because the keyboard opener (Enter / Space / Arrow) stays wired in every trigger mode |
234
+ | `destroyOnHidden` / `forceRender` | `PRESENT` | `forceMount` kept for contract shape, `dropdown-menu.tsx:364` | — |
235
+ | `getPopupContainer` | `WONT-PORT` | — | Portal escape hatch |
236
+ | `popupRender` / `dropdownRender` | `WONT-PORT` | — | Render-prop escape past the a11y contract (ground rule) |
237
+ | `menu.items[].danger` | `PRESENT` | `DropdownMenuItem variant="destructive"`, catalog `usage` | — |
238
+ | **`Dropdown.Button`** — split primary + menu | `MISSING` | `grep -rn "SplitButton\|Dropdown.Button" src/` → 0 hits | **Composition once `ButtonGroup` exists** (§4.1); do not add a third component |
239
+ | `Dropdown.Button.loading` | `MISSING` | as above | Same row |
244
240
 
245
241
  ### 2.12 `Breadcrumb` vs antd `Breadcrumb`
246
242
 
247
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
248
- | --- | --- | --- | --- |
249
- | `items` | `PRESENT` | `BreadcrumbProp`, `src/props/vocabulary/navigation.prop.ts:43` | — |
250
- | `items[].title` / `href` | `RENAMED` | `label` / `to`, `navigation.prop.ts:34-37` | — |
251
- | `items[].menu` (sibling dropdown) | `PRESENT` | `BreadcrumbItemMenuProp`, `navigation.prop.ts:26-30`; rendered at `src/components/layout/breadcrumb.tsx:88-120` | Trigger is a real `<button>` — ahead of antd |
252
- | `separator` | `PRESENT` | `BreadcrumbSeparatorProp`, `navigation.prop.ts:47`; `breadcrumb.tsx:45-46` | `""` removes it, always `aria-hidden` |
253
- | `itemRender` | `PRESENT` | `BreadcrumbItemRenderProp`, `navigation.prop.ts:57`; `breadcrumb.tsx:75` | — |
254
- | `params` | `WONT-PORT` | — | Router concern; `itemRender` covers it |
255
- | `dropdownIcon` | `MISSING` | fixed `ChevronDown`, `src/components/layout/breadcrumb.tsx:99` | **Token** (`--breadcrumb-menu-icon-*`), not a prop |
256
- | `type: "separator"` item (per-gap separator) | `MISSING` | one `separator` for the whole trail, `breadcrumb.tsx:45` | P2 — rare |
257
- | `items[].onClick` | `COVERED-ELSEWHERE` | `itemRender` | — |
258
- | `<nav aria-label>` + `<ol>` + `aria-current="page"` | `PRESENT` | `breadcrumb.tsx:49-50`,`:128` | Ahead of antd, which emits a bare `<nav>` |
243
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
244
+ | --------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
245
+ | `items` | `PRESENT` | `BreadcrumbProp`, `src/props/vocabulary/navigation.prop.ts:43` | — |
246
+ | `items[].title` / `href` | `RENAMED` | `label` / `to`, `navigation.prop.ts:34-37` | — |
247
+ | `items[].menu` (sibling dropdown) | `PRESENT` | `BreadcrumbItemMenuProp`, `navigation.prop.ts:26-30`; rendered at `src/components/layout/breadcrumb.tsx:88-120` | Trigger is a real `<button>` — ahead of antd |
248
+ | `separator` | `PRESENT` | `BreadcrumbSeparatorProp`, `navigation.prop.ts:47`; `breadcrumb.tsx:45-46` | `""` removes it, always `aria-hidden` |
249
+ | `itemRender` | `PRESENT` | `BreadcrumbItemRenderProp`, `navigation.prop.ts:57`; `breadcrumb.tsx:75` | — |
250
+ | `params` | `WONT-PORT` | — | Router concern; `itemRender` covers it |
251
+ | `dropdownIcon` | `MISSING` | fixed `ChevronDown`, `src/components/layout/breadcrumb.tsx:99` | **Token** (`--breadcrumb-menu-icon-*`), not a prop |
252
+ | `type: "separator"` item (per-gap separator) | `MISSING` | one `separator` for the whole trail, `breadcrumb.tsx:45` | P2 — rare |
253
+ | `items[].onClick` | `COVERED-ELSEWHERE` | `itemRender` | — |
254
+ | `<nav aria-label>` + `<ol>` + `aria-current="page"` | `PRESENT` | `breadcrumb.tsx:49-50`,`:128` | Ahead of antd, which emits a bare `<nav>` |
259
255
 
260
256
  ### 2.13 `Pagination` vs antd `Pagination`
261
257
 
262
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
263
- | --- | --- | --- | --- |
264
- | `current` | `RENAMED` | `PaginationProp.value`, `src/props/components/navigation.prop.ts` | — |
265
- | **`defaultCurrent` / `defaultPageSize`** | `MISSING` | `PaginationProp` declares `value`/`total`/`pageSize` but no `defaultValue`/`defaultPageSize`; `grep -n "defaultValue\|useState" src/components/navigation/pagination.tsx` → only `jumperDraft` state (`:156`) | Add `defaultValue` / `defaultPageSize` — **STANDARDS rule 7** requires the whole triad, so this is a vocabulary violation, not only a parity gap |
266
- | `total` / `pageSize` / `pageSizeOptions` | `PRESENT` | `PaginationProp`, navigation.prop.ts | Catalog entry omits `total`/`pageSize` — sync gap, §5 |
267
- | `showSizeChanger` / `showTotal` / `showQuickJumper` | `PRESENT` | `PaginationProp` | `showQuickJumper` even takes `{goButton}` |
268
- | `hideOnSinglePage` / `simple` / `disabled` | `PRESENT` | `PaginationProp` | `hideOnSinglePage` defaults `true` (antd defaults `false`) — documented |
269
- | `size: small\|medium` | `RENAMED` | `PaginationSizeProp = "sm" \| "md"`, navigation.prop.ts | — |
270
- | `align` | `PRESENT` | `PaginationAlignProp` — `start`/`center`/`end`, logical | Ahead of antd (RTL-safe) |
271
- | `responsive` | `PRESENT` | `PaginationProp.responsive` | Documented measurement at 390px |
272
- | `onChange` / `onShowSizeChange` | `RENAMED` | `onValueChange(page, pageSize)` | One callback carries both |
273
- | `itemRender` — render pages as real `<a href>` | `MISSING` | `grep -n "itemRender" src/components/navigation/pagination.tsx` → nothing | P2 — needed for crawlable/middle-clickable list pages |
274
- | `showLessItems` | `MISSING` | not in `PaginationProp` | P2 → token or fold into `responsive` |
275
- | `showTitle` (native `title=`) | `WONT-PORT` | — | `title` is not an accessible affordance; every control already has `aria-label` (`pagination.tsx:253`,`:332`) |
276
- | `components` | `WONT-PORT` | — | Render-prop escape hatch |
258
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
259
+ | --------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
260
+ | `current` | `RENAMED` | `PaginationProp.value`, `src/props/components/navigation.prop.ts` | — |
261
+ | **`defaultCurrent` / `defaultPageSize`** | `MISSING` | `PaginationProp` declares `value`/`total`/`pageSize` but no `defaultValue`/`defaultPageSize`; `grep -n "defaultValue\|useState" src/components/navigation/pagination.tsx` → only `jumperDraft` state (`:156`) | Add `defaultValue` / `defaultPageSize` — **STANDARDS rule 7** requires the whole triad, so this is a vocabulary violation, not only a parity gap |
262
+ | `total` / `pageSize` / `pageSizeOptions` | `PRESENT` | `PaginationProp`, navigation.prop.ts | Catalog entry omits `total`/`pageSize` — sync gap, §5 |
263
+ | `showSizeChanger` / `showTotal` / `showQuickJumper` | `PRESENT` | `PaginationProp` | `showQuickJumper` even takes `{goButton}` |
264
+ | `hideOnSinglePage` / `simple` / `disabled` | `PRESENT` | `PaginationProp` | `hideOnSinglePage` defaults `true` (antd defaults `false`) — documented |
265
+ | `size: small\|medium` | `RENAMED` | `PaginationSizeProp = "sm" \| "md"`, navigation.prop.ts | — |
266
+ | `align` | `PRESENT` | `PaginationAlignProp` — `start`/`center`/`end`, logical | Ahead of antd (RTL-safe) |
267
+ | `responsive` | `PRESENT` | `PaginationProp.responsive` | Documented measurement at 390px |
268
+ | `onChange` / `onShowSizeChange` | `RENAMED` | `onValueChange(page, pageSize)` | One callback carries both |
269
+ | `itemRender` — render pages as real `<a href>` | `MISSING` | `grep -n "itemRender" src/components/navigation/pagination.tsx` → nothing | P2 — needed for crawlable/middle-clickable list pages |
270
+ | `showLessItems` | `MISSING` | not in `PaginationProp` | P2 → token or fold into `responsive` |
271
+ | `showTitle` (native `title=`) | `WONT-PORT` | — | `title` is not an accessible affordance; every control already has `aria-label` (`pagination.tsx:253`,`:332`) |
272
+ | `components` | `WONT-PORT` | — | Render-prop escape hatch |
277
273
 
278
274
  ### 2.14 `Dialog` vs antd `Modal`
279
275
 
280
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
281
- | --- | --- | --- | --- |
282
- | `open` / `onCancel` | `PRESENT` | `open`/`onOpenChange`, `src/components/feedback/dialog.tsx:90-94` | — |
283
- | `title` / `footer` | `PRESENT` | `DialogHeaderProps.title`/`subtitle`/`extra`/`tone`, `dialog.tsx:329-333`; `DialogFooter` part | `extra`/`tone` are ahead of antd |
284
- | **`width`** | `MISSING` | `DialogContentProps` (`dialog.tsx:287-294`) has `showClose`/`overlayClassName`/`forceMount`/`onCloseAutoFocus` and no size axis; the catalog's own example is `<DialogContent className="max-w-lg">` (`mcp/src/data/components.ts`, Dialog `example`) | Add `width?: WidthProp` — copy `SheetContentProps.width` verbatim (`src/components/feedback/sheet.tsx:264`) |
285
- | **`maskClosable` / `keyboard`** — refuse dismissal | `MISSING` | `isDismissable` is passed as a hardcoded literal, `dialog.tsx:310` (`<DialogShell isDismissable …>`); `grep -n "onInteractOutside\|onEscapeKeyDown" src/components/feedback/dialog.tsx` → nothing | Add `dismissible?: boolean` (positive boolean, house rule). Today the only escape is switching to `AlertDialog`, which changes the ARIA role |
286
- | `centered` | `PRESENT` | centred by default | — |
287
- | `loading` (skeleton body) | `MISSING` | not in `DialogContentProps`, `dialog.tsx:287` | P2 |
288
- | `afterClose` | `MISSING` | only `onCloseAutoFocus`, `dialog.tsx:294` | P2 — form reset after the exit animation |
289
- | `destroyOnHidden` / `forceRender` | `PRESENT` | `forceMount`, `dialog.tsx:292` | — |
290
- | `zIndex` / `wrapClassName` / `modalRender` / `styles` | `WONT-PORT` | — | Tokens + ground rule §0.4 |
291
- | `mask: { blur }` | `WONT-PORT` | — | `--dialog-overlay-*` token |
292
- | **`Modal.confirm/info/success/error/warning`** | `WONT-PORT` | — | Imperative API bypassing React state. `AlertDialog` (`mcp/src/data/components.ts:6890`) is the declarative answer — record the refusal in its catalog entry so nobody re-adds it |
293
- | `Modal.useModal()` / `Modal.destroyAll()` | `WONT-PORT` | — | Same reason |
276
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
277
+ | ----------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
278
+ | `open` / `onCancel` | `PRESENT` | `open`/`onOpenChange`, `src/components/feedback/dialog.tsx:90-94` | — |
279
+ | `title` / `footer` | `PRESENT` | `DialogHeaderProps.title`/`subtitle`/`extra`/`tone`, `dialog.tsx:329-333`; `DialogFooter` part | `extra`/`tone` are ahead of antd |
280
+ | **`width`** | `MISSING` | `DialogContentProps` (`dialog.tsx:287-294`) has `showClose`/`overlayClassName`/`forceMount`/`onCloseAutoFocus` and no size axis; the catalog's own example is `<DialogContent className="max-w-lg">` (`mcp/src/data/components.ts`, Dialog `example`) | Add `width?: WidthProp` — copy `SheetContentProps.width` verbatim (`src/components/feedback/sheet.tsx:264`) |
281
+ | **`maskClosable` / `keyboard`** — refuse dismissal | `MISSING` | `isDismissable` is passed as a hardcoded literal, `dialog.tsx:310` (`<DialogShell isDismissable …>`); `grep -n "onInteractOutside\|onEscapeKeyDown" src/components/feedback/dialog.tsx` → nothing | Add `dismissible?: boolean` (positive boolean, house rule). Today the only escape is switching to `AlertDialog`, which changes the ARIA role |
282
+ | `centered` | `PRESENT` | centred by default | — |
283
+ | `loading` (skeleton body) | `MISSING` | not in `DialogContentProps`, `dialog.tsx:287` | P2 |
284
+ | `afterClose` | `MISSING` | only `onCloseAutoFocus`, `dialog.tsx:294` | P2 — form reset after the exit animation |
285
+ | `destroyOnHidden` / `forceRender` | `PRESENT` | `forceMount`, `dialog.tsx:292` | — |
286
+ | `zIndex` / `wrapClassName` / `modalRender` / `styles` | `WONT-PORT` | — | Tokens + ground rule §0.4 |
287
+ | `mask: { blur }` | `WONT-PORT` | — | `--dialog-overlay-*` token |
288
+ | **`Modal.confirm/info/success/error/warning`** | `WONT-PORT` | — | Imperative API bypassing React state. `AlertDialog` (`mcp/src/data/components.ts:6890`) is the declarative answer — record the refusal in its catalog entry so nobody re-adds it |
289
+ | `Modal.useModal()` / `Modal.destroyAll()` | `WONT-PORT` | — | Same reason |
294
290
 
295
291
  ### 2.15 `Sheet` vs antd `Drawer`
296
292
 
297
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
298
- | --- | --- | --- | --- |
299
- | `open` / `onClose` | `PRESENT` | `src/components/feedback/sheet.tsx:135` | — |
300
- | `placement` | `RENAMED` (physical, deliberate) | `side`, `sheet.tsx:237-249` — carries an explicit `rtl-ignore: named physical side` and a written rationale | Documented exception to the logical-spelling rule; keep, but the reason belongs in the catalog entry too |
301
- | `width` / `size` | `PRESENT` | `SheetContentProps.width: WidthProp`, `sheet.tsx:264` | Caps at the viewport, `sheet.tsx:327` |
302
- | `height` (top/bottom sheets) | `MISSING` | `widthSet` only applies when `horizontal`, `sheet.tsx:297` | P2 |
303
- | `title` / `extra` / `footer` | `PRESENT` | `SheetHeader title/subtitle/extra/tone` + `SheetFooter`, catalog entry | — |
304
- | `closable` / `closeIcon` | `PRESENT` | `showCloseButton` on `SheetContent` | — |
305
- | `keyboard` (esc) | `PRESENT` | RAC `ModalOverlay`, `sheet.tsx` | — |
306
- | `maskClosable` | `MISSING` | same defect as 2.14 | Same `dismissible` fix, applied to both overlays |
307
- | responsive side→bottom swap | `PRESENT` | `responsive="auto"` + `useSheetResponsiveMode`, `sheet.tsx:75-92` | **No antd equivalent** — ahead |
308
- | `loading` (skeleton) | `MISSING` | not in `SheetContentProps`, `sheet.tsx:255-270` | P2 |
309
- | `afterOpenChange` | `MISSING` | not in `SheetProps`, `sheet.tsx:135` | P2 |
310
- | `resizable` / `maxSize` | `MISSING` | not present | P2 — `ResizablePanel` covers the docked case |
311
- | `push` (nested drawers) | `WONT-PORT` | — | The catalog already forbids nesting a Sheet in a Dialog |
312
- | `getContainer` / `rootStyle` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
293
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
294
+ | --------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
295
+ | `open` / `onClose` | `PRESENT` | `src/components/feedback/sheet.tsx:135` | — |
296
+ | `placement` | `RENAMED` (physical, deliberate) | `side`, `sheet.tsx:237-249` — carries an explicit `rtl-ignore: named physical side` and a written rationale | Documented exception to the logical-spelling rule; keep, but the reason belongs in the catalog entry too |
297
+ | `width` / `size` | `PRESENT` | `SheetContentProps.width: WidthProp`, `sheet.tsx:264` | Caps at the viewport, `sheet.tsx:327` |
298
+ | `height` (top/bottom sheets) | `MISSING` | `widthSet` only applies when `horizontal`, `sheet.tsx:297` | P2 |
299
+ | `title` / `extra` / `footer` | `PRESENT` | `SheetHeader title/subtitle/extra/tone` + `SheetFooter`, catalog entry | — |
300
+ | `closable` / `closeIcon` | `PRESENT` | `showCloseButton` on `SheetContent` | — |
301
+ | `keyboard` (esc) | `PRESENT` | RAC `ModalOverlay`, `sheet.tsx` | — |
302
+ | `maskClosable` | `MISSING` | same defect as 2.14 | Same `dismissible` fix, applied to both overlays |
303
+ | responsive side→bottom swap | `PRESENT` | `responsive="auto"` + `useSheetResponsiveMode`, `sheet.tsx:75-92` | **No antd equivalent** — ahead |
304
+ | `loading` (skeleton) | `MISSING` | not in `SheetContentProps`, `sheet.tsx:255-270` | P2 |
305
+ | `afterOpenChange` | `MISSING` | not in `SheetProps`, `sheet.tsx:135` | P2 |
306
+ | `resizable` / `maxSize` | `MISSING` | not present | P2 — `ResizablePanel` covers the docked case |
307
+ | `push` (nested drawers) | `WONT-PORT` | — | The catalog already forbids nesting a Sheet in a Dialog |
308
+ | `getContainer` / `rootStyle` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
313
309
 
314
310
  ### 2.16 `SplitPane` / `ResizablePanel` vs antd `Splitter`; `AppProvider` vs antd `App`
315
311
 
316
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
317
- | --- | --- | --- | --- |
318
- | `Splitter.orientation` | `PRESENT` | `ResizablePanelGroup orientation`, `mcp/src/data/components.ts:12545` entry | `SplitPane` is inline-axis-only by design (it is a static two-column layout, not a splitter) |
319
- | `Panel.defaultSize` / `min` / `max` / `collapsible` | `PRESENT` | catalog entry props `defaultSize`, `minSize`, `maxSize`, `collapsible` | — |
320
- | `onResize` | `PRESENT` | catalog entry | — |
321
- | `onResizeStart` / `onResizeEnd` | `MISSING` | catalog lists only `onResize`; `grep -n "onResizeEnd\|onDragging" src/components/layout/resizable.tsx` → nothing | P2 — needed to persist a layout only on drop |
322
- | `lazy` | `MISSING` | not exposed, `src/components/layout/resizable.tsx:6-17` | P2 |
323
- | `onDraggerDoubleClick` (reset to default) | `MISSING` | not exposed | P2 — a real interaction-feel expectation |
324
- | `draggerIcon` | `WONT-PORT` | — | Token (`--resizable-handle-*`) |
325
- | `destroyOnHidden` | `MISSING` | not exposed | P2 |
326
- | handle a11y (`role="separator"`, arrow-key resize) | `PRESENT` | `ResizablePrimitive.Separator`, `resizable.tsx:57`; plus the library's own scroll-region tab stop, `resizable.tsx:26-38` | Ahead of antd |
327
- | antd `App.message` / `.notification` | `COVERED-ELSEWHERE` | `Toaster` (`mcp/src/data/components.ts:7299`) | — |
328
- | antd `App.useApp().modal` | `WONT-PORT` | — | Imperative; `Dialog`/`AlertDialog` are the declarative answer |
329
- | antd `App`/`ConfigProvider` scope | `PRESENT` and beyond | `AppProviderProp`, `src/props/components/app.prop.ts:27-95` — locale, timezone, date/time format, theme, brand, density, fontSize, scaling, per-axis persistence | No antd counterpart for most of it |
312
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
313
+ | --------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
314
+ | `Splitter.orientation` | `PRESENT` | `ResizablePanelGroup orientation`, `mcp/src/data/components.ts:12545` entry | `SplitPane` is inline-axis-only by design (it is a static two-column layout, not a splitter) |
315
+ | `Panel.defaultSize` / `min` / `max` / `collapsible` | `PRESENT` | catalog entry props `defaultSize`, `minSize`, `maxSize`, `collapsible` | — |
316
+ | `onResize` | `PRESENT` | catalog entry | — |
317
+ | `onResizeStart` / `onResizeEnd` | `MISSING` | catalog lists only `onResize`; `grep -n "onResizeEnd\|onDragging" src/components/layout/resizable.tsx` → nothing | P2 — needed to persist a layout only on drop |
318
+ | `lazy` | `MISSING` | not exposed, `src/components/layout/resizable.tsx:6-17` | P2 |
319
+ | `onDraggerDoubleClick` (reset to default) | `MISSING` | not exposed | P2 — a real interaction-feel expectation |
320
+ | `draggerIcon` | `WONT-PORT` | — | Token (`--resizable-handle-*`) |
321
+ | `destroyOnHidden` | `MISSING` | not exposed | P2 |
322
+ | handle a11y (`role="separator"`, arrow-key resize) | `PRESENT` | `ResizablePrimitive.Separator`, `resizable.tsx:57`; plus the library's own scroll-region tab stop, `resizable.tsx:26-38` | Ahead of antd |
323
+ | antd `App.message` / `.notification` | `COVERED-ELSEWHERE` | `Toaster` (`mcp/src/data/components.ts:7299`) | — |
324
+ | antd `App.useApp().modal` | `WONT-PORT` | — | Imperative; `Dialog`/`AlertDialog` are the declarative answer |
325
+ | antd `App`/`ConfigProvider` scope | `PRESENT` and beyond | `AppProviderProp`, `src/props/components/app.prop.ts:27-95` — locale, timezone, date/time format, theme, brand, density, fontSize, scaling, per-axis persistence | No antd counterpart for most of it |
330
326
 
331
327
  ### 2.17 `ErrorSurface` vs antd `Result`
332
328
 
333
- | Ant Design prop / behaviour | Status | Evidence | Verdict |
334
- | --- | --- | --- | --- |
335
- | `status: 403\|404\|500` | `PRESENT` | `ErrorSurfaceStatusProp` (400/403/404/500/503), `src/props/components/layout.prop.ts:763` | Wider than antd |
336
- | `title` / `subTitle` / `extra` / `icon` | `PRESENT` | `layout.prop.ts:765`,`:767`,`:773`,`:778` | `extra` is deliberately a single slot |
337
- | `status: success\|error\|info\|warning` (non-HTTP result page) | `COVERED-ELSEWHERE` | `EmptyState` + `tone` (`data-display`) | Add a `related` cross-link on both sides |
338
- | `requestId` / `permission` / `organization` / `maintenance` | `PRESENT` | `layout.prop.ts:790`,`:795`,`:800`,`:802` | No antd equivalent; ISO-8601 + IANA + `Intl.formatRange` |
339
- | copy control for `requestId` | `MISSING` | the doc comment says it is rendered "so it can be read out or copied accurately" (`layout.prop.ts:787`) but there is no copy affordance anywhere | Falls out of the `Text copyable` row (2.3) |
329
+ | Ant Design prop / behaviour | Status | Evidence | Verdict |
330
+ | -------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- |
331
+ | `status: 403\|404\|500` | `PRESENT` | `ErrorSurfaceStatusProp` (400/403/404/500/503), `src/props/components/layout.prop.ts:763` | Wider than antd |
332
+ | `title` / `subTitle` / `extra` / `icon` | `PRESENT` | `layout.prop.ts:765`,`:767`,`:773`,`:778` | `extra` is deliberately a single slot |
333
+ | `status: success\|error\|info\|warning` (non-HTTP result page) | `COVERED-ELSEWHERE` | `EmptyState` + `tone` (`data-display`) | Add a `related` cross-link on both sides |
334
+ | `requestId` / `permission` / `organization` / `maintenance` | `PRESENT` | `layout.prop.ts:790`,`:795`,`:800`,`:802` | No antd equivalent; ISO-8601 + IANA + `Intl.formatRange` |
335
+ | copy control for `requestId` | `MISSING` | the doc comment says it is rendered "so it can be read out or copied accurately" (`layout.prop.ts:787`) but there is no copy affordance anywhere | Falls out of the `Text copyable` row (2.3) |
340
336
 
341
337
  ---
342
338
 
@@ -344,47 +340,45 @@ renders `requestId` in monospace explicitly "so it can be read out or copied acc
344
340
 
345
341
  ### P0 — breaks a real screen
346
342
 
347
- *(none)*. Every gap below has a workaround; the ones that do not are in the other groups
343
+ _(none)_. Every gap below has a workaround; the ones that do not are in the other groups
348
344
  (`Tree`, count badge, `List`/`Masonry`), already specced.
349
345
 
350
346
  ### P1 — a workaround exists but it is hand-rolled and a11y-risky
351
347
 
352
- | # | Gap | Component | Evidence | Fix |
353
- | --- | --- | --- | --- | --- |
354
- | 1 | **No `width` on `Dialog`** — the catalog itself teaches `className="max-w-lg"`, the utility geometry `ui-audit` blocks everywhere else | `Dialog` | `src/components/feedback/dialog.tsx:287-294`; catalog `example` | `width?: WidthProp`, copied from `src/components/feedback/sheet.tsx:264` |
355
- | 2 | **No way to refuse dismissal** on `Dialog`/`Sheet` — a dirty form dies on an outside click; the only escape changes the ARIA role to `alertdialog` | `Dialog`, `Sheet` | `dialog.tsx:310` (`isDismissable` hardcoded); no `onInteractOutside`/`onEscapeKeyDown` | `dismissible?: boolean` on both content parts |
356
- | 3 | **`Pagination` is controlled-only** — violates STANDARDS rule 7 as well as antd `defaultCurrent` | `Pagination` | `src/props/components/navigation.prop.ts` (`PaginationProp`); `src/components/navigation/pagination.tsx` holds no page state | `defaultValue` + `defaultPageSize` |
357
- | 4 | **No shell collapse handler or trigger** — every consumer re-authors the toggle's `aria-expanded`/`aria-controls` | `AppShell` | `src/components/layout/app-shell.tsx:30`, `:301`; `AppShellProp` `layout.prop.ts:318-421` | `onSidebarCollapsedChange` + a library-owned trigger |
358
- | 5 | **Shell collapse breakpoint is a hardcoded media query**, while the overlay family's equivalent is a token | `AppShell` | `src/styles/shell-layout.css:1119` (`@media (width <= 56.25rem)`) vs `--sheet-responsive-breakpoint-width` (`src/components/feedback/sheet.tsx:46`) | Tokenize as `--app-shell-collapse-breakpoint-width` |
359
- | 6 | **Submenu open state is unreachable** — cannot persist which sections are open | `Sidebar`, `NavList` | `src/components/layout/sidebar.tsx:271` | `openIds` / `defaultOpenIds` / `onOpenIdsChange` |
360
- | 7 | **Horizontal nav has no overflow affordance** — destinations become unreachable (WCAG 2.4.3 / 1.4.10) | `NavigationMenu` | `src/components/navigation/navigation-menu.tsx` (8 thin re-exports, no overflow logic) | An overflow "more" menu, same shape as the recorded `Tabs moreIcon` P1 |
361
- | 8 | **No `copyable` anywhere in the library** — an id rendered explicitly *to be copied* has no copy control | `Text`, `Heading`, `ErrorSurface.requestId` | `grep -rn "copyable" src/` → 0 hits; `src/props/components/layout.prop.ts:787` | `copyable` on `Text`/`Heading` (localized "Copy"/"Copied" via `t()`, `navigator.clipboard`, live-region confirmation) |
362
- | 9 | **Clamped text cannot expand** `clamp` with no "show more" is a content dead end | `Text` | `src/props/components/general.prop.ts:69-77` `truncate`/`clamp` only | `expandable` + `expanded`/`defaultExpanded`/`onExpandedChange` |
363
- | 10 | **No joined control group / split button** | `Button` | `grep -rn "ButtonGroup\|SplitButton\|Space.Compact" src/ mcp/` → 0 hits | `ButtonGroup` — GATE-0 ledger §4.1 |
348
+ | # | Gap | Component | Evidence | Fix |
349
+ | --- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
350
+ | 1 | **No `width` on `Dialog`** — the catalog itself teaches `className="max-w-lg"`, the utility geometry `ui-audit` blocks everywhere else | `Dialog` | `src/components/feedback/dialog.tsx:287-294`; catalog `example` | `width?: WidthProp`, copied from `src/components/feedback/sheet.tsx:264` |
351
+ | 2 | **No way to refuse dismissal** on `Dialog`/`Sheet` — a dirty form dies on an outside click; the only escape changes the ARIA role to `alertdialog` | `Dialog`, `Sheet` | `dialog.tsx:310` (`isDismissable` hardcoded); no `onInteractOutside`/`onEscapeKeyDown` | `dismissible?: boolean` on both content parts |
352
+ | 3 | **`Pagination` is controlled-only** — violates STANDARDS rule 7 as well as antd `defaultCurrent` | `Pagination` | `src/props/components/navigation.prop.ts` (`PaginationProp`); `src/components/navigation/pagination.tsx` holds no page state | `defaultValue` + `defaultPageSize` |
353
+ | 4 | **No shell collapse handler or trigger** — every consumer re-authors the toggle's `aria-expanded`/`aria-controls` | `AppShell` | `src/components/layout/app-shell.tsx:30`, `:301`; `AppShellProp` `layout.prop.ts:318-421` | `onSidebarCollapsedChange` + a library-owned trigger |
354
+ | 5 | **Shell collapse breakpoint is a hardcoded media query**, while the overlay family's equivalent is a token | `AppShell` | `src/styles/shell-layout.css:1119` (`@media (width <= 56.25rem)`) vs `--sheet-responsive-breakpoint-width` (`src/components/feedback/sheet.tsx:46`) | Tokenize as `--app-shell-collapse-breakpoint-width` |
355
+ | 6 | **Submenu open state is unreachable** — cannot persist which sections are open | `Sidebar`, `NavList` | `src/components/layout/sidebar.tsx:271` | `openIds` / `defaultOpenIds` / `onOpenIdsChange` |
356
+ | 8 | **No `copyable` anywhere in the library** — an id rendered explicitly _to be copied_ has no copy control | `Text`, `Heading`, `ErrorSurface.requestId` | `grep -rn "copyable" src/` 0 hits; `src/props/components/layout.prop.ts:787` | `copyable` on `Text`/`Heading` (localized "Copy"/"Copied" via `t()`, `navigator.clipboard`, live-region confirmation) |
357
+ | 9 | **Clamped text cannot expand** — `clamp` with no "show more" is a content dead end | `Text` | `src/props/components/general.prop.ts:69-77` `truncate`/`clamp` only | `expandable` + `expanded`/`defaultExpanded`/`onExpandedChange` |
358
+ | 10 | **No joined control group / split button** | `Button` | `grep -rn "ButtonGroup\|SplitButton\|Space.Compact" src/ mcp/` 0 hits | `ButtonGroup` GATE-0 ledger §4.1 |
364
359
 
365
360
  ### P2 — nice to have
366
361
 
367
- | Gap | Component | Verdict |
368
- | --- | --- | --- |
369
- | `size: "default"` alias should be `md` | `Button` | Deprecate the alias (STANDARDS rule 10) |
370
- | `loading: { delay }` | `Button` | `loadingDelay?: number` |
371
- | `mark` (highlighted run) | `Text` | Add `"mark"` to the `as` union |
372
- | `ellipsis.tooltip` (only when actually clipped) | `Text` | `truncateTooltip?: boolean` |
373
- | `ellipsis.suffix` / `onEllipsis` | `Text` | with `expandable` |
374
- | `editable` (inline edit) | `Text` | GATE-0 §4.1 — a separate spec, not a `Text` prop |
375
- | `level: 5`; `clamp`/`ellipsis.tooltip` on headings | `Heading` | Add `5` or document the 4-level canon |
376
- | `wrap: "wrap-reverse"`; per-axis `gap` | `Flex` | `gap={{row,column}}` |
377
- | `Space.separator` (rule between children) | `Flex` | **Composition** — interleave `Separator orientation="vertical"`; document it |
378
- | `Row.justify` / `Row.align`; `Col.order`; per-axis gutter; `xl` step | `ResponsiveGrid` | — |
379
- | `variant: dashed\|dotted` | `Separator` | **Token** `--separator-rule-style` |
380
- | `items[].danger`; `expandIcon` | `Sidebar` | `expandIcon` → token |
381
- | `subMenuCloseDelay`; item `disabled` | `NavigationMenu` | |
382
- | `dropdownIcon`; per-gap `type:"separator"` item | `Breadcrumb` | `dropdownIcon` token |
383
- | `itemRender`; `showLessItems` | `Pagination` | `itemRender` matters for crawlable list pages |
384
- | `loading` (skeleton); `afterClose` | `Dialog` | — |
385
- | `height` for top/bottom sheets; `loading`; `afterOpenChange`; `resizable` | `Sheet` | |
386
- | `onResizeStart`/`onResizeEnd`; `lazy`; `onDraggerDoubleClick`; `destroyOnHidden` | `ResizablePanel` | double-click-to-reset is an interaction-feel expectation |
387
- | `Dropdown.Button` (split button) | `DropdownMenu` | **Composition** over `ButtonGroup` once it exists |
362
+ | Gap | Component | Verdict |
363
+ | -------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------- |
364
+ | `size: "default"` alias should be `md` | `Button` | Deprecate the alias (STANDARDS rule 10) |
365
+ | `loading: { delay }` | `Button` | `loadingDelay?: number` |
366
+ | `mark` (highlighted run) | `Text` | Add `"mark"` to the `as` union |
367
+ | `ellipsis.tooltip` (only when actually clipped) | `Text` | `truncateTooltip?: boolean` |
368
+ | `ellipsis.suffix` / `onEllipsis` | `Text` | with `expandable` |
369
+ | `editable` (inline edit) | `Text` | GATE-0 §4.1 — a separate spec, not a `Text` prop |
370
+ | `level: 5`; `clamp`/`ellipsis.tooltip` on headings | `Heading` | Add `5` or document the 4-level canon |
371
+ | `wrap: "wrap-reverse"`; per-axis `gap` | `Flex` | `gap={{row,column}}` |
372
+ | `Space.separator` (rule between children) | `Flex` | **Composition** — interleave `Separator orientation="vertical"`; document it |
373
+ | `Row.justify` / `Row.align`; `Col.order`; per-axis gutter; `xl` step | `ResponsiveGrid` | — |
374
+ | `variant: dashed\|dotted` | `Separator` | **Token** `--separator-rule-style` |
375
+ | `items[].danger`; `expandIcon` | `Sidebar` | `expandIcon` → token |
376
+ | `dropdownIcon`; per-gap `type:"separator"` item | `Breadcrumb` | `dropdownIcon` → token |
377
+ | `itemRender`; `showLessItems` | `Pagination` | `itemRender` matters for crawlable list pages |
378
+ | `loading` (skeleton); `afterClose` | `Dialog` | |
379
+ | `height` for top/bottom sheets; `loading`; `afterOpenChange`; `resizable` | `Sheet` | — |
380
+ | `onResizeStart`/`onResizeEnd`; `lazy`; `onDraggerDoubleClick`; `destroyOnHidden` | `ResizablePanel` | double-click-to-reset is an interaction-feel expectation |
381
+ | `Dropdown.Button` (split button) | `DropdownMenu` | **Composition** over `ButtonGroup` once it exists |
388
382
 
389
383
  ---
390
384
 
@@ -396,50 +390,50 @@ Only two things in these three groups survive `docs/COMPOSITION-VS-COMPONENT.md`
396
390
 
397
391
  #### `ButtonGroup` — joined controls (antd `Button.Group` / `Space.Compact`, and the base of `Dropdown.Button`)
398
392
 
399
- | # | Criterion | Verdict | Reasoning |
400
- | --- | --- | --- | --- |
401
- | C1 | Universal, not design-specific | **PASS** | Segmented actions, split buttons and welded input+button rows appear in every admin app; antd, Radix, Fluent and SLDS all ship one. |
402
- | C2 | Encapsulates reusable BEHAVIOR | **PASS** (borderline) | Little state, but a real contract: an `aria-label`led `role="group"`, and for the split-button shape the primary `<button>` + a separately-named menu-trigger `<button>` pair the APG requires. Comparable to `StatCard`, the documented borderline case. |
403
- | C3 | Not expressible from primitives + tokens | **PASS** | Joining requires zeroing the inner corner radii and collapsing the shared border per child — per-child geometry the app would have to write as `[&>*:not(:first-child)]` utilities, which `ui-audit`'s `no-utility-layout` blocks. This is exactly the `Flex fill` situation recorded at `src/props/components/layout.prop.ts:229-241`. |
404
- | C4 | Single responsibility + controlled vocabulary | **PASS** | One job (weld a row of controls). API: `orientation`, `size` (`xs\|sm\|md\|lg`, forwarded to children), `attached`, `label`. No `value`/selection axis — that is `ToggleGroup`/`Segmented`. |
405
- | C5 | Fully token-themeable | **PASS** | Reads `--button-radius`, `--radius-sharp` and the existing control tokens; nothing new baked. |
406
- | C6 | Earns the international contract | **PASS** | Needs `role="group"` + a required accessible name, and its joining must be **logical** (`border-start-start-radius`), which is precisely what an app hand-rolling it with `rounded-l-none` gets wrong in RTL. |
407
- | C7 | Earns its bundle cost | **PASS** | Small (CSS + a thin wrapper), and it unlocks `Dropdown.Button` and welded `Input + Button` rows without a second component. |
393
+ | # | Criterion | Verdict | Reasoning |
394
+ | --- | --------------------------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
395
+ | C1 | Universal, not design-specific | **PASS** | Segmented actions, split buttons and welded input+button rows appear in every admin app; antd, Radix, Fluent and SLDS all ship one. |
396
+ | C2 | Encapsulates reusable BEHAVIOR | **PASS** (borderline) | Little state, but a real contract: an `aria-label`led `role="group"`, and for the split-button shape the primary `<button>` + a separately-named menu-trigger `<button>` pair the APG requires. Comparable to `StatCard`, the documented borderline case. |
397
+ | C3 | Not expressible from primitives + tokens | **PASS** | Joining requires zeroing the inner corner radii and collapsing the shared border per child — per-child geometry the app would have to write as `[&>*:not(:first-child)]` utilities, which `ui-audit`'s `no-utility-layout` blocks. This is exactly the `Flex fill` situation recorded at `src/props/components/layout.prop.ts:229-241`. |
398
+ | C4 | Single responsibility + controlled vocabulary | **PASS** | One job (weld a row of controls). API: `orientation`, `size` (`xs\|sm\|md\|lg`, forwarded to children), `attached`, `label`. No `value`/selection axis — that is `ToggleGroup`/`Segmented`. |
399
+ | C5 | Fully token-themeable | **PASS** | Reads `--button-radius`, `--radius-sharp` and the existing control tokens; nothing new baked. |
400
+ | C6 | Earns the international contract | **PASS** | Needs `role="group"` + a required accessible name, and its joining must be **logical** (`border-start-start-radius`), which is precisely what an app hand-rolling it with `rounded-l-none` gets wrong in RTL. |
401
+ | C7 | Earns its bundle cost | **PASS** | Small (CSS + a thin wrapper), and it unlocks `Dropdown.Button` and welded `Input + Button` rows without a second component. |
408
402
 
409
403
  **Verdict: framework component.** Note the boundary explicitly in the catalog: `ToggleGroup` and
410
- `Segmented` stay the *selection* controls; `ButtonGroup` is *actions only*.
404
+ `Segmented` stay the _selection_ controls; `ButtonGroup` is _actions only_.
411
405
 
412
406
  #### `EditableText` — inline edit (antd `Typography editable`)
413
407
 
414
- | # | Criterion | Verdict | Reasoning |
415
- | --- | --- | --- | --- |
416
- | C1 | Universal | **PASS** | Rename-in-place on a title, a list row, a board card. |
417
- | C2 | Reusable behaviour | **PASS** | Display↔edit swap, Enter commits / Escape cancels / blur commits, focus return to the trigger, `aria-live` confirmation, `maxLength`, autosize. Every one of these is got wrong by a hand-rolled version. |
418
- | C3 | Not composable today | **PASS** | `Text` + `Input` + local state reproduces the look and none of the focus/keyboard contract. |
419
- | C4 | Single responsibility + vocabulary | **PASS** | `value`/`defaultValue`/`onValueChange` + `editing`/`defaultEditing`/`onEditingChange`. |
420
- | C5 | Token-themeable | **PASS** | Reuses `--input-*` and the type scale. |
421
- | C6 | International contract | **PASS** | Needs a localized edit/save/cancel accessible name set and IME-safe commit (a JA/VI composition Enter must not commit). That IME rule alone is why this must not be per-app. |
422
- | C7 | Bundle cost | **PASS** (weaker) | Narrower reach than `ButtonGroup`. |
408
+ | # | Criterion | Verdict | Reasoning |
409
+ | --- | ---------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
410
+ | C1 | Universal | **PASS** | Rename-in-place on a title, a list row, a board card. |
411
+ | C2 | Reusable behaviour | **PASS** | Display↔edit swap, Enter commits / Escape cancels / blur commits, focus return to the trigger, `aria-live` confirmation, `maxLength`, autosize. Every one of these is got wrong by a hand-rolled version. |
412
+ | C3 | Not composable today | **PASS** | `Text` + `Input` + local state reproduces the look and none of the focus/keyboard contract. |
413
+ | C4 | Single responsibility + vocabulary | **PASS** | `value`/`defaultValue`/`onValueChange` + `editing`/`defaultEditing`/`onEditingChange`. |
414
+ | C5 | Token-themeable | **PASS** | Reuses `--input-*` and the type scale. |
415
+ | C6 | International contract | **PASS** | Needs a localized edit/save/cancel accessible name set and IME-safe commit (a JA/VI composition Enter must not commit). That IME rule alone is why this must not be per-app. |
416
+ | C7 | Bundle cost | **PASS** (weaker) | Narrower reach than `ButtonGroup`. |
423
417
 
424
418
  **Verdict: framework component, but P2** — write it as its own spec, not as a `Text` prop. Attaching
425
419
  an editing lifecycle to the typographic primitive would make every `<Text>` in the bundle carry it.
426
420
 
427
421
  ### 4.2 These antd components are **compositions** here, not gaps
428
422
 
429
- | antd | Why it is not a gap | Build it with |
430
- | --- | --- | --- |
431
- | `Space` | `gap` already lives on the layout primitive, with a counted escape hatch (`data-gap-raw`). C3 fails outright. | `Flex gap` / `ResponsiveGrid gap` |
432
- | `Divider` | Exists. | `Separator` (`src/props/components/layout.prop.ts:567`) |
433
- | `Grid` / `Row` / `Col` | Exists, in the house `{base,sm,md,lg}` count model rather than a 12-column raster. | `ResponsiveGrid` + `ResponsiveGrid.Item span` (`src/components/layout/responsive-grid.tsx:115`) |
434
- | `Affix` | C1/C2/C3 all fail — it is `position: sticky` with a JS shim, and antd's own docs now recommend the CSS property. Sticky chrome is already a first-class slot here. | `PageContainer toolbar` (`layout.prop.ts:82-88`), `PageContainer stickyFooter`, `Toolbar sticky`, `DataTable sticky` |
435
- | `Anchor` | C1/C7 fail — the one real use (a long document with a contents rail) is already owned end-to-end, including scroll-spy, hash deep-linking, focus handoff and `aria-current="location"`. A second general Anchor would duplicate it. | `LegalDocumentShell` (`layout.prop.ts:1279-1331`) |
436
- | `FloatButton` / `BackTop` | C1/C2 fail — layout + content + colour, positioned by the screen that wants it. `BackTop` additionally competes with the shell's own scroll ownership (`MobileShell` is deliberately the only scroll container, `layout.prop.ts:504-507`). | `Button shape="pill" size="icon-lg"` placed by the page; a token for the inset if one is missing |
437
- | `Layout.Header` / `Content` / `Footer` | Bare boxes in antd; real slots here. | `AppShell topbar` / `children` / `footer`, `Topbar`, `PageContainer` |
438
- | `App` (static-method context) | The context problem it solves does not exist here — nothing is imperative. | `AppProvider` + `Toaster` + declarative `Dialog`/`AlertDialog` |
439
- | `PageHeader` (removed from antd core) | Exists, and is wider. | `PageContainer` (`layout.prop.ts:64-139`) |
440
- | `Result` | Exists for HTTP statuses; the non-HTTP shapes are an empty state with an action. | `ErrorSurface` / `EmptyState` |
441
- | `Menu` `items` config array as the only API | Both dialects exist already: config-array for the route rails, compound parts for the overlay menus. | `Sidebar.sections` / `NavList.items` · `DropdownMenu*` / `Menubar*` / `NavigationMenu*` |
442
- | `Dropdown.Button` | Two existing primitives plus the proposed `ButtonGroup`. | `ButtonGroup` + `Button` + `DropdownMenu` |
423
+ | antd | Why it is not a gap | Build it with |
424
+ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
425
+ | `Space` | `gap` already lives on the layout primitive, with a counted escape hatch (`data-gap-raw`). C3 fails outright. | `Flex gap` / `ResponsiveGrid gap` |
426
+ | `Divider` | Exists. | `Separator` (`src/props/components/layout.prop.ts:567`) |
427
+ | `Grid` / `Row` / `Col` | Exists, in the house `{base,sm,md,lg}` count model rather than a 12-column raster. | `ResponsiveGrid` + `ResponsiveGrid.Item span` (`src/components/layout/responsive-grid.tsx:115`) |
428
+ | `Affix` | C1/C2/C3 all fail — it is `position: sticky` with a JS shim, and antd's own docs now recommend the CSS property. Sticky chrome is already a first-class slot here. | `PageContainer toolbar` (`layout.prop.ts:82-88`), `PageContainer stickyFooter`, `Toolbar sticky`, `DataTable sticky` |
429
+ | `Anchor` | C1/C7 fail — the one real use (a long document with a contents rail) is already owned end-to-end, including scroll-spy, hash deep-linking, focus handoff and `aria-current="location"`. A second general Anchor would duplicate it. | `LegalDocumentShell` (`layout.prop.ts:1279-1331`) |
430
+ | `FloatButton` / `BackTop` | C1/C2 fail — layout + content + colour, positioned by the screen that wants it. `BackTop` additionally competes with the shell's own scroll ownership (`MobileShell` is deliberately the only scroll container, `layout.prop.ts:504-507`). | `Button shape="pill" size="icon-lg"` placed by the page; a token for the inset if one is missing |
431
+ | `Layout.Header` / `Content` / `Footer` | Bare boxes in antd; real slots here. | `AppShell topbar` / `children` / `footer`, `Topbar`, `PageContainer` |
432
+ | `App` (static-method context) | The context problem it solves does not exist here — nothing is imperative. | `AppProvider` + `Toaster` + declarative `Dialog`/`AlertDialog` |
433
+ | `PageHeader` (removed from antd core) | Exists, and is wider. | `PageContainer` (`layout.prop.ts:64-139`) |
434
+ | `Result` | Exists for HTTP statuses; the non-HTTP shapes are an empty state with an action. | `ErrorSurface` / `EmptyState` |
435
+ | `Menu` `items` config array as the only API | Both dialects exist already: config-array for the route rails, compound parts for the overlay menus. | `Sidebar.sections` / `NavList.items` · `DropdownMenu*` |
436
+ | `Dropdown.Button` | Two existing primitives plus the proposed `ButtonGroup`. | `ButtonGroup` + `Button` + `DropdownMenu` |
443
437
 
444
438
  ---
445
439
 
@@ -448,17 +442,17 @@ an editing lifecycle to the typographic primitive would make every `<Text>` in t
448
442
  `pnpm check:mcp-sync` passes on shape, so these are documented-surface omissions rather than
449
443
  build failures. Each is a prop that exists in `src/` and is invisible to a consumer asking the MCP:
450
444
 
451
- | Component | Props present in `src/` but absent from `mcp/src/data/components.ts` |
452
- | --- | --- |
453
- | `ResponsiveGrid` | `pad`, `preset`, and the whole `ResponsiveGrid.Item` / `span` API (`src/components/layout/responsive-grid.tsx:115`) |
454
- | `Pagination` | `total`, `pageSize` (`src/props/components/navigation.prop.ts`) |
455
- | `Flex` | `grow`, `shrink`, `bleed` (`src/props/components/layout.prop.ts:158`,`:162-163`) |
456
- | `Separator` | `space`, `hideBelow`, `hideFrom` (`layout.prop.ts:569-571`) |
457
- | `AppLauncher` | `error`, `onRetry`, `open` (`layout.prop.ts:1112-1136`) |
458
- | `OrgSwitcher` | `value`, `error`, `onRetry`, `open` (`layout.prop.ts:985-1015`) |
459
- | `AppShell` | `navRailLabel` is listed but the `sidebarCollapsed` change handler gap (P1 #4) means the entry documents a half-contract |
460
- | `Button` | `size` type in the catalog omits `md`, which `src/components/general/button.tsx:33` supports |
461
- | `ResizablePanel` | `onCollapse` / `onExpand` (react-resizable-panels surface) |
445
+ | Component | Props present in `src/` but absent from `mcp/src/data/components.ts` |
446
+ | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
447
+ | `ResponsiveGrid` | `pad`, `preset`, and the whole `ResponsiveGrid.Item` / `span` API (`src/components/layout/responsive-grid.tsx:115`) |
448
+ | `Pagination` | `total`, `pageSize` (`src/props/components/navigation.prop.ts`) |
449
+ | `Flex` | `grow`, `shrink`, `bleed` (`src/props/components/layout.prop.ts:158`,`:162-163`) |
450
+ | `Separator` | `space`, `hideBelow`, `hideFrom` (`layout.prop.ts:569-571`) |
451
+ | `AppLauncher` | `error`, `onRetry`, `open` (`layout.prop.ts:1112-1136`) |
452
+ | `OrgSwitcher` | `value`, `error`, `onRetry`, `open` (`layout.prop.ts:985-1015`) |
453
+ | `AppShell` | `navRailLabel` is listed but the `sidebarCollapsed` change handler gap (P1 #4) means the entry documents a half-contract |
454
+ | `Button` | `size` type in the catalog omits `md`, which `src/components/general/button.tsx:33` supports |
455
+ | `ResizablePanel` | `onCollapse` / `onExpand` (react-resizable-panels surface) |
462
456
 
463
457
  These should be folded into whichever fix wave touches each component, per the
464
458
  `godxjp-ui-mcp-catalog-sync` contract — not as a separate pass.