@3fn/core 14.1.0 → 15.0.0

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

@@ -1,472 +0,0 @@
-/**
- * @category evergreen
- * @purpose Verify Chip-Input web component behavior: dismiss, X icon, accessibility
- * @jest-environment jsdom
- */
-/**
- * Chip-Input Web Component Tests
- * 
- * Stemma System: Chip Family
- * Component Type: Semantic Variant
- * Inherits: Chip-Base
- * 
- * Tests the Chip-Input component's web component behavior:
- * - X icon always visible
- * - Both leading and trailing icons when icon prop provided
- * - onDismiss callback on press
- * - X icon accessible label "Remove [label]"
- * 
- * Following Test Development Standards:
- * - Explicit custom element registration pattern
- * - Wait for customElements.whenDefined() before tests
- * - Wait after appendChild() before querying shadow DOM
- * - Clean up DOM after each test
- * - Test behavior, NOT implementation details
- * 
- * @module Chip-Input/__tests__
- * @see Requirements: 5.1-5.6, 7.5, 13.1, 13.5 in .kiro/specs/045-chip-base/requirements.md
- */
-
-import { cleanupDOM } from '../../../../__tests__/helpers/web-component-test-utils';
-import { ChipInputElement } from '../platforms/web/ChipInput.web';
-
-describe('Chip-Input Web Component', () => {
-  beforeAll(() => {
-    // Ensure custom element is registered
-    if (!customElements.get('chip-input')) {
-      customElements.define('chip-input', ChipInputElement);
-    }
-  });
-
-  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();
-  });
-
-  // ============================================================================
-  // Custom Element Registration
-  // ============================================================================
-  
-  describe('Custom Element Registration', () => {
-    it('should be registered as "chip-input" custom element', () => {
-      const ElementClass = customElements.get('chip-input');
-      expect(ElementClass).toBe(ChipInputElement);
-    });
-
-    it('should be creatable via document.createElement', () => {
-      const chip = document.createElement('chip-input');
-      expect(chip).toBeInstanceOf(ChipInputElement);
-    });
-  });
-
-  // ============================================================================
-  // X Icon Always Visible
-  // ============================================================================
-  
-  describe('X Icon Always Visible', () => {
-    /**
-     * @see Requirement 5.2 - Always display X icon as trailing element
-     * Validates: Requirements 5.2
-     */
-    it('should always show X icon as trailing element', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Tag');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const trailingIconContainer = chip.shadowRoot?.querySelector('.chip-input__trailing-icon');
-      expect(trailingIconContainer).toBeTruthy();
-      
-      const iconElement = trailingIconContainer?.querySelector('icon-base');
-      expect(iconElement).toBeTruthy();
-      expect(iconElement?.getAttribute('name')).toBe('x');
-    });
-
-    it('should show X icon even without leading icon', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Simple Tag');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Leading icon should be hidden
-      const leadingIconContainer = chip.shadowRoot?.querySelector('.chip-base__icon') as HTMLElement;
-      expect(leadingIconContainer?.style.display).toBe('none');
-      
-      // Trailing X icon should be visible
-      const trailingIconContainer = chip.shadowRoot?.querySelector('.chip-input__trailing-icon');
-      expect(trailingIconContainer).toBeTruthy();
-      
-      const xIcon = trailingIconContainer?.querySelector('icon-base');
-      expect(xIcon?.getAttribute('name')).toBe('x');
-    });
-
-    it('should show X icon after label update', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Original');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Update label
-      chip.setAttribute('label', 'Updated');
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // X icon should still be visible
-      const trailingIconContainer = chip.shadowRoot?.querySelector('.chip-input__trailing-icon');
-      const xIcon = trailingIconContainer?.querySelector('icon-base');
-      expect(xIcon?.getAttribute('name')).toBe('x');
-    });
-  });
-
-  // ============================================================================
-  // Both Leading and Trailing Icons
-  // ============================================================================
-  
-  describe('Both Leading and Trailing Icons', () => {
-    /**
-     * @see Requirement 5.3 - Support both leading icon AND trailing X icon
-     * Validates: Requirements 5.3
-     */
-    it('should show both leading icon and trailing X icon when icon prop provided', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Category');
-      chip.setAttribute('icon', 'tag');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Leading icon should be visible with correct name
-      const leadingIconContainer = chip.shadowRoot?.querySelector('.chip-base__icon') as HTMLElement;
-      expect(leadingIconContainer?.style.display).not.toBe('none');
-      
-      const leadingIcon = leadingIconContainer?.querySelector('icon-base');
-      expect(leadingIcon?.getAttribute('name')).toBe('tag');
-      
-      // Trailing X icon should also be visible
-      const trailingIconContainer = chip.shadowRoot?.querySelector('.chip-input__trailing-icon');
-      const trailingIcon = trailingIconContainer?.querySelector('icon-base');
-      expect(trailingIcon?.getAttribute('name')).toBe('x');
-    });
-
-    it('should update leading icon while keeping X icon', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Category');
-      chip.setAttribute('icon', 'star');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Verify initial leading icon
-      let leadingIcon = chip.shadowRoot?.querySelector('.chip-base__icon icon-base');
-      expect(leadingIcon?.getAttribute('name')).toBe('star');
-      
-      // Change leading icon
-      chip.setAttribute('icon', 'heart');
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Leading icon should be updated
-      leadingIcon = chip.shadowRoot?.querySelector('.chip-base__icon icon-base');
-      expect(leadingIcon?.getAttribute('name')).toBe('heart');
-      
-      // X icon should still be present
-      const trailingIcon = chip.shadowRoot?.querySelector('.chip-input__trailing-icon icon-base');
-      expect(trailingIcon?.getAttribute('name')).toBe('x');
-    });
-
-    it('should hide leading icon when icon attribute is removed but keep X icon', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Category');
-      chip.setAttribute('icon', 'tag');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Remove leading icon
-      chip.removeAttribute('icon');
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      // Leading icon should be hidden
-      const leadingIconContainer = chip.shadowRoot?.querySelector('.chip-base__icon') as HTMLElement;
-      expect(leadingIconContainer?.style.display).toBe('none');
-      
-      // X icon should still be visible
-      const trailingIcon = chip.shadowRoot?.querySelector('.chip-input__trailing-icon icon-base');
-      expect(trailingIcon?.getAttribute('name')).toBe('x');
-    });
-  });
-
-  // ============================================================================
-  // onDismiss Callback
-  // ============================================================================
-  
-  describe('onDismiss Callback', () => {
-    /**
-     * @see Requirement 5.4 - Tap anywhere calls onDismiss
-     * Validates: Requirements 5.4
-     */
-    it('should call onDismiss when chip is clicked', async () => {
-      const onDismiss = jest.fn();
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Dismissible');
-      chip.onDismiss = onDismiss;
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input') as HTMLElement;
-      chipEl?.click();
-      
-      expect(onDismiss).toHaveBeenCalledTimes(1);
-    });
-
-    it('should call onDismiss on Enter key', async () => {
-      const onDismiss = jest.fn();
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Keyboard');
-      chip.onDismiss = onDismiss;
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input') as HTMLElement;
-      const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
-      chipEl?.dispatchEvent(enterEvent);
-      
-      expect(onDismiss).toHaveBeenCalledTimes(1);
-    });
-
-    it('should call onDismiss on Space key', async () => {
-      const onDismiss = jest.fn();
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Keyboard');
-      chip.onDismiss = onDismiss;
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input') as HTMLElement;
-      const spaceEvent = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
-      chipEl?.dispatchEvent(spaceEvent);
-      
-      expect(onDismiss).toHaveBeenCalledTimes(1);
-    });
-
-    it('should dispatch dismiss event when clicked', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Event Test');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const eventHandler = jest.fn();
-      chip.addEventListener('dismiss', eventHandler);
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input') as HTMLElement;
-      chipEl?.click();
-      
-      expect(eventHandler).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not throw when clicked without onDismiss callback', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'No Callback');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input') as HTMLElement;
-      
-      expect(() => chipEl?.click()).not.toThrow();
-    });
-
-    it('should call onDismiss multiple times on repeated clicks', async () => {
-      const onDismiss = jest.fn();
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Multi Click');
-      chip.onDismiss = onDismiss;
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input') as HTMLElement;
-      chipEl?.click();
-      chipEl?.click();
-      chipEl?.click();
-      
-      expect(onDismiss).toHaveBeenCalledTimes(3);
-    });
-  });
-
-  // ============================================================================
-  // X Icon Accessible Label
-  // ============================================================================
-  
-  describe('X Icon Accessible Label', () => {
-    /**
-     * @see Requirement 7.5 - X icon accessible label "Remove [label]"
-     * Validates: Requirements 7.5
-     */
-    it('should have aria-label "Remove [label]" on chip', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'JavaScript');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input');
-      expect(chipEl?.getAttribute('aria-label')).toBe('Remove JavaScript');
-    });
-
-    it('should have visually hidden dismiss label text', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Python');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const dismissLabel = chip.shadowRoot?.querySelector('.chip-input__dismiss-label');
-      expect(dismissLabel).toBeTruthy();
-      expect(dismissLabel?.textContent).toBe('Remove Python');
-    });
-
-    it('should update accessible label when label changes', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Original');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      let chipEl = chip.shadowRoot?.querySelector('.chip-input');
-      expect(chipEl?.getAttribute('aria-label')).toBe('Remove Original');
-      
-      // Change label
-      chip.setAttribute('label', 'Updated');
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      chipEl = chip.shadowRoot?.querySelector('.chip-input');
-      expect(chipEl?.getAttribute('aria-label')).toBe('Remove Updated');
-    });
-
-    it('should update visually hidden text when label changes', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'First');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      let dismissLabel = chip.shadowRoot?.querySelector('.chip-input__dismiss-label');
-      expect(dismissLabel?.textContent).toBe('Remove First');
-      
-      // Change label
-      chip.setAttribute('label', 'Second');
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      dismissLabel = chip.shadowRoot?.querySelector('.chip-input__dismiss-label');
-      expect(dismissLabel?.textContent).toBe('Remove Second');
-    });
-
-    it('should have aria-hidden on trailing icon container', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Tag');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const trailingIconContainer = chip.shadowRoot?.querySelector('.chip-input__trailing-icon');
-      expect(trailingIconContainer?.getAttribute('aria-hidden')).toBe('true');
-    });
-  });
-
-  // ============================================================================
-  // Accessibility - Role and Tabindex
-  // ============================================================================
-  
-  describe('Accessibility - Role and Tabindex', () => {
-    it('should have role="button"', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Accessible');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input');
-      expect(chipEl?.getAttribute('role')).toBe('button');
-    });
-
-    it('should have tabindex="0" for keyboard focus', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Focusable');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input');
-      expect(chipEl?.getAttribute('tabindex')).toBe('0');
-    });
-  });
-
-  // ============================================================================
-  // Observed Attributes
-  // ============================================================================
-  
-  describe('Observed Attributes', () => {
-    it('should observe label attribute', () => {
-      expect(ChipInputElement.observedAttributes).toContain('label');
-    });
-
-    it('should observe icon attribute', () => {
-      expect(ChipInputElement.observedAttributes).toContain('icon');
-    });
-
-    it('should observe test-id attribute', () => {
-      expect(ChipInputElement.observedAttributes).toContain('test-id');
-    });
-
-    it('should NOT observe selected attribute (Chip-Input has no selected state)', () => {
-      expect(ChipInputElement.observedAttributes).not.toContain('selected');
-    });
-  });
-
-  // ============================================================================
-  // Test ID
-  // ============================================================================
-  
-  describe('Test ID', () => {
-    it('should apply data-testid attribute', async () => {
-      const chip = document.createElement('chip-input') as ChipInputElement;
-      chip.setAttribute('label', 'Test');
-      chip.setAttribute('test-id', 'my-chip-input');
-      document.body.appendChild(chip);
-      
-      await new Promise(resolve => setTimeout(resolve, 0));
-      
-      const chipEl = chip.shadowRoot?.querySelector('.chip-input');
-      expect(chipEl?.getAttribute('data-testid')).toBe('my-chip-input');
-    });
-  });
-});

