Spinner

<div class="w-md">
    <dui-item variant="ItemVariant.Muted">
        <dui-item-media>
            <dui-spinner/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title class="line-clamp-1">Processing payment...</dui-item-title>
        </dui-item-content>
        <dui-item-content class="flex-none justify-end">
            <span class="text-sm tabular-nums">$100.00</span>
        </dui-item-content>
    </dui-item>
</div>

<dui-group align="GroupAlign.Center">
    <dui-spinner class="size-3"/>
    <dui-spinner class="size-4"/>
    <dui-spinner class="size-6"/>
    <dui-spinner class="size-8"/>
</dui-group>

<dui-group>
    <dui-spinner class="size-12 text-red-600"/>
    <dui-spinner class="size-12 text-green-600"/>
    <dui-spinner class="size-12 text-blue-600"/>
</dui-group>

<div class="flex flex-wrap items-center gap-4">
    <dui-button>
        <dui-spinner/>
        Submit
    </dui-button>
    <dui-button disabled>
        <dui-spinner/>
        Disabled
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" disabled>
        <dui-spinner/>
        Outline
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" disabled>
        <dui-spinner/>
        <span class="sr-only">Loading...</span>
    </dui-button>
</div>

<div class="flex flex-wrap items-center justify-center gap-4">
    <dui-badge>
        <dui-spinner/>
        Badge
    </dui-badge>
    <dui-badge variant="BadgeVariant.Secondary">
        <dui-spinner/>
        Badge
    </dui-badge>
    <dui-badge variant="BadgeVariant.Destructive">
        <dui-spinner/>
        Badge
    </dui-badge>
    <dui-badge variant="BadgeVariant.Outline">
        <dui-spinner/>
        Badge
    </dui-badge>
</div>

<dui-field>
    <dui-field-label for="input-group-spinner">Input Group</dui-field-label>
    <dui-input-group>
        <dui-input-group-input id="input-group-spinner"/>
        <dui-input-group-addon>
            <dui-spinner/>
        </dui-input-group-addon>
    </dui-input-group>
</dui-field>

<dui-empty class="min-h-[300px]">
    <dui-empty-header>
        <dui-empty-media variant="EmptyMediaVariant.Icon">
            <dui-spinner/>
        </dui-empty-media>
        <dui-empty-title>No projects yet</dui-empty-title>
        <dui-empty-description>
            You haven&apos;t created any projects yet. Get started by creating
            your first project.
        </dui-empty-description>
    </dui-empty-header>
    <dui-empty-content>
        <div class="flex gap-2">
            <dui-linkbutton href="#">
                Create project
            </dui-linkbutton>
            <dui-button variant="ButtonVariant.Outline">
                Import project
            </dui-button>
        </div>
        <dui-linkbutton variant="ButtonVariant.Link" href="#" class="text-muted-foreground">
            Learn more
            <dui-icon name="arrow-right"/>
        </dui-linkbutton>
    </dui-empty-content>
</dui-empty>