# Component Attributes Triage — 4 buckets

> Generated by `pnpm exec node scripts/triage-component-attribute-findings.mjs`.
> Input: `figma-data/normalized/component-attributes.audit.json` checked at 2026-05-20T04:17:36.612Z.
> Scope: non-allowlisted findings only.

## Summary

| Bucket | Count | % | Action |
|---|---:|---:|---|
| audit-noise | 481 | 21.9% | 升 audit script 启发式 OR allowlist registry |
| real-drift | 146 | 6.7% | 分波 Codex prompt 修 code |
| strategy-gap | 288 | 13.1% | 登记 divergences-decisions.json |
| figma-drift | 230 | 10.5% | designer review (Figma 端 fix) |
| unclassified | 1049 | 47.8% | plan owner review / rule gap |

## By category × bucket

| Category | audit-noise | real-drift | strategy-gap | figma-drift | unclassified |
|---|---:|---:|---:|---:|---:|
| color-token-mismatch | 0 | 0 | 0 | 75 | 405 |
| color-token-missing | 0 | 0 | 0 | 155 | 200 |
| opacity-drift | 0 | 0 | 288 | 0 | 0 |
| padding-drift | 224 | 0 | 0 | 0 | 0 |
| size-drift | 95 | 146 | 0 | 0 | 444 |
| size-mode-mismatch | 162 | 0 | 0 | 0 | 0 |


## Top 30 real-drift findings (推荐第一波修)

| Count | Component | Category | Selector | Property | Figma | Code | Sample Variant | Reason |
|---:|---|---|---|---|---|---|---|---|
| 72 | select box/filled | size-drift | .dropdown-select | width | 300 | 240px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | converged-finding: 100.0% of same selector/property share 300 |
| 72 | select box/line | size-drift | .dropdown-select | width | 300 | 240px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | converged-finding: 100.0% of same selector/property share 300 |
| 2 | Drop down List/Select | size-drift | .dropdown-select--operation-list | width | 200 | 240px | Dark Theme=off, Type=Operation List | converged-finding: 100.0% of same selector/property share 200 |


## Top strategy-gap pattern (推荐 divergence 登记)

| Count | Component | Category | Selector | Property | Figma | Code | Sample Variant | Reason |
|---:|---|---|---|---|---|---|---|---|
| 144 | select box/filled | opacity-drift | .select-trigger:disabled | opacity | 1 | 0.4 | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color |
| 144 | select box/line | opacity-drift | .select-trigger:disabled | opacity | 1 | 0.4 | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | opacity-strategy-gap: code uses CSS opacity while Figma uses full opacity with state-specific color |


## Top figma-drift findings (designer feedback)

