@3fn/core 13.0.0 → 14.1.0

package/dist/tokens/semantic/OpacityTokens.d.ts

@@ -6,10 +6,10 @@
  * the design system while maintaining semantic meaning.
  *
  * Opacity values:
- * - subtle: 0.9 (90%) - Minimal transparency for subtle effects
- * - medium: 0.7 (70%) - Moderate transparency for overlays
- * - heavy: 0.5 (50%) - Strong transparency for backgrounds
- * - ghost: 0.3 (30%) - Maximum transparency for ghost effects
+ * - subtle: opacity088 (88%) - Minimal transparency for subtle effects
+ * - medium: opacity072 (72%) - Moderate transparency for overlays
+ * - heavy: opacity048 (48%) - Strong transparency for backgrounds
+ * - ghost: opacity032 (32%) - Maximum transparency for ghost effects
  *
  * All opacity tokens reference primitive opacity values that can be applied
  * to any color or surface for consistent transparency effects.

package/dist/tokens/semantic/OpacityTokens.js

@@ -7,10 +7,10 @@
  * the design system while maintaining semantic meaning.
  *
  * Opacity values:
- * - subtle: 0.9 (90%) - Minimal transparency for subtle effects
- * - medium: 0.7 (70%) - Moderate transparency for overlays
- * - heavy: 0.5 (50%) - Strong transparency for backgrounds
- * - ghost: 0.3 (30%) - Maximum transparency for ghost effects
+ * - subtle: opacity088 (88%) - Minimal transparency for subtle effects
+ * - medium: opacity072 (72%) - Moderate transparency for overlays
+ * - heavy: opacity048 (48%) - Strong transparency for backgrounds
+ * - ghost: opacity032 (32%) - Maximum transparency for ghost effects
  *
  * All opacity tokens reference primitive opacity values that can be applied
  * to any color or surface for consistent transparency effects.

package/dist/types/ComponentTypes.d.ts

@@ -64,7 +64,7 @@
  * }
  * ```
  *
- * @see {@link https://github.com/3fn/DesignerPunkv2/blob/main/.kiro/specs/011-inset-token-renaming/design.md | Inset Token Renaming Design}
+ * @see {@link https://github.com/3fn/DesignerPunk/blob/main/.kiro/specs/011-inset-token-renaming/design.md | Inset Token Renaming Design}
  */
 export type InsetPadding = 'inset050' | 'inset100' | 'inset150' | 'inset200' | 'inset300' | 'inset400';
 //# sourceMappingURL=ComponentTypes.d.ts.map

package/dist/types/generated/TokenTypes.d.ts

@@ -6,7 +6,7 @@
  *
  * To regenerate: npm run generate:types
  *
- * Generated: 2026-07-05T14:35:59.520Z
+ * Generated: 2026-08-26T14:15:23.873Z
  */
 /**
  * Union type of all semantic color token names

package/dist/types/generated/TokenTypes.js

@@ -7,7 +7,7 @@
  *
  * To regenerate: npm run generate:types
  *
- * Generated: 2026-07-05T14:35:59.520Z
+ * Generated: 2026-08-26T14:15:23.873Z
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isColorTokenName = isColorTokenName;

package/dist/validators/StemmaTokenUsageValidator.js

@@ -208,9 +208,10 @@ exports.TOKEN_CATEGORIES = {
         'border.default', 'border.strong',
         'radius.100', 'radius.150', 'radius.200',
     ],
+    // blend.disabledDesaturate removed 2026-07-15: deprecated (no-disabled-states
+    // philosophy) — the validator must not suggest it for new component work
     blend: [
-        'blend.hoverDarker', 'blend.pressedDarker',
-        'blend.disabledDesaturate', 'blend.iconLighter',
+        'blend.hoverDarker', 'blend.pressedDarker', 'blend.iconLighter',
     ],
 };
 /**

package/dist/web/DesignTokens.web.css

@@ -1,6 +1,6 @@
 /**
  * DesignerPunk Design System - Web Tokens
- * Generated: 2026-07-05T13:53:05.410Z
+ * Generated: 2026-08-26T02:25:48.240Z
  * Version: 1.0.0
  * Platform: Web (CSS Custom Properties)
  *

package/governance/BUILD-SYSTEM-SETUP.md

@@ -125,7 +125,7 @@ The `build:verify` script (`verify-build.js`) checks that:
 
 ### You DON'T need to build when:
 - Running tests with `npm test` (ts-jest handles compilation)
-- Using CLI tools that run via tsx (e.g., the release tool: `npx tsx src/tools/release/cli/release-tool.ts analyze`)
+- Using CLI tools that run via tsx (e.g., the agent generator: `npx tsx tools/agent-generator/generate.ts`)
 - Making changes and running tests immediately
 
 ## Development Workflow
@@ -215,7 +215,6 @@ The build system now enforces full TypeScript type safety:
 ### Option 1: Separate Build Configs
 Create separate `tsconfig.json` files for different parts of the codebase:
 - `tsconfig.tokens.json` - Just token generation code
-- `tsconfig.release.json` - Release analysis code
 
 ### Module-resolution direction (settled — Spec 118)
 *(Supersedes the former "Go Full ts-node" option, which is moot: ts-node is retired from the governed surface.)* The settled direction is **compiled-`dist/` for package own code** (Class A — CLI, generators, exports run as compiled JS) and **scoped `tsx`** as the sole runtime-TS mechanism for consumer `.ts` (Class B). See the Rosetta-System-Architecture "Module-Resolution Contract (Spec 118)" for the full contract; full ESM modernization is a separate, externally-triggered future migration tracked in `docs/roadmap/m0a-deferred-items.md`.

package/governance/Component-Development-Guide.md

@@ -61,7 +61,7 @@ description: Guide for building components with appropriate token usage, True Na
 4. ✅ **Icon Integration Anti-Patterns** (what NOT to do)
 5. ✅ **Icon Integration Checklist** (verification steps)
 
-**WHEN implementing interaction states (hover, pressed, focus, disabled) THEN read:**
+**WHEN implementing interaction states (hover, pressed, focus) THEN read:**
 1. ✅ **Blend Utility Integration** (how to use blend utilities for state colors)
 2. ✅ **Semantic Blend Token Reference** (which token/function for each state)
 3. ✅ **Blend Utility Anti-Patterns** (what NOT to do - no opacity, no filters)
@@ -433,7 +433,8 @@ export interface ButtonCTAProps {
   variant?: 'primary' | 'secondary' | 'danger';  // ✅ Use variant
   size?: 'small' | 'medium' | 'large';
   icon?: string;
-  disabled?: boolean;
+  // No `disabled` prop — DesignerPunk components do not support disabled
+  // states (see "No Disabled States" under Behavioral Contracts Workflow).
 }
 ```
 
