Re-work component z-index relational layers

[scurker]

Most everything should be using z-index (which is how things are layered in CSS) and it appears we have the following hierarchy based on the following code:

cauldron/packages/styles/variables.css

Lines 115 to 131 in 61642fd

	/* z-index */
	--z-index-tooltip: 22;
	--z-index-loader: 8;
	--z-index-scrim: 7;
	--z-index-dialog: 21;
	--z-index-dialog-scrim: 20;
	--z-index-scrim-action-needed: 23;
	--z-index-top-nav: 9;
	--z-index-side-bar: 9;
	--z-index-toast: 8;
	--z-index-toast-action-needed: 24;
	--z-index-listbox: 6;
	/* ensure this is a higher value than the rest (above)! */
	--z-index-top-bar: 25;
	/* ensure this is 1 higher than the top bar z-index */
	--z-index-skip-container: calc(var(--z-index-top-bar) + 1);
	--z-index-drawer: calc(var(--z-index-top-bar) + 1);

Current Stacking Order (Highest → Lowest)

• Skip Container & Drawer
• Top Bar
• Critical Action Items (Toast - Action Needed)
• Scrim (Action Needed)
• Tooltips
• Dialog
• Dialog Scrim
• Navigation Components (Top Nav & Side Bar)
• Overlays & Notifications (Loader & Toast)
• Scrim (Default)
• Listbox

Needed Stacking Order

We really need to flatten our layering to minimize stacking context issues and limit how things are layered in the UI to at most 3 different layers:

1. Top most layer
   • Dialogs
   • Tooltips
   • Overlays
   • Menus
   • Any other ui elements that are "floating"
2. Middle layer
   • Scrim
   • SkipLinks
   • TopBar
   • Any other elements that need to overlay content (not in the top layer)
3. Everything else