@3fn/core 13.0.0 → 14.1.0

package/src/components/core/Button-CTA/__tests__/ButtonCTA.test.ts

@@ -7,7 +7,7 @@
  * Unit tests for Button-CTA component rendering
  * 
  * Tests component rendering with various props, size variants, variant styles,
- * icon integration, text wrapping, and disabled state.
+ * icon integration, and text wrapping.
  * 
  * Stemma System Naming: [Family]-[Type] = Button-CTA
  * Component Type: Standalone (no behavioral variants)
@@ -66,7 +66,6 @@ describe('Button-CTA Component Rendering', () => {
     buttonVariant?: 'primary' | 'secondary' | 'tertiary';
     icon?: string;
     noWrap?: boolean;
-    disabled?: boolean;
     testID?: string;
   }): ButtonCTA {
     // Create element - constructor runs and attaches shadow DOM
@@ -78,7 +77,6 @@ describe('Button-CTA Component Rendering', () => {
     if (props.buttonVariant) button.buttonVariant = props.buttonVariant;
     if (props.icon) button.icon = props.icon;
     if (props.noWrap !== undefined) button.noWrap = props.noWrap;
-    if (props.disabled !== undefined) button.disabled = props.disabled;
     if (props.testID) button.testID = props.testID;
     
     // Append to container
@@ -287,40 +285,48 @@ describe('Button-CTA Component Rendering', () => {
     });
   });
   
-  describe('Disabled State', () => {
-    it('should render disabled button with correct attributes', () => {
-      // Requirement: Disabled prop prevents interaction
-      const button = createButton({ label: 'Disabled Button', disabled: true });
-      
-      const shadowButton = button.shadowRoot?.querySelector('button');
-      expect(shadowButton?.hasAttribute('disabled')).toBe(true);
-      expect(shadowButton?.getAttribute('aria-disabled')).toBe('true');
-      expect(shadowButton?.className).toContain('button-cta--disabled');
+  describe('No Disabled State (philosophy exclusion)', () => {
+    // DesignerPunk does not support disabled states: if an action is
+    // unavailable, the component should not be rendered. state_disabled was
+    // removed from Button-CTA per the 2026-07-15 adjudication; these tests
+    // guard against the disabled state resurfacing.
+
+    it('should declare state_disabled under excludes (not contracts) in contracts.yaml', () => {
+      const fs = require('fs');
+      const path = require('path');
+      const contractsContent = fs.readFileSync(
+        path.join(__dirname, '../contracts.yaml'),
+        'utf-8'
+      );
+
+      const contractsSection = contractsContent.split(/^excludes:/m)[0];
+      const excludesSection = contractsContent.split(/^excludes:/m)[1] ?? '';
+      expect(contractsSection).not.toContain('state_disabled');
+      expect(excludesSection).toContain('state_disabled');
     });
-    
-    it('should not have disabled attributes when disabled is false', () => {
-      // Requirement: Enabled button is interactive
-      const button = createButton({ label: 'Enabled Button', disabled: false });
-      
-      const shadowButton = button.shadowRoot?.querySelector('button');
-      expect(shadowButton?.hasAttribute('disabled')).toBe(false);
-      expect(shadowButton?.getAttribute('aria-disabled')).toBe('false');
-      expect(shadowButton?.className).not.toContain('button-cta--disabled');
+
+    it('should not expose a disabled property or observe a disabled attribute', () => {
+      expect(ButtonCTA.observedAttributes).not.toContain('disabled');
+
+      const button = createButton({ label: 'Button' });
+      expect('disabled' in button).toBe(false);
     });
-    
-    it('should prevent press event when disabled', () => {
-      // Requirement: Disabled button doesn't trigger onPress
-      const button = createButton({ label: 'Disabled Button', disabled: true });
-      
+
+    it('should ignore a disabled attribute set by consumers', () => {
+      const button = createButton({ label: 'Button' });
+      button.setAttribute('disabled', '');
+
       let pressCount = 0;
       button.addEventListener('press', () => {
         pressCount++;
       });
-      
+
       const shadowButton = button.shadowRoot?.querySelector('button');
+      expect(shadowButton?.hasAttribute('disabled')).toBe(false);
+      expect(shadowButton?.className).not.toContain('button-cta--disabled');
+
       shadowButton?.click();
-      
-      expect(pressCount).toBe(0);
+      expect(pressCount).toBe(1);
     });
   });
   
@@ -409,21 +415,6 @@ describe('Button-CTA Component Rendering', () => {
       expect(pressCount).toBe(1);
     });
     
-    it('should NOT call onPress when button disabled', () => {
-      // Requirement 15.1: Disabled button doesn't trigger onPress
-      const button = createButton({ label: 'Disabled Button', disabled: true });
-      
-      let pressCount = 0;
-      button.addEventListener('press', () => {
-        pressCount++;
-      });
-      
-      const shadowButton = button.shadowRoot?.querySelector('button');
-      shadowButton?.click();
-      
-      expect(pressCount).toBe(0);
-    });
-    
     it('should receive focus via Tab key', () => {
       // Requirement 15.2: Button is keyboard focusable
       const button = createButton({ label: 'Focusable Button' });
@@ -647,19 +638,6 @@ describe('Button-CTA Component Rendering', () => {
       expect(shadowButton?.getAttribute('role')).toBe('button');
       expect(shadowButton?.getAttribute('aria-label')).toBe('Accessible Button');
       expect(shadowButton?.getAttribute('type')).toBe('button');
-      expect(shadowButton?.getAttribute('aria-disabled')).toBe('false');
-    });
-    
-    it('should have proper ARIA attributes when disabled', () => {
-      // Requirement 12.6: Disabled button has correct ARIA attributes
-      const button = createButton({ label: 'Disabled Button', disabled: true });
-      
-      const shadowButton = button.shadowRoot?.querySelector('button');
-      
-      // Verify disabled ARIA attributes
-      expect(shadowButton?.getAttribute('role')).toBe('button');
-      expect(shadowButton?.getAttribute('aria-disabled')).toBe('true');
-      expect(shadowButton?.hasAttribute('disabled')).toBe(true);
     });
     
     it('should support keyboard navigation with Enter key', () => {
@@ -716,37 +694,5 @@ describe('Button-CTA Component Rendering', () => {
       expect(pressCount).toBe(1);
     });
     
-    it('should not activate on keyboard when disabled', () => {
-      // Requirement 15.4: Disabled button doesn't respond to keyboard
-      const button = createButton({ label: 'Disabled Keyboard', disabled: true });
-      
-      let pressCount = 0;
-      button.addEventListener('press', () => {
-        pressCount++;
-      });
-      
-      const shadowButton = button.shadowRoot?.querySelector('button');
-      shadowButton?.focus();
-      
-      // Try Enter key
-      const enterEvent = new KeyboardEvent('keydown', {
-        key: 'Enter',
-        code: 'Enter',
-        bubbles: true,
-        cancelable: true
-      });
-      shadowButton?.dispatchEvent(enterEvent);
-      
-      // Try Space key
-      const spaceEvent = new KeyboardEvent('keydown', {
-        key: ' ',
-        code: 'Space',
-        bubbles: true,
-        cancelable: true
-      });
-      shadowButton?.dispatchEvent(spaceEvent);
-      
-      expect(pressCount).toBe(0);
-    });
   });
 });

package/src/components/core/Button-CTA/__tests__/setup.test.ts

@@ -123,7 +123,6 @@ describe('Button-CTA Test Infrastructure Setup', () => {
         buttonVariant: 'secondary',
         icon: 'arrow-right',
         noWrap: true,
-        disabled: false,
         testID: 'test-button'
       });
       
@@ -132,7 +131,6 @@ describe('Button-CTA Test Infrastructure Setup', () => {
       expect(button.buttonVariant).toBe('secondary');
       expect(button.icon).toBe('arrow-right');
       expect(button.noWrap).toBe(true);
-      expect(button.disabled).toBe(false);
       expect(button.testID).toBe('test-button');
     });
     

package/src/components/core/Button-CTA/__tests__/test-utils.ts

@@ -96,7 +96,6 @@ export async function createButtonCTA(props: {
   buttonVariant?: 'primary' | 'secondary' | 'tertiary';
   icon?: string;
   noWrap?: boolean;
-  disabled?: boolean;
   testID?: string;
 }): Promise<ButtonCTA> {
   registerButtonCTA();
@@ -109,7 +108,6 @@ export async function createButtonCTA(props: {
   if (props.buttonVariant) button.buttonVariant = props.buttonVariant;
   if (props.icon) button.icon = props.icon;
   if (props.noWrap !== undefined) button.noWrap = props.noWrap;
-  if (props.disabled !== undefined) button.disabled = props.disabled;
   if (props.testID) button.testID = props.testID;
   
   // Append to document to trigger rendering

package/src/components/core/Button-CTA/contracts.yaml

@@ -9,17 +9,14 @@ contracts:
     behavior: |
       Component can receive focus via Tab key navigation.
       Focus state is visually indicated with a focus ring.
-      Focus is managed appropriately when disabled state changes.
     wcag: "2.1.1 Keyboard"
     platforms: [web, ios, android]
     validation:
       - Tab key moves focus to button
       - Focus state is visually distinct with focus ring
       - Focus ring meets 3:1 contrast ratio
-      - Disabled buttons are not focusable
     test_approach: |
       - Render button, press Tab, verify focus
-      - Set disabled=true, verify not focusable
     required: true
 
   interaction_pressable:
@@ -27,7 +24,7 @@ contracts:
     description: Responds to press/click events
     behavior: |
       Component responds to click, tap, Enter key, and Space key.
-      Press triggers the onPress callback when not disabled.
+      Press triggers the onPress callback.
       Platform-appropriate feedback is provided during press.
     wcag: "2.1.1 Keyboard"
     platforms: [web, ios, android]
@@ -35,11 +32,9 @@ contracts:
       - Click/tap triggers onPress callback
       - Enter key triggers onPress callback
       - Space key triggers onPress callback
-      - onPress not called when disabled
     test_approach: |
       - Click button, verify onPress called
       - Focus and press Enter, verify onPress called
-      - Set disabled, click, verify onPress not called
     required: true
 
   interaction_hover:
@@ -56,10 +51,8 @@ contracts:
       - Background color darkens on mouse enter (ΔL 0.02–0.05)
       - Background color reverts on mouse leave
       - Chroma unchanged between rest and hover states
-      - Hover state not shown when disabled
     test_approach: |
       - Simulate hover, verify background change
-      - Set disabled, simulate hover, verify no change
     required: true
 
   interaction_pressed:
@@ -76,31 +69,10 @@ contracts:
       - Visual feedback shown during press (ΔL 0.05–0.10)
       - Pressed state is perceptibly stronger than hover
       - Platform-appropriate animation/effect applied
-      - Pressed state not shown when disabled
     test_approach: |
       - Simulate press, verify visual feedback
     required: true
 
-  state_disabled:
-    category: state
-    description: Prevents interaction when disabled
-    behavior: |
-      When disabled, component cannot receive focus, cannot be clicked/tapped,
-      appears visually muted via chroma reduction (OKLCH ΔC ≥0.03 desaturation),
-      shows cursor: not-allowed (web), and communicates disabled state to
-      assistive technology.
-    wcag: "4.1.2 Name, Role, Value"
-    platforms: [web, ios, android]
-    validation:
-      - Button cannot receive focus when disabled
-      - onPress not called when disabled
-      - Visual styling indicates disabled state (chroma reduced ≥0.03)
-      - aria-disabled="true" set (web)
-    test_approach: |
-      - Set disabled=true, verify not focusable
-      - Verify aria-disabled attribute (web)
-    required: true
-
   state_loading:
     category: state
     description: Shows loading indicator during async operations
@@ -138,3 +110,8 @@ contracts:
       - Tab to button, verify focus ring visible
       - Test in each variant
     required: true
+
+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

package/src/components/core/Button-CTA/examples/BasicUsage.html

@@ -99,12 +99,8 @@
   </div>
   
   <div class="example-section">
-    <h2>Example 4: Disabled Button</h2>
-    <p>Button in disabled state that cannot be interacted with.</p>
-    <div class="button-container">
-      <button-cta id="disabled-btn" label="Submit" disabled></button-cta>
-    </div>
-    <div class="output" id="disabled-output">This button is disabled and won't respond to clicks.</div>
+    <h2>Example 4: Unavailable Actions</h2>
+    <p>DesignerPunk does not support disabled states. If an action is unavailable, the button should not be rendered. For in-flight async operations, use the loading state instead.</p>
   </div>
   
   <script type="module">
@@ -132,14 +128,6 @@
       handlerOutput.textContent = `Form submitted at ${new Date().toLocaleTimeString()}`;
       // In a real app, you would validate and submit form data here
     });
-    
-    // Example 4: Disabled button
-    const disabledBtn = document.getElementById('disabled-btn');
-    const disabledOutput = document.getElementById('disabled-output');
-    disabledBtn.addEventListener('press', () => {
-      // This will never be called because button is disabled
-      disabledOutput.textContent = 'This should never appear!';
-    });
   </script>
 </body>
 </html>

package/src/components/core/Button-CTA/examples/BasicUsage.tsx

@@ -22,7 +22,6 @@ import { ButtonCTA } from '../platforms/web/ButtonCTA.web';
  * - size: 'medium' (48px height)
  * - variant: 'primary' (filled background with primary color)
  * - noWrap: false (text wraps if needed)
- * - disabled: false (interactive)
  * 
  * @example
  * ```html
@@ -79,7 +78,6 @@ export function customLabelButton(): void {
  * 
  * The 'press' event:
  * - Bubbles up through the DOM
- * - Is not called when button is disabled
  * - Works with click, tap, Enter key, and Space key
  * - Provides originalEvent in event.detail for advanced use cases
  * 
@@ -111,55 +109,37 @@ export function buttonWithHandler(): void {
 }
 
 /**
- * Example 4: Disabled Button
+ * Example 4: Unavailable Actions (no disabled state)
  * 
- * Demonstrates how to disable a button to prevent user interaction.
- * Disabled buttons are commonly used during form submission, when prerequisites
- * aren't met, or when an action is temporarily unavailable.
+ * DesignerPunk does not support disabled states for usability and
+ * accessibility reasons. If an action is unavailable, the component
+ * should not be rendered.
  * 
- * Disabled button behavior:
- * - Not keyboard focusable (skipped in Tab order)
- * - Does not respond to clicks or keyboard activation
- * - Visual styling indicates non-interactive state
- * - Screen readers announce disabled state
- * - onPress handler is not called
- * 
- * Common use cases:
- * - Form submission in progress
- * - Required fields not filled
- * - User lacks permissions
- * - Action temporarily unavailable
- * 
- * @example
- * ```html
- * <button-cta label="Submit" disabled></button-cta>
- * ```
+ * For in-flight async operations (e.g. form submission), use the loading
+ * state instead of disabling the button. For actions the user cannot take
+ * yet, keep the button interactive and validate on press, or do not render
+ * the button at all.
  * 
  * @example
  * ```typescript
- * // Conditional disable based on form state
- * const button = document.createElement('button-cta') as ButtonCTA;
- * button.label = 'Submit';
- * button.disabled = isSubmitting || !isFormValid;
+ * // Conditionally render instead of disabling
+ * if (userCanSubmit) {
+ *   const button = document.createElement('button-cta') as ButtonCTA;
+ *   button.label = 'Submit';
+ *   button.addEventListener('press', handleSubmit);
+ *   document.body.appendChild(button);
+ * }
  * ```
  */
-export function disabledButton(): void {
+export function conditionallyRenderedButton(): void {
   const button = document.createElement('button-cta') as ButtonCTA;
   button.label = 'Submit';
-  button.disabled = true; // Button is non-interactive
   
-  // This handler will NOT be called when button is disabled
   button.addEventListener('press', () => {
-    console.log('This will not be logged when button is disabled');
+    console.log('Submitted');
   });
   
   document.body.appendChild(button);
-  
-  // Example: Enable button after 3 seconds (simulating async operation)
-  setTimeout(() => {
-    button.disabled = false;
-    console.log('Button is now enabled');
-  }, 3000);
 }
 
 /**
@@ -202,13 +182,6 @@ export function renderAllBasicExamples(): void {
   });
   container.appendChild(handlerBtn);
   
-  // Example 4: Disabled
-  const disabledBtn = document.createElement('button-cta') as ButtonCTA;
-  disabledBtn.label = 'Disabled Button';
-  disabledBtn.disabled = true;
-  disabledBtn.addEventListener('press', () => console.log('This will not log'));
-  container.appendChild(disabledBtn);
-  
   // Add container to document
   document.body.appendChild(container);
 }

package/src/components/core/Button-CTA/platforms/android/ButtonCTA.android.kt

@@ -11,7 +11,7 @@
  * while maintaining API consistency with web and iOS platforms.
  * 
  * Uses theme-aware blend utilities (Color extensions with Compose MaterialTheme) for
- * state colors (hover, pressed, disabled, icon) instead of opacity or Material ripple
+ * state colors (hover, pressed, icon) instead of opacity or Material ripple
  * workarounds. This ensures cross-platform consistency with Web and iOS implementations.
  * 
  * Part of the DesignerPunk CTA Button Component system.
@@ -42,11 +42,10 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.designerpunk.tokens.DesignTokens
 // Import theme-aware blend utilities (Color extension functions from ThemeAwareBlendUtilities.android.kt)
-// These provide semantic blend methods: hoverBlend(), pressedBlend(), disabledBlend(), iconBlend()
+// These provide semantic blend methods: hoverBlend(), pressedBlend(), iconBlend()
 // @see Requirements: 11.1, 11.2, 11.3 - Theme-aware utilities
 import com.designerpunk.tokens.hoverBlend
 import com.designerpunk.tokens.pressedBlend
-import com.designerpunk.tokens.disabledBlend
 import com.designerpunk.tokens.iconBlend
 
 /**
@@ -88,8 +87,8 @@ enum class ButtonCTAStyle {
  * three size variants, three visual styles, optional leading icons, and
  * theme-aware blend utilities for state colors.
  * 
- * Uses theme-aware Color extensions (hoverBlend(), pressedBlend(), disabledBlend(),
- * iconBlend()) with Compose MaterialTheme for automatic theme color updates.
+ * Uses theme-aware Color extensions (hoverBlend(), pressedBlend(), iconBlend())
+ * with Compose MaterialTheme for automatic theme color updates.
  * 
  * Usage:
  * ```kotlin
@@ -120,7 +119,7 @@ enum class ButtonCTAStyle {
  * Requirements:
  * - 1.1-1.7: Size variants (small: 40dp, medium: 48dp, large: 56dp)
  * - 2.1-2.4: Visual styles (primary, secondary, tertiary)
- * - 7.1-7.4: Blend utility state colors (hover, pressed, disabled, icon)
+ * - 7.1-7.4: Blend utility state colors (hover, pressed, icon)
  * - 8.1-8.6: Icon support with leading position
  * - 11.1-11.3: Theme-aware blend utilities with Compose MaterialTheme
  * - 13.1-13.4: Touch target accessibility (44dp minimum)
@@ -132,7 +131,6 @@ enum class ButtonCTAStyle {
  * @param noWrap Prevent text wrapping (default: false)
  * @param onPress Click/tap handler (required)
  * @param testID Optional test identifier
- * @param disabled Optional disabled state (default: false)
  */
 @Composable
 fun ButtonCTA(
@@ -142,8 +140,7 @@ fun ButtonCTA(
     icon: String? = null,
     noWrap: Boolean = false,
     onPress: () -> Unit,
-    testID: String? = null,
-    disabled: Boolean = false
+    testID: String? = null
 ) {
     val theme = LocalDPTheme.current
     // Remember interaction source for tracking pressed state
@@ -154,7 +151,7 @@ fun ButtonCTA(
     val sizeConfig = getButtonCTASizeConfig(size)
     
     // Get style-based configuration with blend utilities
-    val styleConfig = getButtonCTAStyleConfig(style, isPressed, disabled)
+    val styleConfig = getButtonCTAStyleConfig(style, isPressed)
     
     // Use Surface with clickable modifier (no ripple indication for cross-platform consistency)
     Surface(
@@ -169,7 +166,6 @@ fun ButtonCTA(
             // Apply clickable without ripple indication (blend colors handle state feedback)
             .clickable(
                 onClick = onPress,
-                enabled = !disabled,
                 interactionSource = interactionSource,
                 indication = null // No ripple - using blend colors for state feedback
             ),
@@ -316,7 +312,7 @@ private fun getButtonCTASizeConfig(size: ButtonCTASize): ButtonCTASizeConfig {
  * Style configuration data class
  * 
  * Encapsulates all style-related properties for a button visual style.
- * Uses blend utilities for state colors (pressed, disabled, icon optical balance).
+ * Uses blend utilities for state colors (pressed, icon optical balance).
  * 
  * @property backgroundColor Background color (includes state-based blend)
  * @property textColor Text color
@@ -338,36 +334,32 @@ private data class ButtonCTAStyleConfig(
  * Returns configuration object with all style-related properties based on
  * semantic color tokens and theme-aware blend utilities for state colors.
  * 
- * Uses theme-aware Color extensions (hoverBlend(), pressedBlend(), disabledBlend(),
- * iconBlend()) instead of direct blend calculations for cross-platform consistency
+ * Uses theme-aware Color extensions (hoverBlend(), pressedBlend(), iconBlend())
+ * instead of direct blend calculations for cross-platform consistency
  * with Web and iOS implementations.
  * 
  * Requirements:
  * - 2.1-2.4: Visual styles (primary, secondary, tertiary)
- * - 7.1-7.4: Blend utility state colors (hover, pressed, disabled, icon)
+ * - 7.1-7.4: Blend utility state colors (hover, pressed, icon)
  * - 9.1-9.3: Icon color with optical balance using blend utility
  * - 11.1-11.3: Theme-aware blend utilities with Compose MaterialTheme
  * 
  * @param style Button visual style
  * @param isPressed Whether button is currently pressed
- * @param disabled Whether button is disabled
  * @return Style configuration object with blend-calculated colors
  */
-private fun getButtonCTAStyleConfig(style: ButtonCTAStyle, isPressed: Boolean, disabled: Boolean): ButtonCTAStyleConfig {
+private fun getButtonCTAStyleConfig(style: ButtonCTAStyle, isPressed: Boolean): ButtonCTAStyleConfig {
     // Import semantic color tokens from generated constants
     
     // Calculate state-based background colors using theme-aware blend utilities
     // @see Requirements: 7.1, 7.2, 7.3, 11.1, 11.2, 11.3
     val primaryBgColor = when {
-        // @see Requirements: 7.3 - Disabled uses desaturate(color.action.primary, blend.disabledDesaturate)
-        disabled -> colorActionPrimary.disabledBlend()
         // @see Requirements: 7.2 - Pressed uses darkerBlend(color.action.primary, blend.pressedDarker)
         isPressed -> colorActionPrimary.pressedBlend()
         else -> colorActionPrimary
     }
     
     val secondaryBgColor = when {
-        disabled -> colorBackground
         // @see Requirements: 7.2 - Pressed uses darkerBlend for secondary background
         isPressed -> colorBackground.pressedBlend()
         else -> colorBackground