chore: improve Modal / Slideover preset

src/runtime/components/overlays/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <Dialog class="relative z-50" @close="close">
+    <Dialog :class="wrapperClass" @close="close">
       <TransitionChild
         v-if="overlay"
         as="template"
@@ -10,7 +10,7 @@
         <div class="fixed inset-0 transition-opacity" :class="overlayBackgroundClass" />
       </TransitionChild>
 
-      <div :class="wrapperClass">
+      <div :class="innerClass">
         <div :class="containerClass">
           <TransitionChild
             as="template"
@@ -62,6 +62,10 @@ const props = defineProps({
     type: String,
     default: () => $ui.modal.wrapper
   },
+  innerClass: {
+    type: String,
+    default: () => $ui.modal.inner
+  },
   containerClass: {
     type: String,
     default: () => $ui.modal.container

src/runtime/components/overlays/Slideover.vue

@@ -1,12 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog
-      class="fixed inset-0 flex z-40"
-      :class="{
-        'justify-end': side === 'right'
-      }"
-      @close="isOpen = false"
-    >
+    <Dialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" @close="isOpen = false">
       <TransitionChild
         v-if="overlay"
         as="template"
@@ -53,6 +47,10 @@ const props = defineProps({
     default: 'left',
     validator: (value: string) => ['left', 'right'].includes(value)
   },
+  wrapperClass: {
+    type: String,
+    default: () => $ui.slideover.wrapper
+  },
   baseClass: {
     type: String,
     default: () => $ui.slideover.base