@3fn/core 14.1.0 → 15.0.0

package/src/components/core/Input-Text-Base/__tests__/test-utils.ts

@@ -1,81 +0,0 @@
-/**
- * Test utilities for Input-Text-Base component testing
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Primitive (Base)
- * 
- * Provides helper functions for:
- * - CSS custom property setup for blend utilities
- * - Custom element registration
- * - Component cleanup
- * 
- * Input-Text-Base uses blend utilities that read base colors from CSS custom properties.
- * These utilities ensure the required properties are available in the test environment.
- */
-
-import { InputTextBase } from '../platforms/web/InputTextBase.web';
-
-/**
- * Set up required CSS custom properties for Input-Text-Base blend utilities.
- * 
- * Input-Text-Base uses blend utilities that read base colors from CSS custom properties.
- * This function sets up the required properties in the test environment.
- * 
- * Required properties:
- * - --color-action-primary: Base primary color for blend calculations (cyan300)
- * 
- * Updated to use Spec 052 naming and Spec 076 values.
- * Note: Test values are arbitrary valid colors for exercising blend math.
- * 
- * @see InputTextBase._calculateBlendColors() for usage
- */
-export function setupBlendColorProperties(): void {
-  // Set up required CSS custom properties on document root
-  document.documentElement.style.setProperty('--color-action-primary', 'rgba(0, 240, 255, 1)');
-}
-
-/**
- * Clean up CSS custom properties set by setupBlendColorProperties
- */
-export function cleanupBlendColorProperties(): void {
-  document.documentElement.style.removeProperty('--color-action-primary');
-}
-
-/**
- * Register the Input-Text-Base custom element if not already registered
- * Prevents "already defined" errors in test suites
- * 
- * Also sets up required CSS custom properties for blend utilities.
- */
-export function registerInputTextBase(): void {
-  // Set up CSS custom properties required for blend utilities
-  setupBlendColorProperties();
-  
-  if (!customElements.get('input-text-base')) {
-    customElements.define('input-text-base', InputTextBase);
-  }
-}
-
-/**
- * Create an Input-Text-Base element with required setup
- * 
- * @param attributes - Attributes to set on the element
- * @returns The created Input-Text-Base element
- */
-export function createInputTextBase(attributes: Record<string, string> = {}): InputTextBase {
-  registerInputTextBase();
-  
-  const element = document.createElement('input-text-base') as InputTextBase;
-  
-  Object.entries(attributes).forEach(([key, value]) => {
-    element.setAttribute(key, value);
-  });
-  
-  return element;
-}
-
-// Legacy aliases for backward compatibility during migration
-/** @deprecated Use registerInputTextBase instead */
-export const registerTextInputField = registerInputTextBase;
-/** @deprecated Use createInputTextBase instead */
-export const createTextInputField = createInputTextBase;

package/src/components/core/Input-Text-Base/__tests__/touchTargetSizing.test.ts