package/src/components/core/Chip-Input/index.ts

@@ -1,35 +0,0 @@
-/**
- * Chip-Input Component Index
- * 
- * Stemma System naming: [Family]-[Type]-[Variant] = Chip-Input
- * Type: Semantic Variant
- * Inherits: Chip-Base
- * 
- * Chip-Input is a semantic variant of Chip-Base that adds dismiss behavior.
- * Used for managing user-entered values like tags or selections.
- * 
- * Key Characteristics:
- * - Dismissible: Tap anywhere to dismiss
- * - X icon: Always shows trailing X icon
- * - Inherits: All Chip-Base visual styling
- * 
- * @see ./README.md for complete documentation
- * @see .kiro/specs/045-chip-base for design specification
- * @see .kiro/specs/034-component-architecture-system for Stemma System details
- */
-
-// Export types
-export type { ChipInputProps } from './types';
-
-// Web platform implementation
-export { 
-  ChipInputElement,
-  CHIP_INPUT_OBSERVED_ATTRIBUTES,
-  type ChipInputObservedAttribute,
-  type IChipInputElement
-} from './platforms/web/ChipInput.web';
-
-// Platform implementations
-// - Web: ChipInputElement (Task 3.6 - Complete)
-// - iOS: ChipInput (Task 3.8)
-// - Android: ChipInput (Task 3.8)

