@3fn/core 14.1.0 → 15.0.0

package/src/components/core/Nav-TabBar-Base/types.ts

@@ -1,43 +0,0 @@
-/**
- * Nav-TabBar-Base Type Definitions
- *
- * Stemma System: Navigation Family
- * Component Type: Primitive (Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Nav-TabBar-Base
- *
- * Provides type-safe props for the Nav-TabBar-Base component
- * across all platforms. Icon-only tabs with dot indicator.
- *
- * @module Nav-TabBar-Base/types
- * @see .kiro/specs/050-nav-tabbar-base/design.md
- * @see Requirements R1, R2, R8 AC3
- */
-
-import type { IconBaseName } from '../Icon-Base/types';
-
-/** Tab item definition — icon-only with required accessibility label */
-export interface TabOption {
-  value: string;
-  icon: IconBaseName;             // outline-stroke variant (inactive)
-  activeIcon: IconBaseName;       // solid-fill variant (active)
-  accessibilityLabel: string;     // required — icon-only, no visible text
-}
-
-/**
- * Nav-TabBar-Base Props
- *
- * @see Requirements R1, R2, R8 AC3
- */
-export interface TabBarProps {
-  /** Array of tab definitions (minimum 2, 3-5 recommended) */
-  tabs: TabOption[];
-
-  /** Currently selected tab value */
-  selectedValue: string;
-
-  /** Called when selection changes — fires before animation begins */
-  onSelectionChange: (value: string) => void;
-
-  /** Test ID for automated testing */
-  testID?: string;
-}

package/src/components/core/Progress-Bar-Base/README.md

@@ -1,31 +0,0 @@
-# Progress-Bar-Base
-
-**Family**: ProgressIndicator | **Type**: Primitive (standalone)
-
-Continuous percentage-based progress indicator. Horizontal bar with track and fill. Determinate mode (0–1 value) and indeterminate mode (pulsing opacity).
-
-## Usage
-
-```html
-<!-- Determinate: 75% complete -->
-<progress-bar value="0.75" accessibility-label="Profile completion" size="md"></progress-bar>
-
-<!-- Indeterminate: loading -->
-<progress-bar mode="indeterminate" accessibility-label="Loading data"></progress-bar>
-
-<!-- Small size -->
-<progress-bar value="0.5" accessibility-label="Upload progress" size="sm"></progress-bar>
-```
-
-## Key Features
-
-- **Determinate**: Smooth fill transition on value change
-- **Indeterminate**: Pulsing opacity animation (platform-neutral)
-- **Sizes**: sm (4px), md (8px, default), lg (12px)
-- **Fail loudly**: Runtime error on value outside 0–1
-- **Accessible**: `role="progressbar"`, milestone announcements at 0/25/50/75/100%
-- **Reduced motion**: Instant fill (determinate), static at 33% (indeterminate)
-
-## Spec
-
-- Design: `.kiro/specs/090-linear-progress-bar/design.md`

package/src/components/core/Progress-Bar-Base/__tests__/ProgressBarBase.test.ts

