Progression

Unified timeline and roadmap component with status tracking, progress visualization, and multiple layouts

Overview

The Progression component unifies Timeline and Roadmap functionality into a single, powerful component. Switch between timeline mode (chronological events) and roadmap mode (status-driven milestones) to visualize progress and plans.

Key Features

Dual Modes - Timeline (chronological) and Roadmap (status-driven)
Status Tracking - Planned, in-progress, completed, blocked states
Progress Visualization - Overall progress bar with percentage
Multiple Layouts - Vertical, horizontal, centered
Priority Levels - Low, medium, high, critical badges
Tags & Metadata - Categorize with tags, assignees, dates
Themes - Default, minimal, corporate, modern
Backwards Compatible - Timeline component still works

Basic Usage

// Timeline mode
const timeline = Domma.elements.progression('#timeline', {
    mode: 'timeline',
    items: [
        { year: '2024', title: 'Launch', description: 'Product launch' }
    ]
});

// Roadmap mode
const roadmap = Domma.elements.progression('#roadmap', {
    mode: 'roadmap',
    items: [
        {
            id: 'milestone-1',
            title: 'Feature X',
            status: 'in-progress',
            progress: 45,
            date: 'Q2 2026'
        }
    ],
    showProgress: true
});

Timeline Mode

Timeline mode displays chronological events - perfect for history, milestones, and event sequences.

Example Timeline

<div id="timeline-demo"></div>

/**
 * Example Timeline - from public/showcase/elements/progression.
 */
export function mount(root) {
    E.progression(root.querySelector('#timeline-demo'), {
        mode: 'timeline',
        items: [
            { year: '2023', title: 'Domma v0.1.0', description: 'Initial alpha release with core DOM manipulation and utilities' },
            { year: 'Q2 2024', title: 'v0.5.0', description: 'Added Models, Forms, and Tables modules with reactive data binding' },
            { year: 'Q3 2024', title: 'v0.8.0', description: 'Elements module launched with 22+ UI components' },
            { year: 'Q4 2024', title: 'v0.12.0', description: 'Layout system, celebrations effects, and Blueprint schema' },
            { year: 'Jan 2026', title: 'v0.14.1', description: 'Enhanced celebrations with patron saint animations and CSS architecture improvements' }
        ],
        layout: 'vertical',
        theme: 'default',
        animation: true
    });
}

Domma.elements.progression('#timeline-demo', {
    mode: 'timeline',
    items: [
        { year: '2020', title: 'Founded', description: 'Company established' },
        { year: '2021', title: 'Series A', description: 'Raised $5M funding' },
        { year: '2022', title: 'Product Launch', description: 'Released v1.0' },
        { year: '2023', title: 'Expansion', description: 'Opened 3 new offices' },
        { year: '2024', title: 'IPO', description: 'Went public on NASDAQ' }
    ],
    layout: 'vertical',
    theme: 'default'
});

Roadmap Mode

Roadmap mode tracks project milestones with status indicators, progress tracking, and metadata.

Example Roadmap

<div id="roadmap-demo"></div>

/**
 * Example Roadmap - from public/showcase/elements/progression.
 */