@@ -494,14 +495,27 @@ Author `contracts.yaml` after `types.ts` and before platform implementation. Con
 ### Naming Convention
 
 All contract names follow `{category}_{concept}` in `snake_case`:
-- `interaction_focusable`, `state_disabled`, `accessibility_reduced_motion`
+- `interaction_focusable`, `state_error`, `accessibility_reduced_motion`
 - 10 categories: accessibility, animation, composition, content, interaction, layout, performance, state, validation, visual
 
+### No Disabled States
+
+**DesignerPunk components MUST NOT declare a disabled-state contract.** Per the 2026-07-15 adjudication (`.kiro/issues/button-cta-disabled-state-adjudication.md`), the no-disabled-states philosophy holds corpus-wide with zero exceptions. Every component's `contracts.yaml` MUST instead carry the standardized exclusion block:
+
+```yaml
+excludes:
+  state_disabled:
+    reason: "DesignerPunk does not support disabled states for usability and accessibility reasons. If an action is unavailable, the component should not be rendered."
+    category: state
+```
+
+If an action is temporarily unavailable, use one of these alternatives instead: `state_loading` (in-flight async operation), validate-on-press/validate-on-blur (surface the error rather than disabling the trigger), or don't render the component (no valid path forward). See Component-Templates.md § "No Disabled States — Standardized Exclusion" for the full rationale and reference implementation.
+
 ### Concept Catalog Consultation
 
 Before naming a contract, query the Concept Catalog via MCP:
 ```
-get_section({ path: ".kiro/steering/Contract-System-Reference.md", heading: "Concept Catalog" })
+get_section({ path: "contract-system-reference", heading: "Concept Catalog" })
 ```
 - Use existing catalog concepts whenever possible
 - If a behavior needs a new concept, propose a catalog addition (ballot measure) before using it