@@ -1,202 +0,0 @@
-/**
- * @category evergreen
- * @purpose Verify Progress-Bar-Base web component: modes, sizes, animation, accessibility, validation
- * @jest-environment jsdom
- *
- * Progress-Bar-Base Web Component — Behavioral Contract Tests
- *
- * Validates contracts: accessibility_progressbar_role, accessibility_milestone_announcements,
- * visual_track_fill, visual_size_variants, animation_value_transition,
- * animation_indeterminate_pulse, validation_value_range
- *
- * @module Progress-Bar-Base/__tests__
- * @see .kiro/specs/090-linear-progress-bar/design.md
- */
-
-import { ProgressBarBase } from '../platforms/web/ProgressBarBase.web';
-
-beforeAll(() => {
-  if (!customElements.get('progress-bar')) {
-    require('../platforms/web/ProgressBarBase.web');
-  }
-  // Mock matchMedia for indeterminate reduced motion check
-  if (!window.matchMedia) {
-    window.matchMedia = jest.fn().mockReturnValue({ matches: false });
-  }
-});
-
-async function createComponent(attrs: Record<string, string> = {}): Promise<ProgressBarBase> {
-  const el = document.createElement('progress-bar') as ProgressBarBase;
-  el.setAttribute('accessibility-label', attrs['accessibility-label'] ?? 'Loading');
-  if (attrs.value) el.setAttribute('value', attrs.value);
-  if (attrs.mode) el.setAttribute('mode', attrs.mode);
-  if (attrs.size) el.setAttribute('size', attrs.size);
-  if (attrs['test-id']) el.setAttribute('test-id', attrs['test-id']);
-  document.body.appendChild(el);
-  await new Promise(r => setTimeout(r, 10));
-  return el;
-}
-
-function getTrack(el: ProgressBarBase): HTMLElement {
-  const track = el.shadowRoot?.querySelector('.progress-bar');
-  expect(track).not.toBeNull();
-  return track as HTMLElement;
-}
-
-function getFill(el: ProgressBarBase): HTMLElement {
-  const fill = el.shadowRoot?.querySelector('.progress-bar__fill');
-  expect(fill).not.toBeNull();
-  return fill as HTMLElement;
-}
-
-afterEach(() => {
-  while (document.body.firstChild) {
-    document.body.removeChild(document.body.firstChild);
-  }
-});
-
-// ===========================================================================
-// CONTRACT: accessibility_progressbar_role
-// ===========================================================================
-
-describe('accessibility_progressbar_role', () => {
-  test('determinate has role=progressbar with aria-valuenow', async () => {
-    const el = await createComponent({ value: '0.5', 'accessibility-label': 'Upload' });
-    const track = getTrack(el);
-    expect(track.getAttribute('role')).toBe('progressbar');
-    expect(track.getAttribute('aria-valuenow')).toBe('0.5');
-    expect(track.getAttribute('aria-valuemin')).toBe('0');
-    expect(track.getAttribute('aria-valuemax')).toBe('1');
-    expect(track.getAttribute('aria-label')).toBe('Upload');
-  });
-
-  test('indeterminate has role=progressbar without aria-valuenow', async () => {
-    const el = await createComponent({ mode: 'indeterminate', 'accessibility-label': 'Loading' });
-    const track = getTrack(el);
-    expect(track.getAttribute('role')).toBe('progressbar');
-    expect(track.hasAttribute('aria-valuenow')).toBe(false);
-    expect(track.getAttribute('aria-label')).toBe('Loading');
-  });
-});
-
-// ===========================================================================
-// CONTRACT: visual_track_fill
-// ===========================================================================
-
-describe('visual_track_fill', () => {
-  test('determinate fill width matches value', async () => {
-    const el = await createComponent({ value: '0.75' });
-    const fill = getFill(el);
-    expect(fill.style.inlineSize).toBe('75%');
-  });
-
-  test('determinate fill has correct class', async () => {
-    const el = await createComponent({ value: '0.5' });
-    const fill = getFill(el);
-    expect(fill.className).toContain('determinate');
-  });
-
-  test('indeterminate fill has correct class', async () => {
-    const el = await createComponent({ mode: 'indeterminate' });
-    const fill = getFill(el);
-    expect(fill.className).toContain('indeterminate');
-  });
-});
-
-// ===========================================================================
-// CONTRACT: visual_size_variants
-// ===========================================================================
-
-describe('visual_size_variants', () => {
-  test('default size is md', async () => {
-    const el = await createComponent({ value: '0.5' });
-    const track = getTrack(el);
-    expect(track.className).toContain('progress-bar--md');
-  });
-
-  test('sm size class applied', async () => {
-    const el = await createComponent({ value: '0.5', size: 'sm' });
-    const track = getTrack(el);
-    expect(track.className).toContain('progress-bar--sm');
-  });
-
-  test('lg size class applied', async () => {
-    const el = await createComponent({ value: '0.5', size: 'lg' });
-    const track = getTrack(el);
-    expect(track.className).toContain('progress-bar--lg');
-  });
-});
-
-// ===========================================================================
-// CONTRACT: validation_value_range
-// ===========================================================================
-
-describe('validation_value_range', () => {
-  // jsdom swallows errors from custom element lifecycle callbacks (connectedCallback,
-  // attributeChangedCallback). Validation is tested by verifying the component
-  // does NOT render a fill for invalid values that would have thrown.
-  // The actual throw is verified by platform-specific tests and contract tests.
-
-  test('value = 0 renders normally', async () => {
-    const el = await createComponent({ value: '0' });
-    const fill = getFill(el);
-    expect(fill.style.inlineSize).toBe('0%');
-  });
-
-  test('value = 1 renders normally', async () => {
-    const el = await createComponent({ value: '1' });
-    const fill = getFill(el);
-    expect(fill.style.inlineSize).toBe('100%');
-  });
-
-  test('error message format is correct', () => {
-    // Direct validation logic test — bypasses jsdom lifecycle limitation
-    const validateValue = (value: number) => {
-      if (value < 0 || value > 1) {
-        throw new Error(`Progress-Bar-Base: value must be between 0 and 1, received ${value}`);
-      }
-    };
-    expect(() => validateValue(1.5)).toThrow('value must be between 0 and 1, received 1.5');
-    expect(() => validateValue(-0.1)).toThrow('value must be between 0 and 1, received -0.1');
-    expect(() => validateValue(0)).not.toThrow();
-    expect(() => validateValue(1)).not.toThrow();
-  });
-
-  test('value = 0 renders normally', async () => {
-    const el = await createComponent({ value: '0' });
-    const fill = getFill(el);
-    expect(fill.style.inlineSize).toBe('0%');
-  });
-
-  test('value = 1 renders normally', async () => {
-    const el = await createComponent({ value: '1' });
-    const fill = getFill(el);
-    expect(fill.style.inlineSize).toBe('100%');
-  });
-});
-
-// ===========================================================================
-// CONTRACT: animation_indeterminate_pulse
-// ===========================================================================
-
-describe('animation_indeterminate_pulse', () => {
-  test('reduced motion shows static fill', async () => {
-    window.matchMedia = jest.fn().mockReturnValue({ matches: true });
-    const el = await createComponent({ mode: 'indeterminate' });
-    const fill = getFill(el);
-    expect(fill.style.inlineSize).toBe('33%');
-    expect(fill.style.opacity).toBe('1');
-  });
-});
-
-// ===========================================================================
-// CONTRACT: animation_value_transition
-// ===========================================================================
-
-describe('animation_value_transition', () => {
-  test('fill has transition class for determinate', async () => {
-    const el = await createComponent({ value: '0.5' });
-    const fill = getFill(el);
-    expect(fill.className).toContain('determinate');
-  });
-});

