{% comment %}
When `color` is set the colour is resolved in JS: an explicit family name (e.g.
"blue") maps straight to its class, while "auto" hashes the initials so the same
person always gets the same colour. The palette literals live in the x-data so
Tailwind compiles every class. Only the inner span is clipped to the circle, so
a status dot dropped in the default slot is never cut off.
{% endcomment %}
>> 0;
return Object.keys(this.palette)[h % Object.keys(this.palette).length];
},
get colorClass() {
const c = '{{ color }}';
return this.palette[c === 'auto' ? this.family('{{ initials|escapejs }}') : c] || '';
}
}"{% endif %}
class="relative inline-flex shrink-0 items-center justify-center rounded-full {{ size_classes|get_item:size }} {{ class }}"
>
{% if src %}{% elif initials %}{{ initials }}{% else %}{% endif %}
{{ slot }}