@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.
Files changed (96) hide show
  1. package/.kiro/steering/Civitas-System-Overview.md +3 -12
  2. package/.kiro/steering/Spec-Feedback-Protocol.md +2 -11
  3. package/.kiro/steering/Task-Completion-Protocol.md +7 -7
  4. package/.kiro/steering/start-up-tasks.md +4 -4
  5. package/dist/ComponentTokens.android.kt +12 -12
  6. package/dist/ComponentTokens.ios.swift +12 -12
  7. package/dist/ComponentTokens.web.css +3 -3
  8. package/dist/DesignTokens.android.kt +1 -1
  9. package/dist/DesignTokens.dtcg.json +2 -2
  10. package/dist/DesignTokens.ios.swift +1 -1
  11. package/dist/DesignTokens.web.css +1 -1
  12. package/dist/android/DesignTokens.android.kt +1 -1
  13. package/dist/browser/designerpunk.esm.js +14 -9
  14. package/dist/browser/designerpunk.esm.min.js +7 -7
  15. package/dist/browser/designerpunk.umd.js +14 -9
  16. package/dist/browser/designerpunk.umd.min.js +12 -12
  17. package/dist/browser/tokens.css +3 -3
  18. package/dist/build/tokens/defineComponentTokens.d.ts +10 -0
  19. package/dist/build/tokens/defineComponentTokens.js +26 -0
  20. package/dist/components/core/Avatar-Base/avatar.tokens.d.ts +21 -26
  21. package/dist/components/core/Avatar-Base/avatar.tokens.js +31 -34
  22. package/dist/components/core/Avatar-Base/index.d.ts +1 -1
  23. package/dist/components/core/Avatar-Base/index.js +2 -2
  24. package/dist/components/core/Button-Icon/buttonIcon.tokens.d.ts +28 -14
  25. package/dist/components/core/Button-Icon/buttonIcon.tokens.js +35 -20
  26. package/dist/generators/TokenFileGenerator.js +7 -2
  27. package/dist/ios/DesignTokens.ios.swift +1 -1
  28. package/dist/tokens/component/progress.d.ts +65 -5
  29. package/dist/tokens/component/progress.js +79 -18
  30. package/dist/types/generated/TokenTypes.d.ts +1 -1
  31. package/dist/types/generated/TokenTypes.js +1 -1
  32. package/dist/web/DesignTokens.web.css +1 -1
  33. package/governance/BUILD-SYSTEM-SETUP.md +1 -2
  34. package/governance/Component-Development-Guide.md +1 -1
  35. package/governance/Component-Development-Standards.md +19 -18
  36. package/governance/Component-Family-Avatar.md +6 -6
  37. package/governance/Component-Family-Badge.md +19 -19
  38. package/governance/Component-Family-Button.md +26 -26
  39. package/governance/Component-Family-Chip.md +14 -14
  40. package/governance/Component-Family-Container.md +12 -12
  41. package/governance/Component-Family-Form-Inputs.md +61 -61
  42. package/governance/Component-Family-Icon.md +8 -8
  43. package/governance/Component-Family-Navigation.md +1 -1
  44. package/governance/Component-Inheritance-Structures.md +29 -28
  45. package/governance/Component-Readiness-Status.md +6 -7
  46. package/governance/Component-Templates.md +26 -26
  47. package/governance/Contract-System-Reference.md +1 -1
  48. package/governance/Process-Development-Workflow.md +4 -4
  49. package/governance/Process-File-Organization.md +1 -4
  50. package/governance/Process-Hook-Operations.md +6 -7
  51. package/governance/Process-Spec-Planning.md +8 -14
  52. package/governance/Rosetta-System-Architecture.md +7 -5
  53. package/governance/Token-Quick-Reference.md +35 -22
  54. package/governance/Web-Authoring-Standards.md +1 -1
  55. package/governance/classification-map.md +109 -3
  56. package/governance/completion-documentation-guide.md +14 -31
  57. package/governance/platform-implementation-guidelines.md +1 -2
  58. package/governance/release-management-system.md +28 -63
  59. package/package.json +2 -6
  60. package/src/build/tokens/__tests__/defineComponentTokens.test.ts +113 -0
  61. package/src/build/tokens/defineComponentTokens.ts +43 -1
  62. package/src/components/core/Avatar-Base/avatar.tokens.ts +31 -34
  63. package/src/components/core/Avatar-Base/index.ts +1 -1
  64. package/src/components/core/Button-Icon/buttonIcon.tokens.ts +43 -27
  65. package/src/generators/TokenFileGenerator.ts +7 -2
  66. package/src/tokens/__tests__/ProgressTokenCompliance.test.ts +5 -3
  67. package/src/tokens/__tests__/ProgressTokenFormulas.test.ts +11 -11
  68. package/src/tokens/__tests__/ProgressTokenTranslation.test.ts +22 -20
  69. package/src/tokens/component/progress.ts +83 -21
  70. package/src/types/generated/TokenTypes.ts +1 -1
  71. package/token-index/components.yaml +8 -8
  72. package/src/tools/release/__tests__/ChangeClassifier.test.ts +0 -133
  73. package/src/tools/release/__tests__/ChangeExtractor.test.ts +0 -222
  74. package/src/tools/release/__tests__/GitHubPublisher.test.ts +0 -240
  75. package/src/tools/release/__tests__/NotesRenderer.test.ts +0 -142
  76. package/src/tools/release/__tests__/NpmPublisher.test.ts +0 -289
  77. package/src/tools/release/__tests__/PipelineIntegration.test.ts +0 -188
  78. package/src/tools/release/__tests__/ReleasePipeline.test.ts +0 -192
  79. package/src/tools/release/__tests__/SemanticVersionValidator.test.ts +0 -49
  80. package/src/tools/release/__tests__/SummaryScanner.test.ts +0 -141
  81. package/src/tools/release/__tests__/TagResolver.test.ts +0 -91
  82. package/src/tools/release/__tests__/VersionCalculator.test.ts +0 -270
  83. package/src/tools/release/__tests__/helpers/NpmMockHelper.ts +0 -80
  84. package/src/tools/release/cli/ReleasePipeline.ts +0 -165
  85. package/src/tools/release/cli/release-tool.ts +0 -107
  86. package/src/tools/release/pipeline/ChangeClassifier.ts +0 -61
  87. package/src/tools/release/pipeline/ChangeExtractor.ts +0 -87
  88. package/src/tools/release/pipeline/NotesRenderer.ts +0 -66
  89. package/src/tools/release/pipeline/SummaryScanner.ts +0 -70
  90. package/src/tools/release/pipeline/TagResolver.ts +0 -40
  91. package/src/tools/release/pipeline/VersionCalculator.ts +0 -375
  92. package/src/tools/release/publishers/GitHubPublisher.ts +0 -228
  93. package/src/tools/release/publishers/NpmPublisher.ts +0 -196
  94. package/src/tools/release/release-config.json +0 -5
  95. package/src/tools/release/types/index.ts +0 -282
  96. 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
