Added new z-index layers within tailwind config

config/rapidez/frontend.php

@@ -79,14 +79,6 @@
         ],
     ],
 
-    // Z-Index per element
-    'z-indexes' => [
-        'header-dropdowns' => 'z-20',
-        'lightbox'         => 'z-30',
-        'notification'     => 'z-20',
-        'slideover'        => 'z-50',
-    ],
-
     // Add to cart settings to automatically select configurable- or product options (true/false)
     'add_to_cart' => [
         'auto_select_configurable_options' => false,

resources/views/components/notifications.blade.php

@@ -1,5 +1,5 @@
 <notifications v-cloak>
-    <div class="fixed sm:max-w-sm sm:w-full top-6 right-6 left-6 sm:left-auto flex flex-col {{ config('rapidez.frontend.z-indexes.notification') }}" slot-scope="{ notifications }">
+    <div class="fixed sm:max-w-sm sm:w-full top-6 right-6 left-6 sm:left-auto flex flex-col z-notifications" slot-scope="{ notifications }">
         <notification v-if="notifications.length" v-for="(notification, index) in notifications" :notification="notification" :key="index +1">
             <transition
                 enter-active-class="ease-in-out duration-500"
@@ -10,7 +10,8 @@
                 leave-to-class="opacity-0"
                 slot-scope="{ message, type, show, close, classes, link }"
             >
-                <component :is="link ? 'a' : 'div'" v-if="show" class="relative flex items-end justify-center pointer-events-none mb-3 sm:items-start sm:justify-end {{ config('rapidez.frontend.z-indexes.notification') }}" :class="{ 'pointer-events-none': !link }">
+                <component :is="link ? 'a' : 'div'" v-if="show" class="relative flex items-end justify-center pointer-events-none mb-3 sm:items-start sm:justify-end" :class="{ 'pointer-events-none': !link }">
+
                     <div class="max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border" :class="classes">
                         <div class="p-4">
                             <div class="flex items-start">

resources/views/components/slideover/index.blade.php

@@ -24,19 +24,19 @@
     $closeId = $isInForm ? 'close-' . $id : $id;
 @endphp
 
-<x-rapidez::tag v-on:reset="toggleScroll(false)" :is="$tag">
+<x-rapidez::tag v-on:reset="toggleScroll(false)" :is="$tag" class="z-slideover relative">
     <input id="{{ 'close-' . $id }}" class="hidden" type="reset">
     @if (!$hasParent)
         <input @checked($open) id="{{ $id }}" class="peer hidden" v-on:change="toggleScroll($event.target.checked)" type="checkbox">
         <label
             for="{{ $closeId }}"
-            class="pointer-events-none fixed inset-0 z-40 cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
+            class="pointer-events-none fixed inset-0 z-slideover-overlay cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
         ></label>
     @else
         <input @checked($open) id="{{ $id }}" class="peer hidden" type="checkbox">
     @endif
     <div {{ $attributes->class([
-        'fixed inset-y-0 transition-all bg-white z-40 flex flex-col max-w-md w-full',
+        'fixed inset-y-0 transition-all bg-white z-10 flex flex-col max-w-md w-full z-slideover-sidebar',
         '-right-full peer-checked:right-0' => $position === 'right',
         '-left-full peer-checked:left-0' => $position === 'left',
     ]) }}>

resources/views/layouts/checkout/header.blade.php

@@ -1,4 +1,4 @@
-<header class="relative mb-5 border-b shadow">
+<header class="relative mb-5 border-b shadow z-header">
     <div class="justify-center container flex flex-wrap items-center max-sm:px-3">
         <div class="py-2">
             <div class="mr-3 flex items-center text-xl sm:text-3xl">

resources/views/layouts/partials/header.blade.php

@@ -1,4 +1,4 @@
-<header class="relative mb-5 border-b shadow">
+<header class="relative mb-5 border-b shadow z-header">
     <div class="container flex flex-wrap items-center max-sm:px-3">
         <input id="navigation" class="peer hidden" type="checkbox" />
         <div class="py-2">
@@ -23,11 +23,11 @@
             @include('rapidez::layouts.partials.header.account')
             @include('rapidez::layouts.partials.header.minicart')
         </div>
-        <nav class="inset-x-0 top-full w-full bg-white max-md:absolute max-md:z-20 max-md:grid max-md:grid-rows-[0fr] max-md:border-b max-md:shadow max-md:transition-all max-md:peer-checked:grid-rows-[1fr]">
+        <nav class="inset-x-0 top-full w-full bg-white max-md:absolute max-md:grid max-md:grid-rows-[0fr] max-md:shadow max-md:transition-all max-md:peer-checked:grid-rows-[1fr]">
             <div class="max-h-full overflow-hidden">
                 {{-- Because the lack of an @includeIf or @includeWhen equivalent for Blade components we're using a placeholder --}}
                 <x-dynamic-component :component="App::providerIsLoaded('Rapidez\Menu\MenuServiceProvider') ? 'menu' : 'placeholder'" />
             </div>
         </nav>
     </div>
-</header>
+</header>

resources/views/layouts/partials/header/account.blade.php

@@ -5,7 +5,7 @@
                 <x-heroicon-o-user class="size-6"/>
                 @{{ $root.user.firstname }}
             </button>
-            <div v-if="isOpen" class="absolute bg-white border shadow rounded mr-1 {{ config('rapidez.frontend.z-indexes.header-dropdowns') }}">
+            <div v-if="isOpen" class="absolute bg-white border shadow rounded mr-1 z-header-dropdown">
                 @if (App::providerIsLoaded('Rapidez\Account\AccountServiceProvider'))
                     <a class="block hover:bg px-3 py-2" href="{{ route('account.overview') }}">@lang('Account')</a>
                     <a class="block hover:bg px-3 py-2" href="{{ route('account.orders') }}">@lang('Orders')</a>

resources/views/layouts/partials/header/autocomplete.blade.php

@@ -41,7 +41,7 @@ class="relative [&_*]:!m-0 [&_[isclearicon=]]:!mr-2 [&_.cancel-icon]:!fill-[#595
                 slot-scope="{ downshiftProps: { isOpen }, data: suggestions }"
             >
                 <div
-                    class="{{ config('rapidez.frontend.z-indexes.header-dropdowns') }} absolute -inset-x-10 top-full max-h-[600px] overflow-auto rounded-b-xl border bg-white p-2 md:p-5 shadow-xl md:inset-x-0 md:w-full md:-translate-y-px"
+                    class="z-header-autocomplete absolute -inset-x-10 top-full max-h-[600px] overflow-auto rounded-b-xl border bg-white p-2 md:p-5 shadow-xl md:inset-x-0 md:w-full md:-translate-y-px"
                     v-if="isOpen && (suggestions.length || resultsCount)"
                 >
                     <template v-for="(resultsData, resultsType) in results ?? {}" v-if="resultsData?.hits?.length">

resources/views/layouts/partials/header/minicart.blade.php

@@ -4,7 +4,7 @@
             <x-heroicon-o-shopping-cart class="size-6"/>
             <span class="bg-secondary text-secondary-text rounded-full size-6 text-white text-center" dusk="minicart-count">@{{ Math.round(cart.total_quantity) }}</span>
         </button>
-        <div v-if="isOpen" class="absolute right-0 bg-white border shadow rounded-xl p-5 {{ config('rapidez.frontend.z-indexes.header-dropdowns') }}">
+        <div v-if="isOpen" class="absolute right-0 bg-white border shadow rounded-xl p-5 z-header-minicart">
             <table class="w-full mb-3">
                 <tr v-for="item in cart.items" class="*:pb-3">
                     <td class="block w-48 truncate overflow-hidden">

resources/views/product/partials/gallery/popup.blade.php

@@ -6,14 +6,14 @@
             class="object-contain max-h-full mx-auto block"
             loading="lazy"
         />
-        <div class="z-10 pointer-events-none fixed top-3 right-3">
+        <div class="z-popup-actions pointer-events-none fixed top-3 right-3">
             <x-heroicon-o-x-mark class="size-6" />
         </div>
     </div>
-    <button class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
+    <button class="z-popup-actions top-1/2 left-3 -translate-y-1/2 absolute" v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
         <x-heroicon-o-chevron-left class="size-8 text-inactive" />
     </button>
-    <button class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
+    <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
         <x-heroicon-o-chevron-right class="size-8 text-inactive" />
     </button>
 </div>

tailwind.config.js

@@ -59,6 +59,21 @@ export default {
                     muted: color('--background-muted', colors.slate[50]),
                 },
             },
+            zIndex: {
+                header: '100',
+                'header-dropdown': '10',
+                'header-autocomplete': '20',
+                'header-minicart': '30',
+
+                notifications: '110',
+
+                slideover: '120',
+                'slideover-overlay': '10',
+                'slideover-sidebar': '20',
+
+                popup: '130',
+                'popup-actions': '10',
+            },
             textColor: (theme) => theme('colors.foreground'),
             borderColor: (theme) => ({
                 default: theme('colors.border'),