@3fn/core 14.1.0 → 15.0.0

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

@@ -1,33 +0,0 @@
-/**
- * Progress-Indicator-Connector-Base Component Index
- * 
- * Stemma System naming: [Family]-[Type]-[Variant] = Progress-Indicator-Connector-Base
- * Type: Primitive (Base)
- * 
- * Progress-Indicator-Connector-Base is a primitive component that renders
- * horizontal connecting lines between progress indicator nodes with
- * state-based color treatment. It serves as a building block for
- * Stepper-Base and Stepper-Detailed semantic variants.
- * 
- * Key Characteristics:
- * - 2 states: active, inactive
- * - 1px thickness (borderDefault token)
- * - Flexible length (fills space between nodes)
- * - Non-interactive, decorative (a11y handled by semantic variants)
- * 
- * @see .kiro/specs/048-progress-family for design specification
- */
-
-// Export types
-export {
-  ConnectorState,
-  CONNECTOR_BASE_DEFAULTS,
-} from './types';
-
-export type { ProgressIndicatorConnectorBaseProps } from './types';
-
-// Platform implementations
-// - Web: ProgressIndicatorConnectorBase (Task 2.2) ✅
-// - iOS: ProgressIndicatorConnectorBase (Task 2.2) ✅
-// - Android: ProgressIndicatorConnectorBase (Task 2.2) ✅
-export { ProgressIndicatorConnectorBase } from './platforms/web/ProgressIndicatorConnectorBase.web';

package/src/components/core/Progress-Indicator-Connector-Base/platforms/web/ProgressIndicatorConnectorBase.styles.css

@@ -1,50 +0,0 @@
-/**
- * Progress-Indicator-Connector-Base Styles for Web Platform
- * 
- * Stemma System: Progress Indicator Family
- * Component Type: Primitive (Base)
- * 
- * Token-based styling using CSS custom properties.
- * Color values reference semantic progress connector tokens.
- * Thickness references component progress connector token.
- * 
- * @see .kiro/specs/048-progress-family/design.md
- * @see Requirements 1.6-1.7, 12.10-12.12
- */
-
-/* ============================================================================
- * Host Element
- * Connector fills available space between nodes (flexible length)
- * ============================================================================ */
-
-:host {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-inline-size: 0;
-}
-
-/* ============================================================================
- * Base Connector Styles
- * @see Requirement 1.7 - 1px thickness (borderDefault token)
- * @see Requirement 12.12 - Uses borderDefault token
- * ============================================================================ */
-
-.connector {
-  inline-size: 100%;
-  block-size: var(--progress-connector-thickness);
-}
-
-/* ============================================================================
- * State Colors
- * Uses semantic color.progress.*.connector tokens
- * @see Requirements 12.10-12.11
- * ============================================================================ */
-
-.connector--active {
-  background-color: var(--color-progress-completed-connector);
-}
-
-.connector--inactive {
-  background-color: var(--color-progress-pending-connector);
-}

package/src/components/core/Progress-Indicator-Connector-Base/platforms/web/ProgressIndicatorConnectorBase.web.ts

