@adobe/design-data-spec 0.11.0 → 0.13.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.
- package/components/avatar-group.json +1 -0
- package/components/button-group.json +1 -0
- package/components/in-field-progress-circle.json +14 -1
- package/components/meter.json +9 -1
- package/components/progress-bar.json +14 -1
- package/components/progress-circle.json +14 -1
- package/components/swatch-group.json +1 -0
- package/components/table.json +2 -1
- package/conformance/invalid/SPEC-034/dataset.json +14 -0
- package/conformance/invalid/SPEC-034/expected-errors.json +10 -0
- package/conformance/invalid/SPEC-035/dataset.json +20 -0
- package/conformance/invalid/SPEC-035/expected-errors.json +10 -0
- package/conformance/valid/SPEC-034/dataset.json +23 -0
- package/conformance/valid/SPEC-035/dataset.json +31 -0
- package/package.json +1 -1
- package/rules/rules.yaml +22 -0
- package/schemas/component.schema.json +2 -11
- package/spec/accessibility-adapters.md +51 -36
- package/spec/accessibility.md +23 -18
- package/spec/anatomy-format.md +9 -6
- package/spec/registry.md +2 -2
|
@@ -78,6 +78,19 @@
|
|
|
78
78
|
}
|
|
79
79
|
],
|
|
80
80
|
"accessibility": {
|
|
81
|
-
"
|
|
81
|
+
"role": "progressbar",
|
|
82
|
+
"focusable": false,
|
|
83
|
+
"wcag": [
|
|
84
|
+
{
|
|
85
|
+
"criterion": "4.1.2",
|
|
86
|
+
"level": "A",
|
|
87
|
+
"title": "Name, Role, Value"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"criterion": "4.1.3",
|
|
91
|
+
"level": "AA",
|
|
92
|
+
"title": "Status Messages"
|
|
93
|
+
}
|
|
94
|
+
]
|
|
82
95
|
}
|
|
83
96
|
}
|
package/components/meter.json
CHANGED
|
@@ -180,6 +180,19 @@
|
|
|
180
180
|
}
|
|
181
181
|
],
|
|
182
182
|
"accessibility": {
|
|
183
|
-
"
|
|
183
|
+
"role": "progressbar",
|
|
184
|
+
"focusable": false,
|
|
185
|
+
"wcag": [
|
|
186
|
+
{
|
|
187
|
+
"criterion": "4.1.2",
|
|
188
|
+
"level": "A",
|
|
189
|
+
"title": "Name, Role, Value"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"criterion": "4.1.3",
|
|
193
|
+
"level": "AA",
|
|
194
|
+
"title": "Status Messages"
|
|
195
|
+
}
|
|
196
|
+
]
|
|
184
197
|
}
|
|
185
198
|
}
|
|
@@ -97,6 +97,19 @@
|
|
|
97
97
|
}
|
|
98
98
|
],
|
|
99
99
|
"accessibility": {
|
|
100
|
-
"
|
|
100
|
+
"role": "progressbar",
|
|
101
|
+
"focusable": false,
|
|
102
|
+
"wcag": [
|
|
103
|
+
{
|
|
104
|
+
"criterion": "4.1.2",
|
|
105
|
+
"level": "A",
|
|
106
|
+
"title": "Name, Role, Value"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"criterion": "4.1.3",
|
|
110
|
+
"level": "AA",
|
|
111
|
+
"title": "Status Messages"
|
|
112
|
+
}
|
|
113
|
+
]
|
|
101
114
|
}
|
|
102
115
|
}
|
package/components/table.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"displayName": "Table",
|
|
7
7
|
"description": "Tables display information in rows and columns, allowing users to compare and scan structured data.",
|
|
8
8
|
"meta": {
|
|
9
|
-
"category": "data
|
|
9
|
+
"category": "data-visualization",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/table/"
|
|
11
11
|
},
|
|
12
12
|
"options": {
|
|
@@ -390,6 +390,7 @@
|
|
|
390
390
|
}
|
|
391
391
|
],
|
|
392
392
|
"accessibility": {
|
|
393
|
+
"role": "grid",
|
|
393
394
|
"intents": ["select", "navigate"],
|
|
394
395
|
"focusable": true,
|
|
395
396
|
"keyboardIntents": ["navigate-items", "activate", "select-all"],
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": [],
|
|
3
|
+
"components": [
|
|
4
|
+
{
|
|
5
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/widget.json",
|
|
6
|
+
"name": "widget",
|
|
7
|
+
"displayName": "Widget",
|
|
8
|
+
"meta": {
|
|
9
|
+
"category": "not-a-real-category",
|
|
10
|
+
"documentationUrl": "https://spectrum.adobe.com/page/widget/"
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
]
|
|
14
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": [],
|
|
3
|
+
"components": [
|
|
4
|
+
{
|
|
5
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/widget.json",
|
|
6
|
+
"name": "widget",
|
|
7
|
+
"displayName": "Widget",
|
|
8
|
+
"meta": {
|
|
9
|
+
"category": "feedback",
|
|
10
|
+
"documentationUrl": "https://spectrum.adobe.com/page/widget/"
|
|
11
|
+
},
|
|
12
|
+
"anatomy": [
|
|
13
|
+
{
|
|
14
|
+
"name": "not-a-real-part",
|
|
15
|
+
"description": "A custom part not in the anatomy-terms registry."
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
}
|
|
19
|
+
]
|
|
20
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": [],
|
|
3
|
+
"components": [
|
|
4
|
+
{
|
|
5
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/button.json",
|
|
6
|
+
"name": "button",
|
|
7
|
+
"displayName": "Button",
|
|
8
|
+
"meta": {
|
|
9
|
+
"category": "actions",
|
|
10
|
+
"documentationUrl": "https://spectrum.adobe.com/page/button/"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/table.json",
|
|
15
|
+
"name": "table",
|
|
16
|
+
"displayName": "Table",
|
|
17
|
+
"meta": {
|
|
18
|
+
"category": "data-visualization",
|
|
19
|
+
"documentationUrl": "https://spectrum.adobe.com/page/table/"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": [],
|
|
3
|
+
"components": [
|
|
4
|
+
{
|
|
5
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/dialog.json",
|
|
6
|
+
"name": "dialog",
|
|
7
|
+
"displayName": "Dialog",
|
|
8
|
+
"meta": {
|
|
9
|
+
"category": "feedback",
|
|
10
|
+
"documentationUrl": "https://spectrum.adobe.com/page/dialog/"
|
|
11
|
+
},
|
|
12
|
+
"anatomy": [
|
|
13
|
+
{
|
|
14
|
+
"name": "header",
|
|
15
|
+
"description": "Top section of the dialog containing the title.",
|
|
16
|
+
"required": true
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "body",
|
|
20
|
+
"description": "Main content area of the dialog.",
|
|
21
|
+
"required": true
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "label",
|
|
25
|
+
"description": "Dialog title text.",
|
|
26
|
+
"required": true
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
package/package.json
CHANGED
package/rules/rules.yaml
CHANGED
|
@@ -321,3 +321,25 @@ rules:
|
|
|
321
321
|
message: "Registry ID '{id}' appears in multiple registries — this is permitted; do not reject on cross-registry overlap alone"
|
|
322
322
|
spec_ref: spec/registry.md#id-scoping
|
|
323
323
|
introduced_in: "1.0.0-draft"
|
|
324
|
+
- id: SPEC-034
|
|
325
|
+
name: component-category-registry-sync
|
|
326
|
+
severity: warning
|
|
327
|
+
category: naming-consistency
|
|
328
|
+
assert: >
|
|
329
|
+
A component's meta.category SHOULD reference an id from the categories registry in
|
|
330
|
+
@adobe/design-system-registry (categories.json). Unknown values are reported as
|
|
331
|
+
warnings; the registry is the authoritative vocabulary.
|
|
332
|
+
message: "Component '{entity}' meta.category value '{value}' is not in the design-system-registry categories vocabulary"
|
|
333
|
+
spec_ref: spec/registry.md#categories
|
|
334
|
+
introduced_in: "1.0.0-draft"
|
|
335
|
+
- id: SPEC-035
|
|
336
|
+
name: anatomy-part-name-registry-sync
|
|
337
|
+
severity: warning
|
|
338
|
+
category: naming-consistency
|
|
339
|
+
assert: >
|
|
340
|
+
A component anatomy part's name SHOULD reference an id from the anatomy-terms registry in
|
|
341
|
+
@adobe/design-system-registry (anatomy-terms.json). Unknown values are reported as
|
|
342
|
+
warnings; custom names remain permitted but the registry is the authoritative vocabulary.
|
|
343
|
+
message: "Component '{entity}' anatomy part name '{value}' is not in the design-system-registry anatomy-terms vocabulary"
|
|
344
|
+
spec_ref: spec/anatomy-format.md#canonical-anatomy-vocabulary
|
|
345
|
+
introduced_in: "1.0.0-draft"
|
|
@@ -88,17 +88,8 @@
|
|
|
88
88
|
"properties": {
|
|
89
89
|
"category": {
|
|
90
90
|
"type": "string",
|
|
91
|
-
"
|
|
92
|
-
|
|
93
|
-
"containers",
|
|
94
|
-
"data visualization",
|
|
95
|
-
"feedback",
|
|
96
|
-
"inputs",
|
|
97
|
-
"navigation",
|
|
98
|
-
"status",
|
|
99
|
-
"typography"
|
|
100
|
-
],
|
|
101
|
-
"description": "Design system category for this component."
|
|
91
|
+
"minLength": 1,
|
|
92
|
+
"description": "Category id from @adobe/design-system-registry categories.json. Advisory validation via SPEC-034."
|
|
102
93
|
},
|
|
103
94
|
"documentationUrl": {
|
|
104
95
|
"type": "string",
|
|
@@ -38,6 +38,11 @@ ARIA (Accessible Rich Internet Applications) is the primary web accessibility AP
|
|
|
38
38
|
| `textbox` | `<input type="text">` or `role="textbox"` |
|
|
39
39
|
| `tooltip` | `role="tooltip"` |
|
|
40
40
|
| `tree` | `role="tree"` |
|
|
41
|
+
| `progressbar` | `role="progressbar"` |
|
|
42
|
+
| `meter` | `role="meter"` |
|
|
43
|
+
| `grid` | `role="grid"` |
|
|
44
|
+
| `listitem` | `<li>` or `role="listitem"` |
|
|
45
|
+
| `group` | `role="group"` |
|
|
41
46
|
|
|
42
47
|
### `intents`
|
|
43
48
|
|
|
@@ -93,24 +98,29 @@ iOS exposes accessibility semantics through `UIAccessibility` protocol propertie
|
|
|
93
98
|
|
|
94
99
|
### `role`
|
|
95
100
|
|
|
96
|
-
| Foundation `role` | UIAccessibilityTraits / SwiftUI
|
|
97
|
-
| ----------------- |
|
|
98
|
-
| `button` | `.button`
|
|
99
|
-
| `checkbox` | `.button` with toggled state, or SwiftUI `Toggle`
|
|
100
|
-
| `combobox` | `.button` (picker-like behavior)
|
|
101
|
-
| `dialog` | Presented as modal sheet; VoiceOver reads the accessible label
|
|
102
|
-
| `link` | `.link`
|
|
103
|
-
| `listbox` | Container view; children use `.button` or `.selected`
|
|
104
|
-
| `menu` | `.button` on trigger; menu items as `.button`
|
|
105
|
-
| `menuitem` | `.button`
|
|
106
|
-
| `radio` | `.button` with `.selected` when active
|
|
107
|
-
| `slider` | `.adjustable`
|
|
108
|
-
| `spinbutton` | `.adjustable`
|
|
109
|
-
| `switch` | `.button` with `.selected` / SwiftUI `Toggle`
|
|
110
|
-
| `tab` | `.button` with `.selected`
|
|
111
|
-
| `textbox` | `.keyboard` traits; `UITextField` or `UITextView`
|
|
112
|
-
| `tooltip` | `.staticText` on an overlay element
|
|
113
|
-
| `tree` | Hierarchical cells with `accessibilityContainerType`
|
|
101
|
+
| Foundation `role` | UIAccessibilityTraits / SwiftUI |
|
|
102
|
+
| ----------------- | ------------------------------------------------------------------------------- |
|
|
103
|
+
| `button` | `.button` |
|
|
104
|
+
| `checkbox` | `.button` with toggled state, or SwiftUI `Toggle` |
|
|
105
|
+
| `combobox` | `.button` (picker-like behavior) |
|
|
106
|
+
| `dialog` | Presented as modal sheet; VoiceOver reads the accessible label |
|
|
107
|
+
| `link` | `.link` |
|
|
108
|
+
| `listbox` | Container view; children use `.button` or `.selected` |
|
|
109
|
+
| `menu` | `.button` on trigger; menu items as `.button` |
|
|
110
|
+
| `menuitem` | `.button` |
|
|
111
|
+
| `radio` | `.button` with `.selected` when active |
|
|
112
|
+
| `slider` | `.adjustable` |
|
|
113
|
+
| `spinbutton` | `.adjustable` |
|
|
114
|
+
| `switch` | `.button` with `.selected` / SwiftUI `Toggle` |
|
|
115
|
+
| `tab` | `.button` with `.selected` |
|
|
116
|
+
| `textbox` | `.keyboard` traits; `UITextField` or `UITextView` |
|
|
117
|
+
| `tooltip` | `.staticText` on an overlay element |
|
|
118
|
+
| `tree` | Hierarchical cells with `accessibilityContainerType` |
|
|
119
|
+
| `progressbar` | `.updatesFrequently` trait; `accessibilityValue` carries percent or description |
|
|
120
|
+
| `meter` | `.staticText` with `accessibilityValue` describing the current measurement |
|
|
121
|
+
| `grid` | `accessibilityContainerType = .dataTable` |
|
|
122
|
+
| `listitem` | Children of an accessibility container; `.staticText` trait on leaf items |
|
|
123
|
+
| `group` | `accessibilityContainerType = .semanticGroup` |
|
|
114
124
|
|
|
115
125
|
### `intents`
|
|
116
126
|
|
|
@@ -149,24 +159,29 @@ Android exposes accessibility semantics via `AccessibilityNodeInfo` populated th
|
|
|
149
159
|
|
|
150
160
|
### `role`
|
|
151
161
|
|
|
152
|
-
| Foundation `role` | Android mapping
|
|
153
|
-
| ----------------- |
|
|
154
|
-
| `button` | `Button` widget or `setRoleDescription("button")`
|
|
155
|
-
| `checkbox` | `CheckBox` widget or `setCheckable(true)`
|
|
156
|
-
| `combobox` | `Spinner` widget or `setRoleDescription("combobox")`
|
|
157
|
-
| `dialog` | Dialog window; `setDismissable(true)`
|
|
158
|
-
| `link` | `setRoleDescription("link")`; add `ACTION_CLICK`
|
|
159
|
-
| `listbox` | `RecyclerView` with `setCollectionInfo`
|
|
160
|
-
| `menu` | `setRoleDescription("menu")` on the container
|
|
161
|
-
| `menuitem` | `setRoleDescription("menu item")`
|
|
162
|
-
| `radio` | `RadioButton` widget or `setCheckable(true)` + `setChecked`
|
|
163
|
-
| `slider` | `SeekBar` widget or `RangeSemantics` in Compose
|
|
164
|
-
| `spinbutton` | `setRoleDescription("spin button")`
|
|
165
|
-
| `switch` | `Switch` widget or `setRoleDescription("switch")`
|
|
166
|
-
| `tab` | `TabLayout` tab item; `setSelected(true)` when active
|
|
167
|
-
| `textbox` | `EditText` widget or `TextField` in Compose
|
|
168
|
-
| `tooltip` | `setTooltipText(text)`
|
|
169
|
-
| `tree` | `setCollectionInfo` with hierarchical structure
|
|
162
|
+
| Foundation `role` | Android mapping |
|
|
163
|
+
| ----------------- | ------------------------------------------------------------------------ |
|
|
164
|
+
| `button` | `Button` widget or `setRoleDescription("button")` |
|
|
165
|
+
| `checkbox` | `CheckBox` widget or `setCheckable(true)` |
|
|
166
|
+
| `combobox` | `Spinner` widget or `setRoleDescription("combobox")` |
|
|
167
|
+
| `dialog` | Dialog window; `setDismissable(true)` |
|
|
168
|
+
| `link` | `setRoleDescription("link")`; add `ACTION_CLICK` |
|
|
169
|
+
| `listbox` | `RecyclerView` with `setCollectionInfo` |
|
|
170
|
+
| `menu` | `setRoleDescription("menu")` on the container |
|
|
171
|
+
| `menuitem` | `setRoleDescription("menu item")` |
|
|
172
|
+
| `radio` | `RadioButton` widget or `setCheckable(true)` + `setChecked` |
|
|
173
|
+
| `slider` | `SeekBar` widget or `RangeSemantics` in Compose |
|
|
174
|
+
| `spinbutton` | `setRoleDescription("spin button")` |
|
|
175
|
+
| `switch` | `Switch` widget or `setRoleDescription("switch")` |
|
|
176
|
+
| `tab` | `TabLayout` tab item; `setSelected(true)` when active |
|
|
177
|
+
| `textbox` | `EditText` widget or `TextField` in Compose |
|
|
178
|
+
| `tooltip` | `setTooltipText(text)` |
|
|
179
|
+
| `tree` | `setCollectionInfo` with hierarchical structure |
|
|
180
|
+
| `progressbar` | `ProgressBar` widget or `setRoleDescription("progress bar")` |
|
|
181
|
+
| `meter` | `setRoleDescription("meter")`; `setRangeInfo` on `AccessibilityNodeInfo` |
|
|
182
|
+
| `grid` | `setCollectionInfo` with row/column counts |
|
|
183
|
+
| `listitem` | Children within a `setCollectionInfo` container |
|
|
184
|
+
| `group` | `setRoleDescription("group")` or `CollectionInfo` without selection |
|
|
170
185
|
|
|
171
186
|
### `intents`
|
|
172
187
|
|
package/spec/accessibility.md
CHANGED
|
@@ -36,24 +36,29 @@ The `role` field names the semantic role of the component. It maps conceptually
|
|
|
36
36
|
|
|
37
37
|
**Canonical role vocabulary:**
|
|
38
38
|
|
|
39
|
-
| Value
|
|
40
|
-
|
|
|
41
|
-
| `button`
|
|
42
|
-
| `checkbox`
|
|
43
|
-
| `combobox`
|
|
44
|
-
| `dialog`
|
|
45
|
-
| `link`
|
|
46
|
-
| `listbox`
|
|
47
|
-
| `menu`
|
|
48
|
-
| `menuitem`
|
|
49
|
-
| `radio`
|
|
50
|
-
| `slider`
|
|
51
|
-
| `spinbutton`
|
|
52
|
-
| `switch`
|
|
53
|
-
| `tab`
|
|
54
|
-
| `textbox`
|
|
55
|
-
| `tooltip`
|
|
56
|
-
| `tree`
|
|
39
|
+
| Value | Semantic meaning |
|
|
40
|
+
| ------------- | ------------------------------------------------------------------------------------------------ |
|
|
41
|
+
| `button` | Triggers a discrete action |
|
|
42
|
+
| `checkbox` | Binary on/off selection |
|
|
43
|
+
| `combobox` | Combined text input with a selectable option list |
|
|
44
|
+
| `dialog` | Modal overlay requiring a user response |
|
|
45
|
+
| `link` | Navigates the user to another context |
|
|
46
|
+
| `listbox` | Selectable list of options |
|
|
47
|
+
| `menu` | List of commands or options |
|
|
48
|
+
| `menuitem` | Individual item within a menu |
|
|
49
|
+
| `radio` | Single-select option within a group |
|
|
50
|
+
| `slider` | Range input with a continuous value |
|
|
51
|
+
| `spinbutton` | Numeric input with increment and decrement controls |
|
|
52
|
+
| `switch` | Toggles between two states (on/off) |
|
|
53
|
+
| `tab` | Selects a panel within a tabbed interface |
|
|
54
|
+
| `textbox` | Accepts free-form text input |
|
|
55
|
+
| `tooltip` | Contextual information overlay; not interactive |
|
|
56
|
+
| `tree` | Hierarchical navigable list |
|
|
57
|
+
| `progressbar` | Visual indicator of task progress (determinate or indeterminate) |
|
|
58
|
+
| `meter` | Scalar measurement within a known range (gauge, not a progress indicator) |
|
|
59
|
+
| `grid` | Two-dimensional tabular data with keyboard navigation |
|
|
60
|
+
| `listitem` | Individual item within a list container (anatomy-part role; per-part accessibility is Phase 7.3) |
|
|
61
|
+
| `group` | Generic container that groups related elements without a more specific role |
|
|
57
62
|
|
|
58
63
|
### `intents`
|
|
59
64
|
|
package/spec/anatomy-format.md
CHANGED
|
@@ -86,6 +86,8 @@ The following anatomy part names are defined by the cross-platform design audit
|
|
|
86
86
|
|
|
87
87
|
Custom part names are permitted. When a custom name is used, the anatomy part object **SHOULD** include a `description` field explaining its visual role (rule SPEC-023).
|
|
88
88
|
|
|
89
|
+
The table above is informative; the authoritative vocabulary is `@adobe/design-system-registry/registry/anatomy-terms.json` (119 entries). SPEC-035 fires advisory warnings when a declared anatomy part `name` is not in that registry, pointing authors at the canonical list. Custom names remain valid — SPEC-035 is advisory, not an error.
|
|
90
|
+
|
|
89
91
|
## Cross-reference with token name objects
|
|
90
92
|
|
|
91
93
|
Token name objects use an `anatomy` field to scope a token to a specific visible part of a component. The `anatomy` field value must correspond to a part declared in the component's `anatomy` array.
|
|
@@ -112,12 +114,13 @@ See [Token format — Name object](token-format.md#name-object) for the full nam
|
|
|
112
114
|
|
|
113
115
|
The following rules in the Layer 2 rule catalog (`rules/rules.yaml`) apply to anatomy part declarations. SPEC-020 was introduced in Phase 6.1 (component-format); SPEC-023, SPEC-024, and SPEC-025 are introduced by this chapter.
|
|
114
116
|
|
|
115
|
-
| Rule ID | Name
|
|
116
|
-
| -------- |
|
|
117
|
-
| SPEC-020 | `component-anatomy-valid`
|
|
118
|
-
| SPEC-023 | `anatomy-custom-part-documented`
|
|
119
|
-
| SPEC-024 | `anatomy-part-name-unique`
|
|
120
|
-
| SPEC-025 | `anatomy-requires-component`
|
|
117
|
+
| Rule ID | Name | Severity | Assert |
|
|
118
|
+
| -------- | --------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
119
|
+
| SPEC-020 | `component-anatomy-valid` | error | Token `anatomy` field value **MUST** match the `name` of a declared anatomy part on the referenced component. |
|
|
120
|
+
| SPEC-023 | `anatomy-custom-part-documented` | warning | Anatomy part declarations with a `name` outside the canonical anatomy vocabulary **SHOULD** include a `description` field documenting the part's purpose. |
|
|
121
|
+
| SPEC-024 | `anatomy-part-name-unique` | error | Anatomy part `name` values **MUST** be unique within a single component's `anatomy` array. |
|
|
122
|
+
| SPEC-025 | `anatomy-requires-component` | error | A token name object **MUST NOT** include an `anatomy` field unless a `component` field is also present. |
|
|
123
|
+
| SPEC-035 | `anatomy-part-name-registry-sync` | warning | A component anatomy part's `name` **SHOULD** appear in the canonical anatomy-terms registry (`anatomy-terms.json`). |
|
|
121
124
|
|
|
122
125
|
## Full example
|
|
123
126
|
|
package/spec/registry.md
CHANGED
|
@@ -33,7 +33,7 @@ Anatomy terms fall into three tiers:
|
|
|
33
33
|
| Component-specific | Unique to one component | `loupe`, `gripper`, `hold-icon` |
|
|
34
34
|
|
|
35
35
|
**File:** `packages/design-system-registry/registry/anatomy-terms.json`\
|
|
36
|
-
**Validated by:** SPEC-020, SPEC-023, SPEC-024, SPEC-025\
|
|
36
|
+
**Validated by:** SPEC-020, SPEC-023, SPEC-024, SPEC-025, SPEC-035 (advisory — anatomy part `name` values SHOULD match the anatomy-terms registry)\
|
|
37
37
|
**See also:** [Taxonomy — Component anatomy vs. token objects](taxonomy.md#component-anatomy-vs-token-objects), [Anatomy format](anatomy-format.md)
|
|
38
38
|
|
|
39
39
|
### Token objects (`token-objects.json`)
|
|
@@ -61,7 +61,7 @@ Validates the `category` field on component declarations.
|
|
|
61
61
|
**What it contains:** Top-level categories for organizing components by purpose and interaction type. Used for documentation navigation and tooling filters.
|
|
62
62
|
|
|
63
63
|
**File:** `packages/design-system-registry/registry/categories.json`\
|
|
64
|
-
**Validated by:**
|
|
64
|
+
**Validated by:** SPEC-034 (advisory — `meta.category` field values SHOULD match the categories registry)\
|
|
65
65
|
**See also:** [Component format](component-format.md)
|
|
66
66
|
|
|
67
67
|
## ID scoping
|