# 2026-04-27 Component Completeness Audit

## Why omissions still happened

The issue was not limited to `Notification` and `Tooltip`.

Three structural risks still existed in the pipeline:

1. Some docs pages were still written as **review-oriented or approximation-oriented docs pages**, not strict Figma family mirrors.
2. Some canonical wrappers still **compressed Figma axes into smaller runtime semantics**, which can erase members even when `data-figma-*` attributes remain present.
3. The current test coverage mainly checked **renderability and wrapper attributes**, but did not yet enforce **component-family completeness** at the docs-page level.

That is why a page could look “Figma-based” while still omitting real members or inventing documentation-only groupings.

## Audit method

This audit compared four layers:

1. `figma-data/raw/components.index.json`
2. `playground/docs/navigation.ts` and `playground/docs/DocsShell.vue`
3. `src/canonical/*.vue`
4. `playground/docs/pages/*Page.vue`

The main questions were:

- Does the Figma component set have a docs page?
- Does the docs page show the real Figma members, or a documentation approximation?
- Does the canonical wrapper preserve the Figma axes, or compress them?

## Findings

### A. Highest-risk pages: docs exist, but still contain approximation or capability truncation

These pages are the most likely to have the same class of problem that `Notification` and `Tooltip` had.

| Page | Evidence | Risk |
|---|---|---|
| `PaginationPage.vue` | Explicitly says `Small` is approximated because there is no dedicated small skin yet. | The docs page can visually imply full Figma coverage while still using a runtime approximation. |
| `TablePage.vue` | Explicitly limits scope to `columns / data / striped` and says sorting, selection, empty state, fixed columns, and pagination linkage are still pending. | The page does not represent a full Figma table family yet. |
| `TopBarPage.vue` | Presents the component mainly as a slot container and composes extra “compact workbench” examples beyond the two Figma `Tag` members. | High chance of mixing Figma variants with runtime composition demos. |
| `ButtonPage.vue` | Still marked as bridge review and not part of stable public export. | The page is strong as a review page, but it is not yet a stable full-family Figma page. |

### B. Medium-risk pages: canonical path exists, but structural rebuild or approximation history remains visible

These pages are better than before, but should still be reviewed with caution.

| Page | Evidence | Risk |
|---|---|---|
| `SliderPage.vue` | Page now starts from Figma axes, but the earlier pipeline marked `Slider` for structural rebuild. | Likely closer now, but still worth a direct member-by-member parity check. |
| `ProgressPage.vue` | Page starts from exact axes and looks healthier, but still uses a runtime value model outside the pure Figma family. | Lower risk than Pagination/Table, but not yet proven complete. |
| `InputNumberPage.vue` | Explicitly says it is reviewed from a canonical bridge. | Better than an approximation page, but still bridge-driven rather than fully promotion-complete. |
| `RatingPage.vue` | Axis mapping looks clean now, but this page had earlier “theme gap” history. | Worth one confirmation pass. |

### C. Lower-risk pages: current page structure appears Figma-first enough for now

These pages currently look materially safer than the groups above.

| Page | Evidence |
|---|---|
| `BadgePage.vue` | Real exported axes are shown directly and the API contract is aligned to those axes. |
| `InputPage.vue` | Uses source component families and large variant counts rather than synthetic semantic sections. |
| `SelectPage.vue` | Uses combined source component families and keeps axes explicit. |
| `DateTimePage.vue` | Split from Select and organized by feature family rather than prose-only approximation. |
| `CheckboxPage.vue` | Uses exact state axes and real component review examples. |
| `RadioPage.vue` | Uses exact Figma axes and maps runtime usage back to them. |
| `SwitchPage.vue` | Organized directly by `status / enable / loading`. |
| `NotificationPage.vue` | Repaired on 2026-04-27 to show the full 14-member family. |
| `TooltipPage.vue` | Repaired on 2026-04-27 to show exact pointing members first. |
| `PromptMessagePage.vue` | Added on 2026-04-27 as an independent component page instead of being hidden inside Notification notes. |

## Missing docs-page coverage

This gap was closed on 2026-04-27, but not by mechanically adding six isolated top-level pages.

The final structure now follows developer-facing capabilities while still preserving the real TVU Figma families:

- `FormItem` remains a standalone page because `Form Item` is an independent 64-member component set in Figma.
- `Tabs` is one capability page composed from `Tab List` + `Tab/Item`.
- `Steps` is one capability page composed from `Step/Item`.
- `Breadcrumb` is one capability page composed from `Breadcrumb/Item`.
- `DropDownListSelect` is documented inside `Select` as the dropdown/list layer, not as a separate top-level capability.

This means docs-site completeness is now proven by capability pages where that matches real engineering usage, instead of forcing every Figma family into一级导航.

## Wrapper-level compression risks

The recent `Notification` and `Tooltip` issues showed the key failure mode clearly:

- `Notification` previously compressed multiple Figma statuses into fewer runtime types.
- `Tooltip` previously converted exact pointing members into a generic placement approximation.

The main rule going forward should be:

> If Figma publishes a variant axis, the canonical wrapper should preserve that axis as a first-class input unless there is an explicit and documented reason not to.

Any wrapper that converts several Figma members into one runtime appearance should be treated as high risk until reviewed.

## Recommended repair order

### Priority 1

- `PaginationPage.vue`
- `TablePage.vue`
- `TopBarPage.vue`

### Priority 2

- `ButtonPage.vue`
- `SliderPage.vue`
- `ProgressPage.vue`

### Priority 3

- Completed on 2026-04-27:
  - `FormItemPage.vue`
  - `TabsPage.vue` covering `Tab List` + `Tab/Item`
  - `StepsPage.vue` covering `Step/Item`
  - `BreadcrumbPage.vue` covering `Breadcrumb/Item`
  - `SelectPage.vue` extended to cover `Drop down List/Select`

## Recommended process guardrails

To reduce recurrence:

1. Do not mark a component page “Figma-first” unless the page shows the real component-set members or a faithful axis matrix.
2. Do not compress Figma variant axes inside canonical wrappers unless the docs page calls that compression out explicitly.
3. Add a docs-level completeness check:
   - Figma component set exists
   - wrapper exists
   - docs page exists
   - page visibly presents the exported axes or members

## Current conclusion

Yes, the same problem could still exist in other components.

After this audit, the most concerning remaining targets are:

- `Pagination`
- `Table`
- `TopBar`
- `Button`

The original coverage gap for:

- `FormItem`
- `TabList`
- `TabItem`
- `StepItem`
- `BreadcrumbItem`
- `DropDownListSelect`

is no longer open after the 2026-04-27 capability-page repair. The remaining risk is not page absence, but whether future component additions keep following the same Figma-first capability mapping rules.