@@ -517,7 +531,7 @@ get_section({ path: ".kiro/steering/Contract-System-Reference.md", heading: "Con
 
 For the full contract system (taxonomy, canonical format, classification rules, inheritance patterns):
 ```
-get_document_full({ path: ".kiro/steering/Contract-System-Reference.md" })
+get_document_full({ path: "contract-system-reference" })
 ```
 
 ---
@@ -1036,7 +1050,7 @@ theme.colorActionPrimary
 
 ### Overview
 
-Blend utilities enable components to create new opaque colors for interaction states (hover, pressed, focus, disabled) rather than using opacity-based workarounds. All components should use blend utilities for state color modifications.
+Blend utilities enable components to create new opaque colors for interaction states (hover, pressed, focus) rather than using opacity-based workarounds. All components should use blend utilities for state color modifications.
 
 ### Why Blend Utilities Over CSS Filters
 
@@ -1064,7 +1078,7 @@ Blend utilities enable components to create new opaque colors for interaction st
 
 - Importing `getBlendUtilities()` from the theme-aware blend utilities module
 - Initializing blend utilities in the constructor
-- Calculating state colors (hover, pressed, disabled, icon) in `connectedCallback()`
+- Calculating state colors (hover, pressed, icon) in `connectedCallback()`
 - Applying calculated colors via CSS custom properties
 - Retry pattern for handling CSS custom property timing
 
@@ -1076,7 +1090,6 @@ Blend utilities enable components to create new opaque colors for interaction st
 - Hover state colors (darken or lighten based on background)
 - Pressed state colors (stronger darkening than hover)
 - Focus state colors (increased saturation for emphasis)
-- Disabled state colors (desaturation for muted appearance)
 - Icon optical balance (lightening for visual weight compensation)
 
 ### Web Platform Usage
@@ -1096,7 +1109,6 @@ class MyComponent extends HTMLElement {
     // Calculate state colors
     this._hoverColor = blendUtils.hoverColor(primaryColor);      // 8% darker
     this._pressedColor = blendUtils.pressedColor(primaryColor);  // 12% darker
-    this._disabledColor = blendUtils.disabledColor(primaryColor); // 12% desaturated
     this._focusColor = blendUtils.focusColor(primaryColor);      // 8% more saturated
   }
 }
@@ -1145,7 +1157,6 @@ fun MyComponent(primaryColor: Color) {
 | Hover (dark bg) | `blend.hoverLighter` | `lighterBlend(color, 0.08)` | 8% lighter |
 | Pressed | `blend.pressedDarker` | `pressedColor()` | 12% darker |
 | Focus | `blend.focusSaturate` | `focusColor()` | 8% more saturated |
-| Disabled | `blend.disabledDesaturate` | `disabledColor()` | 12% desaturated |
 | Container hover | `blend.containerHoverDarker` | `darkerBlend(color, 0.04)` | 4% darker |
 | Icon optical | `color.icon.opticalBalance` | `iconColor()` | 8% lighter |
 
@@ -1464,7 +1475,7 @@ All component-scoped CSS custom properties MUST use the `--_[abbrev]-*` naming p
 | Button-CTA | `_cta` | `--_cta-hover-bg`, `--_cta-pressed-bg` |
 | Button-VerticalList-Item | `_vlbi` | `--_vlbi-background`, `--_vlbi-border-color` |
 | ButtonIcon | `_bi` | `--_bi-hover-bg`, `--_bi-icon-color` |
-| Input-Text-Base | `_itb` | `--_itb-focus-color`, `--_itb-disabled-color` |
+| Input-Text-Base | `_itb` | `--_itb-focus-color` |
 
 ### When to Use Each Type
 
@@ -1492,7 +1503,6 @@ All component-scoped CSS custom properties MUST use the `--_[abbrev]-*` naming p
   /* Component-scoped properties - internal, calculated */
   --_cta-hover-bg: /* calculated by blend utilities */;
   --_cta-pressed-bg: /* calculated by blend utilities */;
-  --_cta-disabled-bg: /* calculated by blend utilities */;
 }
 
 .button-cta {
@@ -1866,7 +1876,7 @@ Components come with their own unique properties that might include, but are not
 5. **README** (required) - Create comprehensive component documentation
 6. **HTML Canaries** (required) - Create validation examples
 7. **Implementation** (required) - Build component across platforms
-8. **Dark Mode Token Population** (if component has dark mode differentiation) - Coordinate with Ada to populate the component's semantic color token entries in the dark theme file (`src/tokens/themes/dark/SemanticOverrides.ts`). Identify which tokens need Level 2 overrides (different primitive name in dark mode) and populate those entries. Leave Level 1 tokens (same primitive name, different value per mode) as commented-out — they resolve automatically via primitive dark values. Without this step, the component will silently render light-mode fallback values in dark mode for any tokens that need Level 2 overrides. *(Added by Spec 080, Lina R2 F36)*
+8. **Dark Mode Token Population** (if component has dark mode differentiation) - Coordinate with Ada to populate the component's semantic color token entries in the dark theme file (`src/tokens/themes/dark/SemanticOverrides.ts`). Identify which tokens need Level 2 overrides (different primitive in dark mode) and populate those entries. Leave Level 1 tokens as commented-out — Level 1 means the token deliberately resolves to the *same* value in both modes (primitives have no mode dimension, so a commented-out entry falls back to the base/light reference). Without this step, the component will silently render light-mode fallback values in dark mode for any tokens that need Level 2 overrides. *(Added by Spec 080, Lina R2 F36)*
 9. **Demo Page** (if web implementation) - Create or update demo in `demos/` (see Demo Maintenance Checklist)
 
 This workflow produces clearer requirements, better documentation, and validation that ensures documentation stays accurate.

package/governance/Component-Development-Standards.md

@@ -13,7 +13,7 @@ description: Step-by-step guidelines for creating new component families in the
 **Scope**: cross-project
 **Layer**: 2
 **Relevant Tasks**: component-development, architecture, spec-planning
-**Last Reviewed**: 2026-01-02
+**Last Reviewed**: 2026-07-05
 
 ---
 
@@ -36,7 +36,7 @@ This document provides comprehensive guidelines for creating new component famil
 |-----------|----------|---------|
 | **Shared Purpose** | Do components share a common purpose that doesn't fit existing families? | "Progress indication" doesn't fit Form Inputs or Buttons |
 | **Multiple Variants** | Can you identify at least 3 potential semantic variants? | Loading: Spinner, Progress, Skeleton |
-| **Clear Base Behaviors** | Can you define foundational behaviors that ALL variants share? | All loading indicators: `indicates_loading`, `accessible_label` |
+| **Clear Base Behaviors** | Can you define foundational behaviors that ALL variants share? | All loading indicators: `state_loading`, `accessibility_aria_label` |
 | **Cross-Platform Need** | Is this needed across web, iOS, and Android? | Yes - all platforms need loading indicators |
 
 **Do NOT create a new family when**:
@@ -113,7 +113,7 @@ List the foundational behaviors that ALL semantic variants will inherit.
 **Behavior Identification Checklist**:
 - [ ] What interaction patterns are common to all variants?
 - [ ] What accessibility requirements apply to all variants?
-- [ ] What visual states are shared (focus, error, disabled)?
+- [ ] What visual states are shared (focus, error, loading)?
 - [ ] What token dependencies are universal?
 
 **Template**:
@@ -319,29 +319,28 @@ properties:
     type: string
     required: false
     description: Error message to display
-  disabled:
-    type: boolean
-    required: false
-    default: false
-    description: Whether input is disabled
+  # No disabled prop: disabled states are not supported corpus-wide, zero
+  # exceptions (adjudicated 2026-07-15 — .kiro/issues/button-cta-disabled-state-adjudication.md).
+  # Components declare the standardized `excludes: state_disabled` block in
+  # contracts.yaml instead; use state_loading or validate-on-press/blur.
 
 contracts:
-  - name: focusable
+  - name: interaction_focusable
     description: Can receive keyboard focus via Tab key navigation
     platforms: [web, ios, android]
     required: true
     wcag: "2.1.1"
-  - name: float_label_animation
+  - name: content_float_label
     description: Label animates from placeholder to floating position on focus
     platforms: [web, ios, android]
     required: true
     wcag: "2.3.3"
-  - name: validates_on_blur
+  - name: validation_on_blur
     description: Validation triggers when field loses focus
     platforms: [web, ios, android]
     required: true
     wcag: "3.3.1"
-  - name: error_state_display
+  - name: state_error
     description: Displays error message and visual error indication
     platforms: [web, ios, android]
     required: true
@@ -510,7 +509,6 @@ Add the new family to the Component Family Inheritance Structures document.
 Verify all schemas are valid and complete:
 - [ ] All required fields present
 - [ ] Property types are valid
-- [ ] Contracts reference valid WCAG criteria
 - [ ] Token patterns exist in token system
 - [ ] Platforms list is complete
 
@@ -683,7 +681,6 @@ Complete these checks before starting implementation:
 - [ ] **Schema Location Correct**: `src/components/core/[Component-Name]/[Component-Name].schema.yaml`
 - [ ] **Required Fields Present**: name, type, family, behaviors, properties, contracts, tokens, platforms, readiness
 - [ ] **Property Types Valid**: All properties have valid type definitions
-- [ ] **Contracts Reference WCAG**: Accessibility contracts include WCAG criterion references
 - [ ] **Token Patterns Exist**: All referenced tokens exist in the token system
 - [ ] **Platforms List Complete**: All supported platforms listed (web, ios, android)
 
@@ -803,16 +800,20 @@ This section defines the formal review process for ensuring new component famili
 **Automated Validation Checks**:
 ```yaml
 schema_validation:
+  # Per spec 063, contracts live in contracts.yaml — NOT in the schema. These
+  # five fields are what schema validation actually requires (see
+  # src/__tests__/stemma-system/behavioral-contract-validation.test.ts).
   required_fields:
     - name
     - type
     - family
     - behaviors
-    - properties
-    - contracts
-    - tokens
     - platforms
-    - readiness
+
+  # Authored by convention, but NOT presence-checked by schema validation:
+  #   properties, tokens, readiness (and `inherits` on semantic variants)
+  # Contract-level checks below read the component's contracts.yaml, not the
+  # schema; contracts.yaml must exist and declare at least one contract.
   
   type_validation:
     - type must be: primitive | semantic | standalone
@@ -821,7 +822,7 @@ schema_validation:
   
   contract_validation:
     - Each contract must have: description, platforms, validation
-    - WCAG-referenced contracts must have: wcag field
+    - Allowlisted contracts (exact names + accessibility_*/content_*_label prefixes) must carry a wcag value ('N/A' when genuinely not applicable)
   
   token_validation:
     - All token patterns must exist in token system
@@ -1121,7 +1122,7 @@ test_integration:
 #### Completion Documentation
 
 1. **Create Summary Document**: `docs/specs/[spec-name]/task-N-summary.md`
-2. **Commit Changes**: `./.kiro/hooks/commit-task.sh "Task N Complete: Description"` (runs release analysis automatically)
+2. **Open the Task PR**: `./.kiro/hooks/complete-task.sh "Task N Complete: Description (<spec>)"` — complete at merge; release analysis runs post-merge on `main`
 
 #### Version Impact
 

package/governance/Component-Family-Avatar.md

@@ -2,7 +2,6 @@
 id: component-family-avatar
 inclusion: manual
 name: Component-Family-Avatar
-aliases: avatar family work
 description: Avatar component family — identity representation with shape-based entity differentiation (circle for humans, hexagon for AI agents), image support with loading states and fallback. Load when working with avatar components, identity representation, or user/agent visual differentiation.
 ---
 
@@ -81,13 +80,13 @@ Avatar-Base (Primitive) [IMPLEMENTED]
 
 | Contract | Description | WCAG | Platforms |
 |----------|-------------|------|-----------|
-| `shape_differentiation` | Circle for human, hexagon for agent | 1.4.1 | web, ios, android |
-| `displays_image` | Shows user image when available (human only) | 1.1.1 | web, ios, android |
-| `displays_fallback` | Shows icon when image unavailable or agent type | 1.1.1 | web, ios, android |
+| `visual_entity_shape` | Circle for human, hexagon for agent | 1.4.1 | web, ios, android |
+| `content_displays_image` | Shows user image when available (human only) | 1.1.1 | web, ios, android |
+| `content_displays_fallback` | Shows icon when image unavailable or agent type | 1.1.1 | web, ios, android |
 | `error_handling` | Falls back to icon on image load failure | N/A | web, ios, android |
-| `size_variants` | Supports six size variants (xs-xxl) | N/A | web, ios, android |
-| `interactive_feedback` | Shows hover visual feedback when interactive | N/A | web, ios, android |
-| `decorative_mode` | Hides from screen readers when decorative | 1.1.1 | web, ios, android |
+| `visual_size_variants` | Supports six size variants (xs-xxl) | N/A | web, ios, android |
+| `interaction_hover` | Shows hover visual feedback when interactive | N/A | web, ios, android |
+| `accessibility_decorative_mode` | Hides from screen readers when decorative | 1.1.1 | web, ios, android |
 | `wrapper_delegation` | No onClick/onPress - wrapper handles interaction | 2.1.1 | web, ios, android |
 
 ---

package/governance/Component-Family-Badge.md

@@ -2,7 +2,6 @@
 id: component-family-badge
 inclusion: manual
 name: Component-Family-Badge
-aliases: badge family work
 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.
 ---
 
@@ -78,24 +77,24 @@ Badge (Family)
 
 | Contract | Description | WCAG | Platforms |
 |----------|-------------|------|-----------|
-| displays_label | Renders text label visibly | 1.3.1 | web, ios, android |
-| non_interactive | Does not respond to user interaction | — | web, ios, android |
-| supports_icon | Optionally displays leading icon via Icon-Base | 1.3.1 | web, ios, android |
-| supports_truncation | Truncates with ellipsis when truncate=true; full text accessible | 1.3.1 | web, ios, android |
-| color_contrast | Meets WCAG AA contrast requirements (4.5:1) | 1.4.3 | web, ios, android |
-| text_scaling | Scales proportionally with user font size preferences | 1.4.4 | web, ios, android |
+| content_displays_label | Renders text label visibly | 1.3.1 | web, ios, android |
+| accessibility_non_interactive | Does not respond to user interaction | — | web, ios, android |
+| content_supports_icon | Optionally displays leading icon via Icon-Base | 1.3.1 | web, ios, android |
+| content_truncation | Truncates with ellipsis when truncate=true; full text accessible | 1.3.1 | web, ios, android |
+| accessibility_color_contrast | Meets WCAG AA contrast requirements (4.5:1) | 1.4.3 | web, ios, android |
+| accessibility_text_scaling | Scales proportionally with user font size preferences | 1.4.4 | web, ios, android |
 
 ### Base Contracts (Badge-Count-Base)
 
 | Contract | Description | WCAG | Platforms |
 |----------|-------------|------|-----------|
-| displays_count | Shows numeric value | 1.3.1 | web, ios, android |
-| truncates_at_max | Shows "[max]+" when count exceeds max | 1.3.1 | web, ios, android |
-| circular_single_digit | Renders circular for single-digit counts | — | web, ios, android |
-| pill_multi_digit | Renders pill shape for multi-digit counts | — | web, ios, android |
-| non_interactive | Does not respond to user interaction | — | web, ios, android |
-| color_contrast | Meets WCAG AA contrast requirements (4.5:1) | 1.4.3 | web, ios, android |
-| text_scaling | Scales proportionally with user font size preferences | 1.4.4 | web, ios, android |
+| content_displays_count | Shows numeric value | 1.3.1 | web, ios, android |
+| content_truncates_at_max | Shows "[max]+" when count exceeds max | 1.3.1 | web, ios, android |
+| visual_circular_shape | Renders circular for single-digit counts | — | web, ios, android |
+| visual_pill_shape | Renders pill shape for multi-digit counts | — | web, ios, android |
+| accessibility_non_interactive | Does not respond to user interaction | — | web, ios, android |
+| accessibility_color_contrast | Meets WCAG AA contrast requirements (4.5:1) | 1.4.3 | web, ios, android |
+| accessibility_text_scaling | Scales proportionally with user font size preferences | 1.4.4 | web, ios, android |
 
 ### Extended Contracts (Badge-Count-Notification)
 
@@ -103,13 +102,13 @@ Inherits all contracts from Badge-Count-Base, plus:
 
 | Contract | Description | WCAG | Platforms |
 |----------|-------------|------|-----------|
-| notification_semantics | Conveys notification/alert meaning through color | 1.3.1 | web, ios, android |
-| announces_count_changes | Announces count changes to screen readers when enabled | 4.1.3 | web, ios, android |
-| pluralized_announcements | Uses correct pluralization in announcements | 4.1.3 | web, ios, android |
+| visual_notification_color | Conveys notification/alert meaning through color | 1.3.1 | web, ios, android |
+| accessibility_announces_changes | Announces count changes to screen readers when enabled | 4.1.3 | web, ios, android |
+| accessibility_pluralized_announcements | Uses correct pluralization in announcements | 4.1.3 | web, ios, android |
 
 ### Contract Details
 
-#### displays_label
+#### content_displays_label
 
 **Description**: Renders the provided text label visibly within the badge container.
 
@@ -122,7 +121,7 @@ Inherits all contracts from Badge-Count-Base, plus:
 
 **WCAG Compliance**: 1.3.1 Info and Relationships
 
-#### non_interactive
+#### accessibility_non_interactive
 
 **Description**: Badge components do not respond to user interaction.
 
@@ -133,7 +132,7 @@ Inherits all contracts from Badge-Count-Base, plus:
 - iOS: No onTapGesture, not focusable
 - Android: No clickable modifier, not focusable
 
-#### announces_count_changes
+#### accessibility_announces_changes
 
 **Description**: When count changes and announceChanges is enabled, screen readers are notified.
 

package/governance/Component-Family-Button.md

@@ -2,7 +2,6 @@
 id: component-family-button
 inclusion: manual
 name: Component-Family-Button
-aliases: button family work
 description: Button component family — ButtonCTA variants, sizes, icon support, interaction states, and platform implementations. Load when working with button components or button behavioral contracts.
 ---
 
@@ -32,7 +31,7 @@ The Buttons family provides interactive components for triggering user actions w
 
 - **Visual Hierarchy**: Three visual variants (primary, secondary, tertiary) establish clear action hierarchy
 - **Size Variants**: Three sizes (small, medium, large) for different contexts and emphasis levels
-- **Interaction States**: Comprehensive hover, pressed, disabled, and loading states
+- **Interaction States**: Comprehensive hover, pressed, and loading states (no disabled state — DesignerPunk philosophy)
 - **Accessibility First**: WCAG 2.1 AA compliant with keyboard navigation and screen reader support
 - **Cross-Platform Consistent**: Platform-appropriate feedback (ripple on Android, scale on iOS)
 
@@ -98,37 +97,36 @@ Button-CTA uses the `[Family]-[Type]` pattern without a variant suffix because i
 
 ### Base Contracts
 
-All Button-CTA instances implement these 7 foundational contracts:
+All Button-CTA instances implement these 6 foundational contracts:
 
 | Contract | Description | WCAG | Platforms |
 |----------|-------------|------|-----------|
-| `focusable` | Can receive keyboard focus | 2.1.1, 2.4.7 | web, ios, android |
-| `pressable` | Responds to press/click events | 2.1.1 | web, ios, android |
-| `hover_state` | Visual feedback on hover (desktop) | 1.4.13 | web |
-| `pressed_state` | Visual feedback when pressed | 2.4.7 | web, ios, android |
-| `disabled_state` | Prevents interaction when disabled | 4.1.2 | web, ios, android |
-| `loading_state` | Shows loading indicator during async | 4.1.3 | web, ios, android |
-| `focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
+| `interaction_focusable` | Can receive keyboard focus | 2.1.1, 2.4.7 | web, ios, android |
+| `interaction_pressable` | Responds to press/click events | 2.1.1 | web, ios, android |
+| `interaction_hover` | Visual feedback on hover (desktop) | 1.4.13 | web |
+| `interaction_pressed` | Visual feedback when pressed | 2.4.7 | web, ios, android |
+| `state_loading` | Shows loading indicator during async | 4.1.3 | web, ios, android |
+| `interaction_focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 | web, ios, android |
 
 ### Contract Details
 
-#### focusable
+#### interaction_focusable
 
 **Description**: Component can receive keyboard focus via Tab key navigation.
 
-**Behavior**: Focus state is visually indicated with a focus ring. Focus is managed appropriately when disabled state changes. Disabled buttons are not keyboard focusable.
+**Behavior**: Focus state is visually indicated with a focus ring.
 
 **WCAG Compliance**: 2.1.1 Keyboard, 2.4.7 Focus Visible
 
-#### pressable
+#### interaction_pressable
 
 **Description**: Component responds to click, tap, Enter key, and Space key.
 
-**Behavior**: Press triggers the onPress callback when not disabled. Platform-appropriate feedback is provided during press (ripple on Android, scale on iOS).
+**Behavior**: Press triggers the onPress callback. Platform-appropriate feedback is provided during press (ripple on Android, scale on iOS).
 
 **WCAG Compliance**: 2.1.1 Keyboard
 
-#### hover_state
+#### interaction_hover
 
 **Description**: Visual feedback on hover (desktop only).
 
@@ -136,7 +134,7 @@ All Button-CTA instances implement these 7 foundational contracts:
 
 **WCAG Compliance**: 1.4.13 Content on Hover or Focus
 
-#### pressed_state
+#### interaction_pressed
 
 **Description**: Visual feedback when pressed.
 
@@ -144,15 +142,7 @@ All Button-CTA instances implement these 7 foundational contracts:
 
 **WCAG Compliance**: 2.4.7 Focus Visible
 
-#### disabled_state
-
-**Description**: Prevents interaction when disabled.
-
-**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.
-
-**WCAG Compliance**: 4.1.2 Name, Role, Value
-
-#### focus_ring
+#### interaction_focus_ring
 
 **Description**: WCAG 2.4.7 focus visible indicator.
 
@@ -179,7 +169,6 @@ All Button-CTA instances implement these 7 foundational contracts:
 | `variant` | `'primary' \| 'secondary' \| 'tertiary'` | No | `'primary'` | Visual variant for hierarchy |
 | `icon` | `IconName` | No | - | Optional leading icon |
 | `noWrap` | `boolean` | No | `false` | Truncate text instead of wrapping |
-| `disabled` | `boolean` | No | `false` | Disabled state |
 | `onPress` | `() => void` | Yes | - | Press callback |
 | `testID` | `string` | No | - | Test identifier |
 
@@ -303,14 +292,14 @@ Container component that orchestrates selection behavior across child Button-Ver
 
 | Contract | Description | WCAG |
 |----------|-------------|------|
-| `mode_driven` | Behavior determined by mode prop | - |
-| `controlled_state` | Selection state managed by parent via props | - |
-| `state_coordination` | Derives and propagates visual states to children | - |
+| `state_mode_driven` | Behavior determined by mode prop | - |
+| `state_controlled` | Selection state managed by parent via props | - |
+| `composition_state_coordination` | Derives and propagates visual states to children | - |
 | `animation_coordination` | Coordinates transition timing across children | 2.3.3 |
-| `keyboard_navigation` | Arrow keys, Home, End, Enter, Space support | 2.1.1 |
-| `roving_tabindex` | Single tab stop with arrow key navigation | 2.4.3 |
-| `error_propagation` | Error state propagates to all children | 3.3.1 |
-| `aria_roles` | Appropriate ARIA roles based on mode | 4.1.2 |
+| `interaction_keyboard_navigation` | Arrow keys, Home, End, Enter, Space support | 2.1.1 |
+| `interaction_roving_tabindex` | Single tab stop with arrow key navigation | 2.4.3 |
+| `composition_error_propagation` | Error state propagates to all children | 3.3.1 |
+| `accessibility_aria_roles` | Appropriate ARIA roles based on mode | 4.1.2 |
 
 #### Usage Example
 
@@ -394,14 +383,14 @@ Presentational button component for vertical list selection patterns. Renders vi
 
 | Contract | Description | WCAG |
 |----------|-------------|------|
-| `focusable` | Can receive keyboard focus | 2.1.1, 2.4.7 |
-| `pressable` | Responds to press/click events | 2.1.1 |
-| `hover_state` | Visual feedback on hover | 1.4.13 |
-| `pressed_state` | Visual feedback when pressed | 2.4.7 |
-| `visual_state_driven` | Renders appearance based on visualState prop | - |
-| `checkmark_animation` | Animated selection indicator | 2.3.3 |
-| `error_state_display` | Shows error styling when error=true | 3.3.1 |
-| `focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 |
+| `interaction_focusable` | Can receive keyboard focus | 2.1.1, 2.4.7 |
+| `interaction_pressable` | Responds to press/click events | 2.1.1 |
+| `interaction_hover` | Visual feedback on hover | 1.4.13 |
+| `interaction_pressed` | Visual feedback when pressed | 2.4.7 |
+| `state_visual_driven` | Renders appearance based on visualState prop | - |
+| `animation_checkmark` | Animated selection indicator | 2.3.3 |
+| `state_error` | Shows error styling when error=true | 3.3.1 |
+| `interaction_focus_ring` | WCAG 2.4.7 focus visible indicator | 2.4.7 |
 
 #### Usage Example
 
@@ -503,7 +492,6 @@ Button components rely on three semantic concepts:
 | Icon | `icon.size100`, `icon.size125` | Icon sizing |
 | Blend | `blend.hoverDarker` | Hover state (8% darker) |
 | Blend | `blend.pressedDarker` | Pressed state (12% darker) |
-| Blend | `blend.disabledDesaturate` | Disabled state (12% less saturated) |
 
 **Why Semantic Concept Tokens**:
 - **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
 
 All platforms implement the same behavioral contracts:
 - Press feedback timing matches across platforms
-- Disabled state appearance is mathematically equivalent
 - Focus ring appearance is consistent
 - Touch targets meet platform guidelines