| Count | Component | Category | Selector | Property | Figma | Code | Sample Variant | Reason |
|---:|---|---|---|---|---|---|---|---|
| 48 | input box/filled | color-token-missing | n/a | border-color | --brand |  | dark theme=off, status=default, enable=on, UX=click, size=L, feature=no | missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration |
| 48 | input box/line | color-token-missing | n/a | border-color | --brand |  | dark theme=off, status=default, enable=on, UX=click, size=L, feature=no | missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration |
| 24 | input box/filled | color-token-missing | n/a | border-color | --red |  | dark theme=off, status=default, enable=on, UX=error, size=L, feature=no | missing-status-token-declaration: Figma uses --red but audit found no matching code declaration |
| 24 | input box/line | color-token-missing | n/a | border-color | --red |  | dark theme=off, status=default, enable=on, UX=error, size=L, feature=no | missing-status-token-declaration: Figma uses --red but audit found no matching code declaration |
| 14 | select box/line | color-token-mismatch | .select-wrap--error .select-trigger | border-color | --color-grey-8 | --red | dark theme=on, status=default, enable=off, UX=default, size=L, feature=date | state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-8 |
| 14 | select box/line | color-token-mismatch | .dropdown-item__check--checked | border-color | --color-grey-8 | --brand | dark theme=on, status=default, enable=off, UX=default, size=M, feature=date | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-8 |
| 13 | select box/line | color-token-mismatch | .select-wrap--error .select-trigger | border-color | --color-grey-5 | --red | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-5 |
| 13 | select box/line | color-token-mismatch | .dropdown-item__check--checked | border-color | --color-grey-5 | --brand | dark theme=off, status=default, enable=off, UX=default, size=M, feature=date | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-5 |
| 6 | Drop down List/Item | color-token-mismatch | .dropdown-item__check--checked | color | --text-disabled | --text-primary-btn | Theme=Dark, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-disabled |
| 4 | Drop down List/Item | color-token-mismatch | .dropdown-item__check--checked | color | --color-grey-13 | --text-primary-btn | Theme=Light, Type=Multi, Is Parent=No, Checked=Yes, Active=No, Disabled=No, Hover=No | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-13 |
| 4 | Drop down List/Select | color-token-mismatch | .dropdown-item__check--checked | background | --color-grey-10 | --brand-match | Dark Theme=on, Type=Multi | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-10 |
| 3 | Drop down List/Item | color-token-mismatch | .dropdown-item__check--checked | color | --text-heading | --text-primary-btn | Theme=Dark, Type=Radio, Is Parent=No, Checked=Yes, Active=No, Disabled=Yes, Hover=No | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --text-heading |
| 2 | Badge | color-token-missing | n/a | border-color | --blue |  | Type=Circle, Color=Blue, Tag=Line | missing-status-token-declaration: Figma uses --blue but audit found no matching code declaration |
| 2 | Badge | color-token-missing | n/a | border-color | --brand |  | Type=Circle, Color=Green, Tag=Line | missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration |
| 2 | Badge | color-token-missing | n/a | border-color | --orange |  | Type=Circle, Color=Orange, Tag=Line | missing-status-token-declaration: Figma uses --orange but audit found no matching code declaration |
| 2 | Badge | color-token-missing | n/a | border-color | --red |  | Type=Circle, Color=Red, Tag=Line | missing-status-token-declaration: Figma uses --red but audit found no matching code declaration |
| 1 | Drop down List/Cascading | color-token-mismatch | .dropdown-item__check--checked | background | --color-grey-10 | --brand-match | Dark Theme=on, Type=Multi | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-10 |
| 1 | Drop down List/Select | color-token-mismatch | .dropdown-item__check--checked | background | --color-white | --brand-match | Dark Theme=off, Type=Sort By | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-white |
| 1 | select box/line | color-token-mismatch | .select-wrap--error .select-trigger | border-color | --color-grey-4 | --red | dark theme=off, status=multi select, enable=on, UX=default, size=L, feature=default | state-semantic-token-mismatch: selector implies red state but Figma token is --color-grey-4 |
| 1 | select box/line | color-token-mismatch | .dropdown-item__check--checked | border-color | --color-grey-4 | --brand | dark theme=off, status=multi select, enable=on, UX=default, size=M, feature=default | state-semantic-token-mismatch: selector implies brand/green/blue state but Figma token is --color-grey-4 |
| 1 | Tab/Item | color-token-missing | n/a | background\|background-color | --brand |  | Property 1=Active, Property 2=Green, Type=Filled | missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration |
| 1 | Tab/Item | color-token-missing | n/a | border-color | --brand |  | Property 1=Active, Property 2=Green, Type=Line | missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration |
| 1 | Tab/Item | color-token-missing | n/a | color\|fill | --brand |  | Property 1=Active, Property 2=Green, Type=Line | missing-status-token-declaration: Figma uses --brand but audit found no matching code declaration |


## Audit-noise breakdown (audit script 改进方向)

