{# @description A radial progress ring. value must be a number from 0 to 100 — never render it from unvalidated user input. Set size and thickness with the [--size:…] and [--thickness:…] classes in class. Type value="70" label="Upload progress" in the attributes field to give this preview a value and a name. See the mockup.phone entry for radial progresses at different values, one sized, one coloured and one with custom centre content. #}
{# @prop value:text | required | description:"Current value, from 0 to 100." #}
{# @prop label:text | description:"Accessible name. Always give one." #}
{# @prop style:text | description:"Extra inline style appended after the --value custom property." #}
{# @prop class:text | description:"Extra classes added to the ring, such as a size or thickness variable, or a text colour utility." #}
{# @slot 70% — Custom centre content, such as an icon or a short word, replacing the visible percentage. #}
{% load daisy_cotton %}
<c-vars value="" label="" style="" class="" />
{# djlint:off #}
<div class="radial-progress {{ class }}" role="progressbar" style="--value:{{ value }};{% if style %} {{ style }}{% endif %}" {% if value != "" %}aria-valuenow="{{ value }}" {% endif %}aria-valuemin="0" aria-valuemax="100"{% if label %} aria-label="{{ label }}"{% endif %} {{ attrs }}>{% if slot.strip %}{{ slot }}{% elif value != "" %}{{ value }}%{% endif %}</div>
{# djlint:on #}