@auronui/styles 1.0.6 → 1.0.8

package/base/base.css

@@ -26,6 +26,13 @@
 /* Keeps main page content interactive during view transitions */
 :root {
   view-transition-name: none;
+
+  /* Z-index layering scale */
+  --z-modal-backdrop: 50;  /* backdrop behind modal / drawer / alert-dialog */
+  --z-modal: 100;          /* modal, drawer, alert-dialog panels */
+  --z-popover: 200;        /* floating UI: dropdowns, selects, popovers, date-pickers */
+  --z-tooltip: 300;        /* tooltips — above all other floating UI */
+  --z-toast: 400;          /* toasts — always on top */
 }
 
 ::view-transition {

package/components/alert-dialog.css

@@ -43,7 +43,8 @@
  * Element: backdrop - the overlay behind the dialog
  */
 .alert-dialog__backdrop {
-  @apply fixed inset-0 z-50;
+  @apply fixed inset-0;
+  z-index: var(--z-modal-backdrop);
 
   /* Entering animation — Reka UI sets data-state="open" when mounted */
   &[data-state="open"] {
@@ -91,7 +92,8 @@
  * Element: container - the positioning wrapper for the modal
  */
 .alert-dialog__container {
-  @apply fixed inset-0 z-50;
+  @apply fixed inset-0;
+  z-index: var(--z-modal);
   @apply flex flex-col items-center;
   @apply w-full min-w-0;
   @apply p-4 sm:p-10;

package/components/autocomplete.css

@@ -622,6 +622,7 @@
   --trigger-width: var(--reka-combobox-trigger-width);
   --trigger-anchor-point: var(--reka-combobox-content-transform-origin);
 
+  z-index: var(--z-popover);
   @apply scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 text-sm;
   width: var(--trigger-width);
   transform-origin: var(--trigger-anchor-point);

package/components/color-picker.css

@@ -66,6 +66,7 @@
    ========================================================================== */
 
 .color-picker__popover {
+  z-index: var(--z-popover);
   @apply min-w-62 origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto overscroll-contain bg-overlay px-2 pt-2 pb-3;
   box-shadow: var(--shadow-overlay);
   border-radius: calc(var(--radius) * 2.5);

package/components/combo-box.css

@@ -163,6 +163,7 @@
   --trigger-width: var(--reka-combobox-trigger-width);
   --trigger-anchor-point: var(--reka-combobox-content-transform-origin);
 
+  z-index: var(--z-popover);
   @apply scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 text-sm;
   width: var(--trigger-width);
   transform-origin: var(--trigger-anchor-point);

package/components/date-picker.css

@@ -41,6 +41,7 @@
 }
 
 .date-picker__popover {
+  z-index: var(--z-popover);
   @apply max-w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto overscroll-contain bg-overlay p-3;
   @apply motion-reduce:transition-none;
 

package/components/date-range-picker.css

@@ -44,6 +44,7 @@
 }
 
 .date-range-picker__popover {
+  z-index: var(--z-popover);
   @apply max-w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto overscroll-contain bg-overlay p-3;
   @apply motion-reduce:transition-none;
 

package/components/date-time-picker.css

@@ -51,6 +51,7 @@
 /* ─── Popover shell ───────────────────────────────────────────────────────── */
 
 .date-time-picker__popover {
+  z-index: var(--z-popover);
   @apply origin-(--trigger-anchor-point) overflow-hidden bg-overlay p-0;
   min-width: 17rem;
   box-shadow: var(--shadow-overlay);

package/components/drawer.css

@@ -51,7 +51,8 @@
  * Reka's Presence component waits for animationend before unmounting.
  */
 .drawer__backdrop {
-  @apply fixed inset-0 z-50;
+  @apply fixed inset-0;
+  z-index: var(--z-modal-backdrop);
   @apply h-(--visual-viewport-height) w-full;
 
   &[data-state="open"] {
@@ -95,7 +96,8 @@
  * animationend on this element before unmounting on close.
  */
 .drawer__dialog {
-  @apply fixed z-50;
+  @apply fixed;
+  z-index: var(--z-modal);
   @apply flex flex-col;
   @apply bg-overlay shadow-overlay outline-none;
   @apply p-6;

package/components/dropdown.css

@@ -39,6 +39,7 @@
 
 /* Positioning, sizing, and open/close animations — visuals come from card classes */
 .dropdown__popover {
+  z-index: var(--z-popover);
   @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain md:min-w-55;
   @apply will-change-[opacity,transform];
 

package/components/modal.css

@@ -42,7 +42,8 @@
  * Element: backdrop - the overlay behind the dialog
  */
 .modal__backdrop {
-  @apply fixed inset-0 z-50;
+  @apply fixed inset-0;
+  z-index: var(--z-modal-backdrop);
   @apply flex flex-row items-center justify-center;
   @apply h-(--visual-viewport-height) w-full;
 
@@ -92,7 +93,8 @@
  * Element: container - the positioning wrapper for the modal
  */
 .modal__container {
-  @apply flex flex-col items-center fixed z-[100] top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%];
+  @apply flex flex-col items-center fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%];
+  z-index: var(--z-modal);
   @apply h-(--visual-viewport-height) w-full min-w-0 flex-1;
   @apply p-4;
   @apply sm:w-fit sm:p-10;

package/components/popover.css

@@ -3,6 +3,7 @@
 /* Base popover styles */
 .popover {
   @apply origin-(--trigger-anchor-point) rounded-3xl bg-overlay p-0 text-sm;
+  z-index: var(--z-popover);
   box-shadow: var(--shadow-overlay);
 
   /* Entering animations */

package/components/select.css

@@ -602,6 +602,7 @@
   --trigger-width: var(--reka-select-trigger-width);
   --trigger-anchor-point: var(--reka-select-content-transform-origin);
 
+  z-index: var(--z-popover);
   @apply scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 text-sm;
   width: var(--trigger-width);
   transform-origin: var(--trigger-anchor-point);

package/components/toast.css

@@ -5,7 +5,8 @@
 
 /* Toast Region - Fixed container that stacks toasts along Y axis */
 .toast-region {
-  @apply pointer-events-none fixed z-50 outline-none;
+  @apply pointer-events-none fixed outline-none;
+  z-index: var(--z-toast);
   @apply w-[calc(100vw-2rem)] sm:w-auto;
 
   display: flex;

package/components/tooltip.css

@@ -3,6 +3,7 @@
 /* Base tooltip styles */
 .tooltip {
   @apply max-w-xs text-xs break-all;
+  z-index: var(--z-tooltip);
   /* box-shadow: var(--shadow-overlay); */
   will-change: opacity, transform;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",