Request: add --z-index style prop

[theetrain]

Hello, thanks for making this component. It works very well!

Issue

While implementing it in my SvelteKit app, I noticed that sometimes the ProgressBar would not appear visually, even though it correctly mounted and animated in the DOM (from my browser's element inspector).

After lots of digging, I found out that the z-index values I supplied were being overwritten by ProgressBar.svelte's styles!

In my +layout.svelte, I applied z-index like this:

<style>
  :global(.svelte-progress-bar) {
    z-index: 8100; /* to appear on top of UIShell */
  }
  :global(.svelte-progress-bar-leader) {
    z-index: 8101;
  }
</style>

But if I navigate to my page from a page not using ProgressBar, the ProgressBar z-index value of 1 would be added to the page below my styles, overwriting mine.

Workaround

My workaround was to add !important:

<style>
  :global(.svelte-progress-bar) {
+   z-index: 8100 !important; /* to appear on top of UIShell */
  }
  :global(.svelte-progress-bar-leader) {
+   z-index: 8101 !important;
  }
</style>

Proposal

I think ideally it would be great to have these styles be overridden by the component without having to write global CSS. I propose making use of --style-props. The Svelte user experience would be:

<ProgressBar bind:this={progress} --z-index="8100" />

And this would apply 8100 to .svelte-progress-bar and increment to 8101 and apply to .svelte-progress-bar-leader internally. Style props can also be leveraged for the ProgressBar's color.

[saibotsivad]

I actually just ran into this same problem last week! That --style-props looks like it might be the way to go, if you want to open a PR I would probably accept that, otherwise I will see if I can add that in soon.