Timeline

<x-aura::timeline>
    <x-aura::timeline.item
        title="Package Released to Production"
        time="Just now"
        variant="solid"
        icon="package"
        description="Deployed 11 new UI components to the suite."
    />

    <x-aura::timeline.item
        title="Pull Request Merged"
        time="15 mins ago"
        variant="subtle"
        icon="git-merge"
        description="Approved and merged into main branch."
    />

    <x-aura::timeline.item
        title="Automated Test Suite Passed"
        time="30 mins ago"
        variant="solid"
        icon="check"
        description="Test suite passed with zero errors."
    />
</x-aura::timeline>

<x-aura::timeline>
    <x-aura::timeline.item
        title="Solid Indicator Pin"
        time="Recent"
        variant="solid"
        description="High contrast solid dark or white background node."
    />

    <x-aura::timeline.item
        title="Subtle Indicator Pin"
        time="Earlier"
        variant="subtle"
        description="Subdued background node with border ring for secondary history."
    />
</x-aura::timeline>

<x-aura::timeline>
    <x-aura::timeline.item
        title="Security Audit Completed"
        time="Today 14:30"
        variant="solid"
        icon="shield-check"
        description="Static vulnerability scanning and dependency verification finished."
    >
        <x-aura::flex align="center" gap="2">
            <x-aura::tag variant="neutral" size="sm">
                0 Vulnerabilities
            </x-aura::tag>

            <x-aura::tag variant="subtle" size="sm">
                Pest 3.0
            </x-aura::tag>
        </x-aura::flex>
    </x-aura::timeline.item>

    <x-aura::timeline.item
        title="Database Migration Applied"
        time="Today 11:00"
        variant="subtle"
        icon="database"
        description="Added user indexing schema to sqlite snapshot."
    >
        <x-aura::link href="#" size="sm" underline="hover">
            View Migration Diff
        </x-aura::link>
    </x-aura::timeline.item>
</x-aura::timeline>

<x-aura::card padding="xl" gap="6">
    <x-aura::flex align="center" justify="between">
        <x-aura::heading level="2" size="lg">
            Shipment Progress
        </x-aura::heading>

        <x-aura::badge variant="neutral" size="sm">
            In Transit
        </x-aura::badge>
    </x-aura::flex>

    <x-aura::timeline>
        <x-aura::timeline.item
            title="Out for Delivery"
            time="08:45 AM"
            variant="solid"
            icon="truck"
            description="Package is on the vehicle with courier Alex V."
        />

        <x-aura::timeline.item
            title="Arrived at Regional Sorting Facility"
            time="03:15 AM"
            variant="subtle"
            icon="map-pin"
            description="Processed at Central Distribution Center."
        />

        <x-aura::timeline.item
            title="Order Dispatched from Warehouse"
            time="Yesterday 06:00 PM"
            variant="subtle"
            icon="package-check"
            description="Carrier pickup confirmed."
        />
    </x-aura::timeline>
</x-aura::card>