| Count | Component | Category | Selector | Property | Figma | Code | Sample Variant | Reason |
|---:|---|---|---|---|---|---|---|---|
| 83 | Drop down List/Item | size-drift | .dropdown-item__check | height | 32 | 14px | Theme=Dark, Type=Multi, Is Parent=No, Checked=No, Active=No, Disabled=No, Hover=No | selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric |
| 76 | input box/filled | padding-drift | .input-wrap--feature :deep(.tvu-input) | padding-left | 12 | 32px | dark theme=off, status=default, enable=off, UX=default, size=M, feature=no | deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding |
| 76 | input box/filled | size-mode-mismatch | .input-wrap | width | 240 | 100% | dark theme=off, status=default, enable=off, UX=default, size=M, feature=no | size-mode-mismatch-intrinsic: code uses 100% |
| 76 | input box/line | padding-drift | .input-wrap--feature :deep(.tvu-input) | padding-left | 12 | 32px | dark theme=off, status=default, enable=off, UX=default, size=M, feature=no | deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding |
| 76 | input box/line | size-mode-mismatch | .input-wrap | width | 240 | 100% | dark theme=off, status=default, enable=off, UX=default, size=M, feature=no | size-mode-mismatch-intrinsic: code uses 100% |
| 36 | input box/filled | padding-drift | .input-wrap--feature-clear :deep(.tvu-input) | padding-right | 12 | 30px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=no | deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding |
| 36 | input box/line | padding-drift | .input-wrap--feature-clear :deep(.tvu-input) | padding-right | 12 | 30px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=no | deep-selector-padding: :deep() crosses scoped wrapper boundaries; audit cannot tell layered vs single padding |
| 6 | Drop down List/Select | size-drift | .dropdown-item__check | height | 128 | 14px | Dark Theme=off, Type=Multi | selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric |
| 4 | Badge | size-mode-mismatch | .canonical-badge--rectangle | width | 52 | auto | Type=Rectangle, Color=Green, Tag=Filled | size-mode-mismatch-intrinsic: code uses auto |
| 4 | Drop down List/Cascading | size-drift | .dropdown-item__check | height | 160 | 14px | Dark Theme=off, Type=Multi | selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric |
| 2 | Badge | size-mode-mismatch | .canonical-badge--rectangle | width | 58 | auto | Type=Rectangle, Color=Blue, Tag=Filled | size-mode-mismatch-intrinsic: code uses auto |
| 2 | Badge | size-mode-mismatch | .canonical-badge--rectangle | width | 48 | auto | Type=Rectangle, Color=Neutral, Tag=Filled | size-mode-mismatch-intrinsic: code uses auto |
| 2 | Badge | size-mode-mismatch | .canonical-badge--rectangle | width | 50 | auto | Type=Rectangle, Color=Red, Tag=Filled | size-mode-mismatch-intrinsic: code uses auto |
| 2 | Drop down List/Select | size-drift | .dropdown-item__check | height | 160 | 14px | Dark Theme=off, Type=Sort By | selector-node-mismatch: size/padding/gap finding targets BEM sub-element while current tokenized extracts are variant-root centric |


## Unclassified samples