package/src/components/core/Progress-Bar-Base/index.ts

@@ -1,6 +0,0 @@
-/**
- * Progress-Bar-Base barrel export
- * @module Progress-Bar-Base
- */
-export type { ProgressBarBaseProps } from './types';
-export { INDETERMINATE_STATIC_FILL } from './types';

package/src/components/core/Progress-Bar-Base/platforms/web/ProgressBarBase.styles.css

@@ -1,52 +0,0 @@
-/**
- * Progress-Bar-Base Styles for Web Platform
- *
- * @see .kiro/specs/090-linear-progress-bar/design.md
- */
-
-:host {
-  display: block;
-  inline-size: 100%;
-}
-
-.progress-bar {
-  position: relative;
-  inline-size: 100%;
-  border-radius: var(--radius-full);
-  background-color: var(--color-progress-pending-background);
-  overflow: hidden;
-}
-
-.progress-bar--sm { block-size: var(--size-050); }
-.progress-bar--md { block-size: var(--size-100); }
-.progress-bar--lg { block-size: var(--size-150); }
-
-.progress-bar__fill {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  border-radius: var(--radius-full);
-  transition: inline-size var(--duration-150) var(--easing-standard);
-}
-
-.progress-bar__fill--determinate {
-  background-color: var(--color-progress-completed-background);
-}
-
-.progress-bar__fill--indeterminate {
-  background-color: var(--color-progress-current-background);
-  inline-size: 33%;
-  animation: pulse var(--duration-350) var(--easing-standard) infinite alternate;
-}
-
-@keyframes pulse {
-  from { opacity: 0.3; }
-  to { opacity: 1; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .progress-bar__fill {
-    transition: none !important;
-    animation: none !important;
-  }
-}

package/src/components/core/Progress-Bar-Base/platforms/web/ProgressBarBase.web.ts

@@ -1,135 +0,0 @@
-/**
- * Progress-Bar-Base — Web Implementation
- *
- * Continuous progress indicator with determinate and indeterminate modes.
- *
- * Stemma System: ProgressIndicator Family, Primitive (standalone)
- *
- * @module Progress-Bar-Base/platforms/web
- * @see .kiro/specs/090-linear-progress-bar/design.md
- */
-
-/// <reference lib="dom" />
-
-import { INDETERMINATE_STATIC_FILL } from '../../types';
-import styles from './ProgressBarBase.styles.css';
-
-const MILESTONES = [0, 25, 50, 75, 100];
-
-export class ProgressBarBase extends HTMLElement {
-  private _shadowRoot: ShadowRoot;
-  private _domCreated = false;
-  private _lastAnnouncedMilestone = -1;
-
-  constructor() {
-    super();
-    this._shadowRoot = this.attachShadow({ mode: 'open' });
-  }
-
-  connectedCallback(): void {
-    if (!this._domCreated) {
-      this._createDOM();
-      this._domCreated = true;
-    }
-    this._update();
-  }
-
-  static get observedAttributes(): readonly string[] {
-    return ['value', 'mode', 'size', 'accessibility-label', 'test-id'];
-  }
-
-  attributeChangedCallback(): void {
-    if (!this._domCreated) return;
-    this._update();
-  }
-
-  private _createDOM(): void {
-    const style = document.createElement('style');
-    style.textContent = styles;
-
-    const track = document.createElement('div');
-    track.classList.add('progress-bar');
-    track.setAttribute('role', 'progressbar');
-    track.setAttribute('aria-valuemin', '0');
-    track.setAttribute('aria-valuemax', '1');
-
-    const fill = document.createElement('div');
-    fill.classList.add('progress-bar__fill');
-
-    track.appendChild(fill);
-    this._shadowRoot.appendChild(style);
-    this._shadowRoot.appendChild(track);
-  }
-
-  private _update(): void {
-    const track = this._shadowRoot.querySelector('.progress-bar') as HTMLElement;
-    const fill = this._shadowRoot.querySelector('.progress-bar__fill') as HTMLElement;
-    if (!track || !fill) return;
-
-    const mode = this.getAttribute('mode') || 'determinate';
-    const size = this.getAttribute('size') || 'md';
-    const label = this.getAttribute('accessibility-label') || '';
-    const testId = this.getAttribute('test-id');
-
-    // Size
-    track.className = `progress-bar progress-bar--${size}`;
-
-    // Label
-    track.setAttribute('aria-label', label);
-    if (testId) track.setAttribute('data-testid', testId);
-
-    if (mode === 'indeterminate') {
-      fill.className = 'progress-bar__fill progress-bar__fill--indeterminate';
-      fill.style.inlineSize = '';
-      track.removeAttribute('aria-valuenow');
-
-      // Reduced motion: static fill
-      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-        fill.style.inlineSize = `${INDETERMINATE_STATIC_FILL * 100}%`;
-        fill.style.opacity = '1';
-      }
-    } else {
-      const valueAttr = this.getAttribute('value');
-      if (valueAttr === null) {
-        throw new Error('Progress-Bar-Base: value attribute is required in determinate mode');
-      }
-      const value = parseFloat(valueAttr);
-      this._validateValue(value);
-
-      fill.className = 'progress-bar__fill progress-bar__fill--determinate';
-      fill.style.inlineSize = `${value * 100}%`;
-      fill.style.opacity = '';
-      track.setAttribute('aria-valuenow', String(value));
-
-      this._announceMilestone(value);
-    }
-  }
-
-  private _validateValue(value: number): void {
-    if (value < 0 || value > 1) {
-      throw new Error(
-        `Progress-Bar-Base: value must be between 0 and 1, received ${value}`
-      );
-    }
-  }
-
-  private _announceMilestone(value: number): void {
-    const percentage = Math.round(value * 100);
-    for (const milestone of MILESTONES) {
-      if (percentage >= milestone && this._lastAnnouncedMilestone < milestone) {
-        this._lastAnnouncedMilestone = milestone;
-        // Live region announcement
-        const track = this._shadowRoot.querySelector('.progress-bar');
-        if (track) {
-          track.setAttribute('aria-live', 'polite');
-          // Remove after announcement to prevent repeat
-          setTimeout(() => track.removeAttribute('aria-live'), 100);
-        }
-      }
-    }
-  }
-}
-
-if (!customElements.get('progress-bar')) {
-  customElements.define('progress-bar', ProgressBarBase);
-}

