Default z-index alignment needed with design system

[NicDominguez]

Describe the bug

The default z-index values for several of the web-components are not aligned with the proper component hierarchy for the design system. For example, the classification marking appears below the dialog modal background. We should revisit this hierarchy and ensure that the default styles reflect the proper visual hierarchy.

To Reproduce

See code sandbox demo

Current behavior

The default hierarchy for components meant to overlap other components appears to be as follows:

RuxDialog
RuxTooltip
RuxToast
RuxPopUp
RuxClassificationMarking
RuxNotificationBanner/RuxGlobalStatusBar

Expected behavior

To align with standards it should be:

RuxTooltip
RuxClassificationMarking
RuxDialog
RuxPopUp
RuxToast
RuxGlobalStatusBar/RuxNotificationBanner

With the general rule of any component should appear over its parent container. For example, a tooltip on text within a toast message should appear over the toast.

Screenshots

CodeSandbox
https://codesandbox.io/p/sandbox/astro-z-index-issue-nn4dw3

Environment (please complete the following information):

• Browser = chrome
• @astrouxds/astro-web-components version = 7.23.0
• Framework = React
• Framework wrapper version = @astrouxds/react

Additional context
None