| Count | Component | Category | Selector | Property | Figma | Code | Sample Variant | Reason |
|---:|---|---|---|---|---|---|---|---|
| 72 | select box/filled | size-drift | .select-clear :deep(svg) | height | 40 | 12px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | unclassified |
| 72 | select box/line | size-drift | .select-clear :deep(svg) | height | 40 | 12px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=date | unclassified |
| 56 | input box/filled | color-token-missing | n/a | background\|background-color | --color-white |  | dark theme=off, status=default, enable=off, UX=default, size=L, feature=no | unclassified |
| 40 | input box/filled | size-drift | .input-clear-icon :deep(svg) | height | 100 | 12px | dark theme=off, status=default, enable=off, UX=default, size=XL, feature=no | unclassified |
| 40 | input box/line | size-drift | .input-clear-icon :deep(svg) | height | 100 | 12px | dark theme=off, status=default, enable=off, UX=default, size=XL, feature=text count | unclassified |
| 38 | input box/filled | color-token-missing | n/a | background\|background-color | --color-grey-10 |  | dark theme=on, status=default, enable=off, UX=default, size=L, feature=no | unclassified |
| 36 | input box/filled | size-drift | .input-clear-icon :deep(svg) | width | 300 | 12px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=no | unclassified |
| 36 | input box/filled | size-drift | .input-clear-icon :deep(svg) | height | 40 | 12px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=no | unclassified |
| 36 | input box/filled | size-drift | .input-clear-icon :deep(svg) | height | 32 | 12px | dark theme=off, status=default, enable=off, UX=default, size=M, feature=no | unclassified |
| 36 | input box/line | size-drift | .input-clear-icon :deep(svg) | width | 300 | 12px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=no | unclassified |
| 36 | input box/line | size-drift | .input-clear-icon :deep(svg) | height | 40 | 12px | dark theme=off, status=default, enable=off, UX=default, size=L, feature=no | unclassified |
| 36 | input box/line | size-drift | .input-clear-icon :deep(svg) | height | 32 | 12px | dark theme=off, status=default, enable=off, UX=default, size=M, feature=no | unclassified |
| 20 | input box/line | color-token-missing | n/a | border-color | --color-grey-5 |  | dark theme=off, status=default, enable=off, UX=default, size=L, feature=no | unclassified |
| 20 | input box/line | color-token-missing | n/a | border-color | --color-grey-8 |  | dark theme=on, status=default, enable=off, UX=default, size=L, feature=no | unclassified |
| 18 | input box/filled | color-token-missing | n/a | background\|background-color | --line-deep |  | dark theme=on, status=default, enable=off, UX=default, size=M, feature=no | unclassified |
| 18 | select box/filled | color-token-mismatch | .dropdown-item--disabled | color | --color-grey-13 | --control-disabled-text | dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default | unclassified |
| 18 | select box/filled | color-token-mismatch | .dropdown-item--disabled | color | --color-grey-2 | --control-disabled-text | dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default | unclassified |
| 18 | select box/line | color-token-mismatch | .dropdown-item--disabled | color | --color-grey-13 | --control-disabled-text | dark theme=off, status=multi select, enable=on, UX=click, size=L, feature=default | unclassified |
| 18 | select box/line | color-token-mismatch | .dropdown-item--disabled | color | --color-grey-2 | --control-disabled-text | dark theme=on, status=multi select, enable=on, UX=click, size=L, feature=default | unclassified |
| 16 | input box/filled | color-token-mismatch | .input-clear-icon | color | --color-grey-13 | --text-tips | dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no | unclassified |
| 16 | input box/line | color-token-mismatch | .input-clear-icon | color | --color-grey-13 | --text-tips | dark theme=off, status=normal, enable=on, UX=click, size=L, feature=no | unclassified |
| 16 | input box/line | color-token-mismatch | .input-clear-icon | color | --color-grey-7 | --text-tips | dark theme=on, status=default, enable=on, UX=click, size=L, feature=no | unclassified |
| 16 | input box/line | color-token-mismatch | .input-clear-icon | color | --color-grey-2 | --text-tips | dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no | unclassified |
| 16 | input box/line | color-token-mismatch | .input-clear-icon | color | --color-grey-6 | --text-tips | dark theme=off, status=default, enable=on, UX=click, size=L, feature=no | unclassified |
| 15 | input box/filled | color-token-mismatch | .input-clear-icon | color | --color-grey-6 | --text-tips | dark theme=off, status=default, enable=on, UX=click, size=L, feature=yes | unclassified |
| 12 | Drop down List/Item | color-token-mismatch | .dropdown-item--disabled | color | --text-disabled | --control-disabled-text | Theme=Drop down List, Type=Operation, Is Parent=No, Checked=No, Active=No, Disabled=Yes, Hover=No | unclassified |
| 12 | input box/filled | color-token-mismatch | .input-clear-icon | color | --color-grey-7 | --text-tips | dark theme=on, status=default, enable=on, UX=click, size=L, feature=no | unclassified |
| 12 | input box/filled | color-token-mismatch | .input-clear-icon | color | --color-grey-2 | --text-tips | dark theme=on, status=normal, enable=on, UX=click, size=L, feature=no | unclassified |
| 11 | select box/filled | color-token-mismatch | .dropdown-item--disabled | color | --color-grey-6 | --control-disabled-text | dark theme=off, status=default, enable=on, UX=click, size=L, feature=default | unclassified |
| 11 | select box/filled | color-token-mismatch | .dropdown-item | color | --color-grey-6 | --text-body | dark theme=off, status=default, enable=on, UX=click, size=M, feature=default | unclassified |