@@ -1,319 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-/**
- * @category evergreen
- * @purpose Verify touchTargetSizing component renders correctly and behaves as expected
- */
-
-/**
- * Touch Target Sizing Tests
- * 
- * Tests that verify the Input-Text-Base component meets WCAG 2.1 AA
- * touch target size requirements (minimum 48px).
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Primitive (Base)
- * 
- * Note: Motion token injection is no longer required. CSS transition-delay
- * now handles animation timing coordination, and motion tokens are applied
- * via CSS custom properties defined in the component styles.
- * 
- * Note: CSS is now in an external file (InputTextBase.web.css) and imported
- * as a string. In Jest, CSS imports are mocked to return empty strings.
- * Tests that need to verify CSS content read the CSS file directly.
- * 
- * Requirements: 5.2, 5.3, 5.4, R3
- * Ported from: TextInputField/__tests__/touchTargetSizing.test.ts
- */
-
-import { cleanupDOM } from '../../../../__tests__/helpers/web-component-test-utils';
-import * as fs from 'fs';
-import * as path from 'path';
-import { describe, it, expect, beforeEach, afterEach, beforeAll } from '@jest/globals';
-import { InputTextBase } from '../platforms/web/InputTextBase.web';
-import { setupBlendColorProperties, cleanupBlendColorProperties } from './test-utils';
-
-// ============================================================================
-// Helper Functions
-// ============================================================================
-
-/**
- * Read the actual CSS file content for CSS validation tests.
- * 
- * In Jest, CSS imports are mocked to return empty strings for performance.
- * Tests that need to verify CSS content read the file directly.
- * 
- * @see Requirements: 5.2, 5.3, 5.4 (external CSS file with esbuild plugin pattern)
- */
-function readCSSFileContent(): string {
-  const cssPath = path.resolve(process.cwd(), 'src/components/core/Input-Text-Base/platforms/web/InputTextBase.web.css');
-  if (fs.existsSync(cssPath)) {
-    return fs.readFileSync(cssPath, 'utf-8');
-  }
-  return '';
-}
-
-// Cache CSS content to avoid repeated reads
-let cachedCSSContent: string | null = null;
-
-function getCSSContent(): string {
-  if (cachedCSSContent === null) {
-    cachedCSSContent = readCSSFileContent();
-  }
-  return cachedCSSContent;
-}
-
-describe('Input-Text-Base - Touch Target Sizing', () => {
-  // Import component before tests
-  beforeAll(async () => {
-    // Register the custom element if not already registered
-    if (!customElements.get('input-text-base')) {
-      customElements.define('input-text-base', InputTextBase);
-    }
-  });
-
-  beforeEach(() => {
-    // Set up CSS custom properties required for blend utilities
-    setupBlendColorProperties();
-    
-    // Clear any existing elements
-    cleanupDOM();
-  });
-
-  afterEach(() => {
-    // Clean up CSS custom properties
-    cleanupBlendColorProperties();
-  });
-
-  /**
-   * Helper to create a component for testing.
-   * Motion token injection is no longer needed - CSS handles animation timing.
-   */
-  function createComponent(attributes: Record<string, string> = {}): HTMLElement {
-    const component = document.createElement('input-text-base') as any;
-    Object.entries(attributes).forEach(([key, value]) => {
-      component.setAttribute(key, value);
-    });
-    document.body.appendChild(component);
-    return component;
-  }
-
-  describe('Minimum Touch Target Height', () => {
-    it('should use tapAreaComfortable token for minimum height', () => {
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-      
-      // Verify input-wrapper uses tapAreaComfortable token for min-height
-      expect(cssContent).toMatch(/\.input-wrapper[\s\S]*?min-height:\s*var\(--tap-area-comfortable\)/);
-    });
-
-    it('should ensure input element meets 56px comfortable height', () => {
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-      
-      // Verify input-element uses tapAreaComfortable token for min-height
-      expect(cssContent).toMatch(/\.input-element[\s\S]*?min-height:\s*var\(--tap-area-comfortable\)/);
-    });
-
-    it('should maintain minimum height in all states', () => {
-      // Create component to verify it renders correctly
-      const component = createComponent({
-        id: 'test-input',
-        label: 'Test Label',
-        value: ''
-      });
-
-      const shadowRoot = (component as any).shadowRoot!;
-      
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-      
-      // Verify min-height is set via token (applies to all states)
-      expect(cssContent).toMatch(/\.input-wrapper[\s\S]*?min-height:\s*var\(--tap-area-comfortable\)/);
-      expect(cssContent).toMatch(/\.input-element[\s\S]*?min-height:\s*var\(--tap-area-comfortable\)/);
-      
-      // Verify state classes exist and can be applied
-      const inputWrapper = shadowRoot.querySelector('.input-wrapper') as HTMLElement;
-      const inputElement = shadowRoot.querySelector('.input-element') as HTMLInputElement;
-      expect(inputWrapper).not.toBeNull();
-      expect(inputElement).not.toBeNull();
-      
-      // Test that state changes work (CSS rules remain constant)
-      inputElement.focus();
-      expect(inputWrapper.classList.contains('focused') || true).toBe(true); // State may update async
-      
-      component.setAttribute('value', 'test value');
-      component.setAttribute('error-message', 'Error message');
-      component.removeAttribute('error-message');
-      component.setAttribute('is-success', 'true');
-      
-      // CSS token reference remains constant across all states (verified via file read)
-      expect(cssContent).toMatch(/min-height:\s*var\(--tap-area-comfortable\)/);
-    });
-  });
-
-  describe('Touch Target Accessibility', () => {
-    it('should provide adequate touch target for mobile devices', () => {
-      // Create component
-      const component = createComponent({
-        id: 'test-input',
-        label: 'Test Label',
-        value: ''
-      });
-
-      const shadowRoot = (component as any).shadowRoot!;
-      const inputWrapper = shadowRoot.querySelector('.input-wrapper') as HTMLElement;
-
-      // Get bounding rect to check actual rendered size
-      const rect = inputWrapper.getBoundingClientRect();
-
-      // Height should be at least 56px (comfortable touch target)
-      // Note: In test environment without CSS token values, this might be 0
-      // The important thing is that the CSS is correctly structured
-      expect(rect.height >= 0).toBe(true); // Verify element exists and has dimensions
-    });
-
-    it('should maintain touch target with helper text', () => {
-      // Create component with helper text
-      const component = createComponent({
-        id: 'test-input',
-        label: 'Test Label',
-        value: '',
-        'helper-text': 'Helper text'
-      });
-
-      const shadowRoot = (component as any).shadowRoot!;
-      
-      // Verify input wrapper exists
-      const inputWrapper = shadowRoot.querySelector('.input-wrapper') as HTMLElement;
-      expect(inputWrapper).not.toBeNull();
-
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-      expect(cssContent).toMatch(/\.input-wrapper[\s\S]*?min-height:\s*var\(--tap-area-comfortable\)/);
-    });
-
-    it('should maintain touch target with error message', () => {
-      // Create component with error message
-      const component = createComponent({
-        id: 'test-input',
-        label: 'Test Label',
-        value: '',
-        'error-message': 'Error message'
-      });
-
-      const shadowRoot = (component as any).shadowRoot!;
-      
-      // Verify input wrapper exists
-      const inputWrapper = shadowRoot.querySelector('.input-wrapper') as HTMLElement;
-      expect(inputWrapper).not.toBeNull();
-
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-      expect(cssContent).toMatch(/\.input-wrapper[\s\S]*?min-height:\s*var\(--tap-area-comfortable\)/);
-    });
-
-    it('should maintain touch target with trailing icon', () => {
-      // Create component with success state (shows trailing icon)
-      const component = createComponent({
-        id: 'test-input',
-        label: 'Test Label',
-        value: 'test value',
-        'is-success': 'true'
-      });
-
-      const shadowRoot = (component as any).shadowRoot!;
-      
-      // Verify input wrapper exists
-      const inputWrapper = shadowRoot.querySelector('.input-wrapper') as HTMLElement;
-      expect(inputWrapper).not.toBeNull();
-
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-      expect(cssContent).toMatch(/\.input-wrapper[\s\S]*?min-height:\s*var\(--tap-area-comfortable\)/);
-    });
-  });
-
-  describe('Token Usage', () => {
-    it('should reference tapAreaComfortable token in CSS', () => {
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-
-      // Should reference tapAreaComfortable token
-      expect(cssContent).toContain('--tap-area-comfortable');
-    });
-
-    it('should use token for both wrapper and input element', () => {
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-
-      // Should apply to input-wrapper
-      expect(cssContent).toMatch(/\.input-wrapper[\s\S]*?min-height[\s\S]*?--tap-area-comfortable/);
-      
-      // Should apply to input-element
-      expect(cssContent).toMatch(/\.input-element[\s\S]*?min-height[\s\S]*?--tap-area-comfortable/);
-    });
-  });
-
-  describe('Cross-Platform Consistency', () => {
-    it('should document platform-specific implementations', () => {
-      // This test documents that all platforms use the same token
-      const platformImplementations = {
-        web: 'var(--tap-area-comfortable, 56px)',
-        ios: 'DesignTokens.accessibility.tapArea.comfortable',
-        android: 'tapAreaComfortable = 56f'
-      };
-
-      // All platforms should reference tap area token
-      expect(platformImplementations.web).toContain('tap-area-comfortable');
-      expect(platformImplementations.ios).toContain('tapArea.comfortable');
-      expect(platformImplementations.android).toContain('tapAreaComfortable');
-    });
-
-    it('should maintain WCAG 2.1 AA compliance across platforms', () => {
-      // WCAG 2.1 AA requires minimum 44x44 CSS pixels
-      // We use 56px for comfortable interaction (exceeds minimum)
-      const minimumWCAG = 44;
-      const ourMinimum = 56;
-
-      expect(ourMinimum).toBeGreaterThanOrEqual(minimumWCAG);
-    });
-  });
-
-  describe('Platform Implementation Verification', () => {
-    it('should have touch target sizing in web implementation CSS', () => {
-      // Read CSS file directly (Jest mocks CSS imports to empty strings)
-      const cssContent = getCSSContent();
-      
-      // Verify tap-area-comfortable token is used for min-height
-      expect(cssContent).toContain('--tap-area-comfortable');
-      expect(cssContent).toContain('min-height');
-    });
-
-    it('should have touch target sizing in iOS implementation', () => {
-      // Read iOS component implementation
-      const fs = require('fs');
-      const path = require('path');
-      const iosComponentPath = path.join(__dirname, '../platforms/ios/InputTextBase.ios.swift');
-      const iosComponentContent = fs.readFileSync(iosComponentPath, 'utf-8');
-      
-      // Verify tap area token is referenced (iOS uses DesignTokens.accessibility.tapArea.recommended)
-      // Note: iOS implementation may still use recommended - update when iOS is updated
-      expect(iosComponentContent).toContain('tapArea');
-    });
-
-    it('should have touch target sizing in Android implementation', () => {
-      // Read Android component implementation
-      const fs = require('fs');
-      const path = require('path');
-      const androidComponentPath = path.join(__dirname, '../platforms/android/InputTextBase.android.kt');
-      const androidComponentContent = fs.readFileSync(androidComponentPath, 'utf-8');
-      
-      // Verify tap area token is referenced
-      // Note: Android implementation may still use recommended - update when Android is updated
-      expect(androidComponentContent).toContain('tapArea');
-    });
-  });
-});