package/src/components/core/Progress-Bar-Base/types.ts

@@ -1,46 +0,0 @@
-/**
- * Progress-Bar-Base Type Definitions
- *
- * Stemma System: ProgressIndicator Family
- * Component Type: Primitive (standalone)
- *
- * Continuous/percentage-based progress indicator with determinate
- * and indeterminate modes. Discriminated union ensures value is
- * required for determinate and absent for indeterminate.
- *
- * @module Progress-Bar-Base/types
- * @see .kiro/specs/090-linear-progress-bar/design.md
- */
-
-/**
- * Static fill width for indeterminate mode when reduced motion is enabled.
- * Visually distinct from empty (0) and complete (1) states while
- * communicating ongoing activity without animation.
- */
-export const INDETERMINATE_STATIC_FILL = 0.33;
-
-/** Determinate mode — value required */
-interface ProgressBarDeterminate {
-  mode?: 'determinate';
-  /** Progress value, 0 to 1. Throws runtime error if outside range. */
-  value: number;
-  /** Accessible label describing what the bar represents (required) */
-  accessibilityLabel: string;
-  /** Size variant — sm (4px), md (8px, default), lg (12px) */
-  size?: 'sm' | 'md' | 'lg';
-  /** Test identifier */
-  testID?: string;
-}
-
-/** Indeterminate mode — no value */
-interface ProgressBarIndeterminate {
-  mode: 'indeterminate';
-  /** Accessible label describing what the bar represents (required) */
-  accessibilityLabel: string;
-  /** Size variant — sm (4px), md (8px, default), lg (12px) */
-  size?: 'sm' | 'md' | 'lg';
-  /** Test identifier */
-  testID?: string;
-}
-
-export type ProgressBarBaseProps = ProgressBarDeterminate | ProgressBarIndeterminate;

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

