@3fn/core 14.0.0 → 14.1.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/.kiro/steering/Civitas-System-Overview.md +3 -12
- package/.kiro/steering/Spec-Feedback-Protocol.md +2 -11
- package/.kiro/steering/Task-Completion-Protocol.md +7 -7
- package/.kiro/steering/start-up-tasks.md +4 -4
- package/dist/ComponentTokens.android.kt +12 -12
- package/dist/ComponentTokens.ios.swift +12 -12
- package/dist/ComponentTokens.web.css +3 -3
- package/dist/DesignTokens.android.kt +1 -1
- package/dist/DesignTokens.dtcg.json +2 -2
- package/dist/DesignTokens.ios.swift +1 -1
- package/dist/DesignTokens.web.css +1 -1
- package/dist/android/DesignTokens.android.kt +1 -1
- package/dist/browser/designerpunk.esm.js +14 -9
- package/dist/browser/designerpunk.esm.min.js +7 -7
- package/dist/browser/designerpunk.umd.js +14 -9
- package/dist/browser/designerpunk.umd.min.js +12 -12
- package/dist/browser/tokens.css +3 -3
- package/dist/build/tokens/defineComponentTokens.d.ts +10 -0
- package/dist/build/tokens/defineComponentTokens.js +26 -0
- package/dist/components/core/Avatar-Base/avatar.tokens.d.ts +21 -26
- package/dist/components/core/Avatar-Base/avatar.tokens.js +31 -34
- package/dist/components/core/Avatar-Base/index.d.ts +1 -1
- package/dist/components/core/Avatar-Base/index.js +2 -2
- package/dist/components/core/Button-Icon/buttonIcon.tokens.d.ts +28 -14
- package/dist/components/core/Button-Icon/buttonIcon.tokens.js +35 -20
- package/dist/generators/TokenFileGenerator.js +7 -2
- package/dist/ios/DesignTokens.ios.swift +1 -1
- package/dist/tokens/component/progress.d.ts +65 -5
- package/dist/tokens/component/progress.js +79 -18
- package/dist/types/generated/TokenTypes.d.ts +1 -1
- package/dist/types/generated/TokenTypes.js +1 -1
- package/dist/web/DesignTokens.web.css +1 -1
- package/governance/BUILD-SYSTEM-SETUP.md +1 -2
- package/governance/Component-Development-Guide.md +1 -1
- package/governance/Component-Development-Standards.md +19 -18
- package/governance/Component-Family-Avatar.md +6 -6
- package/governance/Component-Family-Badge.md +19 -19
- package/governance/Component-Family-Button.md +26 -26
- package/governance/Component-Family-Chip.md +14 -14
- package/governance/Component-Family-Container.md +12 -12
- package/governance/Component-Family-Form-Inputs.md +61 -61
- package/governance/Component-Family-Icon.md +8 -8
- package/governance/Component-Family-Navigation.md +1 -1
- package/governance/Component-Inheritance-Structures.md +29 -28
- package/governance/Component-Readiness-Status.md +6 -7
- package/governance/Component-Templates.md +26 -26
- package/governance/Contract-System-Reference.md +1 -1
- package/governance/Process-Development-Workflow.md +4 -4
- package/governance/Process-File-Organization.md +1 -4
- package/governance/Process-Hook-Operations.md +6 -7
- package/governance/Process-Spec-Planning.md +8 -14
- package/governance/Rosetta-System-Architecture.md +7 -5
- package/governance/Token-Quick-Reference.md +35 -22
- package/governance/Web-Authoring-Standards.md +1 -1
- package/governance/classification-map.md +109 -3
- package/governance/completion-documentation-guide.md +14 -31
- package/governance/platform-implementation-guidelines.md +1 -2
- package/governance/release-management-system.md +28 -63
- package/package.json +2 -6
- package/src/build/tokens/__tests__/defineComponentTokens.test.ts +113 -0
- package/src/build/tokens/defineComponentTokens.ts +43 -1
- package/src/components/core/Avatar-Base/avatar.tokens.ts +31 -34
- package/src/components/core/Avatar-Base/index.ts +1 -1
- package/src/components/core/Button-Icon/buttonIcon.tokens.ts +43 -27
- package/src/generators/TokenFileGenerator.ts +7 -2
- package/src/tokens/__tests__/ProgressTokenCompliance.test.ts +5 -3
- package/src/tokens/__tests__/ProgressTokenFormulas.test.ts +11 -11
- package/src/tokens/__tests__/ProgressTokenTranslation.test.ts +22 -20
- package/src/tokens/component/progress.ts +83 -21
- package/src/types/generated/TokenTypes.ts +1 -1
- package/token-index/components.yaml +8 -8
- package/src/tools/release/__tests__/ChangeClassifier.test.ts +0 -133
- package/src/tools/release/__tests__/ChangeExtractor.test.ts +0 -222
- package/src/tools/release/__tests__/GitHubPublisher.test.ts +0 -240
- package/src/tools/release/__tests__/NotesRenderer.test.ts +0 -142
- package/src/tools/release/__tests__/NpmPublisher.test.ts +0 -289
- package/src/tools/release/__tests__/PipelineIntegration.test.ts +0 -188
- package/src/tools/release/__tests__/ReleasePipeline.test.ts +0 -192
- package/src/tools/release/__tests__/SemanticVersionValidator.test.ts +0 -49
- package/src/tools/release/__tests__/SummaryScanner.test.ts +0 -141
- package/src/tools/release/__tests__/TagResolver.test.ts +0 -91
- package/src/tools/release/__tests__/VersionCalculator.test.ts +0 -270
- package/src/tools/release/__tests__/helpers/NpmMockHelper.ts +0 -80
- package/src/tools/release/cli/ReleasePipeline.ts +0 -165
- package/src/tools/release/cli/release-tool.ts +0 -107
- package/src/tools/release/pipeline/ChangeClassifier.ts +0 -61
- package/src/tools/release/pipeline/ChangeExtractor.ts +0 -87
- package/src/tools/release/pipeline/NotesRenderer.ts +0 -66
- package/src/tools/release/pipeline/SummaryScanner.ts +0 -70
- package/src/tools/release/pipeline/TagResolver.ts +0 -40
- package/src/tools/release/pipeline/VersionCalculator.ts +0 -375
- package/src/tools/release/publishers/GitHubPublisher.ts +0 -228
- package/src/tools/release/publishers/NpmPublisher.ts +0 -196
- package/src/tools/release/release-config.json +0 -5
- package/src/tools/release/types/index.ts +0 -282
- package/src/tools/release/validators/SemanticVersionValidator.ts +0 -67
|
@@ -106,20 +106,20 @@ All text input components in the Form Inputs family inherit these 8 foundational
|
|
|
106
106
|
|
|
107
107
|
| Contract | Description | WCAG | Platforms |
|
|
108
108
|
|----------|-------------|------|-----------|
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
109
|
+
| `interaction_focusable` | Can receive keyboard focus | 2.1.1 | web, ios, android |
|
|
110
|
+
| `content_float_label` | Label animates on focus | 2.3.3 | web, ios, android |
|
|
111
|
+
| `validation_on_blur` | Validation triggers on blur | 3.3.1 | web, ios, android |
|
|
112
|
+
| `state_error` | Shows error message and styling | 3.3.1, 1.4.1 | web, ios, android |
|
|
113
|
+
| `state_success` | Shows success styling | 1.4.1 | web, ios, android |
|
|
114
|
+
| `content_trailing_icon` | Shows contextual trailing icons | 1.4.1 | web, ios, android |
|
|
115
|
+
| `interaction_focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
|
|
116
|
+
| `accessibility_reduced_motion` | Respects prefers-reduced-motion | 2.3.3 | web, ios, android |
|
|
117
117
|
|
|
118
|
-
**Excluded**: `
|
|
118
|
+
**Excluded**: `state_disabled` — DesignerPunk does not support disabled states for usability and accessibility reasons. If an input is unavailable, it should not be rendered (adjudicated 2026-07-15; see `.kiro/issues/button-cta-disabled-state-adjudication.md`).
|
|
119
119
|
|
|
120
120
|
### Contract Details
|
|
121
121
|
|
|
122
|
-
####
|
|
122
|
+
#### interaction_focusable
|
|
123
123
|
|
|
124
124
|
**Description**: Component can receive keyboard focus via Tab key navigation.
|
|
125
125
|
|
|
@@ -127,7 +127,7 @@ All text input components in the Form Inputs family inherit these 8 foundational
|
|
|
127
127
|
|
|
128
128
|
**WCAG Compliance**: 2.1.1 Keyboard
|
|
129
129
|
|
|
130
|
-
####
|
|
130
|
+
#### content_float_label
|
|
131
131
|
|
|
132
132
|
**Description**: Label smoothly transitions from placeholder position inside input to floated position above input when focused or filled.
|
|
133
133
|
|
|
@@ -135,7 +135,7 @@ All text input components in the Form Inputs family inherit these 8 foundational
|
|
|
135
135
|
|
|
136
136
|
**WCAG Compliance**: 2.3.3 Animation from Interactions
|
|
137
137
|
|
|
138
|
-
####
|
|
138
|
+
#### state_error
|
|
139
139
|
|
|
140
140
|
**Description**: When in error state, component displays red border, red label text, error icon, and error message.
|
|
141
141
|
|
|
@@ -143,7 +143,7 @@ All text input components in the Form Inputs family inherit these 8 foundational
|
|
|
143
143
|
|
|
144
144
|
**WCAG Compliance**: 3.3.1 Error Identification, 1.4.1 Use of Color
|
|
145
145
|
|
|
146
|
-
####
|
|
146
|
+
#### interaction_focus_ring
|
|
147
147
|
|
|
148
148
|
**Description**: When focused via keyboard, component displays a visible focus indicator.
|
|
149
149
|
|
|
@@ -157,24 +157,24 @@ All text input components in the Form Inputs family inherit these 8 foundational
|
|
|
157
157
|
|
|
158
158
|
| Contract | Description | WCAG |
|
|
159
159
|
|----------|-------------|------|
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
160
|
+
| `validation_email_format` | Validates email against RFC 5322 pattern | 3.3.1 |
|
|
161
|
+
| `interaction_email_autocomplete` | Enables browser/platform email autofill | 1.3.5 |
|
|
162
162
|
|
|
163
163
|
#### Input-Text-Password Extended Contracts
|
|
164
164
|
|
|
165
165
|
| Contract | Description | WCAG |
|
|
166
166
|
|----------|-------------|------|
|
|
167
|
-
| `
|
|
168
|
-
| `
|
|
169
|
-
| `
|
|
167
|
+
| `interaction_secure_input` | Masks password input by default | 3.3.2 |
|
|
168
|
+
| `interaction_password_toggle` | Provides show/hide password functionality | 2.1.1, 4.1.2 |
|
|
169
|
+
| `interaction_password_autocomplete` | Enables browser/platform password autofill | 1.3.5 |
|
|
170
170
|
|
|
171
171
|
#### Input-Text-PhoneNumber Extended Contracts
|
|
172
172
|
|
|
173
173
|
| Contract | Description | WCAG |
|
|
174
174
|
|----------|-------------|------|
|
|
175
|
-
| `
|
|
176
|
-
| `
|
|
177
|
-
| `
|
|
175
|
+
| `validation_phone_format` | Validates phone number against country-specific patterns | 3.3.1 |
|
|
176
|
+
| `content_phone_formatting` | Formats phone numbers as user types | 3.3.2 |
|
|
177
|
+
| `content_international_formats` | Handles multiple country phone number formats | 3.3.2 |
|
|
178
178
|
|
|
179
179
|
### Checkbox Base Contracts (Inherited by Checkbox Components)
|
|
180
180
|
|
|
@@ -182,19 +182,19 @@ All checkbox components in the Form Inputs family inherit these 9 foundational c
|
|
|
182
182
|
|
|
183
183
|
| Contract | Description | WCAG | Platforms |
|
|
184
184
|
|----------|-------------|------|-----------|
|
|
185
|
-
| `
|
|
186
|
-
| `
|
|
187
|
-
| `
|
|
188
|
-
| `
|
|
189
|
-
| `
|
|
190
|
-
| `
|
|
191
|
-
| `
|
|
192
|
-
| `
|
|
193
|
-
| `
|
|
185
|
+
| `interaction_focusable` | Can receive keyboard focus | 2.1.1 | web, ios, android |
|
|
186
|
+
| `interaction_pressable` | Responds to click/tap on entire label area | 2.1.1 | web, ios, android |
|
|
187
|
+
| `interaction_hover` | Visual feedback on hover (web) | 1.4.13 | web |
|
|
188
|
+
| `interaction_pressed` | Visual feedback when pressed | 2.4.7 | web, ios, android |
|
|
189
|
+
| `state_checked` | Shows checkmark icon when checked | 1.4.1 | web, ios, android |
|
|
190
|
+
| `state_indeterminate` | Shows minus icon for partial selection | 1.4.1 | web, ios, android |
|
|
191
|
+
| `state_error` | Shows error border and message | 3.3.1 | web, ios, android |
|
|
192
|
+
| `interaction_focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
|
|
193
|
+
| `validation_form_integration` | Native form submission and reset | 4.1.2 | web, ios, android |
|
|
194
194
|
|
|
195
195
|
### Checkbox Contract Details
|
|
196
196
|
|
|
197
|
-
####
|
|
197
|
+
#### state_checked
|
|
198
198
|
|
|
199
199
|
**Description**: When checked, component displays filled background with checkmark icon via Icon-Base.
|
|
200
200
|
|
|
@@ -202,7 +202,7 @@ All checkbox components in the Form Inputs family inherit these 9 foundational c
|
|
|
202
202
|
|
|
203
203
|
**WCAG Compliance**: 1.4.1 Use of Color (icon provides non-color indication)
|
|
204
204
|
|
|
205
|
-
####
|
|
205
|
+
#### state_indeterminate
|
|
206
206
|
|
|
207
207
|
**Description**: When indeterminate, component displays filled background with horizontal minus icon via Icon-Base.
|
|
208
208
|
|
|
@@ -210,7 +210,7 @@ All checkbox components in the Form Inputs family inherit these 9 foundational c
|
|
|
210
210
|
|
|
211
211
|
**WCAG Compliance**: 1.4.1 Use of Color (icon provides non-color indication)
|
|
212
212
|
|
|
213
|
-
####
|
|
213
|
+
#### validation_form_integration
|
|
214
214
|
|
|
215
215
|
**Description**: Checkbox integrates with native form submission and reset.
|
|
216
216
|
|
|
@@ -222,8 +222,8 @@ All checkbox components in the Form Inputs family inherit these 9 foundational c
|
|
|
222
222
|
|
|
223
223
|
| Contract | Description | WCAG |
|
|
224
224
|
|----------|-------------|------|
|
|
225
|
-
| `
|
|
226
|
-
| `
|
|
225
|
+
| `validation_explicit_consent` | Prevents pre-checking with console warning | N/A |
|
|
226
|
+
| `validation_audit_trail` | Provides ISO 8601 timestamp and metadata | N/A |
|
|
227
227
|
| `required_indicator` | Shows "Required" indicator by default | 3.3.2 |
|
|
228
228
|
|
|
229
229
|
### Radio Base Contracts (Inherited by Radio Components)
|
|
@@ -232,18 +232,18 @@ All radio components in the Form Inputs family inherit these 8 foundational cont
|
|
|
232
232
|
|
|
233
233
|
| Contract | Description | WCAG | Platforms |
|
|
234
234
|
|----------|-------------|------|-----------|
|
|
235
|
-
| `
|
|
236
|
-
| `
|
|
237
|
-
| `
|
|
238
|
-
| `
|
|
239
|
-
| `
|
|
240
|
-
| `
|
|
241
|
-
| `
|
|
242
|
-
| `
|
|
235
|
+
| `interaction_focusable` | Can receive keyboard focus | 2.1.1 | web, ios, android |
|
|
236
|
+
| `interaction_pressable` | Responds to click/tap on entire label area | 2.1.1 | web, ios, android |
|
|
237
|
+
| `interaction_hover` | Visual feedback on hover (web) | 1.4.13 | web |
|
|
238
|
+
| `interaction_pressed` | Visual feedback when pressed | 2.4.7 | web, ios, android |
|
|
239
|
+
| `state_selected` | Shows filled dot when selected | 1.4.1 | web, ios, android |
|
|
240
|
+
| `state_error` | Shows error border and message | 3.3.1 | web, ios, android |
|
|
241
|
+
| `interaction_focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
|
|
242
|
+
| `validation_form_integration` | Native form submission | 4.1.2 | web, ios, android |
|
|
243
243
|
|
|
244
244
|
### Radio Contract Details
|
|
245
245
|
|
|
246
|
-
####
|
|
246
|
+
#### state_selected
|
|
247
247
|
|
|
248
248
|
**Description**: When selected, component displays a filled circular dot centered within the outer circle.
|
|
249
249
|
|
|
@@ -263,21 +263,21 @@ All radio components in the Form Inputs family inherit these 8 foundational cont
|
|
|
263
263
|
|
|
264
264
|
| Contract | Description | WCAG | Platforms |
|
|
265
265
|
|----------|-------------|------|-----------|
|
|
266
|
-
| `
|
|
267
|
-
| `
|
|
268
|
-
| `
|
|
269
|
-
| `
|
|
270
|
-
| `
|
|
266
|
+
| `composition_mutual_exclusivity` | Only one radio selected at a time | N/A | web, ios, android |
|
|
267
|
+
| `interaction_keyboard_navigation` | Arrow keys navigate within group | 2.1.1 | web, ios, android |
|
|
268
|
+
| `validation_group_required` | Required validation at group level | 3.3.1 | web, ios, android |
|
|
269
|
+
| `accessibility_error_announcement` | Error message announced to screen readers | 4.1.3 | web, ios, android |
|
|
270
|
+
| `accessibility_radiogroup_role` | Proper ARIA role for group | 4.1.2 | web, ios, android |
|
|
271
271
|
|
|
272
272
|
### Radio Set Contract Details
|
|
273
273
|
|
|
274
|
-
####
|
|
274
|
+
#### composition_mutual_exclusivity
|
|
275
275
|
|
|
276
276
|
**Description**: Only one radio within the group can be selected at any time.
|
|
277
277
|
|
|
278
278
|
**Behavior**: When a user selects a radio, the previously selected radio becomes unselected. Clicking an already-selected radio does NOT deselect it (radio convention). The Set coordinates this via event listening (web), environment values (iOS), or CompositionLocal (Android).
|
|
279
279
|
|
|
280
|
-
####
|
|
280
|
+
#### interaction_keyboard_navigation
|
|
281
281
|
|
|
282
282
|
**Description**: Arrow keys navigate between radios within the group following WAI-ARIA radio group pattern.
|
|
283
283
|
|
|
@@ -372,8 +372,8 @@ InputTextBase(
|
|
|
372
372
|
|
|
373
373
|
| Contract | Description | Platforms |
|
|
374
374
|
|----------|-------------|-----------|
|
|
375
|
-
| `
|
|
376
|
-
| `
|
|
375
|
+
| `validation_email_format` | Validates email against RFC 5322 pattern on blur | web, ios, android |
|
|
376
|
+
| `interaction_email_autocomplete` | Enables browser/platform email autofill | web, ios, android |
|
|
377
377
|
|
|
378
378
|
#### Usage Example
|
|
379
379
|
|
|
@@ -426,9 +426,9 @@ InputTextEmail(
|
|
|
426
426
|
|
|
427
427
|
| Contract | Description | Platforms |
|
|
428
428
|
|----------|-------------|-----------|
|
|
429
|
-
| `
|
|
430
|
-
| `
|
|
431
|
-
| `
|
|
429
|
+
| `interaction_secure_input` | Masks password input by default | web, ios, android |
|
|
430
|
+
| `interaction_password_toggle` | Provides show/hide password functionality | web, ios, android |
|
|
431
|
+
| `interaction_password_autocomplete` | Enables browser/platform password autofill | web, ios, android |
|
|
432
432
|
|
|
433
433
|
#### Usage Example
|
|
434
434
|
|
|
@@ -480,9 +480,9 @@ InputTextPassword(
|
|
|
480
480
|
|
|
481
481
|
| Contract | Description | Platforms |
|
|
482
482
|
|----------|-------------|-----------|
|
|
483
|
-
| `
|
|
484
|
-
| `
|
|
485
|
-
| `
|
|
483
|
+
| `validation_phone_format` | Validates phone number against country-specific patterns | web, ios, android |
|
|
484
|
+
| `content_phone_formatting` | Formats phone numbers as user types | web, ios, android |
|
|
485
|
+
| `content_international_formats` | Handles multiple country phone number formats | web, ios, android |
|
|
486
486
|
|
|
487
487
|
#### Supported Countries
|
|
488
488
|
|
|
@@ -666,8 +666,8 @@ interface ConsentChangeData {
|
|
|
666
666
|
|
|
667
667
|
| Contract | Description | Platforms |
|
|
668
668
|
|----------|-------------|-----------|
|
|
669
|
-
| `
|
|
670
|
-
| `
|
|
669
|
+
| `validation_explicit_consent` | Prevents pre-checking with console warning | web, ios, android |
|
|
670
|
+
| `validation_audit_trail` | Provides ISO 8601 timestamp and metadata | web, ios, android |
|
|
671
671
|
| `required_indicator` | Shows "Required" indicator by default | web, ios, android |
|
|
672
672
|
|
|
673
673
|
#### Usage Example
|
|
@@ -84,15 +84,15 @@ All components in the Icons family inherit these 5 foundational contracts from I
|
|
|
84
84
|
|
|
85
85
|
| Contract | Description | WCAG | Platforms |
|
|
86
86
|
|----------|-------------|------|-----------|
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
87
|
+
| `visual_renders_svg` | Renders inline SVG with correct viewBox and stroke | N/A | web, ios, android |
|
|
88
|
+
| `visual_color_inheritance` | Inherits color from parent via currentColor | 1.4.1 | web, ios, android |
|
|
89
|
+
| `visual_size_variants` | Supports 11 size variants from typography scale | N/A | web, ios, android |
|
|
90
|
+
| `visual_optical_balance` | Optional 8% lighter blend for icon-text pairing | 1.4.3 | web, ios, android |
|
|
91
91
|
| `accessibility_hidden` | Decorative icons hidden from assistive technology | 1.1.1 | web, ios, android |
|
|
92
92
|
|
|
93
93
|
### Contract Details
|
|
94
94
|
|
|
95
|
-
####
|
|
95
|
+
#### visual_renders_svg
|
|
96
96
|
|
|
97
97
|
**Description**: Renders inline SVG with correct viewBox and stroke attributes.
|
|
98
98
|
|
|
@@ -100,7 +100,7 @@ All components in the Icons family inherit these 5 foundational contracts from I
|
|
|
100
100
|
|
|
101
101
|
**WCAG Compliance**: N/A
|
|
102
102
|
|
|
103
|
-
####
|
|
103
|
+
#### visual_color_inheritance
|
|
104
104
|
|
|
105
105
|
**Description**: Inherits color from parent via currentColor.
|
|
106
106
|
|
|
@@ -108,7 +108,7 @@ All components in the Icons family inherit these 5 foundational contracts from I
|
|
|
108
108
|
|
|
109
109
|
**WCAG Compliance**: 1.4.1 Use of Color
|
|
110
110
|
|
|
111
|
-
####
|
|
111
|
+
#### visual_size_variants
|
|
112
112
|
|
|
113
113
|
**Description**: Supports 11 size variants calculated from typography scale.
|
|
114
114
|
|
|
@@ -125,7 +125,7 @@ All components in the Icons family inherit these 5 foundational contracts from I
|
|
|
125
125
|
|
|
126
126
|
**WCAG Compliance**: N/A
|
|
127
127
|
|
|
128
|
-
####
|
|
128
|
+
#### visual_optical_balance
|
|
129
129
|
|
|
130
130
|
**Description**: Optional 8% lighter blend for icon-text pairing.
|
|
131
131
|
|
|
@@ -143,7 +143,7 @@ Nav-Header-Base (Primitive) [PLANNED]
|
|
|
143
143
|
| `accessibility_touch_target` | accessibility | 2.5.5 | web, ios, android |
|
|
144
144
|
| `validation_selection_constraints` | validation | — | web, ios, android |
|
|
145
145
|
|
|
146
|
-
**Exclusions**: `state_disabled`, `
|
|
146
|
+
**Exclusions**: `state_disabled`, `interaction_hover` — No disabled or hover states on tab bar.
|
|
147
147
|
|
|
148
148
|
---
|
|
149
149
|
|
|
@@ -76,22 +76,23 @@ Input-Text-Base (Primitive) │ ├── Input-Text-Email (Semantic) │ └─
|
|
|
76
76
|
|
|
77
77
|
### Behavioral Contracts
|
|
78
78
|
|
|
79
|
-
**Base Contracts (
|
|
80
|
-
- `
|
|
81
|
-
- `
|
|
82
|
-
- `
|
|
83
|
-
- `
|
|
84
|
-
- `
|
|
85
|
-
- `
|
|
86
|
-
- `
|
|
87
|
-
- `
|
|
88
|
-
|
|
89
|
-
|
|
79
|
+
**Base Contracts (9 total)**:
|
|
80
|
+
- `interaction_focusable` - Keyboard focus support (WCAG 2.1.1)
|
|
81
|
+
- `content_float_label` - Label animates on focus (WCAG 2.3.3)
|
|
82
|
+
- `validation_on_blur` - Validation triggers on blur (WCAG 3.3.1)
|
|
83
|
+
- `state_error` - Error message and styling (WCAG 3.3.1)
|
|
84
|
+
- `state_readonly` - Non-editable value that stays perceivable, selectable, and copyable — never disabled semantics (WCAG 4.1.2)
|
|
85
|
+
- `state_success` - Success styling (WCAG 1.4.1)
|
|
86
|
+
- `content_trailing_icon` - Contextual trailing icons (WCAG 1.4.1)
|
|
87
|
+
- `interaction_focus_ring` - WCAG 2.4.7 focus visible indicator
|
|
88
|
+
- `accessibility_reduced_motion` - Respects prefers-reduced-motion (WCAG 2.3.3)
|
|
89
|
+
|
|
90
|
+
**Excluded**: `state_disabled` — DesignerPunk does not support disabled states for usability and accessibility reasons (adjudicated 2026-07-15; see `.kiro/issues/button-cta-disabled-state-adjudication.md`).
|
|
90
91
|
|
|
91
92
|
**Extended Contracts by Variant**:
|
|
92
|
-
- **Email**: `
|
|
93
|
-
- **Password**: `
|
|
94
|
-
- **PhoneNumber**: `
|
|
93
|
+
- **Email**: `validation_email_format`, `interaction_email_autocomplete`
|
|
94
|
+
- **Password**: `interaction_secure_input`, `interaction_password_toggle`, `interaction_password_autocomplete` (also excludes `state_readonly`)
|
|
95
|
+
- **PhoneNumber**: `validation_phone_format`, `content_phone_formatting`, `content_international_formats`
|
|
95
96
|
|
|
96
97
|
### Token Dependencies
|
|
97
98
|
|
|
@@ -144,14 +145,14 @@ Button-CTA uses the `[Family]-[Type]` pattern (not `[Family]-[Type]-Base`) becau
|
|
|
144
145
|
### Behavioral Contracts
|
|
145
146
|
|
|
146
147
|
**Contracts (6 total)**:
|
|
147
|
-
- `
|
|
148
|
-
- `
|
|
149
|
-
- `
|
|
148
|
+
- `interaction_pressable` - Responds to click/tap interactions (WCAG 2.1.1)
|
|
149
|
+
- `interaction_focusable` - Keyboard focus support (WCAG 2.1.1)
|
|
150
|
+
- `state_loading` - Shows loading indicator during async operations
|
|
150
151
|
- `icon_support` - Supports leading/trailing icons
|
|
151
|
-
- `
|
|
152
|
+
- `interaction_focus_ring` - WCAG 2.4.7 focus visible indicator
|
|
152
153
|
- `reduced_motion_support` - Respects prefers-reduced-motion
|
|
153
154
|
|
|
154
|
-
**Excluded**: `
|
|
155
|
+
**Excluded**: `state_disabled` — DesignerPunk does not support disabled states for usability and accessibility reasons (adjudicated 2026-07-15; see `.kiro/issues/button-cta-disabled-state-adjudication.md`).
|
|
155
156
|
|
|
156
157
|
### Token Dependencies
|
|
157
158
|
|
|
@@ -200,12 +201,12 @@ Container-Base uses the `[Family]-Base` pattern because:
|
|
|
200
201
|
### Behavioral Contracts
|
|
201
202
|
|
|
202
203
|
**Contracts (7 total)**:
|
|
203
|
-
- `
|
|
204
|
-
- `
|
|
205
|
-
- `
|
|
206
|
-
- `
|
|
207
|
-
- `
|
|
208
|
-
- `
|
|
204
|
+
- `layout_contains_children` - Can contain child components
|
|
205
|
+
- `layout_padding` - Applies consistent internal padding
|
|
206
|
+
- `visual_background` - Supports background color/image
|
|
207
|
+
- `visual_border` - Supports border styling
|
|
208
|
+
- `visual_shadow` - Supports elevation shadow
|
|
209
|
+
- `visual_radius` - Supports border radius
|
|
209
210
|
- `responsive_layout` - Adapts to container width
|
|
210
211
|
|
|
211
212
|
### Token Dependencies
|
|
@@ -253,9 +254,9 @@ Icon-Base uses the `[Family]-Base` pattern because:
|
|
|
253
254
|
### Behavioral Contracts
|
|
254
255
|
|
|
255
256
|
**Contracts (5 total)**:
|
|
256
|
-
- `
|
|
257
|
-
- `
|
|
258
|
-
- `
|
|
257
|
+
- `visual_renders_svg` - Renders SVG icon content
|
|
258
|
+
- `visual_size_variants` - Scales proportionally with size prop
|
|
259
|
+
- `visual_color_inheritance` - Inherits color from parent or uses explicit color
|
|
259
260
|
- `accessible_label` - Provides accessible label for screen readers
|
|
260
261
|
- `decorative_mode` - Can be marked as decorative (aria-hidden)
|
|
261
262
|
|
|
@@ -520,17 +520,16 @@ metadata:
|
|
|
520
520
|
**Query component readiness**:
|
|
521
521
|
```
|
|
522
522
|
get_section({
|
|
523
|
-
path: "component-
|
|
524
|
-
heading: "Component
|
|
523
|
+
path: "component-readiness-status",
|
|
524
|
+
heading: "Individual Component Status"
|
|
525
525
|
})
|
|
526
526
|
```
|
|
527
527
|
|
|
528
528
|
**Response includes**:
|
|
529
|
-
- Component name
|
|
530
|
-
-
|
|
531
|
-
-
|
|
532
|
-
-
|
|
533
|
-
- Migration guidance (if deprecated)
|
|
529
|
+
- Component name and family
|
|
530
|
+
- Roll-up status indicator (production-ready / web-ready-mobile-scaffold / scaffold)
|
|
531
|
+
- Per-platform readiness breakdown (web / iOS / Android)
|
|
532
|
+
- Implementation path
|
|
534
533
|
|
|
535
534
|
---
|
|
536
535
|
|
|
@@ -696,7 +696,7 @@ Use when semantic variants represent different states or statuses.
|
|
|
696
696
|
#### Focusable Contract
|
|
697
697
|
|
|
698
698
|
```yaml
|
|
699
|
-
|
|
699
|
+
interaction_focusable:
|
|
700
700
|
description: Can receive keyboard focus
|
|
701
701
|
behavior: |
|
|
702
702
|
Component can receive focus via Tab key navigation.
|
|
@@ -712,7 +712,7 @@ focusable:
|
|
|
712
712
|
#### Pressable Contract
|
|
713
713
|
|
|
714
714
|
```yaml
|
|
715
|
-
|
|
715
|
+
interaction_pressable:
|
|
716
716
|
description: Responds to press/click events
|
|
717
717
|
behavior: |
|
|
718
718
|
Component responds to click, tap, Enter key, and Space key.
|
|
@@ -729,7 +729,7 @@ pressable:
|
|
|
729
729
|
#### Hoverable Contract
|
|
730
730
|
|
|
731
731
|
```yaml
|
|
732
|
-
|
|
732
|
+
interaction_hover:
|
|
733
733
|
description: Visual feedback on hover (pointer devices only)
|
|
734
734
|
behavior: |
|
|
735
735
|
On pointer devices, component shows visual feedback when mouse
|
|
@@ -783,7 +783,7 @@ see the exclusion reason above and the 2026-07-15 adjudication ruling
|
|
|
783
783
|
#### Error State Contract
|
|
784
784
|
|
|
785
785
|
```yaml
|
|
786
|
-
|
|
786
|
+
state_error:
|
|
787
787
|
description: Shows error message and styling
|
|
788
788
|
behavior: |
|
|
789
789
|
When in error state, component displays:
|
|
@@ -804,7 +804,7 @@ error_state:
|
|
|
804
804
|
#### Success State Contract
|
|
805
805
|
|
|
806
806
|
```yaml
|
|
807
|
-
|
|
807
|
+
state_success:
|
|
808
808
|
description: Shows success styling
|
|
809
809
|
behavior: |
|
|
810
810
|
When in success state, component displays:
|
|
@@ -822,7 +822,7 @@ success_state:
|
|
|
822
822
|
#### Loading State Contract
|
|
823
823
|
|
|
824
824
|
```yaml
|
|
825
|
-
|
|
825
|
+
state_loading:
|
|
826
826
|
description: Shows loading indicator during async operations
|
|
827
827
|
behavior: |
|
|
828
828
|
When in loading state, component:
|
|
@@ -846,7 +846,7 @@ loading_state:
|
|
|
846
846
|
#### Focus Ring Contract
|
|
847
847
|
|
|
848
848
|
```yaml
|
|
849
|
-
|
|
849
|
+
interaction_focus_ring:
|
|
850
850
|
description: WCAG 2.4.7 focus visible indicator
|
|
851
851
|
behavior: |
|
|
852
852
|
When focused via keyboard, component displays:
|
|
@@ -867,7 +867,7 @@ focus_ring:
|
|
|
867
867
|
#### Reduced Motion Support Contract
|
|
868
868
|
|
|
869
869
|
```yaml
|
|
870
|
-
|
|
870
|
+
accessibility_reduced_motion:
|
|
871
871
|
description: Respects prefers-reduced-motion
|
|
872
872
|
behavior: |
|
|
873
873
|
When user has reduced motion preference:
|
|
@@ -910,7 +910,7 @@ accessibility_hidden:
|
|
|
910
910
|
#### Float Label Animation Contract
|
|
911
911
|
|
|
912
912
|
```yaml
|
|
913
|
-
|
|
913
|
+
content_float_label:
|
|
914
914
|
description: Label animates on focus
|
|
915
915
|
behavior: |
|
|
916
916
|
Label smoothly transitions from placeholder position inside component
|
|
@@ -929,7 +929,7 @@ float_label_animation:
|
|
|
929
929
|
#### Pressed State Visual Contract
|
|
930
930
|
|
|
931
931
|
```yaml
|
|
932
|
-
|
|
932
|
+
interaction_pressed:
|
|
933
933
|
description: Visual feedback when pressed
|
|
934
934
|
behavior: |
|
|
935
935
|
Component shows visual feedback during active press/click.
|
|
@@ -949,7 +949,7 @@ pressed_state:
|
|
|
949
949
|
#### Gradient Glow Contract
|
|
950
950
|
|
|
951
951
|
```yaml
|
|
952
|
-
|
|
952
|
+
visual_gradient_glow:
|
|
953
953
|
description: Radial gradient background providing state-dependent visual emphasis
|
|
954
954
|
behavior: |
|
|
955
955
|
Component renders an elliptical radial gradient background on
|
|
@@ -975,7 +975,7 @@ gradient_glow:
|
|
|
975
975
|
#### Validates On Blur Contract
|
|
976
976
|
|
|
977
977
|
```yaml
|
|
978
|
-
|
|
978
|
+
validation_on_blur:
|
|
979
979
|
description: Validation triggers on blur
|
|
980
980
|
behavior: |
|
|
981
981
|
Validation state is evaluated when component loses focus.
|
|
@@ -1014,7 +1014,7 @@ custom_validation:
|
|
|
1014
1014
|
#### Contains Children Contract
|
|
1015
1015
|
|
|
1016
1016
|
```yaml
|
|
1017
|
-
|
|
1017
|
+
layout_contains_children:
|
|
1018
1018
|
description: Can contain child components
|
|
1019
1019
|
behavior: |
|
|
1020
1020
|
Component can contain any child components or content.
|
|
@@ -1034,7 +1034,7 @@ contains_children:
|
|
|
1034
1034
|
#### Renders SVG Contract
|
|
1035
1035
|
|
|
1036
1036
|
```yaml
|
|
1037
|
-
|
|
1037
|
+
visual_renders_svg:
|
|
1038
1038
|
description: Renders inline SVG with correct attributes
|
|
1039
1039
|
behavior: |
|
|
1040
1040
|
Component renders an inline SVG element with:
|
|
@@ -1042,7 +1042,7 @@ renders_svg:
|
|
|
1042
1042
|
- Appropriate fill/stroke attributes
|
|
1043
1043
|
- Proper sizing based on size prop
|
|
1044
1044
|
SVG content is loaded based on name from internal map.
|
|
1045
|
-
wcag:
|
|
1045
|
+
wcag: null
|
|
1046
1046
|
platforms: [web, ios, android]
|
|
1047
1047
|
validation: |
|
|
1048
1048
|
- SVG element renders with correct viewBox
|
|
@@ -1077,18 +1077,18 @@ renders_svg:
|
|
|
1077
1077
|
|
|
1078
1078
|
| Behavior Needed | Contract(s) to Include |
|
|
1079
1079
|
|-----------------|------------------------|
|
|
1080
|
-
| Keyboard navigation |
|
|
1081
|
-
| Click/tap interaction |
|
|
1082
|
-
| Mouse hover feedback |
|
|
1083
|
-
| Action temporarily unavailable | state_loading (in-flight),
|
|
1084
|
-
| Error handling |
|
|
1085
|
-
| Success feedback |
|
|
1086
|
-
| Loading indication |
|
|
1087
|
-
| Animation support |
|
|
1080
|
+
| Keyboard navigation | interaction_focusable, interaction_focus_ring |
|
|
1081
|
+
| Click/tap interaction | interaction_pressable, interaction_pressed |
|
|
1082
|
+
| Mouse hover feedback | interaction_hover |
|
|
1083
|
+
| Action temporarily unavailable | state_loading (in-flight), validation_on_blur (invalid input), or do not render (no valid path) — never a disabled-state contract; see "No Disabled States — Standardized Exclusion" |
|
|
1084
|
+
| Error handling | state_error, validation_on_blur |
|
|
1085
|
+
| Success feedback | state_success |
|
|
1086
|
+
| Loading indication | state_loading |
|
|
1087
|
+
| Animation support | accessibility_reduced_motion |
|
|
1088
1088
|
| Decorative elements | accessibility_hidden |
|
|
1089
|
-
| Form validation |
|
|
1090
|
-
| Container behavior |
|
|
1091
|
-
| Icon rendering |
|
|
1089
|
+
| Form validation | validation_on_blur, custom_validation |
|
|
1090
|
+
| Container behavior | layout_contains_children |
|
|
1091
|
+
| Icon rendering | visual_renders_svg, accessibility_hidden |
|
|
1092
1092
|
|
|
1093
1093
|
### Application MCP Checklist
|
|
1094
1094
|
|
|
@@ -180,7 +180,7 @@ excludes:
|
|
|
180
180
|
| `category` | Taxonomy category (redundant with name prefix — enables validation) |
|
|
181
181
|
| `description` | Short description of the behavioral guarantee |
|
|
182
182
|
| `behavior` | Detailed behavior description |
|
|
183
|
-
| `wcag` | WCAG criterion this contract supports (
|
|
183
|
+
| `wcag` | WCAG criterion this contract supports — required for allowlisted contracts (use the 'N/A' sentinel when genuinely not applicable); null only for non-allowlisted contracts |
|
|
184
184
|
| `platforms` | Platforms where this contract applies |
|
|
185
185
|
| `validation` | Testable criteria for verifying the contract |
|
|
186
186
|
| `test_approach` | How to test this contract |
|
|
@@ -8,7 +8,7 @@ description: Development workflow and task completion practices — task complet
|
|
|
8
8
|
# Development Workflow and Task Completion Practices
|
|
9
9
|
|
|
10
10
|
**Date**: 2025-10-20
|
|
11
|
-
**Last Reviewed**: 2026-
|
|
11
|
+
**Last Reviewed**: 2026-08-12
|
|
12
12
|
**Purpose**: Task completion workflow and git practices for all development work
|
|
13
13
|
**Organization**: process-standard
|
|
14
14
|
**Scope**: cross-project
|
|
@@ -32,7 +32,7 @@ description: Development workflow and task completion practices — task complet
|
|
|
32
32
|
|
|
33
33
|
**MCP Queries for Detailed Guidance** (query when needed):
|
|
34
34
|
- **Completion Documentation**: `get_section({ path: "completion-documentation-guide", heading: "Two-Document Workflow" })`
|
|
35
|
-
- **
|
|
35
|
+
- **Releases**: `get_section({ path: "release-management-system", heading: "The Release Recipe" })`
|
|
36
36
|
- **File Organization**: `get_section({ path: "process-file-organization", heading: "Organization Implementation (Conditional Loading)" })`
|
|
37
37
|
- **Hook Operations**: `get_section({ path: "process-hook-operations", heading: "Agent Hook Dependency Chains" })`
|
|
38
38
|
|
|
@@ -109,7 +109,7 @@ get_section({ path: "completion-documentation-guide", heading: "Naming Conventio
|
|
|
109
109
|
2. **Manually update tasks.md**: Change task status from `[ ]` to `[x]`
|
|
110
110
|
3. **Open the Task PR**: Run `./.kiro/hooks/complete-task.sh "Task Name"` to commit on the task branch, push, and open the PR
|
|
111
111
|
4. **Merge = completion**: Peter merges on green; the merged PR is the verification
|
|
112
|
-
5. **[OPTIONAL]** **Release
|
|
112
|
+
5. **[OPTIONAL]** **Release-delta check**: `git log $(git describe --tags --abbrev=0)..main --oneline` shows everything shipped since the last release (squash titles are the changelog spine — see Release Management System)
|
|
113
113
|
|
|
114
114
|
**When to use this approach:**
|
|
115
115
|
- Quick fixes or minor changes
|
|
@@ -246,7 +246,7 @@ get_section({ path: "process-hook-operations", heading: "Quick Reference: Diagno
|
|
|
246
246
|
|
|
247
247
|
**Quick Reference - Error Recovery**:
|
|
248
248
|
- If commit fails: Fix issues and re-run the tooling
|
|
249
|
-
- If push fails: Push the TASK BRANCH manually (`git push -u origin <branch>`)
|
|
249
|
+
- If push fails: Push the TASK BRANCH manually (`git push -u origin <branch>`)
|
|
250
250
|
- If the PR title is wrong: Edit the PR title on GitHub (squash-merge takes the title as the commit subject)
|
|
251
251
|
|
|
252
252
|
|
|
@@ -109,10 +109,7 @@ All files use explicit metadata to declare organizational intent, enabling safe
|
|
|
109
109
|
**Task**: Associated task number and name (if applicable)
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
**Civitas Governance Note:** Steering documents require additional metadata fields (`Last Reviewed`, `Layer`, `Relevant Tasks`, `inclusion` in YAML frontmatter). For the complete steering doc metadata requirements and lifecycle process (creation → review → update → deprecation), see Thurgood's Civitas Steward operational mode or query
|
|
113
|
-
```
|
|
114
|
-
get_section({ path: ".kiro/steering/Civitas-System-Overview.md", heading: "Governance Processes" })
|
|
115
|
-
```
|
|
112
|
+
**Civitas Governance Note:** Steering documents require additional metadata fields (`Last Reviewed`, `Layer`, `Relevant Tasks`, `inclusion` in YAML frontmatter). For the complete steering doc metadata requirements and lifecycle process (creation → review → update → deprecation), see Thurgood's Civitas Steward operational mode, or the always-loaded Civitas System Overview § "Governance Processes" (an identity doc — never MCP-served, already in every agent's context; no query needed).
|
|
116
113
|
|
|
117
114
|
#### Optional: `aliases:` frontmatter field (steering docs)
|
|
118
115
|
|