@kupola/kupola 1.5.5 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/css/accessibility.css +1 -1
  2. package/css/components-ext.css +12 -12
  3. package/css/components.css +1 -1
  4. package/css/utilities.css +6 -1
  5. package/dist/css/accessibility.css +1 -1
  6. package/dist/css/components-ext.css +12 -12
  7. package/dist/css/components.css +1 -1
  8. package/dist/css/utilities.css +6 -1
  9. package/dist/kupola.cjs.js +17 -17
  10. package/dist/kupola.cjs.js.map +1 -1
  11. package/dist/kupola.esm.js +877 -842
  12. package/dist/kupola.esm.js.map +1 -1
  13. package/dist/kupola.umd.js +17 -17
  14. package/dist/kupola.umd.js.map +1 -1
  15. package/js/datepicker.js +8 -3
  16. package/js/dropdown.js +8 -3
  17. package/js/kupola-config.js +14 -0
  18. package/js/message.js +5 -2
  19. package/js/notification.js +5 -2
  20. package/js/select.js +8 -2
  21. package/js/tooltip.js +6 -2
  22. package/package.json +1 -1
package/css/accessibility.css CHANGED
@@ -21,7 +21,7 @@
21
21
  font-size: 13px;
22
22
  font-weight: 500;
23
23
  text-decoration: none;
24
- z-index: 1000;
24
+ z-index: var(--z-index-loading, 5000);
25
25
  transition: top 0.2s ease;
26
26
  }
27
27
 
package/css/components-ext.css CHANGED
@@ -667,7 +667,7 @@
667
667
  border: 1px solid var(--border-neutral-l2);
668
668
  border-radius: 6px;
669
669
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
670
- z-index: 100;
670
+ z-index: var(--z-index-datepicker, 2300);
671
671
  }
672
672
 
673
673
  .ds-datepicker__header {
@@ -819,7 +819,7 @@
819
819
  border: 1px solid var(--border-neutral-l2);
820
820
  border-radius: 6px;
821
821
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
822
- z-index: 100;
822
+ z-index: var(--z-index-dropdown, 2000);
823
823
  display: none;
824
824
  }
825
825
 
@@ -1682,7 +1682,7 @@
1682
1682
  right: 0;
1683
1683
  bottom: 0;
1684
1684
  background-color: rgba(0, 0, 0, 0.5);
1685
- z-index: 1000;
1685
+ z-index: var(--z-index-modal, 1000);
1686
1686
  opacity: 0;
1687
1687
  visibility: hidden;
1688
1688
  transition: opacity 0.3s ease, visibility 0.3s ease;
@@ -1699,7 +1699,7 @@
1699
1699
  bottom: 0;
1700
1700
  width: 320px;
1701
1701
  background-color: var(--bg-base-secondary);
1702
- z-index: 1001;
1702
+ z-index: calc(var(--z-index-modal, 1000) + 1);
1703
1703
  transform: translateX(-100%);
1704
1704
  transition: transform 0.3s ease;
1705
1705
  display: flex;
@@ -1769,7 +1769,7 @@
1769
1769
  right: 0;
1770
1770
  bottom: 0;
1771
1771
  background-color: rgba(0, 0, 0, 0.5);
1772
- z-index: 1000;
1772
+ z-index: var(--z-index-modal, 1000);
1773
1773
  display: flex;
1774
1774
  align-items: center;
1775
1775
  justify-content: center;
@@ -1912,7 +1912,7 @@
1912
1912
  position: fixed;
1913
1913
  top: 24px;
1914
1914
  right: 24px;
1915
- z-index: 2000;
1915
+ z-index: var(--z-index-notification, 3100);
1916
1916
  display: flex;
1917
1917
  flex-direction: column;
1918
1918
  gap: 12px;
@@ -2041,7 +2041,7 @@
2041
2041
  top: 0;
2042
2042
  left: 0;
2043
2043
  right: 0;
2044
- z-index: 2000;
2044
+ z-index: var(--z-index-message, 3000);
2045
2045
  display: flex;
2046
2046
  flex-direction: column;
2047
2047
  align-items: center;
@@ -2392,7 +2392,7 @@
2392
2392
  border-radius: 6px;
2393
2393
  padding: 12px;
2394
2394
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
2395
- z-index: 100;
2395
+ z-index: var(--z-index-dropdown, 2000);
2396
2396
  display: none;
2397
2397
  }