- | `focusable` | Can receive keyboard focus | 2.1.1 | web, ios, android |
110
- | `float_label_animation` | Label animates on focus | 2.3.3 | web, ios, android |
111
- | `validates_on_blur` | Validation triggers on blur | 3.3.1 | web, ios, android |
112
- | `error_state_display` | Shows error message and styling | 3.3.1, 1.4.1 | web, ios, android |
113
- | `success_state_display` | Shows success styling | 1.4.1 | web, ios, android |
114
- | `trailing_icon_display` | Shows contextual trailing icons | 1.4.1 | web, ios, android |
115
- | `focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
116
- | `reduced_motion_support` | Respects prefers-reduced-motion | 2.3.3 | web, ios, android |
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**: `disabled_state` — 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`).
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
- #### focusable
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
- #### float_label_animation
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
- #### error_state_display
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
- #### focus_ring
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
- | `validates_email_format` | Validates email against RFC 5322 pattern | 3.3.1 |
161
- | `provides_email_autocomplete` | Enables browser/platform email autofill | 1.3.5 |
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
- | `provides_secure_input` | Masks password input by default | 3.3.2 |
168
- | `supports_password_toggle` | Provides show/hide password functionality | 2.1.1, 4.1.2 |
169
- | `provides_password_autocomplete` | Enables browser/platform password autofill | 1.3.5 |
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
- | `validates_phone_format` | Validates phone number against country-specific patterns | 3.3.1 |
176
- | `provides_phone_formatting` | Formats phone numbers as user types | 3.3.2 |
177
- | `supports_international_formats` | Handles multiple country phone number formats | 3.3.2 |
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
- | `focusable` | Can receive keyboard focus | 2.1.1 | web, ios, android |
186
- | `pressable` | Responds to click/tap on entire label area | 2.1.1 | web, ios, android |
187
- | `hover_state` | Visual feedback on hover (web) | 1.4.13 | web |
188
- | `pressed_state` | Visual feedback when pressed | 2.4.7 | web, ios, android |
189
- | `checked_state` | Shows checkmark icon when checked | 1.4.1 | web, ios, android |
190
- | `indeterminate_state` | Shows minus icon for partial selection | 1.4.1 | web, ios, android |
191
- | `error_state_display` | Shows error border and message | 3.3.1 | web, ios, android |
192
- | `focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
193
- | `form_integration` | Native form submission and reset | 4.1.2 | web, ios, android |
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
- #### checked_state
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
- #### indeterminate_state
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
- #### form_integration
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
- | `explicit_consent` | Prevents pre-checking with console warning | N/A |
226
- | `audit_trail` | Provides ISO 8601 timestamp and metadata | N/A |
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
- | `focusable` | Can receive keyboard focus | 2.1.1 | web, ios, android |
236
- | `pressable` | Responds to click/tap on entire label area | 2.1.1 | web, ios, android |
237
- | `hover_state` | Visual feedback on hover (web) | 1.4.13 | web |
238
- | `pressed_state` | Visual feedback when pressed | 2.4.7 | web, ios, android |
239
- | `selected_state` | Shows filled dot when selected | 1.4.1 | web, ios, android |
240
- | `error_state` | Shows error border and message | 3.3.1 | web, ios, android |
241
- | `focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
242
- | `form_integration` | Native form submission | 4.1.2 | web, ios, android |
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
- #### selected_state
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
- | `mutual_exclusivity` | Only one radio selected at a time | N/A | web, ios, android |
267
- | `keyboard_navigation` | Arrow keys navigate within group | 2.1.1 | web, ios, android |
268
- | `group_validation` | Required validation at group level | 3.3.1 | web, ios, android |
269
- | `error_announcement` | Error message announced to screen readers | 4.1.3 | web, ios, android |
270
- | `radiogroup_role` | Proper ARIA role for group | 4.1.2 | web, ios, android |
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
- #### mutual_exclusivity
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
- #### keyboard_navigation
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
- | `validates_email_format` | Validates email against RFC 5322 pattern on blur | web, ios, android |
376
- | `provides_email_autocomplete` | Enables browser/platform email autofill | web, ios, android |
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
- | `provides_secure_input` | Masks password input by default | web, ios, android |
430
- | `supports_password_toggle` | Provides show/hide password functionality | web, ios, android |
431
- | `provides_password_autocomplete` | Enables browser/platform password autofill | web, ios, android |
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
- | `validates_phone_format` | Validates phone number against country-specific patterns | web, ios, android |
484
- | `provides_phone_formatting` | Formats phone numbers as user types | web, ios, android |
485
- | `supports_international_formats` | Handles multiple country phone number formats | web, ios, android |
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
- | `explicit_consent` | Prevents pre-checking with console warning | web, ios, android |
670
- | `audit_trail` | Provides ISO 8601 timestamp and metadata | web, ios, android |
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
- | `renders_svg` | Renders inline SVG with correct viewBox and stroke | N/A | web, ios, android |
88
- | `color_inheritance` | Inherits color from parent via currentColor | 1.4.1 | web, ios, android |
89
- | `size_variants` | Supports 11 size variants from typography scale | N/A | web, ios, android |
90
- | `optical_balance` | Optional 8% lighter blend for icon-text pairing | 1.4.3 | web, ios, android |
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
- #### renders_svg
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
- #### color_inheritance
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
- #### size_variants
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
- #### optical_balance
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`, `interaction_hoverable` — No disabled or hover states on tab bar.
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 (8 total)**:
80
- - `focusable` - Keyboard focus support (WCAG 2.1.1)
81
- - `float_label_animation` - Label animates on focus (WCAG 2.3.3)
82
- - `validates_on_blur` - Validation triggers on blur (WCAG 3.3.1)
83
- - `error_state_display` - Error message and styling (WCAG 3.3.1, 1.4.1)
84
- - `success_state_display` - Success styling (WCAG 1.4.1)
85
- - `trailing_icon_display` - Contextual trailing icons
86
- - `focus_ring` - WCAG 2.4.7 focus visible indicator
87
- - `reduced_motion_support` - Respects prefers-reduced-motion
88
-
89
- **Excluded**: `disabled_state` — DesignerPunk does not support disabled states for usability and accessibility reasons (adjudicated 2026-07-15; see `.kiro/issues/button-cta-disabled-state-adjudication.md`).
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**: `validates_email_format`, `provides_email_autocomplete`
93
- - **Password**: `provides_secure_input`, `supports_password_toggle`, `provides_password_autocomplete`
94
- - **PhoneNumber**: `validates_phone_format`, `provides_phone_formatting`, `supports_international_formats`
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
- - `clickable` - Responds to click/tap interactions (WCAG 2.1.1)
148
- - `focusable` - Keyboard focus support (WCAG 2.1.1)
149
- - `loading_state` - Shows loading indicator during async operations
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
- - `focus_ring` - WCAG 2.4.7 focus visible indicator
152
+ - `interaction_focus_ring` - WCAG 2.4.7 focus visible indicator
152
153
  - `reduced_motion_support` - Respects prefers-reduced-motion
153
154
 
154
- **Excluded**: `disabled_state` — 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
+ **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
- - `contains_children` - Can contain child components
204
- - `applies_padding` - Applies consistent internal padding
205
- - `applies_background` - Supports background color/image
206
- - `applies_border` - Supports border styling
207
- - `applies_shadow` - Supports elevation shadow
208
- - `applies_radius` - Supports border radius
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
- - `renders_svg` - Renders SVG icon content
257
- - `scales_with_size` - Scales proportionally with size prop
258
- - `inherits_color` - Inherits color from parent or uses explicit color
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-family-form-inputs",
524
- heading: "Component Readiness"
523
+ path: "component-readiness-status",
524
+ heading: "Individual Component Status"
525
525
  })
526
526
  ```