package/src/components/core/Chip-Input/platforms/ios/.gitkeep

@@ -1,3 +0,0 @@
-# Placeholder for Chip-Input iOS platform implementation
-# Files to be added in Task 3.8:
-# - ChipInput.swift

package/src/components/core/Chip-Input/platforms/web/ChipInput.styles.css

@@ -1,99 +0,0 @@
-/**
- * Chip-Input Component Styles for Web Platform
- * 
- * Extends Chip-Base styles with trailing X icon for dismiss behavior.
- * Chip-Input always shows an X icon and dismisses on tap anywhere.
- * 
- * Stemma System Naming: [Family]-[Type] = Chip-Input
- * Component Type: Semantic Variant
- * Inherits: Chip-Base
- * 
- * Key Characteristics:
- * - Always displays trailing X icon
- * - Supports both leading icon AND trailing X icon
- * - Tap anywhere dismisses (not just X icon)
- * 
- * DesignerPunk Philosophy: NO DISABLED STATES
- * This component does not support disabled states. If an action is unavailable,
- * the component should not be rendered.
- * 
- * @module Chip-Input/platforms/web/styles
- * @see Requirements: 5.1-5.6, 7.5 in .kiro/specs/045-chip-base/requirements.md
- */
-
-/* ==========================================================================
-   Trailing Icon Container
-   ========================================================================== */
-
-/**
- * Trailing icon container for the X dismiss icon.
- * 
- * - Positioned after the label
- * - Same styling as leading icon for consistency
- * - Always visible (X icon is always shown)
- * 
- * @see Requirement 5.2 - Always display X icon as trailing element
- */
-.chip-input__trailing-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: inherit;
-  /* Ensure trailing icon doesn't capture pointer events separately */
-  /* Tap anywhere on chip dismisses, not just the X icon */
-  pointer-events: none;
-}
-
-/* ==========================================================================
-   X Icon Accessibility
-   ========================================================================== */
-
-/**
- * Visually hidden text for screen readers.
- * 
- * Provides accessible label "Remove [label]" for the X icon.
- * Uses standard visually-hidden pattern.
- * 
- * @see Requirement 7.5 - X icon accessible label "Remove [label]"
- */
-.chip-input__dismiss-label {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ==========================================================================
-   High Contrast Mode Support
-   ========================================================================== */
-
-/**
- * Ensure Chip-Input remains visible in Windows High Contrast Mode.
- */
-@media (prefers-contrast: high) {
-  .chip-input__trailing-icon {
-    /* Ensure X icon is visible in high contrast mode */
-    color: currentColor;
-  }
-}
-
-/* ==========================================================================
-   Print Styles
-   ========================================================================== */
-
-/**
- * Optimize Chip-Input appearance for print.
- * 
- * - Hide X icon in print (not interactive)
- */
-@media print {
-  .chip-input__trailing-icon {
-    display: none;
-  }
-}