2398
2398
 
@@ -2668,7 +2668,7 @@
2668
2668
  border-radius: var(--radius-4);
2669
2669
  padding: var(--spacer-4);
2670
2670
  display: none;
2671
- z-index: 100;
2671
+ z-index: var(--z-index-dropdown, 2000);
2672
2672
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
2673
2673
  }
2674
2674
 
@@ -2782,7 +2782,7 @@
2782
2782
  font-size: var(--body-xs-font-size);
2783
2783
  line-height: var(--body-sm-line-height);
2784
2784
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
2785
- z-index: 9999;
2785
+ z-index: var(--z-index-tooltip, 2100);
2786
2786
  pointer-events: none;
2787
2787
  opacity: 0;
2788
2788
  transition: opacity 0.12s ease, transform 0.12s ease;
@@ -3530,7 +3530,7 @@
3530
3530
  position: fixed;
3531
3531
  inset: 0;
3532
3532
  background-color: rgba(0, 0, 0, 0.85);
3533
- z-index: 9999;
3533
+ z-index: var(--z-index-loading, 5000);
3534
3534
  display: flex;
3535
3535
  flex-direction: column;
3536
3536
  align-items: center;
@@ -4072,7 +4072,7 @@
4072
4072
  font-size: 12px;
4073
4073
  color: var(--text-default);
4074
4074
  pointer-events: none;
4075
- z-index: 1000;
4075
+ z-index: var(--z-index-tooltip, 2100);
4076
4076
  display: none;
4077
4077
  }
4078
4078
 
package/css/components.css CHANGED
@@ -1468,7 +1468,7 @@
1468
1468
  border: 1px solid var(--border-neutral-l2);
1469
1469
  border-radius: var(--radius-4);
1470
1470
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
1471
- z-index: 100;
1471
+ z-index: var(--z-index-dropdown, 2000);
1472
1472
  display: none;
1473
1473
  padding: var(--spacer-4);
1474
1474
  box-sizing: border-box;
package/css/utilities.css CHANGED
@@ -326,4 +326,9 @@
326
326
  .ds-bg-base { background: var(--bg-base-secondary); }
327
327
 
328
328
  /* Z-index */
329
- .ds-z-modal { z-index: 1000; }
329
+ .ds-z-modal { z-index: var(--z-index-modal, 1000); }
330
+ .ds-z-dropdown { z-index: var(--z-index-dropdown, 2000); }
331
+ .ds-z-tooltip { z-index: var(--z-index-tooltip, 2100); }
332
+ .ds-z-message { z-index: var(--z-index-message, 3000); }
333
+ .ds-z-notification { z-index: var(--z-index-notification, 3100); }
334
+ .ds-z-loading { z-index: var(--z-index-loading, 5000); }
package/dist/css/accessibility.css CHANGED
@@ -21,7 +21,7 @@
21
21
  font-size: 13px;
22
22
  font-weight: 500;
23
23
  text-decoration: none;
24
- z-index: 1000;
24
+ z-index: var(--z-index-loading, 5000);
25
25
  transition: top 0.2s ease;
26
26
  }
27
27
 
package/dist/css/components-ext.css CHANGED
@@ -667,7 +667,7 @@
667
667
  border: 1px solid var(--border-neutral-l2);
668
668
  border-radius: 6px;
669
669
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
670
- z-index: 100;
670
+ z-index: var(--z-index-datepicker, 2300);
671
671
  }
672
672
 
673
673
  .ds-datepicker__header {
@@ -819,7 +819,7 @@
819
819
  border: 1px solid var(--border-neutral-l2);
820
820
  border-radius: 6px;
821
821
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
822
- z-index: 100;
822
+ z-index: var(--z-index-dropdown, 2000);
823
823
  display: none;
824
824
  }
825
825
 
@@ -1682,7 +1682,7 @@
1682
1682
  right: 0;
1683
1683
  bottom: 0;
1684
1684
  background-color: rgba(0, 0, 0, 0.5);
1685
- z-index: 1000;
1685
+ z-index: var(--z-index-modal, 1000);
1686
1686
  opacity: 0;
1687
1687
  visibility: hidden;
1688
1688
  transition: opacity 0.3s ease, visibility 0.3s ease;
@@ -1699,7 +1699,7 @@
1699
1699
  bottom: 0;
1700
1700
  width: 320px;
1701
1701
  background-color: var(--bg-base-secondary);