@@ -1,169 +0,0 @@
-# Progress-Indicator-Connector-Base
-
-**Family**: Progress Indicator
-**Type**: Primitive (Base)
-**Readiness**: Development
-**Platforms**: Web, iOS, Android
-
----
-
-## Overview
-
-Progress-Indicator-Connector-Base is a primitive component that renders a horizontal connecting line between progress indicator nodes. It provides state-based color treatment to visually communicate whether the path between two steps has been traversed.
-
-This component is non-interactive and decorative. Accessibility (ARIA roles, labels) is handled by the semantic variants that compose it: Stepper-Base and Stepper-Detailed. Pagination-Base does not use connectors.
-
-### Key Characteristics
-
-- 2 states: `active`, `inactive`
-- 1px thickness via `borderDefault` token
-- Flexible length — fills available space between adjacent nodes
-- Decorative primitive — hidden from assistive technology on all platforms
-
----
-
-## Usage
-
-### Web (Custom Element)
-
-```html
-<!-- Active connector (between completed nodes) -->
-<progress-indicator-connector-base state="active"></progress-indicator-connector-base>
-
-<!-- Inactive connector (between incomplete nodes) -->
-<progress-indicator-connector-base state="inactive"></progress-indicator-connector-base>
-
-<!-- With test ID -->
-<progress-indicator-connector-base state="active" test-id="step-1-2-connector"></progress-indicator-connector-base>
-```
-
-### iOS (SwiftUI)
-
-```swift
-// Active connector (between completed nodes)
-ProgressIndicatorConnectorBase(state: .active)
-
-// Inactive connector (between incomplete nodes)
-ProgressIndicatorConnectorBase(state: .inactive)
-
-// With test ID
-ProgressIndicatorConnectorBase(state: .active, testID: "step-1-2-connector")
-```
-
-### Android (Jetpack Compose)
-
-```kotlin
-// Active connector (between completed nodes)
-ProgressIndicatorConnectorBase(state = ProgressConnectorState.ACTIVE)
-
-// Inactive connector (between incomplete nodes)
-ProgressIndicatorConnectorBase(state = ProgressConnectorState.INACTIVE)
-
-// With test tag
-ProgressIndicatorConnectorBase(
-    state = ProgressConnectorState.ACTIVE,
-    testTag = "step-1-2-connector"
-)
-```
-
-
----
-
-## API Reference
-
-| Property | Type | Default | Required | Description |
-|----------|------|---------|----------|-------------|
-| `state` | `'active' \| 'inactive'` | `'inactive'` | Yes | Visual state determining connector color |
-| `testID` | `string` | `undefined` | No | Test identifier (web: `data-testid`, iOS: `accessibilityIdentifier`, Android: `testTag`) |
-
-### State Semantics
-
-| State | Color Token | Primitive | Meaning |
-|-------|-------------|-----------|---------|
-| `active` | `color.progress.completed.connector` | `green100` | Path between completed nodes — progress has been made |
-| `inactive` | `color.progress.pending.connector` | `white200` | Path between incomplete nodes — progress not yet made |
-
-### Connector State Rules (set by semantic variants)
-
-Semantic variants determine connector state based on the nodes on either side:
-
-- Connectors between two **completed** nodes → `active`
-- All other connectors → `inactive`
-
----
-
-## Token Dependencies
-
-### Semantic Color Tokens (`color.progress.*.connector`)
-
-| Token | Primitive | Usage |
-|-------|-----------|-------|
-| `color.progress.completed.connector` | `green100` | Active connector color — traversed path |
-| `color.progress.pending.connector` | `white200` | Inactive connector color — untraversed path |
-
-### Component Tokens (`progress.connector.*`)
-
-| Token | Reference | Value | Usage |
-|-------|-----------|-------|-------|
-| `progress.connector.thickness` | `borderWidth100` (borderDefault) | 1px | Connector line height |
-
-**Token source files:**
-- Semantic: `src/tokens/semantic/color-progress.ts`
-- Component: `src/tokens/component/progress.ts`
-
----
-
-## 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 variants (Stepper-Base, Stepper-Detailed) provide ARIA roles, labels, and screen reader announcements. The connector itself carries no semantic meaning for assistive technology — progress state is communicated through the variant's ARIA attributes.
-
-### WCAG 2.1 AA Compliance
-
-- **1.4.11 Non-text Contrast**: Connector colors meet contrast requirements against the component background
-
----
-
-## Platform-Specific Notes
-
-### Web
-- Custom Element: `<progress-indicator-connector-base>`
-- Shadow DOM for style encapsulation
-- CSS custom properties for token-based styling with fallback values
-- Uses CSS logical properties (`inline-size`, `block-size`) for RTL/LTR support
-- Flexible length via `flex: 1` on the host element
-- Rendered as a `<span>` with background color
-
-### iOS
-- SwiftUI `View` struct (`ProgressIndicatorConnectorBase`)
-- Uses `Rectangle()` shape with `.fill()` for color
-- Flexible length via `.frame(maxWidth: .infinity)`
-- Thickness set via `.frame(height: connectorThickness)` referencing `DesignTokens.borderWidth100`
-- Hidden from VoiceOver via `.accessibilityHidden(true)`
-
-### Android
-- Jetpack Compose `@Composable` function (`ProgressIndicatorConnectorBase`)
-- Uses `Box` with `.background(color)` modifier
-- Flexible length via `.fillMaxWidth()`
-- Thickness set via `.height(connectorThickness)` referencing `DesignTokens.border_width_100`
-- Hidden from TalkBack via `.clearAndSetSemantics { }`
-
----
-
-## Related Documentation
-
-- [Node-Base](../Progress-Indicator-Node-Base/README.md) — Primitive circular indicator element
-- [Label-Base](../Progress-Indicator-Label-Base/README.md) — Primitive label positioned below nodes
-- [Pagination-Base](../Progress-Pagination-Base/README.md) — Semantic variant: dot pagination (does not use connectors)
-- [Stepper-Base](../Progress-Stepper-Base/README.md) — Semantic variant: nodes + connectors
-- [Stepper-Detailed](../Progress-Stepper-Detailed/README.md) — Semantic variant: nodes + connectors + labels
-- [Spec Requirements](/.kiro/specs/048-progress-family/requirements.md) — Requirements 1.6–1.7, 12.10–12.12
-- [Spec Design](/.kiro/specs/048-progress-family/design.md) — Design specification
-- [Design Outline](/.kiro/specs/048-progress-family/design-outline.md) — Original design outline