Utils

Loaders are managed using the aria-busy attribute. You are responsible for toggling it with JavaScript. Additionally, ensure users cannot submit buttons or links when they are busy; pointer events are disabled by CSS, but the Enter key cannot be avoided by CSS alone. You need to handle it with JavaScript. Or perhaps by the new inert HTML attribute.
<button type="submit" aria-busy='true' inert>Search</button>
<a href="/home" aria-busy='true' inert>Regular link</a>
If aria-busy is used on an empty container element, the loader is centered.
<section aria-busy='true' inert></section>
In case the loading container is larger than just a line of code, the loader will grow with it, up to a maximum size of 3rem.
<section style="height:7rem" aria-busy='true' inert></section>
<section aria-busy='true' inert>
	<progress role="presentation"></progress>
</section>
If progress is used for showing a loader, mark it with role="presentation", as it no longer represents progress in percentages.

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.