1702
- z-index: 1001;
1702
+ z-index: calc(var(--z-index-modal, 1000) + 1);
1703
1703
  transform: translateX(-100%);
1704
1704
  transition: transform 0.3s ease;
1705
1705
  display: flex;
@@ -1769,7 +1769,7 @@
1769
1769
  right: 0;
1770
1770
  bottom: 0;
1771
1771
  background-color: rgba(0, 0, 0, 0.5);
1772
- z-index: 1000;
1772
+ z-index: var(--z-index-modal, 1000);
1773
1773
  display: flex;
1774
1774
  align-items: center;
1775
1775
  justify-content: center;
@@ -1912,7 +1912,7 @@
1912
1912
  position: fixed;
1913
1913
  top: 24px;
1914
1914
  right: 24px;
1915
- z-index: 2000;
1915
+ z-index: var(--z-index-notification, 3100);
1916
1916
  display: flex;
1917
1917
  flex-direction: column;
1918
1918
  gap: 12px;
@@ -2041,7 +2041,7 @@
2041
2041
  top: 0;
2042
2042
  left: 0;
2043
2043
  right: 0;
2044
- z-index: 2000;
2044
+ z-index: var(--z-index-message, 3000);
2045
2045
  display: flex;
2046
2046
  flex-direction: column;
2047
2047
  align-items: center;
@@ -2392,7 +2392,7 @@
2392
2392
  border-radius: 6px;
2393
2393
  padding: 12px;
2394
2394
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
2395
- z-index: 100;
2395
+ z-index: var(--z-index-dropdown, 2000);
2396
2396
  display: none;
2397
2397
  }
2398
2398
 
@@ -2668,7 +2668,7 @@
2668
2668
  border-radius: var(--radius-4);
2669
2669
  padding: var(--spacer-4);
2670
2670
  display: none;
2671
- z-index: 100;
2671
+ z-index: var(--z-index-dropdown, 2000);
2672
2672
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
2673
2673
  }
2674
2674
 
@@ -2782,7 +2782,7 @@
2782
2782
  font-size: var(--body-xs-font-size);
2783
2783
  line-height: var(--body-sm-line-height);
2784
2784
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
2785
- z-index: 9999;
2785
+ z-index: var(--z-index-tooltip, 2100);
2786
2786
  pointer-events: none;
2787
2787
  opacity: 0;
2788
2788
  transition: opacity 0.12s ease, transform 0.12s ease;
@@ -3530,7 +3530,7 @@
3530
3530
  position: fixed;
3531
3531
  inset: 0;
3532
3532
  background-color: rgba(0, 0, 0, 0.85);
3533
- z-index: 9999;
3533
+ z-index: var(--z-index-loading, 5000);
3534
3534
  display: flex;
3535
3535
  flex-direction: column;
3536
3536
  align-items: center;
@@ -4072,7 +4072,7 @@
4072
4072
  font-size: 12px;
4073
4073
  color: var(--text-default);
4074
4074
  pointer-events: none;
4075
- z-index: 1000;
4075
+ z-index: var(--z-index-tooltip, 2100);
4076
4076
  display: none;
4077
4077
  }
4078
4078
 
package/dist/css/components.css CHANGED
@@ -1468,7 +1468,7 @@
1468
1468
  border: 1px solid var(--border-neutral-l2);
1469
1469
  border-radius: var(--radius-4);
1470
1470
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
1471
- z-index: 100;
1471
+ z-index: var(--z-index-dropdown, 2000);
1472
1472
  display: none;
1473
1473
  padding: var(--spacer-4);
1474
1474
  box-sizing: border-box;
package/dist/css/utilities.css CHANGED
@@ -326,4 +326,9 @@
326
326
  .ds-bg-base { background: var(--bg-base-secondary); }
327
327
 
328
328
  /* Z-index */
329
- .ds-z-modal { z-index: 1000; }
329
+ .ds-z-modal { z-index: var(--z-index-modal, 1000); }
330
+ .ds-z-dropdown { z-index: var(--z-index-dropdown, 2000); }
331
+ .ds-z-tooltip { z-index: var(--z-index-tooltip, 2100); }
332
+ .ds-z-message { z-index: var(--z-index-message, 3000); }
333
+ .ds-z-notification { z-index: var(--z-index-notification, 3100); }
334
+ .ds-z-loading { z-index: var(--z-index-loading, 5000); }