export function mount(root) {
        // Roadmap mode demo - Domma 2026 Development Roadmap
    E.progression(root.querySelector('#roadmap-demo'), {
            mode: 'roadmap',
            items: [
                {
                    id: 'celebrations-complete',
                    title: 'Celebration Effects Complete',
                    description: '8 celebration themes with flower petal animations for UK patron saints',
                    status: 'completed',
                    date: 'Q1 2026',
                    tags: ['animations', 'ui'],
                    priority: 'medium'
                },
                {
                    id: 'router-module',
                    title: 'Router Module Enhancement',
                    description: 'Advanced SPA routing with lazy loading and code splitting',
                    status: 'in-progress',
                    date: 'Q2 2026',
                    progress: 45,
                    priority: 'high',
                    tags: ['routing', 'spa'],
                    assignee: 'Core Team'
                },
                {
                    id: 'form-validation',
                    title: 'Form Validation v2',
                    description: 'Enhanced async validation with custom rules and multi-step forms',
                    status: 'in-progress',
                    date: 'Q2 2026',
                    progress: 30,
                    priority: 'high',
                    tags: ['forms', 'validation']
                },
                {
                    id: 'charts-module',
                    title: 'Charts Module',
                    description: 'Data visualization with charts, graphs, and dashboards',
                    status: 'planned',
                    date: 'Q3 2026',
                    priority: 'medium',
                    tags: ['visualization', 'charts']
                },
                {
                    id: 'testing-suite',
                    title: 'Testing Suite Expansion',
                    description: 'Comprehensive Vitest and Cypress coverage for all modules',
                    status: 'planned',
                    date: 'Q3 2026',
                    priority: 'critical',
                    tags: ['testing', 'qa']
                },
                {
                    id: 'v1-release',
                    title: 'Domma v1.0 Stable',
                    description: 'Production-ready release with complete documentation and CDN',
                    status: 'planned',
                    date: 'Q4 2026',
                    priority: 'critical',
                    tags: ['release', 'milestone']
                }
            ],
            showProgress: true,
            progressPosition: 'top',
            animation: true
        });
}

Domma.elements.progression('#roadmap-demo', {
    mode: 'roadmap',
    items: [
        {
            id: 'research',
            title: 'Market Research',
            status: 'completed',
            date: 'Q1 2026',
            tags: ['research', 'planning']
        },
        {
            id: 'design',
            title: 'UI/UX Design',
            status: 'completed',
            date: 'Q1 2026',
            priority: 'high',
            assignee: 'Design Team'
        },
        {
            id: 'backend',
            title: 'Backend Development',
            status: 'in-progress',
            date: 'Q2 2026',
            progress: 65,
            priority: 'critical',
            tags: ['backend', 'api'],
            assignee: 'Engineering Team'
        },
        {
            id: 'frontend',
            title: 'Frontend Development',
            status: 'in-progress',
            date: 'Q2 2026',
            progress: 40,
            priority: 'high',
            tags: ['frontend', 'ui'],
            assignee: 'Frontend Team'
        },
        {
            id: 'testing',
            title: 'QA & Testing',
            status: 'planned',
            date: 'Q3 2026',
            priority: 'medium',
            tags: ['testing', 'qa']
        },
        {
            id: 'launch',
            title: 'Product Launch',
            status: 'planned',
            date: 'Q4 2026',
            priority: 'critical',
            tags: ['launch', 'marketing']
        }
    ],
    showProgress: true,
    progressPosition: 'top'
});

Layouts

Progression supports three layouts: vertical (default), horizontal (scrollable), and centered (alternating).

Centered Layout

<div id="layout-centered"></div>

/**
 * Centered Layout - from public/showcase/elements/progression.
 */
export function mount(root) {
        // Centered layout demo
    E.progression(root.querySelector('#layout-centered'), {
            mode: 'timeline',
            layout: 'centered',
            items: [
                { year: '2023', title: 'Alpha Release', description: 'Internal testing phase' },
                { year: '2024', title: 'Beta Launch', description: 'Public beta with early adopters' },
                { year: '2025', title: 'Full Release', description: 'General availability worldwide' }
            ],
            theme: 'minimal',
            animation: true
        });
}

Domma.elements.progression('#layout-centered', {
    mode: 'timeline',
    layout: 'centered',
    items: [...]
});

Interactive Roadmap

Enable allowStatusChange: true to allow users to cycle through statuses by clicking markers.

Interactive Roadmap

Click on status markers to cycle: planned → in-progress → completed

<div id="interactive-roadmap"></div>
<p class="text-sm text-muted mt-2">Click on status markers to cycle: planned → in-progress → completed</p>

/**
 * Interactive Roadmap - from public/showcase/elements/progression.
 */
