@3fn/core 13.0.0 → 14.0.0

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

package/src/components/core/Button-CTA/platforms/ios/ButtonCTA.ios.swift

@@ -11,7 +11,7 @@
  * while maintaining API consistency with web and Android platforms.
  * 
  * Uses theme-aware blend utilities (Color extensions with SwiftUI environment) for
- * state colors (hover, pressed, disabled, icon) instead of opacity or scale workarounds.
+ * state colors (hover, pressed, icon) instead of opacity or scale workarounds.
  * This ensures cross-platform consistency with Web and Android implementations.
  * 
  * Part of the DesignerPunk CTA Button Component system.
@@ -23,7 +23,7 @@
 import SwiftUI
 
 // Import theme-aware blend utilities (Color extensions from ThemeAwareBlendUtilities.ios.swift)
-// 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
 
 /**
@@ -65,8 +65,8 @@ enum 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 SwiftUI environment for automatic theme color updates.
+ * Uses theme-aware Color extensions (hoverBlend(), pressedBlend(), iconBlend())
+ * with SwiftUI environment for automatic theme color updates.
  * 
  * Usage:
  * ```swift
@@ -97,7 +97,7 @@ enum ButtonCTAStyle {
  * Requirements:
  * - 1.1-1.7: Size variants (small: 40px, medium: 48px, large: 56px)
  * - 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 SwiftUI environment
  * - 13.1-13.4: Touch target accessibility (44px minimum)
@@ -125,10 +125,7 @@ struct ButtonCTA: View {
     
     /// Optional test ID for automated testing
     let testID: String?
-    
-    /// Optional disabled state (default: false)
-    let disabled: Bool
-    
+
     // MARK: - State
     
     /// Tracks pressed state for scale transform animation
@@ -149,7 +146,6 @@ struct ButtonCTA: View {
      *   - noWrap: Prevent text wrapping (default: false)
      *   - onPress: Click/tap handler (required)
      *   - testID: Optional test identifier
-     *   - disabled: Optional disabled state (default: false)
      */
     init(
         label: String,
@@ -158,8 +154,7 @@ struct ButtonCTA: View {
         icon: String? = nil,
         noWrap: Bool = false,
         onPress: @escaping () -> Void,
-        testID: String? = nil,
-        disabled: Bool = false
+        testID: String? = nil
     ) {
         self.label = label
         self.size = size
@@ -168,7 +163,6 @@ struct ButtonCTA: View {
         self.noWrap = noWrap
         self.onPress = onPress
         self.testID = testID
-        self.disabled = disabled
     }
     
     // MARK: - Body
@@ -213,15 +207,12 @@ struct ButtonCTA: View {
         .simultaneousGesture(
             DragGesture(minimumDistance: 0)
                 .onChanged { _ in
-                    if !disabled {
-                        isPressed = true
-                    }
+                    isPressed = true
                 }
                 .onEnded { _ in
                     isPressed = false
                 }
         )
-        .disabled(disabled)
         // Requirement 13.1-13.4, 16.4: Accessibility identifier for testing
         .accessibilityIdentifier(testID ?? "")
         // Requirement 17.4: Respect safe area insets for full-width buttons
@@ -230,14 +221,11 @@ struct ButtonCTA: View {
     
     // MARK: - Blend Color Computed Properties
     
-    /// Current background color based on state (normal, hover, pressed, disabled)
+    /// Current background color based on state (normal, pressed)
     /// Uses theme-aware blend utilities (Color extensions) for cross-platform consistency
-    /// @see Requirements: 7.1, 7.2, 7.3, 11.1, 11.2, 11.3
+    /// @see Requirements: 7.1, 7.2, 11.1, 11.2, 11.3
     private var currentBackgroundColor: Color {
-        if disabled {
-            // @see Requirements: 7.3 - Disabled uses desaturate(color.primary, blend.disabledDesaturate)
-            return disabledBackgroundColor
-        } else if isPressed {
+        if isPressed {
             // @see Requirements: 7.2 - Pressed uses darkerBlend(color.primary, blend.pressedDarker)
             return pressedBackgroundColor
         } else {
@@ -260,20 +248,6 @@ struct ButtonCTA: View {
         }
     }
     
-    /// Disabled state background color using theme-aware blend utility
-    /// Uses disabledBlend() which applies desaturate with blend.disabledDesaturate (12%)
-    /// @see Requirements: 7.3, 11.1, 11.2, 11.3
-    private var disabledBackgroundColor: Color {
-        switch style {
-        case .primary:
-            return theme.colorActionPrimary.disabledBlend()
-        case .secondary:
-            return theme.colorStructureCanvas
-        case .tertiary:
-            return Color.clear
-        }
-    }
-    
     // MARK: - Size-Based Computed Properties
     
     /// Typography token based on button size
@@ -532,20 +506,7 @@ struct ButtonCTA_Previews: PreviewProvider {
                     onPress: { print("Confirm pressed") }
                 )
             }
-            
-            Divider()
-            
-            // Disabled state
-            Text("Disabled State")
-                .font(.headline)
-            
-            VStack(spacing: 12) {
-                ButtonCTA(
-                    label: "Disabled Button",
-                    disabled: true,
-                    onPress: { print("Should not print") }
-                )
-            }
+
         }
         .padding()
     }

package/src/components/core/Button-CTA/platforms/web/ButtonCTA.web.css

@@ -275,7 +275,7 @@
  * The --_cta-hover-bg custom property is set by the component
  * using darkerBlend(color.primary, blend.hoverDarker) = 8% darker.
  */
-.button-cta--primary:hover:not(:disabled) {
+.button-cta--primary:hover {
   background-color: var(--_cta-hover-bg);
 }
 
@@ -288,7 +288,7 @@
  * The --_cta-pressed-bg custom property is set by the component
  * using darkerBlend(color.primary, blend.pressedDarker) = 12% darker.
  */
-.button-cta--primary:active:not(:disabled) {
+.button-cta--primary:active {
   background-color: var(--_cta-pressed-bg);
 }
 
@@ -318,30 +318,6 @@
   outline: none;
 }
 
-/**
- * Disabled state.
- * 
- * Uses blend utility calculated color (desaturate with blend.disabledDesaturate)
- * instead of opacity workaround for cross-platform consistency.
- * 
- * The --button-disabled-color custom property is set by the component
- * using desaturate(color.primary, blend.disabledDesaturate) = 12% less saturated.
- * 
- * - Cursor changes to not-allowed
- * - Prevents interaction
- * - Maintains color contrast for accessibility
- */
-.button-cta:disabled,
-.button-cta--disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.button-cta--primary:disabled,
-.button-cta--primary.button-cta--disabled {
-  background-color: var(--_cta-disabled-bg);
-}
-
 /* ==========================================================================
    Responsive Behavior
    ========================================================================== */