@3fn/core 13.0.0 → 14.1.0

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
    ========================================================================== */

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

@@ -12,7 +12,7 @@
  * composition pattern as iOS and Android platforms. This ensures cross-platform
  * consistency and single source of truth for icon rendering.
  * 
- * Uses theme-aware blend utilities for state colors (hover, pressed, disabled, icon)
+ * Uses theme-aware blend utilities for state colors (hover, pressed, icon)
  * instead of opacity or filter workarounds. This ensures cross-platform consistency
  * with iOS and Android implementations.
  * 
@@ -86,13 +86,12 @@ function getIconSizeForButton(buttonSize: ButtonSize): IconBaseSize {
  * - Semantic `<button>` element with proper accessibility
  * - Token-based styling via CSS custom properties
  * - Supports text wrapping by default (accessibility-first)
- * - Uses blend utilities for state colors (hover, pressed, disabled, icon)
+ * - Uses blend utilities for state colors (hover, pressed, icon)
  * - WCAG 2.1 AA compliant:
  *   - Keyboard navigation (Tab, Enter, Space)
  *   - Focus indicators with 3:1 contrast ratio
  *   - Color contrast 4.5:1 for all styles
  *   - Screen reader support with ARIA attributes
- *   - Proper disabled state handling
  * 
  * @example
  * ```html
@@ -106,7 +105,6 @@ function getIconSizeForButton(buttonSize: ButtonSize): IconBaseSize {
  *   variant="primary"
  *   icon="arrow-right"
  *   no-wrap="false"
- *   disabled="false"
  *   test-id="submit-button"
  * ></button-cta>
  * ```
@@ -143,7 +141,6 @@ export class ButtonCTA extends HTMLElement {
   // Cached blend colors for state styling
   private _hoverColor: string = '';
   private _pressedColor: string = '';
-  private _disabledColor: string = '';
   private _iconColor: string = '';
   private _iconOpticalBalanceColor: string = '';
   
@@ -153,7 +150,7 @@ export class ButtonCTA extends HTMLElement {
    * When these attributes change, attributeChangedCallback is invoked.
    */
   static get observedAttributes(): string[] {
-    return ['label', 'size', 'variant', 'icon', 'no-wrap', 'disabled', 'test-id'];
+    return ['label', 'size', 'variant', 'icon', 'no-wrap', 'test-id'];
   }
   
   constructor() {
@@ -219,15 +216,14 @@ export class ButtonCTA extends HTMLElement {
    * Calculate blend colors from CSS custom properties.
    * 
    * Reads base colors from CSS custom properties and applies theme-aware blend
-   * utilities to generate state colors (hover, pressed, disabled, icon).
-   * 
+   * utilities to generate state colors (hover, pressed, icon).
+   *
    * Uses getBlendUtilities() factory functions instead of direct blend calculations
    * for cross-platform consistency with iOS and Android implementations.
-   * 
+   *
    * State color mappings:
    * - Hover: darkerBlend(color.action.primary, blend.hoverDarker) - 8% darker
    * - Pressed: darkerBlend(color.action.primary, blend.pressedDarker) - 12% darker
-   * - Disabled: desaturate(color.action.primary, blend.disabledDesaturate) - 12% less saturated
    * - Icon: lighterBlend(color.contrast.onAction, blend.iconLighter) - 8% lighter
    * 
    * @see Requirements: 7.1, 7.2, 7.3, 7.4 - Button-CTA state colors
@@ -258,10 +254,7 @@ export class ButtonCTA extends HTMLElement {
     
     // @see Requirements: 7.2 - Pressed uses darkerBlend(color.action.primary, blend.pressedDarker)
     this._pressedColor = this._blendUtils.pressedColor(primaryColor);
-    
-    // @see Requirements: 7.3 - Disabled uses desaturate(color.action.primary, blend.disabledDesaturate)
-    this._disabledColor = this._blendUtils.disabledColor(primaryColor);
-    
+
     // @see Requirements: 7.4 - Icon uses lighterBlend(color.contrast.onAction, blend.iconLighter)
     // Icon for primary buttons: provides optical balance for icons on primary background
     this._iconColor = this._blendUtils.iconColor(onActionColor);
@@ -371,24 +364,6 @@ export class ButtonCTA extends HTMLElement {
     this.setAttribute('no-wrap', value.toString());
   }
   
-  /**
-   * Get the disabled state.
-   */
-  get disabled(): boolean {
-    return this.hasAttribute('disabled');
-  }
-  
-  /**
-   * Set the disabled state.
-   */
-  set disabled(value: boolean) {
-    if (value) {
-      this.setAttribute('disabled', '');
-    } else {
-      this.removeAttribute('disabled');
-    }
-  }
-  
   /**
    * Get the test ID.
    */
@@ -451,17 +426,15 @@ export class ButtonCTA extends HTMLElement {
     const variant = this.buttonVariant;
     const icon = this.icon;
     const noWrap = this.noWrap;
-    const disabled = this.disabled;
     const testID = this.testID;
-    
+
     // Generate class names
     const buttonClasses = [
       'button-cta',
       `button-cta--${size}`,
-      `button-cta--${variant}`,
-      disabled ? 'button-cta--disabled' : ''
-    ].filter(Boolean).join(' ');
-    
+      `button-cta--${variant}`
+    ].join(' ');
+
     // Get icon size for button size variant
     // Icon sizes are type-safe mapped from button size:
     // - Small/Medium: 24px (iconBaseSize100)
@@ -480,7 +453,6 @@ export class ButtonCTA extends HTMLElement {
     const blendColorStyles = `
       --_cta-hover-bg: ${this._hoverColor};
       --_cta-pressed-bg: ${this._pressedColor};
-      --_cta-disabled-bg: ${this._disabledColor};
       --_cta-icon-color: ${this._iconColor};
       --_cta-icon-optical: ${this._iconOpticalBalanceColor};
     `;
@@ -491,11 +463,10 @@ export class ButtonCTA extends HTMLElement {
     // @see Requirements: 8.2, 8.3 (components render correctly with interactivity)
     this._shadowRoot.innerHTML = `
       <style>${buttonStyles}</style>
-      <button 
+      <button
         class="${buttonClasses}"
         type="button"
         role="button"
-        ${disabled ? 'disabled aria-disabled="true"' : 'aria-disabled="false"'}
         ${testIDAttr}
         aria-label="${label}"
         style="${blendColorStyles}"
@@ -536,34 +507,23 @@ export class ButtonCTA extends HTMLElement {
     const variant = this.buttonVariant;
     const icon = this.icon;
     const noWrap = this.noWrap;
-    const disabled = this.disabled;
     const testID = this.testID;
-    
+
     // Get icon size for button size variant
     const iconSize: IconBaseSize = getIconSizeForButton(size);
-    
+
     // ─────────────────────────────────────────────────────────────────
     // Update button element
     // ─────────────────────────────────────────────────────────────────
-    
+
     // Update CSS class (preserves element identity for transitions)
     const buttonClasses = [
       'button-cta',
       `button-cta--${size}`,
-      `button-cta--${variant}`,
-      disabled ? 'button-cta--disabled' : ''
-    ].filter(Boolean).join(' ');
+      `button-cta--${variant}`
+    ].join(' ');
     this._button.className = buttonClasses;
-    
-    // Update disabled state
-    if (disabled) {
-      this._button.setAttribute('disabled', '');
-      this._button.setAttribute('aria-disabled', 'true');
-    } else {
-      this._button.removeAttribute('disabled');
-      this._button.setAttribute('aria-disabled', 'false');
-    }
-    
+
     // Update aria-label
     this._button.setAttribute('aria-label', label);
     
@@ -577,7 +537,6 @@ export class ButtonCTA extends HTMLElement {
     // Update blend color CSS custom properties
     this._button.style.setProperty('--_cta-hover-bg', this._hoverColor);
     this._button.style.setProperty('--_cta-pressed-bg', this._pressedColor);
-    this._button.style.setProperty('--_cta-disabled-bg', this._disabledColor);
     this._button.style.setProperty('--_cta-icon-color', this._iconColor);
     this._button.style.setProperty('--_cta-icon-optical', this._iconOpticalBalanceColor);
     
@@ -638,13 +597,6 @@ export class ButtonCTA extends HTMLElement {
    * Dispatches a custom 'press' event that bubbles up to parent elements.
    */
   private _handleClick = (event: Event): void => {
-    // Don't dispatch if disabled
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    
     // Dispatch custom 'press' event
     this.dispatchEvent(new CustomEvent('press', {
       bubbles: true,
@@ -663,11 +615,6 @@ export class ButtonCTA extends HTMLElement {
    * @param event - The keyboard event
    */
   private _handleKeyDown = (event: KeyboardEvent): void => {
-    // Don't handle if disabled
-    if (this.disabled) {
-      return;
-    }
-    
     // Handle Enter and Space keys (WCAG 2.1 AA keyboard navigation)
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault(); // Prevent default space scrolling

package/src/components/core/Button-CTA/types.ts

@@ -82,7 +82,6 @@ export type ButtonStyle = 'primary' | 'secondary' | 'tertiary';
  *   variant="primary"
  *   icon="arrow-right"
  *   noWrap={false}
- *   disabled={false}
  *   testID="submit-button"
  *   onPress={handleSubmit}
  * />
@@ -197,15 +196,13 @@ export interface ButtonProps {
   
   /**
    * Click/tap handler (required)
-   * 
+   *
    * Callback function invoked when the button is clicked or tapped.
-   * Not called when button is disabled.
-   * 
+   *
    * @remarks
    * - Function signature: `() => void`
-   * - Not invoked when `disabled` is true
    * - Triggered by click, tap, Enter key, or Space key
-   * 
+   *
    * @example
    * ```typescript
    * onPress={() => console.log('Clicked')}
@@ -232,26 +229,11 @@ export interface ButtonProps {
    * ```
    */
   testID?: string;
-  
-  /**
-   * Optional disabled state (default: false)
-   * 
-   * When true, the button is non-interactive and visually indicates
-   * disabled state. The onPress handler is not called when disabled.
-   * 
-   * @defaultValue false
-   * 
-   * @remarks
-   * - Disabled buttons are not keyboard focusable
-   * - Screen readers announce disabled state
-   * - Visual styling indicates non-interactive state
-   * 
-   * @example
-   * ```typescript
-   * disabled={false}  // Interactive (default)
-   * disabled={true}   // Non-interactive
-   * disabled={isSubmitting}  // Conditional disable
-   * ```
-   */
-  disabled?: boolean;
 }
+
+// NO DISABLED STATES
+// DesignerPunk does not support disabled states for usability and
+// accessibility reasons. If an action is unavailable, the component
+// should not be rendered. For in-flight async actions, use the loading
+// state (state_loading) instead.
+// Ruled by Peter 2026-07-15 (Button-CTA disabled-state adjudication).

package/src/components/core/Button-Icon/buttonIcon.tokens.ts

@@ -1,26 +1,35 @@
 /**
  * Button-Icon Component Token Definitions
- * 
+ *
  * Stemma System naming: [Family]-[Type] = Button-Icon
  * Type: Primitive (foundational component)
- * 
+ *
  * Platform-agnostic token definitions for the Button-Icon component.
  * Uses the defineComponentTokens() API to register tokens with the global
  * ComponentTokenRegistry for pipeline integration.
- * 
+ *
+ * Two separate defineComponentTokens() calls are used — one per token family
+ * (spacing, sizing) — following the Avatar-Base pattern (avatar.tokens.ts). Every
+ * token registered by a single call is stamped with that call's `family`, so inset
+ * (spacing) and size (sizing) tokens must NOT share a call even though they live in
+ * the same file. The two branded results are exported separately and must NOT be
+ * spread/merged into one object — the rich metadata rides on a non-enumerable brand
+ * (see src/build/tokens/defineComponentTokens.ts, TOKEN_CONTRACT_BRAND) that a spread
+ * would silently drop.
+ *
  * The build system generates platform-specific values from these definitions:
  * - Web: CSS custom properties (var(--buttonicon-inset-large))
  * - iOS: Swift constants (ButtonIconTokens.insetLarge)
  * - Android: Kotlin constants (ButtonIconTokens.insetLarge)
- * 
+ *
  * Token Relationships:
- * - buttonIcon.inset.large (12px) references space150
- * - buttonIcon.inset.medium (10px) references space125 (strategic flexibility token)
- * - buttonIcon.inset.small (8px) references space100
- * - buttonIcon.size.large (48px) references size600
- * - buttonIcon.size.medium (40px) references size500
- * - buttonIcon.size.small (32px) references size400
- * 
+ * - buttonIcon.inset.large (12px) references space150 — family: spacing
+ * - buttonIcon.inset.medium (10px) references space125 (strategic flexibility token) — family: spacing
+ * - buttonIcon.inset.small (8px) references space100 — family: spacing
+ * - buttonIcon.size.large (48px) references size600 — family: sizing
+ * - buttonIcon.size.medium (40px) references size500 — family: sizing
+ * - buttonIcon.size.small (32px) references size400 — family: sizing
+ *
  * @see .kiro/specs/035-button-icon-component/design.md for token consumption strategy
  * @see .kiro/specs/034-component-architecture-system for Stemma System details
  * @see .kiro/specs/037-component-token-generation-pipeline for pipeline integration
@@ -32,28 +41,21 @@ import { spacingTokens } from '../../../tokens/SpacingTokens';
 import { sizingTokens } from '../../../tokens/SizingTokens';
 
 /**
- * Button-Icon component tokens defined using the hybrid authoring API.
- * 
+ * Button-Icon inset (padding) tokens — reference spacing primitives.
+ *
  * Each token references a primitive token and includes reasoning
  * explaining why the token exists and its purpose in the component.
- * 
- * Inset (padding) token values — reference spacing primitives:
+ *
  * - inset.large: 12px (1.5 × base, references space150)
  * - inset.medium: 10px (1.25 × base, references space125 strategic flexibility token)
  * - inset.small: 8px (1 × base, references space100)
- * 
- * Size (width/height) token values:
- * - size.large: 48px (6 × base, references size600)
- * - size.medium: 40px (5 × base, references size500)
- * - size.small: 32px (4 × base, references size400)
- * 
+ *
  * @see Requirements 6.1, 6.2, 6.3 in .kiro/specs/040-component-alignment/requirements.md
  */
-export const ButtonIconTokens = defineComponentTokens({
+export const ButtonIconInsetTokens = defineComponentTokens({
   component: 'ButtonIcon',
   family: 'spacing',
   tokens: {
-    // Inset (padding) tokens
     'inset.large': {
       reference: spacingTokens.space150,
       reasoning: 'Large button variant requires 12px padding (1.5× base) for comfortable touch target and visual balance with larger icon sizes',
@@ -66,8 +68,22 @@ export const ButtonIconTokens = defineComponentTokens({
       reference: spacingTokens.space100,
       reasoning: 'Small button variant uses 8px padding (1× base) for minimal footprint in dense UI layouts while meeting minimum touch target requirements',
     },
-    // Size (width/height) tokens — reference sizing primitives, not spacing
-    // @see Requirements 6.1, 6.2, 6.3
+  },
+});
+
+/**
+ * Button-Icon size (width/height) tokens — reference sizing primitives, not spacing.
+ *
+ * - size.large: 48px (6 × base, references size600)
+ * - size.medium: 40px (5 × base, references size500)
+ * - size.small: 32px (4 × base, references size400)
+ *
+ * @see Requirements 6.1, 6.2, 6.3 in .kiro/specs/040-component-alignment/requirements.md
+ */
+export const ButtonIconSizeTokens = defineComponentTokens({
+  component: 'ButtonIcon',
+  family: 'sizing',
+  tokens: {
     'size.large': {
       reference: sizingTokens.size600,
       reasoning: 'Large button size (48px = 6× base) provides generous touch target exceeding tapAreaRecommended, calculated as icon (24px) + padding (12px × 2)',
@@ -107,7 +123,7 @@ export type ButtonIconSizeVariant = 'large' | 'medium' | 'small';
  * ```
  */
 export function getButtonIconInset(variant: ButtonIconInsetVariant): number {
-  return ButtonIconTokens[`inset.${variant}`];
+  return ButtonIconInsetTokens[`inset.${variant}`];
 }
 
 /**
@@ -126,7 +142,7 @@ export function getButtonIconInset(variant: ButtonIconInsetVariant): number {
  * @see Requirements 6.1, 6.2, 6.3 in .kiro/specs/040-component-alignment/requirements.md
  */
 export function getButtonIconSize(variant: ButtonIconSizeVariant): number {
-  return ButtonIconTokens[`size.${variant}`];
+  return ButtonIconSizeTokens[`size.${variant}`];
 }
 
 /**

package/src/components/core/Chip-Base/__tests__/ChipBase.test.ts

@@ -40,11 +40,24 @@ describe('Chip-Base Web Component', () => {
   beforeEach(async () => {
     // Wait for custom element to be defined
     await customElements.whenDefined('chip-base');
+    // Silence ONLY the known environmental warn ("Could not calculate blend colors",
+    // fired async via rAF): jsdom never applies real CSS, so the token lookup cannot
+    // succeed here and the component's designed fallback fires every run, forever.
+    // Anything ELSE passes through to the real console — a NEW warn class stays audible.
+    const realWarn = console.warn.bind(console);
+    jest.spyOn(console, 'warn').mockImplementation((...args: unknown[]) => {
+      // Component-prefixed match (Lina review, PR #39): the bare substring is shared by
+      // Button components too — prefix-matching prevents accidentally swallowing a
+      // cross-component warn if this suite ever composes a Button.
+      if (typeof args[0] === 'string' && args[0].includes('ChipBase: Could not calculate blend colors')) return;
+      realWarn(...args);
+    });
   });
 
   afterEach(() => {
     // Clean up any created elements
     cleanupDOM();
+    jest.restoreAllMocks();
   });
 
   // ============================================================================

package/src/components/core/Chip-Filter/__tests__/ChipFilter.test.ts

@@ -42,11 +42,24 @@ describe('Chip-Filter Web Component', () => {
   beforeEach(async () => {
     // Wait for custom element to be defined
     await customElements.whenDefined('chip-filter');
+    // Silence ONLY the known environmental warn ("Could not calculate blend colors",
+    // fired async via rAF): jsdom never applies real CSS, so the token lookup cannot
+    // succeed here and the component's designed fallback fires every run, forever.
+    // Anything ELSE passes through to the real console — a NEW warn class stays audible.
+    const realWarn = console.warn.bind(console);
+    jest.spyOn(console, 'warn').mockImplementation((...args: unknown[]) => {
+      // Component-prefixed match (Lina review, PR #39): the bare substring is shared by
+      // Button components too — prefix-matching prevents accidentally swallowing a
+      // cross-component warn if this suite ever composes a Button.
+      if (typeof args[0] === 'string' && args[0].includes('ChipFilter: Could not calculate blend colors')) return;
+      realWarn(...args);
+    });
   });
 
   afterEach(() => {
     // Clean up any created elements
     cleanupDOM();
+    jest.restoreAllMocks();
   });
 
   // ============================================================================

package/src/components/core/Chip-Input/__tests__/ChipInput.test.ts

@@ -41,11 +41,24 @@ describe('Chip-Input Web Component', () => {
   beforeEach(async () => {
     // Wait for custom element to be defined
     await customElements.whenDefined('chip-input');
+    // Silence ONLY the known environmental warn ("Could not calculate blend colors",
+    // fired async via rAF): jsdom never applies real CSS, so the token lookup cannot
+    // succeed here and the component's designed fallback fires every run, forever.
+    // Anything ELSE passes through to the real console — a NEW warn class stays audible.
+    const realWarn = console.warn.bind(console);
+    jest.spyOn(console, 'warn').mockImplementation((...args: unknown[]) => {
+      // Component-prefixed match (Lina review, PR #39): the bare substring is shared by
+      // Button components too — prefix-matching prevents accidentally swallowing a
+      // cross-component warn if this suite ever composes a Button.
+      if (typeof args[0] === 'string' && args[0].includes('ChipInput: Could not calculate blend colors')) return;
+      realWarn(...args);
+    });
   });
 
   afterEach(() => {
     // Clean up any created elements
     cleanupDOM();
+    jest.restoreAllMocks();
   });
 
   // ============================================================================