accessible progressbar [Tailwind]

twAccessibleProgressbar.svelte

<!-- progress bar, accessible — see: https://courses.joshwcomeau.com/css-for-js/03-components/18-workshop-progress & https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role -->
<div
  class="h-2 rounded-full bg-teal-600"
  name="remote tactile funding progress indicator"
  role="progressbar"
  aria-valuenow={value}
  aria-valuemin={0}
  aria-valuemax={100}
  style="width: {value}%; transition: width 2s"
>
<span class="sr-only">{value}%</span>
</div>

<!-- Note: you'll need an extra div wrapper for rounded border radius with overflow hidden, otherwise you'll have issues when padding collides. Additionally, the wrapper should have a slight offset in radius if there is padding, to look right. This is known as concentric circles: "When we nest elements that use border-radius, we need to tweak the outer element to be more curved than the inner one." And it could be easily done by eye. -->