@kupola/kupola 1.6.0 → 1.6.1

package/css/accessibility.css

@@ -21,7 +21,7 @@
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
-  z-index: 1000;
+  z-index: var(--z-index-loading, 5000);
   transition: top 0.2s ease;
 }
 

package/css/components-ext.css

@@ -667,7 +667,7 @@
   border: 1px solid var(--border-neutral-l2);
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
+  z-index: var(--z-index-datepicker, 2300);
 }
 
 .ds-datepicker__header {
@@ -819,7 +819,7 @@
   border: 1px solid var(--border-neutral-l2);
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
+  z-index: var(--z-index-dropdown, 2000);
   display: none;
 }
 
@@ -1912,7 +1912,7 @@
   position: fixed;
   top: 24px;
   right: 24px;
-  z-index: 2000;
+  z-index: var(--z-index-notification, 3100);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -2041,7 +2041,7 @@
   top: 0;
   left: 0;
   right: 0;
-  z-index: 2000;
+  z-index: var(--z-index-message, 3000);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2392,7 +2392,7 @@
   border-radius: 6px;
   padding: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  z-index: 100;
+  z-index: var(--z-index-dropdown, 2000);
   display: none;
 }
 
@@ -2668,7 +2668,7 @@
   border-radius: var(--radius-4);
   padding: var(--spacer-4);
   display: none;
-  z-index: 100;
+  z-index: var(--z-index-dropdown, 2000);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
@@ -2782,7 +2782,7 @@
   font-size: var(--body-xs-font-size);
   line-height: var(--body-sm-line-height);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  z-index: 9999;
+  z-index: var(--z-index-tooltip, 2100);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.12s ease, transform 0.12s ease;
@@ -3530,7 +3530,7 @@
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.85);
-  z-index: 9999;
+  z-index: var(--z-index-loading, 5000);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4072,7 +4072,7 @@
   font-size: 12px;
   color: var(--text-default);
   pointer-events: none;
-  z-index: 1000;
+  z-index: var(--z-index-tooltip, 2100);
   display: none;
 }
 

package/css/components.css

@@ -1468,7 +1468,7 @@
   border: 1px solid var(--border-neutral-l2);
   border-radius: var(--radius-4);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
+  z-index: var(--z-index-dropdown, 2000);
   display: none;
   padding: var(--spacer-4);
   box-sizing: border-box;

package/css/utilities.css

@@ -326,4 +326,9 @@
 .ds-bg-base { background: var(--bg-base-secondary); }
 
 /* Z-index */
-.ds-z-modal { z-index: 1000; }
+.ds-z-modal { z-index: var(--z-index-modal, 1000); }
+.ds-z-dropdown { z-index: var(--z-index-dropdown, 2000); }
+.ds-z-tooltip { z-index: var(--z-index-tooltip, 2100); }
+.ds-z-message { z-index: var(--z-index-message, 3000); }
+.ds-z-notification { z-index: var(--z-index-notification, 3100); }
+.ds-z-loading { z-index: var(--z-index-loading, 5000); }

package/dist/css/accessibility.css

@@ -21,7 +21,7 @@
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
-  z-index: 1000;
+  z-index: var(--z-index-loading, 5000);
   transition: top 0.2s ease;
 }
 

package/dist/css/components-ext.css

@@ -667,7 +667,7 @@
   border: 1px solid var(--border-neutral-l2);
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
+  z-index: var(--z-index-datepicker, 2300);
 }
 
 .ds-datepicker__header {
@@ -819,7 +819,7 @@
   border: 1px solid var(--border-neutral-l2);
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
+  z-index: var(--z-index-dropdown, 2000);
   display: none;
 }
 
@@ -1912,7 +1912,7 @@
   position: fixed;
   top: 24px;
   right: 24px;
-  z-index: 2000;
+  z-index: var(--z-index-notification, 3100);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -2041,7 +2041,7 @@
   top: 0;
   left: 0;
   right: 0;
-  z-index: 2000;
+  z-index: var(--z-index-message, 3000);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2392,7 +2392,7 @@
   border-radius: 6px;
   padding: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  z-index: 100;
+  z-index: var(--z-index-dropdown, 2000);
   display: none;
 }
 
@@ -2668,7 +2668,7 @@
   border-radius: var(--radius-4);
   padding: var(--spacer-4);
   display: none;
-  z-index: 100;
+  z-index: var(--z-index-dropdown, 2000);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
@@ -2782,7 +2782,7 @@
   font-size: var(--body-xs-font-size);
   line-height: var(--body-sm-line-height);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  z-index: 9999;
+  z-index: var(--z-index-tooltip, 2100);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.12s ease, transform 0.12s ease;
@@ -3530,7 +3530,7 @@
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.85);
-  z-index: 9999;
+  z-index: var(--z-index-loading, 5000);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4072,7 +4072,7 @@
   font-size: 12px;
   color: var(--text-default);
   pointer-events: none;
-  z-index: 1000;
+  z-index: var(--z-index-tooltip, 2100);
   display: none;
 }
 

package/dist/css/components.css

@@ -1468,7 +1468,7 @@
   border: 1px solid var(--border-neutral-l2);
   border-radius: var(--radius-4);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
+  z-index: var(--z-index-dropdown, 2000);
   display: none;
   padding: var(--spacer-4);
   box-sizing: border-box;

package/dist/css/utilities.css

@@ -326,4 +326,9 @@
 .ds-bg-base { background: var(--bg-base-secondary); }
 
 /* Z-index */
-.ds-z-modal { z-index: 1000; }
+.ds-z-modal { z-index: var(--z-index-modal, 1000); }
+.ds-z-dropdown { z-index: var(--z-index-dropdown, 2000); }
+.ds-z-tooltip { z-index: var(--z-index-tooltip, 2100); }
+.ds-z-message { z-index: var(--z-index-message, 3000); }
+.ds-z-notification { z-index: var(--z-index-notification, 3100); }
+.ds-z-loading { z-index: var(--z-index-loading, 5000); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A lightweight UI toolkit for any web project. No heavy frontend frameworks required.",
   "main": "dist/kupola.cjs.js",
   "module": "dist/kupola.esm.js",