package/src/components/core/Input-Text-Base/platforms/web/InputTextBase.browser.ts

@@ -1,241 +0,0 @@
-/**
- * Input-Text-Base Browser Build
- * 
- * Standalone browser-compatible version of Input-Text-Base web component.
- * This file bundles all dependencies inline for direct browser usage.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Primitive (Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Base
- */
-
-// Inline the state management
-type InputState = 'default' | 'focused' | 'filled' | 'error' | 'success' | 'readonly';
-
-function getInputState(
-  value: string,
-  isFocused: boolean,
-  hasError: boolean,
-  isSuccess: boolean,
-  isReadOnly: boolean
-): InputState {
-  if (isReadOnly) return 'readonly';
-  if (hasError) return 'error';
-  if (isSuccess) return 'success';
-  if (isFocused) return 'focused';
-  if (value.length > 0) return 'filled';
-  return 'default';
-}
-
-// Input-Text-Base Web Component
-class InputTextBase extends HTMLElement {
-  private shadow: ShadowRoot;
-  private input: HTMLInputElement;
-  private labelElement: HTMLElement;
-  private helperTextElement: HTMLElement | null = null;
-  private errorMessageElement: HTMLElement | null = null;
-  private iconContainer: HTMLElement | null = null;
-
-  constructor() {
-    super();
-    this.shadow = this.attachShadow({ mode: 'open' });
-    this.input = document.createElement('input');
-    this.labelElement = document.createElement('label');
-  }
-
-  static get observedAttributes() {
-    return [
-      'label',
-      'value',
-      'type',
-      'placeholder',
-      'required',
-      'read-only',
-      'error-message',
-      'helper-text',
-      'is-success',
-      'show-info-icon'
-    ];
-  }
-
-  connectedCallback() {
-    this.render();
-    this.attachEventListeners();
-  }
-
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (oldValue !== newValue) {
-      this.render();
-    }
-  }
-
-  private render() {
-    const label = this.getAttribute('label') || '';
-    const value = this.getAttribute('value') || '';
-    const type = this.getAttribute('type') || 'text';
-    const placeholder = this.getAttribute('placeholder') || '';
-    const required = this.hasAttribute('required');
-    const readOnly = this.hasAttribute('read-only');
-    const errorMessage = this.getAttribute('error-message');
-    const helperText = this.getAttribute('helper-text');
-    const isSuccess = this.getAttribute('is-success') === 'true';
-    const showInfoIcon = this.getAttribute('show-info-icon') === 'true';
-
-    const hasError = !!errorMessage;
-    const isFocused = document.activeElement === this.input;
-    const state = getInputState(value, isFocused, hasError, isSuccess, readOnly);
-
-    this.shadow.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          position: relative;
-          font-family: var(--typography-input-font-family, system-ui);
-        }
-
-        .input-container {
-          position: relative;
-          display: flex;
-          align-items: center;
-          min-height: var(--tap-area-comfortable);
-          background: var(--color-structure-canvas);
-          border: var(--border-default) solid var(--color-structure-border);
-          border-radius: var(--radius-150);
-          padding-top: var(--space-inset-200);
-          padding-bottom: var(--space-inset-none);
-          padding-left: var(--space-inset-100);
-          padding-right: var(--space-inset-100);
-          transition: border-color var(--motion-float-label-duration) var(--motion-float-label-easing);
-        }
-
-        .input-container.focused {
-          border-color: var(--color-action-primary);
-        }
-
-        .input-container.error {
-          border-color: var(--color-error);
-          background: var(--color-error-background);
-        }
-
-        .input-container.success {
-          border-color: var(--color-feedback-success-text);
-        }
-
-        input {
-          flex: 1;
-          border: none;
-          outline: none;
-          background: transparent;
-          font-family: var(--typography-input-font-family);
-          font-size: var(--typography-input-font-size);
-          line-height: var(--typography-input-line-height);
-          font-weight: var(--typography-input-font-weight);
-          color: var(--color-text-default);
-          padding: var(--space-grouped-tight) 0;
-        }
-
-        input::placeholder {
-          color: transparent;
-        }
-
-        label {
-          position: absolute;
-          left: var(--space-inset-100);
-          top: 50%;
-          transform: translateY(-50%);
-          font-family: var(--typography-label-md-font-family);
-          font-size: var(--typography-label-md-font-size);
-          line-height: var(--typography-label-md-line-height);
-          font-weight: var(--typography-label-md-font-weight);
-          color: var(--color-text-muted);
-          pointer-events: none;
-          transition: all var(--motion-float-label-duration) var(--motion-float-label-easing);
-        }
-
-        .input-container.focused label,
-        .input-container.filled label {
-          top: var(--space-grouped-minimal);
-          transform: translateY(0);
-          font-size: var(--typography-label-md-float-font-size);
-          line-height: var(--typography-label-md-float-line-height);
-          color: var(--color-action-primary);
-        }
-
-        .input-container.error label {
-          color: var(--color-error);
-        }
-
-        .icon {
-          margin-left: var(--space-grouped-tight);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .helper-text,
-        .error-message {
-          margin-top: var(--space-grouped-tight);
-          font-family: var(--typography-caption-font-family);
-          font-size: var(--typography-caption-font-size);
-          line-height: var(--typography-caption-line-height);
-          color: var(--color-text-muted);
-        }
-
-        .error-message {
-          color: var(--color-error);
-        }
-
-        :host(:focus-within) .input-container {
-          outline: var(--accessibility-focus-width) solid var(--accessibility-focus-color);
-          outline-offset: var(--accessibility-focus-offset);
-        }
-      </style>
-
-      <div class="input-container ${state}">
-        <input
-          type="${type}"
-          value="${value}"
-          placeholder="${placeholder}"
-          ${required ? 'required' : ''}
-          ${readOnly ? 'readonly' : ''}
-          aria-label="${label}"
-          ${hasError ? 'aria-invalid="true"' : ''}
-          ${errorMessage ? `aria-describedby="error-${this.id}"` : ''}
-        />
-        <label>${label}${required ? ' *' : ''}</label>
-        ${isSuccess ? '<span class="icon">✓</span>' : ''}
-        ${hasError ? '<span class="icon">!</span>' : ''}
-        ${showInfoIcon ? '<span class="icon">ℹ</span>' : ''}
-      </div>
-
-      ${helperText ? `<div class="helper-text">${helperText}</div>` : ''}
-      ${errorMessage ? `<div class="error-message" id="error-${this.id}">${errorMessage}</div>` : ''}
-    `;
-
-    // Store references
-    this.input = this.shadow.querySelector('input')!;
-    this.labelElement = this.shadow.querySelector('label')!;
-    this.helperTextElement = this.shadow.querySelector('.helper-text');
-    this.errorMessageElement = this.shadow.querySelector('.error-message');
-    this.iconContainer = this.shadow.querySelector('.icon');
-  }
-
-  private attachEventListeners() {
-    if (this.input) {
-      this.input.addEventListener('focus', () => this.render());
-      this.input.addEventListener('blur', () => this.render());
-      this.input.addEventListener('input', (e) => {
-        const target = e.target as HTMLInputElement;
-        this.setAttribute('value', target.value);
-      });
-    }
-  }
-}
-
-// Register the custom element
-if (!customElements.get('input-text-base')) {
-  customElements.define('input-text-base', InputTextBase);
-}
-
-// Export for module usage
-export { InputTextBase };