@3fn/core 13.0.0 → 14.0.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/agents/ada-prompt.md +80 -132
- package/.kiro/agents/ada-prompt.md.attribution.json +45 -0
- package/.kiro/agents/ada.json +44 -59
- package/.kiro/agents/ada.json.attribution.json +13 -0
- package/.kiro/agents/data-prompt.md +83 -74
- package/.kiro/agents/data-prompt.md.attribution.json +53 -0
- package/.kiro/agents/data.json +31 -38
- package/.kiro/agents/data.json.attribution.json +13 -0
- package/.kiro/agents/kenya-prompt.md +83 -72
- package/.kiro/agents/kenya-prompt.md.attribution.json +53 -0
- package/.kiro/agents/kenya.json +27 -35
- package/.kiro/agents/kenya.json.attribution.json +13 -0
- package/.kiro/agents/leonardo-prompt.md +176 -234
- package/.kiro/agents/leonardo-prompt.md.attribution.json +45 -0
- package/.kiro/agents/leonardo.json +28 -36
- package/.kiro/agents/leonardo.json.attribution.json +13 -0
- package/.kiro/agents/lina-prompt.md +110 -151
- package/.kiro/agents/lina-prompt.md.attribution.json +53 -0
- package/.kiro/agents/lina.json +46 -59
- package/.kiro/agents/lina.json.attribution.json +13 -0
- package/.kiro/agents/sparky-prompt.md +89 -72
- package/.kiro/agents/sparky-prompt.md.attribution.json +53 -0
- package/.kiro/agents/sparky.json +37 -37
- package/.kiro/agents/sparky.json.attribution.json +13 -0
- package/.kiro/agents/stacy-prompt.md +74 -48
- package/.kiro/agents/stacy-prompt.md.attribution.json +45 -0
- package/.kiro/agents/stacy.json +28 -30
- package/.kiro/agents/stacy.json.attribution.json +13 -0
- package/.kiro/agents/thurgood-prompt.md +94 -138
- package/.kiro/agents/thurgood-prompt.md.attribution.json +45 -0
- package/.kiro/agents/thurgood.json +31 -35
- package/.kiro/agents/thurgood.json.attribution.json +13 -0
- package/.kiro/steering/AI-Collaboration-Principles.md +3 -3
- package/.kiro/steering/Civitas-System-Overview.md +5 -5
- package/.kiro/steering/DesignerPunk-Systems-Overview.md +6 -6
- package/.kiro/steering/Task-Completion-Protocol.md +98 -17
- package/.kiro/steering/core-goals.md +3 -3
- package/.kiro/steering/personal-note.md +1 -1
- package/.kiro/steering/start-up-tasks.md +14 -3
- package/application-mcp-server/src/index.ts +26 -0
- package/dist/ComponentTokens.android.kt +1 -1
- package/dist/ComponentTokens.ios.swift +1 -1
- package/dist/ComponentTokens.web.css +1 -1
- package/dist/DesignTokens.android.kt +1 -1
- package/dist/DesignTokens.dtcg.json +8 -5
- package/dist/DesignTokens.figma.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/blend/OklchBlendCalculator.js +1 -0
- package/dist/blend/ThemeAwareBlendUtilities.web.d.ts +13 -2
- package/dist/blend/ThemeAwareBlendUtilities.web.js +6 -1
- package/dist/browser/designerpunk.esm.js +22 -81
- package/dist/browser/designerpunk.esm.min.js +29 -32
- package/dist/browser/designerpunk.umd.js +22 -81
- package/dist/browser/designerpunk.umd.min.js +42 -45
- package/dist/browser/tokens.css +1 -1
- package/dist/components/core/Avatar-Base/platforms/web/Avatar.web.js +24 -5
- package/dist/components/core/Button-CTA/examples/BasicUsage.d.ts +16 -28
- package/dist/components/core/Button-CTA/examples/BasicUsage.js +18 -43
- package/dist/components/core/Button-CTA/platforms/web/ButtonCTA.web.d.ts +3 -15
- package/dist/components/core/Button-CTA/platforms/web/ButtonCTA.web.js +9 -58
- package/dist/components/core/Button-CTA/types.d.ts +0 -24
- package/dist/components/core/Button-CTA/types.js +6 -0
- package/dist/components/core/Input-Text-Base/types.d.ts +13 -1
- package/dist/components/core/Input-Text-Password/platforms/web/InputTextPassword.web.js +11 -2
- package/dist/generators/DTCGFormatGenerator.js +8 -0
- package/dist/integration/BuildErrorHandler.js +2 -2
- package/dist/ios/DesignTokens.ios.swift +1 -1
- package/dist/mcp/application-mcp.js +24 -0
- package/dist/mcp/docs-mcp.js +130 -15
- package/dist/mcp/product-mcp.js +25 -0
- package/dist/tokens/OpacityTokens.js +1 -1
- package/dist/tokens/semantic/BlendTokens.d.ts +10 -3
- package/dist/tokens/semantic/BlendTokens.js +17 -5
- package/dist/tokens/semantic/OpacityTokens.d.ts +4 -4
- package/dist/tokens/semantic/OpacityTokens.js +4 -4
- package/dist/types/ComponentTypes.d.ts +1 -1
- package/dist/types/generated/TokenTypes.d.ts +1 -1
- package/dist/types/generated/TokenTypes.js +1 -1
- package/dist/validators/StemmaTokenUsageValidator.js +3 -2
- package/dist/web/DesignTokens.web.css +1 -1
- package/governance/Component-Development-Guide.md +22 -12
- package/governance/Component-Development-Standards.md +2 -2
- package/governance/Component-Family-Avatar.md +0 -1
- package/governance/Component-Family-Badge.md +0 -1
- package/governance/Component-Family-Button.md +4 -17
- package/governance/Component-Family-Chip.md +0 -1
- package/governance/Component-Family-Container.md +0 -1
- package/governance/Component-Family-Data-Display.md +1 -2
- package/governance/Component-Family-Divider.md +1 -2
- package/governance/Component-Family-Form-Inputs.md +5 -5
- package/governance/Component-Family-Icon.md +1 -2
- package/governance/Component-Family-Loading.md +1 -2
- package/governance/Component-Family-Modal.md +1 -2
- package/governance/Component-Family-Navigation.md +0 -1
- package/governance/Component-Family-Progress.md +0 -1
- package/governance/Component-Inheritance-Structures.md +195 -76
- package/governance/Component-MCP-Document-Template.md +6 -5
- package/governance/Component-Primitive-vs-Semantic-Philosophy.md +1 -1
- package/governance/Component-Quick-Reference.md +33 -33
- package/governance/Component-Readiness-Status.md +54 -38
- package/governance/Component-Templates.md +32 -36
- package/governance/Contract-System-Reference.md +6 -6
- package/governance/MCP-Integration-Guide.md +1 -1
- package/governance/Process-Cross-Reference-Standards.md +31 -13
- package/governance/Process-Development-Workflow.md +49 -59
- package/governance/Process-File-Organization.md +24 -24
- package/governance/Process-Hook-Operations.md +19 -7
- package/governance/Process-Orchestration-Model-Selection.md +92 -0
- package/governance/Process-Spec-Planning.md +91 -39
- package/governance/Process-Task-Type-Definitions.md +80 -4
- package/governance/Product-Handoff-Protocol.md +2 -0
- package/governance/Rosetta-System-Architecture.md +6 -6
- package/governance/Test-Behavioral-Contract-Validation.md +38 -31
- package/governance/Test-Failure-Audit-Methodology.md +1 -1
- package/governance/Token-Family-Accessibility.md +1 -2
- package/governance/Token-Family-Blend.md +18 -16
- package/governance/Token-Family-Blur.md +0 -1
- package/governance/Token-Family-Border.md +1 -2
- package/governance/Token-Family-Color.md +0 -1
- package/governance/Token-Family-Glow.md +1 -2
- package/governance/Token-Family-Layering.md +0 -1
- package/governance/Token-Family-Motion.md +1 -2
- package/governance/Token-Family-Opacity.md +0 -1
- package/governance/Token-Family-Radius.md +1 -2
- package/governance/Token-Family-Responsive.md +1 -2
- package/governance/Token-Family-Shadow.md +1 -2
- package/governance/Token-Family-Sizing.md +0 -1
- package/governance/Token-Family-Spacing.md +1 -2
- package/governance/Token-Family-Typography.md +1 -2
- package/governance/Token-Governance.md +8 -8
- package/governance/Token-Quick-Reference.md +21 -21
- package/governance/Token-Resolution-Patterns.md +1 -1
- package/governance/Token-Semantic-Structure.md +1 -1
- package/governance/Web-Authoring-Standards.md +5 -5
- package/governance/browser-distribution-guide.md +1 -4
- package/governance/classification-map.md +368 -0
- package/governance/completion-documentation-guide.md +11 -8
- package/governance/component-meta-authoring-guide.md +1 -1
- package/governance/cross-platform-vs-platform-specific-decision-framework.md +1 -1
- package/governance/platform-implementation-guidelines.md +1 -1
- package/governance/release-management-system.md +2 -2
- package/governance/rosetta-system-principles.md +8 -6
- package/governance/stemma-system-principles.md +18 -17
- package/mcp-server/src/index.ts +24 -6
- package/mcp-server/src/indexer/DocumentIndexer.ts +119 -9
- package/mcp-server/src/indexer/__tests__/bare-id-crossrefs.test.ts +250 -0
- package/mcp-server/src/indexer/cross-ref-parser.ts +29 -1
- package/mcp-server/src/indexer/index-health.ts +27 -2
- package/mcp-server/src/query/__tests__/find-docs-calibration.test.ts +11 -26
- package/mcp-server/src/relocation-integrity-gate/__tests__/relocation-integrity-gate.test.ts +72 -5
- package/mcp-server/src/relocation-integrity-gate/relocation-integrity-gate.ts +81 -24
- package/mcp-server/src/tools/list-cross-references.ts +2 -2
- package/package.json +23 -21
- package/src/__tests__/browser-distribution/css-bundling.test.ts +6 -4
- package/src/__tests__/console-allowlist.json +14 -0
- package/src/__tests__/console-fail-setup.ts +169 -0
- package/src/__tests__/integration/Spec107-DesignLanguageContext.test.ts +16 -0
- package/src/__tests__/stemma-system/behavioral-contract-validation.test.ts +70 -17
- package/src/__tests__/stemma-system/contract-catalog-name-validation.test.ts +28 -0
- package/src/__tests__/stemma-system/form-inputs-contracts.test.ts +223 -16
- package/src/__tests__/stemma-system/input-text-native-base-call-alignment.test.ts +298 -0
- package/src/blend/OklchBlendCalculator.ts +3 -0
- package/src/blend/ThemeAwareBlendUtilities.android.kt +3 -0
- package/src/blend/ThemeAwareBlendUtilities.ios.swift +3 -0
- package/src/blend/ThemeAwareBlendUtilities.web.ts +9 -1
- package/src/blend/__tests__/InteractionStateAudit.test.ts +12 -9
- package/src/build/errors/__tests__/ErrorHandler.integration.test.ts +8 -0
- package/src/build/errors/__tests__/ErrorHandler.test.ts +5 -0
- package/src/build/workflow/__tests__/CICDIntegration.test.ts +12 -1
- package/src/cli/__tests__/init.test.ts +45 -11
- package/src/components/core/Avatar-Base/Avatar-Base.schema.yaml +1 -1
- package/src/components/core/Avatar-Base/__tests__/Avatar.accessibility.test.ts +121 -7
- package/src/components/core/Avatar-Base/__tests__/Avatar.image.test.ts +3 -0
- package/src/components/core/Avatar-Base/__tests__/Avatar.test.ts +15 -6
- package/src/components/core/Avatar-Base/contracts.yaml +11 -1
- package/src/components/core/Avatar-Base/platforms/web/Avatar.web.ts +24 -5
- package/src/components/core/Badge-Count-Base/contracts.yaml +1 -1
- package/src/components/core/Badge-Label-Base/contracts.yaml +1 -1
- package/src/components/core/Button-CTA/Button-CTA.schema.yaml +2 -12
- package/src/components/core/Button-CTA/README.md +3 -6
- package/src/components/core/Button-CTA/__tests__/ButtonCTA.test.ts +35 -89
- package/src/components/core/Button-CTA/__tests__/setup.test.ts +0 -2
- package/src/components/core/Button-CTA/__tests__/test-utils.ts +0 -2
- package/src/components/core/Button-CTA/contracts.yaml +6 -29
- package/src/components/core/Button-CTA/examples/BasicUsage.html +2 -14
- package/src/components/core/Button-CTA/examples/BasicUsage.tsx +17 -44
- package/src/components/core/Button-CTA/platforms/android/ButtonCTA.android.kt +12 -20
- package/src/components/core/Button-CTA/platforms/ios/ButtonCTA.ios.swift +12 -51
- package/src/components/core/Button-CTA/platforms/web/ButtonCTA.web.css +2 -26
- package/src/components/core/Button-CTA/platforms/web/ButtonCTA.web.ts +18 -71
- package/src/components/core/Button-CTA/types.ts +10 -28
- package/src/components/core/Chip-Base/__tests__/ChipBase.test.ts +13 -0
- package/src/components/core/Chip-Filter/__tests__/ChipFilter.test.ts +13 -0
- package/src/components/core/Chip-Input/__tests__/ChipInput.test.ts +13 -0
- package/src/components/core/Input-Text-Base/Input-Text-Base.schema.yaml +30 -2
- package/src/components/core/Input-Text-Base/README.md +25 -2
- package/src/components/core/Input-Text-Base/__tests__/focusIndicators.test.ts +16 -15
- package/src/components/core/Input-Text-Base/contracts.yaml +90 -0
- package/src/components/core/Input-Text-Base/platforms/android/InputTextBase.android.kt +26 -12
- package/src/components/core/Input-Text-Base/platforms/ios/InputTextBase.ios.swift +195 -59
- package/src/components/core/Input-Text-Base/types.ts +13 -1
- package/src/components/core/Input-Text-Email/Input-Text-Email.schema.yaml +5 -1
- package/src/components/core/Input-Text-Email/README.md +8 -7
- package/src/components/core/Input-Text-Email/platforms/android/InputTextEmail.android.kt +1 -4
- package/src/components/core/Input-Text-Email/platforms/ios/InputTextEmail.ios.swift +2 -16
- package/src/components/core/Input-Text-Password/Input-Text-Password.schema.yaml +10 -3
- package/src/components/core/Input-Text-Password/README.md +9 -8
- package/src/components/core/Input-Text-Password/contracts.yaml +5 -0
- package/src/components/core/Input-Text-Password/platforms/android/InputTextPassword.android.kt +17 -7
- package/src/components/core/Input-Text-Password/platforms/ios/InputTextPassword.ios.swift +22 -20
- package/src/components/core/Input-Text-Password/platforms/web/InputTextPassword.web.ts +11 -2
- package/src/components/core/Input-Text-PhoneNumber/Input-Text-PhoneNumber.schema.yaml +5 -1
- package/src/components/core/Input-Text-PhoneNumber/README.md +9 -8
- package/src/components/core/Input-Text-PhoneNumber/platforms/android/InputTextPhoneNumber.android.kt +2 -5
- package/src/components/core/Input-Text-PhoneNumber/platforms/ios/InputTextPhoneNumber.ios.swift +3 -17
- package/src/components/core/Nav-Header-App/contracts.yaml +1 -1
- package/src/components/core/Nav-SegmentedChoice-Base/contracts.yaml +1 -1
- package/src/components/core/Progress-Indicator-Connector-Base/contracts.yaml +1 -1
- package/src/components/core/Progress-Indicator-Label-Base/contracts.yaml +1 -1
- package/src/components/core/Progress-Indicator-Node-Base/contracts.yaml +1 -1
- package/src/components/core/Progress-Stepper-Base/__tests__/StepperBase.test.ts +5 -2
- package/src/components/core/Progress-Stepper-Detailed/__tests__/StepperDetailed.test.ts +5 -2
- package/src/generators/DTCGFormatGenerator.ts +6 -0
- package/src/generators/__tests__/DTCGConfigOptions.test.ts +14 -5
- package/src/integration/BuildErrorHandler.ts +2 -2
- package/src/tokens/OpacityTokens.ts +1 -1
- package/src/tokens/__tests__/OpacityTokens.test.ts +3 -1
- package/src/tokens/semantic/BlendTokens.ts +26 -5
- package/src/tokens/semantic/OpacityTokens.ts +4 -4
- package/src/tools/release/__tests__/ReleasePipeline.test.ts +1 -1
- package/src/types/ComponentTypes.ts +1 -1
- package/src/types/generated/TokenTypes.ts +1 -1
- package/src/validators/StemmaTokenUsageValidator.ts +3 -2
- package/token-index/semantics.yaml +1 -2
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-badge
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Badge
|
|
5
|
-
aliases: badge family work
|
|
6
5
|
description: Badge component family — read-only, non-interactive visual indicators for status, category, or metadata display. Load when working with badge components, status indicators, or notification counts.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-button
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Button
|
|
5
|
-
aliases: button family work
|
|
6
5
|
description: Button component family — ButtonCTA variants, sizes, icon support, interaction states, and platform implementations. Load when working with button components or button behavioral contracts.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -32,7 +31,7 @@ The Buttons family provides interactive components for triggering user actions w
|
|
|
32
31
|
|
|
33
32
|
- **Visual Hierarchy**: Three visual variants (primary, secondary, tertiary) establish clear action hierarchy
|
|
34
33
|
- **Size Variants**: Three sizes (small, medium, large) for different contexts and emphasis levels
|
|
35
|
-
- **Interaction States**: Comprehensive hover, pressed,
|
|
34
|
+
- **Interaction States**: Comprehensive hover, pressed, and loading states (no disabled state — DesignerPunk philosophy)
|
|
36
35
|
- **Accessibility First**: WCAG 2.1 AA compliant with keyboard navigation and screen reader support
|
|
37
36
|
- **Cross-Platform Consistent**: Platform-appropriate feedback (ripple on Android, scale on iOS)
|
|
38
37
|
|
|
@@ -98,7 +97,7 @@ Button-CTA uses the `[Family]-[Type]` pattern without a variant suffix because i
|
|
|
98
97
|
|
|
99
98
|
### Base Contracts
|
|
100
99
|
|
|
101
|
-
All Button-CTA instances implement these
|
|
100
|
+
All Button-CTA instances implement these 6 foundational contracts:
|
|
102
101
|
|
|
103
102
|
| Contract | Description | WCAG | Platforms |
|
|
104
103
|
|----------|-------------|------|-----------|
|
|
@@ -106,7 +105,6 @@ All Button-CTA instances implement these 7 foundational contracts:
|
|
|
106
105
|
| `pressable` | Responds to press/click events | 2.1.1 | web, ios, android |
|
|
107
106
|
| `hover_state` | Visual feedback on hover (desktop) | 1.4.13 | web |
|
|
108
107
|
| `pressed_state` | Visual feedback when pressed | 2.4.7 | web, ios, android |
|
|
109
|
-
| `disabled_state` | Prevents interaction when disabled | 4.1.2 | web, ios, android |
|
|
110
108
|
| `loading_state` | Shows loading indicator during async | 4.1.3 | web, ios, android |
|
|
111
109
|
| `focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
|
|
112
110
|
|
|
@@ -116,7 +114,7 @@ All Button-CTA instances implement these 7 foundational contracts:
|
|
|
116
114
|
|
|
117
115
|
**Description**: Component can receive keyboard focus via Tab key navigation.
|
|
118
116
|
|
|
119
|
-
**Behavior**: Focus state is visually indicated with a focus ring.
|
|
117
|
+
**Behavior**: Focus state is visually indicated with a focus ring.
|
|
120
118
|
|
|
121
119
|
**WCAG Compliance**: 2.1.1 Keyboard, 2.4.7 Focus Visible
|
|
122
120
|
|
|
@@ -124,7 +122,7 @@ All Button-CTA instances implement these 7 foundational contracts:
|
|
|
124
122
|
|
|
125
123
|
**Description**: Component responds to click, tap, Enter key, and Space key.
|
|
126
124
|
|
|
127
|
-
**Behavior**: Press triggers the onPress callback
|
|
125
|
+
**Behavior**: Press triggers the onPress callback. Platform-appropriate feedback is provided during press (ripple on Android, scale on iOS).
|
|
128
126
|
|
|
129
127
|
**WCAG Compliance**: 2.1.1 Keyboard
|
|
130
128
|
|
|
@@ -144,14 +142,6 @@ All Button-CTA instances implement these 7 foundational contracts:
|
|
|
144
142
|
|
|
145
143
|
**WCAG Compliance**: 2.4.7 Focus Visible
|
|
146
144
|
|
|
147
|
-
#### disabled_state
|
|
148
|
-
|
|
149
|
-
**Description**: Prevents interaction when disabled.
|
|
150
|
-
|
|
151
|
-
**Behavior**: When disabled, component cannot receive focus, cannot be clicked/tapped, uses desaturated colors (`blend.disabledDesaturate` - 12% less saturated), shows `cursor: not-allowed` (web), and communicates disabled state to assistive technology.
|
|
152
|
-
|
|
153
|
-
**WCAG Compliance**: 4.1.2 Name, Role, Value
|
|
154
|
-
|
|
155
145
|
#### focus_ring
|
|
156
146
|
|
|
157
147
|
**Description**: WCAG 2.4.7 focus visible indicator.
|
|
@@ -179,7 +169,6 @@ All Button-CTA instances implement these 7 foundational contracts:
|
|
|
179
169
|
| `variant` | `'primary' \| 'secondary' \| 'tertiary'` | No | `'primary'` | Visual variant for hierarchy |
|
|
180
170
|
| `icon` | `IconName` | No | - | Optional leading icon |
|
|
181
171
|
| `noWrap` | `boolean` | No | `false` | Truncate text instead of wrapping |
|
|
182
|
-
| `disabled` | `boolean` | No | `false` | Disabled state |
|
|
183
172
|
| `onPress` | `() => void` | Yes | - | Press callback |
|
|
184
173
|
| `testID` | `string` | No | - | Test identifier |
|
|
185
174
|
|
|
@@ -503,7 +492,6 @@ Button components rely on three semantic concepts:
|
|
|
503
492
|
| Icon | `icon.size100`, `icon.size125` | Icon sizing |
|
|
504
493
|
| Blend | `blend.hoverDarker` | Hover state (8% darker) |
|
|
505
494
|
| Blend | `blend.pressedDarker` | Pressed state (12% darker) |
|
|
506
|
-
| Blend | `blend.disabledDesaturate` | Disabled state (12% less saturated) |
|
|
507
495
|
|
|
508
496
|
**Why Semantic Concept Tokens**:
|
|
509
497
|
- **Action concept**: `color.action.primary` clearly indicates emphasized interactive elements
|
|
@@ -650,7 +638,6 @@ iOS uses scale transforms + color blends for all press feedback. The ripple dist
|
|
|
650
638
|
|
|
651
639
|
All platforms implement the same behavioral contracts:
|
|
652
640
|
- Press feedback timing matches across platforms
|
|
653
|
-
- Disabled state appearance is mathematically equivalent
|
|
654
641
|
- Focus ring appearance is consistent
|
|
655
642
|
- Touch targets meet platform guidelines
|
|
656
643
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-chip
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Chip
|
|
5
|
-
aliases: chip family work
|
|
6
5
|
description: Chip component family — compact, interactive elements for filtering, selection, or input management (tags, toggles). Load when working with chip components, filter controls, or tag inputs.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-container
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Container
|
|
5
|
-
aliases: container family work
|
|
6
5
|
description: Container component family — layout and content organization with granular styling props (padding, background, shadow, border, radius, opacity, layering) and semantic HTML support. Load when working with container components or layout composition.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-data-display
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Data-Display
|
|
5
|
-
aliases: data display family work
|
|
6
5
|
description: Data Display component family (placeholder) — planned components for structured information presentation including text formatting, lists, tables, and media display. Load when planning data display components or reviewing family architecture.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -14,7 +13,7 @@ description: Data Display component family (placeholder) — planned components
|
|
|
14
13
|
**Scope**: cross-project
|
|
15
14
|
**Layer**: 3
|
|
16
15
|
**Relevant Tasks**: component-development, architecture-planning
|
|
17
|
-
**Last Reviewed**: 2026-
|
|
16
|
+
**Last Reviewed**: 2026-07-08
|
|
18
17
|
|
|
19
18
|
---
|
|
20
19
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-divider
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Divider
|
|
5
|
-
aliases: divider family work
|
|
6
5
|
description: Divider component family (placeholder) — planned components for visual separation between content sections with horizontal and vertical orientations. Load when planning divider components or reviewing family architecture.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -14,7 +13,7 @@ description: Divider component family (placeholder) — planned components for v
|
|
|
14
13
|
**Scope**: cross-project
|
|
15
14
|
**Layer**: 3
|
|
16
15
|
**Relevant Tasks**: component-development, architecture-planning
|
|
17
|
-
**Last Reviewed**: 2026-
|
|
16
|
+
**Last Reviewed**: 2026-07-08
|
|
18
17
|
|
|
19
18
|
---
|
|
20
19
|
|
|
@@ -3,7 +3,7 @@ id: component-family-form-inputs
|
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Form-Inputs
|
|
5
5
|
description: Form Inputs component family — text input (float label pattern), checkbox, and radio components with built-in validation, accessibility, and cross-platform consistency. Load when working with form components, input validation, or selection controls.
|
|
6
|
-
aliases:
|
|
6
|
+
aliases: textfield, text field, textbox, form field, input field, form controls
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# Form Inputs Components
|
|
@@ -14,7 +14,7 @@ aliases: RTL, internationalization, i18n, bidi, right-to-left, text direction
|
|
|
14
14
|
**Scope**: cross-project
|
|
15
15
|
**Layer**: 3
|
|
16
16
|
**Relevant Tasks**: component-development, ui-composition, component-implementation
|
|
17
|
-
**Last Reviewed**: 2026-02
|
|
17
|
+
**Last Reviewed**: 2026-08-02
|
|
18
18
|
|
|
19
19
|
---
|
|
20
20
|
|
|
@@ -102,7 +102,7 @@ Input-Radio-Base (Primitive)
|
|
|
102
102
|
|
|
103
103
|
### Text Input Base Contracts (Inherited by Text Input Components)
|
|
104
104
|
|
|
105
|
-
All text input components in the Form Inputs family inherit these
|
|
105
|
+
All text input components in the Form Inputs family inherit these 8 foundational contracts from Input-Text-Base:
|
|
106
106
|
|
|
107
107
|
| Contract | Description | WCAG | Platforms |
|
|
108
108
|
|----------|-------------|------|-----------|
|
|
@@ -111,11 +111,12 @@ All text input components in the Form Inputs family inherit these 9 foundational
|
|
|
111
111
|
| `validates_on_blur` | Validation triggers on blur | 3.3.1 | web, ios, android |
|
|
112
112
|
| `error_state_display` | Shows error message and styling | 3.3.1, 1.4.1 | web, ios, android |
|
|
113
113
|
| `success_state_display` | Shows success styling | 1.4.1 | web, ios, android |
|
|
114
|
-
| `disabled_state` | Prevents interaction when disabled | 4.1.2 | web, ios, android |
|
|
115
114
|
| `trailing_icon_display` | Shows contextual trailing icons | 1.4.1 | web, ios, android |
|
|
116
115
|
| `focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
|
|
117
116
|
| `reduced_motion_support` | Respects prefers-reduced-motion | 2.3.3 | web, ios, android |
|
|
118
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`).
|
|
119
|
+
|
|
119
120
|
### Contract Details
|
|
120
121
|
|
|
121
122
|
#### focusable
|
|
@@ -908,7 +909,6 @@ Components in the Form Inputs family consume these design tokens:
|
|
|
908
909
|
| Accessibility | `accessibility.focus.color` | Focus ring color |
|
|
909
910
|
| Icon | `icon.size100` | Icon size |
|
|
910
911
|
| Blend | `blend.focusSaturate` | Focus state saturation |
|
|
911
|
-
| Blend | `blend.disabledDesaturate` | Disabled state desaturation |
|
|
912
912
|
|
|
913
913
|
#### Checkbox Tokens
|
|
914
914
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-icon
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Icon
|
|
5
|
-
aliases: icon family work
|
|
6
5
|
description: Icon component family — inline SVG icons with automatic color inheritance and typography-aligned sizing across 11 size variants. Load when working with icon components, icon sizing, or icon color integration.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -14,7 +13,7 @@ description: Icon component family — inline SVG icons with automatic color inh
|
|
|
14
13
|
**Scope**: cross-project
|
|
15
14
|
**Layer**: 3
|
|
16
15
|
**Relevant Tasks**: component-development, ui-composition, component-implementation
|
|
17
|
-
**Last Reviewed**: 2026-
|
|
16
|
+
**Last Reviewed**: 2026-07-08
|
|
18
17
|
|
|
19
18
|
---
|
|
20
19
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-loading
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Loading
|
|
5
|
-
aliases: loading family work
|
|
6
5
|
description: Loading component family (placeholder) — planned components for progress indication including indeterminate spinners, determinate progress bars, and skeleton placeholders. Load when planning loading components or reviewing family architecture.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -14,7 +13,7 @@ description: Loading component family (placeholder) — planned components for p
|
|
|
14
13
|
**Scope**: cross-project
|
|
15
14
|
**Layer**: 3
|
|
16
15
|
**Relevant Tasks**: component-development, architecture-planning
|
|
17
|
-
**Last Reviewed**: 2026-
|
|
16
|
+
**Last Reviewed**: 2026-07-08
|
|
18
17
|
|
|
19
18
|
---
|
|
20
19
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-modal
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Modal
|
|
5
|
-
aliases: modal family work
|
|
6
5
|
description: Modal component family (placeholder) — planned overlay components for focused user interactions with focus trapping, backdrop interactions, and accessible dismissal patterns. Load when planning modal components or reviewing family architecture.
|
|
7
6
|
---
|
|
8
7
|
|
|
@@ -14,7 +13,7 @@ description: Modal component family (placeholder) — planned overlay components
|
|
|
14
13
|
**Scope**: cross-project
|
|
15
14
|
**Layer**: 3
|
|
16
15
|
**Relevant Tasks**: component-development, architecture-planning
|
|
17
|
-
**Last Reviewed**: 2026-
|
|
16
|
+
**Last Reviewed**: 2026-07-08
|
|
18
17
|
|
|
19
18
|
---
|
|
20
19
|
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
id: component-family-navigation
|
|
3
3
|
inclusion: manual
|
|
4
4
|
name: Component-Family-Navigation
|
|
5
|
-
aliases: navigation family work
|
|
6
5
|
description: Navigation component family — wayfinding and view-switching components including segmented controls and tab bars. Load when building navigation components or reviewing family architecture.
|
|
7
6
|
---
|
|
8
7
|
|