export function mount(root) {
        // Interactive roadmap demo
    E.progression(root.querySelector('#interactive-roadmap'), {
            mode: 'roadmap',
            items: [
                { id: 'phase1', title: 'Phase 1: Planning', status: 'completed', date: 'Jan 2026' },
                { id: 'phase2', title: 'Phase 2: Development', status: 'in-progress', date: 'Feb-Apr 2026', progress: 50 },
                { id: 'phase3', title: 'Phase 3: Testing', status: 'planned', date: 'May 2026' },
                { id: 'phase4', title: 'Phase 4: Deployment', status: 'planned', date: 'Jun 2026' }
            ],
            allowStatusChange: true,
            showProgress: true,
            onStatusChange: (item, oldStatus, newStatus) => {
                console.log(`Status changed: ${item.title} from ${oldStatus} to ${newStatus}`);
            },
            animation: true
        });
}

Domma.elements.progression('#interactive-roadmap', {
    mode: 'roadmap',
    allowStatusChange: true,
    onStatusChange: (item, oldStatus, newStatus) => {
        console.log(`${item.title}: ${oldStatus} → ${newStatus}`);
    },
    items: [...]
});

API Reference

Options

Option	Type	Default	Description
`mode`	String	`'timeline'`	'timeline' or 'roadmap'
`items`	Array	`[]`	Array of item objects
`layout`	String	`'vertical'`	'vertical', 'horizontal', 'centered'
`theme`	String	`'default'`	'default', 'minimal', 'corporate', 'modern'
`showProgress`	Boolean	`true`	Show progress bar (roadmap mode)
`progressPosition`	String	`'top'`	'top', 'bottom', 'none'
`allowStatusChange`	Boolean	`false`	Interactive status updates
`onStatusChange`	Function	`null`	Callback: (item, oldStatus, newStatus)

Methods

Method	Description
`setItems(items)`	Replace all items
`addItem(item)`	Add single item
`updateItem(id, data)`	Update specific item
`removeItem(id)`	Remove item
`setStatus(id, status)`	Update item status (roadmap)
`getProgress()`	Get overall progress percentage
`markComplete(id)`	Mark item as completed
`markInProgress(id)`	Mark item as in-progress
`setCurrent(id)`	Highlight current item
`setMode(mode)`	Switch between timeline/roadmap

Migration from Timeline

The timeline() component was removed in 0.58. Use progression({ mode: 'timeline' }) instead - the options are the same.

Old (removed in 0.58)

Domma.elements.timeline('#my-timeline', {
    items: [{ year: '2024', title: 'Event', description: '...' }]
});

New (Recommended)

Domma.elements.progression('#my-timeline', {
    mode: 'timeline',
    items: [{ year: '2024', title: 'Event', description: '...' }]
});

Note: The old timeline() method will show a deprecation warning in development mode. All CSS classes (.dm-timeline-*) remain supported for backwards compatibility.

CSS Customisation

Override these CSS variables to customise Progression appearance and match your design system.

Variable	Default	Controls
`--dm-success`	`var(--dm-green-600)`	Completed status colour
`--dm-info`	`var(--dm-sky-500)`	In-progress status colour
`--dm-warning`	`var(--dm-amber-500)`	Blocked status colour
`--dm-primary`	`var(--dm-blue-600)`	Planned status colour

Example Override

:root {
    /* Custom status colours */
    --dm-success: #10b981;
    --dm-info: #3b82f6;
}

Full CSS Customisation Cheat-Sheet →

Related Elements

Tabs

Organize content into tabbed panels

Accordion

Collapsible content sections

<div class="grid grid-cols-1 grid-auto-fit-250 gap-4"><a href="/showcase/elements/tabs" class="card card-hover no-underline text-inherit">
        <div class="card-body">
            <h3 class="card-title">Tabs</h3>
            <p class="card-text">Organize content into tabbed panels</p>
        </div>
    </a>
    <a href="/showcase/elements/accordion" class="card card-hover no-underline text-inherit">
        <div class="card-body">
            <h3 class="card-title">Accordion</h3>
            <p class="card-text">Collapsible content sections</p>
        </div>
    </a>
</div>