527
527
 
528
528
  **Response includes**:
529
- - Component name
530
- - Current readiness status
531
- - Status indicator emoji
532
- - Usage recommendations
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
- focusable:
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
- pressable:
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
- hoverable:
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
- error_state:
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
- success_state:
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
- loading_state:
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
- focus_ring:
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
- reduced_motion_support:
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
- float_label_animation:
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
- pressed_state:
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
- gradient_glow:
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
- validates_on_blur:
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
- contains_children:
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
- renders_svg:
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: N/A
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 | focusable, focus_ring |
1081
- | Click/tap interaction | pressable, pressed_state |
1082
- | Mouse hover feedback | hoverable |
1083
- | Action temporarily unavailable | state_loading (in-flight), validates_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 | error_state, validates_on_blur |
1085
- | Success feedback | success_state |
1086
- | Loading indication | loading_state |
1087
- | Animation support | reduced_motion_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 | validates_on_blur, custom_validation |
1090
- | Container behavior | contains_children |
1091
- | Icon rendering | renders_svg, accessibility_hidden |
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 (null if not applicable) |
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-07-14
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
- - **Release Detection**: `get_section({ path: "release-management-system", heading: "Release Pipeline Architecture" })`
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 Analysis**: Run `npm run release:analyze` for detailed local analysis (the standing analysis runs post-merge on `main`)
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>`) — never `main`
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