@@ -1,141 +0,0 @@
-/**
- * Progress-Indicator-Connector-Base Component for Web Platform
- * 
- * Stemma System: Progress Indicator Family
- * Component Type: Primitive (Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Progress-Indicator-Connector-Base
- * 
- * Connecting line element between progress indicator nodes.
- * Renders as a horizontal line with state-based color treatment.
- * 
- * @module Progress-Indicator-Connector-Base/platforms/web
- * @see Requirements: 1.6-1.7, 12.10-12.12
- * @see .kiro/specs/048-progress-family/design.md
- */
-
-/// <reference lib="dom" />
-
-import { ConnectorState, CONNECTOR_BASE_DEFAULTS } from '../../types';
-
-// Import CSS as string for browser bundle compatibility
-import connectorStyles from './ProgressIndicatorConnectorBase.styles.css';
-
-/**
- * Progress-Indicator-Connector-Base Web Component
- * 
- * A native web component that renders a horizontal connecting line between
- * progress indicator nodes with state-based color treatment.
- * 
- * @remarks
- * - Uses Shadow DOM for style encapsulation
- * - Token-based styling via CSS custom properties
- * - Supports 2 states: active, inactive
- * - Uses 1px thickness (borderDefault token)
- * - Flexible length (fills space between nodes via flex: 1)
- * - Decorative element (aria-hidden)
- * 
- * @example
- * ```html
- * <progress-indicator-connector-base state="active"></progress-indicator-connector-base>
- * <progress-indicator-connector-base state="inactive"></progress-indicator-connector-base>
- * ```
- * 
- * @see Requirements: 1.6-1.7, 12.10-12.12
- */
-export class ProgressIndicatorConnectorBase extends HTMLElement {
-  private _shadowRoot: ShadowRoot;
-
-  static get observedAttributes(): string[] {
-    return ['state', 'test-id'];
-  }
-
-  constructor() {
-    super();
-    this._shadowRoot = this.attachShadow({ mode: 'open' });
-  }
-
-  connectedCallback(): void {
-    this.render();
-  }
-
-  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void {
-    if (oldValue !== newValue && this.isConnected) {
-      this.render();
-    }
-  }
-
-  // ============================================================================
-  // Property Getters/Setters
-  // ============================================================================
-
-  /**
-   * Get the connector state.
-   * @see Requirement 1.6 - Two states: active, inactive
-   */
-  get state(): ConnectorState {
-    const state = this.getAttribute('state');
-    return (state === 'active' || state === 'inactive') ? state : CONNECTOR_BASE_DEFAULTS.state;
-  }
-
-  set state(value: ConnectorState) {
-    this.setAttribute('state', value);
-  }
-
-  get testID(): string | null {
-    return this.getAttribute('test-id');
-  }
-
-  set testID(value: string | null) {
-    if (value) {
-      this.setAttribute('test-id', value);
-    } else {
-      this.removeAttribute('test-id');
-    }
-  }
-
-  // ============================================================================
-  // Rendering
-  // ============================================================================
-
-  /**
-   * Render the connector into shadow DOM.
-   * 
-   * @see Requirements 1.6-1.7, 12.10-12.12
-   */
-  private render(): void {
-    const state = this.state;
-    const testID = this.testID;
-
-    const connectorClasses = [
-      'connector',
-      `connector--${state}`,
-    ].join(' ');
-
-    const testIDAttr = testID ? ` data-testid="${this.escapeHtml(testID)}"` : '';
-
-    this._shadowRoot.innerHTML = `
-      <style>
-        ${connectorStyles}
-      </style>
-      <span class="${connectorClasses}"${testIDAttr} role="presentation" aria-hidden="true"></span>
-    `;
-  }
-
-  private escapeHtml(str: string): string {
-    const htmlEntities: Record<string, string> = {
-      '&': '&amp;',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      "'": '&#39;',
-    };
-    return str.replace(/[&<>"']/g, (char) => htmlEntities[char]);
-  }
-}
-
-// Register the custom element
-if (!customElements.get('progress-indicator-connector-base')) {
-  customElements.define('progress-indicator-connector-base', ProgressIndicatorConnectorBase);
-}
-
-export default ProgressIndicatorConnectorBase;

package/src/components/core/Progress-Indicator-Connector-Base/types.ts

@@ -1,67 +0,0 @@
-/**
- * Progress-Indicator-Connector-Base Type Definitions
- * 
- * Stemma System: Progress Indicator Family
- * Component Type: Primitive (Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Progress-Indicator-Connector-Base
- * 
- * Provides type-safe props for the Progress-Indicator-Connector-Base component
- * across all platforms. This primitive renders connecting lines between nodes
- * with state-based color treatment.
- * 
- * @module Progress-Indicator-Connector-Base/types
- * @see .kiro/specs/048-progress-family/design.md for design specification
- * @see Requirements 1.6-1.7, 12.10-12.12 in .kiro/specs/048-progress-family/requirements.md
- */
-
-/**
- * Connector visual states.
- * 
- * Each state maps to specific color tokens from color.progress.*:
- * - active: color.progress.completed.connector (green100) — between completed nodes
- * - inactive: color.progress.pending.connector (white200) — between incomplete nodes
- * 
- * @see Requirement 1.6 - Two states: active, inactive
- * @see Requirements 12.10-12.11 - Color application per state
- */
-export type ConnectorState = 'active' | 'inactive';
-
-/**
- * Default values for Progress-Indicator-Connector-Base props.
- */
-export const CONNECTOR_BASE_DEFAULTS = {
-  /** Default connector state */
-  state: 'inactive' as ConnectorState,
-} as const;
-
-/**
- * Props interface for Progress-Indicator-Connector-Base component (platform-agnostic).
- * 
- * This interface defines the common API across all platforms (web, iOS, Android).
- * 
- * @see Requirements 1.6-1.7 in .kiro/specs/048-progress-family/requirements.md
- * 
- * @example
- * ```typescript
- * // Web usage
- * <progress-indicator-connector-base state="active"></progress-indicator-connector-base>
- * <progress-indicator-connector-base state="inactive"></progress-indicator-connector-base>
- * ```
- */
-export interface ProgressIndicatorConnectorBaseProps {
-  /**
-   * Visual state of the connector (required).
-   * Determines color: active (green100) or inactive (white200).
-   * 
-   * @see Requirement 1.6 - Two states
-   */
-  state: ConnectorState;
-
-  /**
-   * Test identifier for automated testing.
-   * - Web: data-testid attribute
-   * - iOS: accessibilityIdentifier
-   * - Android: testTag in semantics
-   */
-  testID?: string;
-}

package/src/components/core/Progress-Indicator-Label-Base/README.md

@@ -1,191 +0,0 @@
-# Progress-Indicator-Label-Base
-
-**Family**: Progress Indicator
-**Type**: Primitive (Base)
-**Readiness**: Development
-**Platforms**: Web, iOS, Android
-
----
-
-## Overview
-
-Progress-Indicator-Label-Base is a primitive component that renders text labels centered below progress indicator nodes. It supports a primary label with optional helper text, using the `typography.labelSm` token for consistent text styling across platforms.
-
-This component is non-interactive and decorative. Accessibility (ARIA roles, labels) is handled by the semantic variant that composes it: Stepper-Detailed. Pagination-Base and Stepper-Base do not use labels.
-
-### Key Characteristics
-
-- Positioned centered below the associated node
-- Uses `typography.labelSm` composite token (14px)
-- Supports optional helper text below the primary label
-- Truncates with ellipsis when text exceeds available width
-- Supports optional step indication
-- Decorative primitive — hidden from assistive technology on all platforms
-
----
-
-## Usage
-
-### Web (Custom Element)
-
-```html
-<!-- Basic label -->
-<progress-indicator-label-base label="Step 1"></progress-indicator-label-base>
-
-<!-- Label with helper text -->
-<progress-indicator-label-base label="Personal Info" helper-text="Name, email, phone"></progress-indicator-label-base>
-
-<!-- Optional step -->
-<progress-indicator-label-base label="Additional Details" optional></progress-indicator-label-base>
-
-<!-- With test ID -->
-<progress-indicator-label-base label="Review" test-id="step-4-label"></progress-indicator-label-base>
-```
-
-### iOS (SwiftUI)
-
-```swift
-// Basic label
-ProgressIndicatorLabelBase(label: "Step 1")
-
-// Label with helper text
-ProgressIndicatorLabelBase(label: "Personal Info", helperText: "Name, email, phone")
-
-// Optional step
-ProgressIndicatorLabelBase(label: "Additional Details", optional: true)
-
-// With test ID
-ProgressIndicatorLabelBase(label: "Review", testID: "step-4-label")
-```
-
-### Android (Jetpack Compose)
-
-```kotlin
-// Basic label
-ProgressIndicatorLabelBase(label = "Step 1")
-
-// Label with helper text
-ProgressIndicatorLabelBase(label = "Personal Info", helperText = "Name, email, phone")
-
-// Optional step
-ProgressIndicatorLabelBase(label = "Additional Details", optional = true)
-
-// With test tag
-ProgressIndicatorLabelBase(label = "Review", testTag = "step-4-label")
-```
-
-
----
-
-## API Reference
-
-| Property | Type | Default | Required | Description |
-|----------|------|---------|----------|-------------|
-| `label` | `string` | — | Yes | Primary label text displayed below the node |
-| `helperText` | `string` | `undefined` | No | Optional helper text displayed below the primary label |
-| `optional` | `boolean` | `false` | No | Whether this step is optional |
-| `testID` | `string` | `undefined` | No | Test identifier (web: `data-testid`, iOS: `accessibilityIdentifier`, Android: `testTag`) |
-
-### Text Overflow Behavior
-
-Both the primary label and helper text truncate with ellipsis when they exceed the available width:
-
-| Text | Overflow | Lines |
-|------|----------|-------|
-| Primary label | Ellipsis truncation | Single line |
-| Helper text | Ellipsis truncation | Single line |
-
-### Helper Text Rendering
-
-| `helperText` value | Rendering |
-|--------------------|-----------|
-| `undefined` / not set | No helper text rendered |
-| `"Some text"` | Rendered below primary label at reduced emphasis (0.7 opacity) |
-
----
-
-## Token Dependencies
-
-### Typography Tokens (`typography.labelSm`)
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `typography.labelSm.fontFamily` | Inter / system | Font family for label and helper text |
-| `typography.labelSm.fontSize` | 14px (fontSize075) | Font size for all text |
-| `typography.labelSm.lineHeight` | lineHeight075 | Line height for all text |
-| `typography.labelSm.fontWeight` | fontWeight500 (Medium) | Font weight for all text |
-| `typography.labelSm.letterSpacing` | letterSpacing075 | Letter spacing for all text |
-
-### Color Tokens
-
-| Token | Usage |
-|-------|-------|
-| `color.text.default` | Primary label text color |
-| `color.text.subtle` | Helper text color (at 0.7 opacity) |
-
-**Token source files:**
-- Typography: Referenced via CSS custom properties / platform constants
-- Color: Referenced via design token system
-
----
-
-## Accessibility
-
-This primitive is **decorative** — it is hidden from assistive technology on all platforms:
-
-| Platform | Mechanism |
-|----------|-----------|
-| Web | `aria-hidden="true"`, `role="presentation"` |
-| iOS | `accessibilityHidden(true)` |
-| Android | `clearAndSetSemantics { }` |
-
-Semantic variant (Stepper-Detailed) provides ARIA roles, labels, and screen reader announcements. The label text is incorporated into the variant's accessibility attributes — the primitive itself carries no semantic meaning for assistive technology.
-
-### WCAG 2.1 AA Compliance
-
-- **1.4.3 Contrast (Minimum)**: Label text meets 4.5:1 contrast ratio against background
-- **1.4.4 Resize Text**: Text scales with user font size preferences on all platforms
-
----
-
-## Platform-Specific Notes
-
-### Web
-- Custom Element: `<progress-indicator-label-base>`
-- Shadow DOM for style encapsulation
-- CSS custom properties for token-based styling (`--typography-label-sm-*`)
-- CSS logical properties (`max-inline-size`) for RTL/LTR support
-- Flexbox column layout with centered alignment
-- HTML-escaped text output for security
-- Helper text gap: 2px between label and helper
-
-### iOS
-- SwiftUI `View` struct (`ProgressIndicatorLabelBase`)
-- Uses `Text` views within a `VStack(spacing: 2)`
-- Font applied via `.font(.system(size: 14, weight: .medium))`
-- Truncation via `.lineLimit(1)` and `.truncationMode(.tail)`
-- Helper text at 0.7 opacity using `.opacity()` modifier
-- Centered via `.multilineTextAlignment(.center)` and `.frame(maxWidth: .infinity)`
-- Hidden from VoiceOver via `.accessibilityHidden(true)`
-
-### Android
-- Jetpack Compose `@Composable` function (`ProgressIndicatorLabelBase`)
-- Uses `Text` composables within a `Column` with `Arrangement.spacedBy(space_025)`
-- Font applied via `fontSize = 14.sp` and `fontWeight = FontWeight.Medium`
-- Truncation via `maxLines = 1` and `overflow = TextOverflow.Ellipsis`
-- Helper text at 0.7 alpha using `Color.copy(alpha = 0.7f)`
-- Centered via `Alignment.CenterHorizontally` and `textAlign = TextAlign.Center`
-- Hidden from TalkBack via `.clearAndSetSemantics { }`
-
----
-
-## Related Documentation
-
-- [Node-Base](../Progress-Indicator-Node-Base/README.md) — Primitive circular indicator element
-- [Connector-Base](../Progress-Indicator-Connector-Base/README.md) — Primitive connector line between nodes
-- [Pagination-Base](../Progress-Pagination-Base/README.md) — Semantic variant: dot pagination (does not use labels)
-- [Stepper-Base](../Progress-Stepper-Base/README.md) — Semantic variant: nodes + connectors (does not use labels)
-- [Stepper-Detailed](../Progress-Stepper-Detailed/README.md) — Semantic variant: nodes + connectors + labels
-- [Spec Requirements](/.kiro/specs/048-progress-family/requirements.md) — Requirements 1.8–1.10
-- [Spec Design](/.kiro/specs/048-progress-family/design.md) — Design specification
-- [Design Outline](/.kiro/specs/048-progress-family/design-outline.md) — Original design outline

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

@@ -1,28 +0,0 @@
-/**
- * Progress-Indicator-Label-Base Component Index
- * 
- * Stemma System naming: [Family]-[Type]-[Variant] = Progress-Indicator-Label-Base
- * Type: Primitive (Base)
- * 
- * Progress-Indicator-Label-Base is a primitive component that renders
- * labels centered below progress indicator nodes with optional helper text.
- * It serves as a building block for the Stepper-Detailed semantic variant.
- * 
- * Key Characteristics:
- * - Positioned centered below node
- * - Uses typography.labelSm token (14px)
- * - Supports optional helper text
- * - Truncates with ellipsis if text exceeds width
- * - Non-interactive, decorative (a11y handled by semantic variants)
- * 
- * @see .kiro/specs/048-progress-family for design specification
- */
-
-// Export types
-export type { ProgressIndicatorLabelBaseProps } from './types';
-
-// Platform implementations
-// - Web: ProgressIndicatorLabelBase (Task 2.3) ✅
-// - iOS: ProgressIndicatorLabelBase (Task 2.3) ✅
-// - Android: ProgressIndicatorLabelBase (Task 2.3) ✅
-export { ProgressIndicatorLabelBase } from './platforms/web/ProgressIndicatorLabelBase.web';

package/src/components/core/Progress-Indicator-Label-Base/platforms/web/ProgressIndicatorLabelBase.styles.css

@@ -1,81 +0,0 @@
-/**
- * Progress-Indicator-Label-Base Styles for Web Platform
- * 
- * Stemma System: Progress Indicator Family
- * Component Type: Primitive (Base)
- * 
- * Token-based styling using CSS custom properties.
- * Typography references typography.labelSm composite token.
- * 
- * @see .kiro/specs/048-progress-family/design.md
- * @see Requirements 1.8-1.10
- */
-
-/* ============================================================================
- * Host Element
- * Label is centered below the node
- * @see Requirement 1.8 - Position centered below node
- * ============================================================================ */
-
-:host {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-}
-
-/* ============================================================================
- * Label Container
- * ============================================================================ */
-
-.label {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-}
-
-/* ============================================================================
- * Primary Label Text
- * Uses typography.labelSm token (14px)
- * @see Requirement 1.8 - Position centered below node
- * @see Requirement 1.10 - Truncate with ellipsis
- * ============================================================================ */
-
-.label__text {
-  font-family: var(--typography-label-sm-font-family);
-  font-size: var(--typography-label-sm-font-size);
-  line-height: var(--typography-label-sm-line-height);
-  font-weight: var(--typography-label-sm-font-weight);
-  letter-spacing: var(--typography-label-sm-letter-spacing);
-  color: var(--color-text-default, currentColor);
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ============================================================================
- * Helper Text
- * Rendered below primary label with reduced emphasis
- * @see Requirement 1.9 - Support optional helper text
- * @see Requirement 1.10 - Truncate with ellipsis
- * ============================================================================ */
-
-.label__helper {
-  font-family: var(--typography-label-sm-font-family);
-  font-size: var(--typography-label-sm-font-size);
-  line-height: var(--typography-label-sm-line-height);
-  font-weight: var(--typography-label-sm-font-weight);
-  letter-spacing: var(--typography-label-sm-letter-spacing);
-  color: var(--color-text-subtle, currentColor);
-  opacity: 0.7;
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}