feat(progress-bar): add ProgressBar component

[AdrianArenal]

Pull request template

Describe the purpose of the change, the specific changes done in detail, and the issue you have fixed.

Motivation and context

• Dependencies. If any, specify:
• Open issue. If applicable, link:

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that causes existing functionality to not work as expected)
• Change requires a documentation update

What is the destination branch of this PR?

• Main
• Other. Specify:

How has this been tested?

Tests performed according to testing guidelines:

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review on my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.

[joseacabaneros]

Try to avoid CSS variables given the right value in every case instead

[AdrianArenal]

done

[Turito]

To be consistent with the rest of the components, don't use a new CSS variables.

Suggested change

	--progress-bar-color-50: --value(--color- * -50);
	& > .xds\:progress-bar-fill {
	background-color: --value(--color- * -50)
	}

Then we can removed --progress-bar-color-50.

[AdrianArenal]

nice catch! applied

[Turito]

Suggested change

	<span>sm</span>
	<div class="xds:progress-bar xds:progress-bar-sm xds:w-320">
	<div class="xds:progress-bar-fill xds:w-[30%]" />
	</div>
	<span>lg</span>
	<div class="xds:progress-bar xds:progress-bar-lg xds:w-320">
	<div class="xds:progress-bar-fill xds:w-[30%]" />
	</div>
	<div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
	<span>sm</span>
	<div class="xds:progress-bar xds:progress-bar-sm xds:w-320">
	<div class="xds:progress-bar-fill xds:w-[30%]" />
	</div>
	</div>
	<div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
	<span>lg</span>
	<div class="xds:progress-bar xds:progress-bar-lg xds:w-320">
	<div class="xds:progress-bar-fill xds:w-[30%]" />
	</div>
	</div>

WDYT about adding a wrapper to show it better?

[AdrianArenal]

applied