@3fn/core 14.0.0 → 15.0.0

package/src/components/core/Progress-Indicator-Node-Base/__tests__/VisualStates.test.ts

@@ -1,259 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-/**
- * @category evergreen
- * @purpose Verify Progress-Indicator-Node-Base visual state rendering
- */
-
-/**
- * Visual State Tests for Progress-Indicator-Node-Base
- * 
- * Stemma System: Progress Indicator Family
- * Component Type: Primitive (Base)
- * 
- * Tests verify:
- * - Node renders at base size for incomplete/completed/error states (Req 12.1-12.3)
- * - Node renders at current size for current state (Req 12.4)
- * - Size transitions respect prefers-reduced-motion (Req 12.5, 15.23)
- * - Content rendering: dot (sm), empty circle (md/lg + none), checkmark (md/lg + checkmark), icon (md/lg + icon) (Req 12.6-12.9)
- * - Color application for all states (Req 12.13-12.16)
- * 
- * Requirements: 12.1-12.9, 15.21-15.23
- * @see .kiro/specs/048-progress-family/requirements.md
- */
-
-import { cleanupDOM } from '../../../../__tests__/helpers/web-component-test-utils';
-import * as fs from 'fs';
-import * as path from 'path';
-import { describe, it, expect, beforeAll, beforeEach } from '@jest/globals';
-import { ProgressIndicatorNodeBase } from '../platforms/web/ProgressIndicatorNodeBase.web';
-import { NODE_SIZE_VALUES } from '../types';
-
-// ============================================================================
-// Helpers
-// ============================================================================
-
-/** Read the actual CSS file for CSS-level assertions */
-function readCSSContent(): string {
-  const cssPath = path.resolve(
-    process.cwd(),
-    'src/components/core/Progress-Indicator-Node-Base/platforms/web/ProgressIndicatorNodeBase.styles.css'
-  );
-  return fs.existsSync(cssPath) ? fs.readFileSync(cssPath, 'utf-8') : '';
-}
-
-let cssContent: string;
-
-/** Create a node component with given attributes */
-function createNode(attrs: Record<string, string> = {}): ProgressIndicatorNodeBase {
-  const el = document.createElement('progress-indicator-node-base') as ProgressIndicatorNodeBase;
-  for (const [key, value] of Object.entries(attrs)) {
-    el.setAttribute(key, value);
-  }
-  document.body.appendChild(el);
-  return el;
-}
-
-// ============================================================================
-// Test Suite
-// ============================================================================
-
-describe('Progress-Indicator-Node-Base — Visual States', () => {
-  beforeAll(() => {
-    if (!customElements.get('progress-indicator-node-base')) {
-      customElements.define('progress-indicator-node-base', ProgressIndicatorNodeBase);
-    }
-    cssContent = readCSSContent();
-  });
-
-  beforeEach(() => {
-    cleanupDOM();
-  });
-
-  // ==========================================================================
-  // Size Rendering (Req 12.1-12.4, 15.21)
-  // ==========================================================================
-
-  describe('Node Size Rendering', () => {
-    it('renders at base size for incomplete state via CSS class', () => {
-      const el = createNode({ state: 'incomplete', size: 'md' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      expect(node.classList.contains('node--incomplete')).toBe(true);
-      expect(node.classList.contains('node--md')).toBe(true);
-      expect(node.classList.contains('node--current')).toBe(false);
-    });
-
-    it('renders at base size for completed state via CSS class', () => {
-      const el = createNode({ state: 'completed', size: 'lg' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      expect(node.classList.contains('node--completed')).toBe(true);
-      expect(node.classList.contains('node--lg')).toBe(true);
-      expect(node.classList.contains('node--current')).toBe(false);
-    });
-
-    it('renders at base size for error state via CSS class', () => {
-      const el = createNode({ state: 'error', size: 'sm' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      expect(node.classList.contains('node--error')).toBe(true);
-      expect(node.classList.contains('node--sm')).toBe(true);
-      expect(node.classList.contains('node--current')).toBe(false);
-    });
-
-    it('renders at current (emphasized) size for current state via CSS class', () => {
-      const el = createNode({ state: 'current', size: 'md' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      expect(node.classList.contains('node--current')).toBe(true);
-      expect(node.classList.contains('node--md')).toBe(true);
-    });
-
-    it('CSS defines base size tokens for all size variants', () => {
-      // Verify CSS references base size tokens
-      expect(cssContent).toMatch(/\.node--sm\s*\{[^}]*--progress-node-size-sm/);
-      expect(cssContent).toMatch(/\.node--md\s*\{[^}]*--progress-node-size-md/);
-      expect(cssContent).toMatch(/\.node--lg\s*\{[^}]*--progress-node-size-lg/);
-    });
-
-    it('CSS defines current size overrides for all size variants', () => {
-      // Verify CSS has compound selectors for current + size
-      expect(cssContent).toMatch(/\.node--sm\.node--current[^{]*\{[^}]*--progress-node-size-sm-current/);
-      expect(cssContent).toMatch(/\.node--md\.node--current[^{]*\{[^}]*--progress-node-size-md-current/);
-      expect(cssContent).toMatch(/\.node--lg\.node--current[^{]*\{[^}]*--progress-node-size-lg-current/);
-    });
-
-    it('current size values are +4px over base size', () => {
-      // Validate the mathematical relationship from types
-      for (const size of ['sm', 'md', 'lg'] as const) {
-        const { base, current } = NODE_SIZE_VALUES[size];
-        expect(current - base).toBe(4);
-      }
-    });
-  });
-
-  // ==========================================================================
-  // Prefers-Reduced-Motion (Req 12.5, 15.23)
-  // ==========================================================================
-
-  describe('Prefers-Reduced-Motion', () => {
-    it('CSS includes transition on .node for size changes', () => {
-      expect(cssContent).toMatch(/\.node\s*\{[^}]*transition:/);
-    });
-
-    it('CSS disables transition when prefers-reduced-motion: reduce', () => {
-      expect(cssContent).toMatch(/prefers-reduced-motion:\s*reduce/);
-      // Inside the media query, transition should be set to none
-      const reducedMotionBlock = cssContent.match(
-        /@media\s*\(prefers-reduced-motion:\s*reduce\)\s*\{([\s\S]*?)\}/
-      );
-      expect(reducedMotionBlock).not.toBeNull();
-      expect(reducedMotionBlock![1]).toMatch(/transition:\s*none/);
-    });
-  });
-
-  // ==========================================================================
-  // Content Rendering (Req 12.6-12.9, 15.22)
-  // ==========================================================================
-
-  describe('Content Rendering', () => {
-    it('sm size renders as dot regardless of content prop', () => {
-      // Even with content="checkmark", sm should render a dot
-      const el = createNode({ state: 'incomplete', size: 'sm', content: 'checkmark' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      expect(node.querySelector('.node__dot')).not.toBeNull();
-      expect(node.querySelector('.node__content')).toBeNull();
-    });
-
-    it('md size with content=none renders empty circle (no inner content)', () => {
-      const el = createNode({ state: 'incomplete', size: 'md', content: 'none' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      expect(node.querySelector('.node__dot')).toBeNull();
-      expect(node.querySelector('.node__content')).toBeNull();
-    });
-
-    it('md size with content=checkmark renders checkmark SVG', () => {
-      const el = createNode({ state: 'completed', size: 'md', content: 'checkmark' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      const content = node.querySelector('.node__content');
-      expect(content).not.toBeNull();
-      expect(content!.querySelector('svg')).not.toBeNull();
-    });
-
-    it('lg size with content=icon renders icon-base element', () => {
-      const el = createNode({ state: 'current', size: 'lg', content: 'icon', icon: 'star' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      const content = node.querySelector('.node__content');
-      expect(content).not.toBeNull();
-      expect(content!.querySelector('icon-base')).not.toBeNull();
-      expect(content!.querySelector('icon-base')!.getAttribute('name')).toBe('star');
-    });
-
-    it('lg size with content=none renders empty circle', () => {
-      const el = createNode({ state: 'incomplete', size: 'lg', content: 'none' });
-      const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-
-      expect(node.querySelector('.node__dot')).toBeNull();
-      expect(node.querySelector('.node__content')).toBeNull();
-    });
-  });
-
-  // ==========================================================================
-  // Color Application (Req 12.13-12.16)
-  // ==========================================================================
-
-  describe('Color Application', () => {
-    it('CSS applies pending color tokens for incomplete state', () => {
-      expect(cssContent).toMatch(
-        /\.node--incomplete\s*\{[^}]*--color-progress-pending-background/
-      );
-      expect(cssContent).toMatch(
-        /\.node--incomplete\s*\{[^}]*--color-progress-pending-text/
-      );
-    });
-
-    it('CSS applies current color tokens for current state', () => {
-      expect(cssContent).toMatch(
-        /\.node--current\s*\{[^}]*--color-progress-current-background/
-      );
-      expect(cssContent).toMatch(
-        /\.node--current\s*\{[^}]*--color-progress-current-text/
-      );
-    });
-
-    it('CSS applies completed color tokens for completed state', () => {
-      expect(cssContent).toMatch(
-        /\.node--completed\s*\{[^}]*--color-progress-completed-background/
-      );
-      expect(cssContent).toMatch(
-        /\.node--completed\s*\{[^}]*--color-progress-completed-text/
-      );
-    });
-
-    it('CSS applies error color tokens for error state', () => {
-      expect(cssContent).toMatch(
-        /\.node--error\s*\{[^}]*--color-progress-error-background/
-      );
-      expect(cssContent).toMatch(
-        /\.node--error\s*\{[^}]*--color-progress-error-text/
-      );
-    });
-
-    it('component applies correct state class for each state', () => {
-      const states = ['incomplete', 'current', 'completed', 'error'] as const;
-      for (const state of states) {
-        const el = createNode({ state, size: 'md' });
-        const node = el.shadowRoot!.querySelector('.node') as HTMLElement;
-        expect(node.classList.contains(`node--${state}`)).toBe(true);
-        cleanupDOM();
-      }
-    });
-  });
-});

package/src/components/core/Progress-Indicator-Node-Base/index.ts

@@ -1,36 +0,0 @@
-/**
- * Progress-Indicator-Node-Base Component Index
- * 
- * Stemma System naming: [Family]-[Type]-[Variant] = Progress-Indicator-Node-Base
- * Type: Primitive (Base)
- * 
- * Progress-Indicator-Node-Base is a primitive component that renders individual
- * circular indicator nodes with state-based visual treatment. It serves as the
- * foundational building block for all Progress Indicator semantic variants.
- * 
- * Key Characteristics:
- * - 4 states: incomplete, current, completed, error
- * - 3 sizes: sm (12px), md (16px), lg (24px)
- * - Current state applies +4px size emphasis
- * - sm size always renders as dot (content ignored)
- * - Non-interactive, decorative (a11y handled by semantic variants)
- * 
- * @see .kiro/specs/048-progress-family for design specification
- */
-
-// Export types
-export {
-  NodeState,
-  NodeSize,
-  NodeContent,
-  NODE_BASE_DEFAULTS,
-  NODE_SIZE_VALUES,
-} from './types';
-
-export type { ProgressIndicatorNodeBaseProps } from './types';
-
-// Platform implementations
-// - Web: ProgressIndicatorNodeBase (Task 2.1) ✅
-// - iOS: ProgressIndicatorNodeBase (Task 2.1) ✅
-// - Android: ProgressIndicatorNodeBase (Task 2.1) ✅
-export { ProgressIndicatorNodeBase } from './platforms/web/ProgressIndicatorNodeBase.web';

package/src/components/core/Progress-Indicator-Node-Base/platforms/web/ProgressIndicatorNodeBase.styles.css

@@ -1,193 +0,0 @@
-/**
- * Progress-Indicator-Node-Base Styles for Web Platform
- * 
- * Stemma System: Progress Indicator Family
- * Component Type: Primitive (Base)
- * 
- * Token-based styling using CSS custom properties.
- * All color values reference semantic progress tokens.
- * All size values reference component progress tokens.
- * 
- * @see .kiro/specs/048-progress-family/design.md
- * @see Requirements 1.1-1.5, 12.1-12.16
- */
-
-/* ============================================================================
- * Base Node Styles
- * ============================================================================ */
-
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.node {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  box-sizing: border-box;
-  transition: width var(--motion-selection-transition-duration) var(--motion-selection-transition-easing),
-              height var(--motion-selection-transition-duration) var(--motion-selection-transition-easing),
-              background-color var(--motion-selection-transition-duration) var(--motion-selection-transition-easing);
-}
-
-/* ============================================================================
- * State Colors
- * Uses semantic color.progress.* tokens
- * @see Requirements 12.13-12.16
- * ============================================================================ */
-
-.node--incomplete {
-  background-color: var(--color-progress-pending-background);
-  color: var(--color-progress-pending-text);
-}
-
-.node--current {
-  background-color: var(--color-progress-current-background);
-  color: var(--color-progress-current-text);
-}
-
-.node--completed {
-  background-color: var(--color-progress-completed-background);
-  color: var(--color-progress-completed-text);
-}
-
-.node--error {
-  background-color: var(--color-progress-error-background);
-  color: var(--color-progress-error-text);
-}
-
-
-/* ============================================================================
- * Size Variants — Base sizes
- * @see Requirements 12.1-12.3 — base size for incomplete/completed/error
- * ============================================================================ */
-
-.node--sm {
-  width: var(--progress-node-size-sm);
-  height: var(--progress-node-size-sm);
-}
-
-.node--md {
-  width: var(--progress-node-size-md);
-  height: var(--progress-node-size-md);
-}
-
-.node--lg {
-  width: var(--progress-node-size-lg);
-  height: var(--progress-node-size-lg);
-}
-
-/* ============================================================================
- * Current State Size Emphasis (+4px)
- * Overrides base size when state is current
- * @see Requirements 1.5, 12.4 — current size emphasis
- * ============================================================================ */
-
-.node--sm.node--current {
-  width: var(--progress-node-size-sm-current);
-  height: var(--progress-node-size-sm-current);
-}
-
-.node--md.node--current {
-  width: var(--progress-node-size-md-current);
-  height: var(--progress-node-size-md-current);
-}
-
-.node--lg.node--current {
-  width: var(--progress-node-size-lg-current);
-  height: var(--progress-node-size-lg-current);
-}
-
-/* ============================================================================
- * Scale-Based Sizing (opt-in via sizing="scale")
- * Fixed layout box at current-state size, inactive nodes scale down.
- * Prevents layout twitch during animation — transform is GPU-composited.
- * Used by Pagination-Base for smooth dot transitions.
- * @see findings/scale-scoping-decision.md
- * ============================================================================ */
-
-:host([sizing="scale"]) .node {
-  transition: transform var(--motion-selection-transition-duration) var(--motion-selection-transition-easing),
-              background-color var(--motion-settle-transition-duration) var(--motion-settle-transition-easing);
-}
-
-:host([sizing="scale"]) .node--sm {
-  width: var(--progress-node-size-sm-current);
-  height: var(--progress-node-size-sm-current);
-  transform: scale(0.75);
-}
-:host([sizing="scale"]) .node--sm.node--current {
-  transform: scale(1.0);
-}
-
-:host([sizing="scale"]) .node--md {
-  width: var(--progress-node-size-md-current);
-  height: var(--progress-node-size-md-current);
-  transform: scale(0.80);
-}
-:host([sizing="scale"]) .node--md.node--current {
-  transform: scale(1.0);
-}
-
-:host([sizing="scale"]) .node--lg {
-  width: var(--progress-node-size-lg-current);
-  height: var(--progress-node-size-lg-current);
-  transform: scale(0.833);
-}
-:host([sizing="scale"]) .node--lg.node--current {
-  transform: scale(1.0);
-}
-
-/* ============================================================================
- * Content Rendering
- * @see Requirements 1.3-1.4, 12.6-12.9
- * ============================================================================ */
-
-/* Dot content for sm size — filled circle, no inner content */
-.node__dot {
-  width: 50%;
-  height: 50%;
-  border-radius: 50%;
-  background-color: currentColor;
-}
-
-/* Icon/checkmark content container */
-.node__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  line-height: 0;
-}
-
-/* SVG icon sizing */
-.node__content svg {
-  width: 60%;
-  height: 60%;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-/* ============================================================================
- * Accessibility
- * @see Requirements 7.10, 12.5 — prefers-reduced-motion
- * ============================================================================ */
-
-@media (prefers-reduced-motion: reduce) {
-  .node {
-    transition: none;
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .node {
-    border: 1px solid currentColor;
-  }
-}