Bug: calcite-block disabled state doesn't 'hide' slider handle

[AdelheidF]

Summary

cc @asangma @jcfranco

Actual Behavior

Expected Behavior

Reproduction Steps

Relevant Info

[jcfranco]

The scrim currently uses a z-index of 2, so there are cases where siblings in the same stacking context will show above it. I propose for now a simple CSS var for the scrim's z-index and if necessary, we can create a follow-up issue for something more involved to guarantee that it's always above.

@asangma @pr3tori4n @driskull WDYT?

[driskull]

@jcfranco This is the current structure of the scrim

<div class={CSS.content} hidden={!hasContent || !open}>
   <slot />
  {loading || disabled ? <CalciteScrim loading={false}></CalciteScrim> : null}
</div>

Can we just do the following to get the stacking index relative to where the scrim is?

<div class={CSS.content} hidden={!hasContent || !open}>
  <div style="position:relative; z-index:1">
     <slot />
  </div>
  <div>
  {loading || disabled ? <CalciteScrim loading={false}></CalciteScrim> : null}
</div>

[driskull]

We could also enhance <CalciteScrim> to surround the content you want contained in the right z-index stacking. That might be even better.

[jcfranco]

@AdelheidF Can you help verify this one?

[AdelheidF]

Tested locally. Seems fine now.