@bundle-stats/ui 4.21.2 → 4.21.3

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.
@@ -52,7 +52,7 @@
52
52
 
53
53
  .header {
54
54
  position: fixed;
55
- z-index: var(--layer-high);
55
+ z-index: calc(var(--layer-xhigh) + 2);
56
56
  left: 0;
57
57
  top: 0;
58
58
  right: 0;
@@ -62,6 +62,6 @@
62
62
  .tabsContainer {
63
63
  position: sticky;
64
64
  top: var(--header-height);
65
- z-index: calc(var(--layer-high) - 1);
65
+ z-index: calc(var(--layer-xhigh) + 1);
66
66
  }
67
67
  }
@@ -297,7 +297,7 @@
297
297
  }
298
298
 
299
299
  .tooltip {
300
- z-index: var(--layer-xxhigh);
300
+ z-index: var(--layer-high);
301
301
  padding: var(--space-xsmall) var(--space-small);
302
302
  border-radius: var(--radius-medium);
303
303
  width: calc(100vw - 2 * var(--space-small));
@@ -188,8 +188,10 @@
188
188
  --layer-xlow: 1;
189
189
  --layer-low: 10;
190
190
  --layer: 100;
191
+ /** for components with overlays (tooltips, hovercards) */
191
192
  --layer-high: 1000;
192
193
  --layer-xhigh: 10000;
194
+ /** for dialogs/modals */
193
195
  --layer-xxhigh: 100000;
194
196
 
195
197
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
@@ -2,7 +2,7 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
- z-index: 99999 !important;
5
+ z-index: var(--layer-xxhigh);
6
6
  }
7
7
 
8
8
  .backdrop::before {
@@ -13,7 +13,6 @@
13
13
  width: 100%;
14
14
  height: 100%;
15
15
  background: var(--color-backdrop);
16
- filter:
17
16
  }
18
17
 
19
18
  .dialog {
@@ -27,6 +26,7 @@
27
26
  padding: var(--dialog-padding);
28
27
  background: var(--color-background);
29
28
  box-shadow: 0 0 var(--space-medium) var(--color-shadow);
29
+ z-index: var(--layer-xxhigh);
30
30
  }
31
31
 
32
32
  .header {
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .hoverCard {
20
- z-index: var(--layer-xxhigh);
20
+ z-index: var(--layer-high);
21
21
  padding: var(--space-small);
22
22
  border-radius: var(--radius-medium);
23
23
  width: calc(100vw - 2 * var(--space-small));
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  .tooltip {
14
- z-index: var(--layer-xxhigh);
14
+ z-index: var(--layer-high);
15
15
  padding: var(--space-xxxsmall) var(--space-xxsmall);
16
16
  border-radius: var(--radius-small);
17
17
  background: var(--color-text);
@@ -52,7 +52,7 @@
52
52
 
53
53
  .header {
54
54
  position: fixed;
55
- z-index: var(--layer-high);
55
+ z-index: calc(var(--layer-xhigh) + 2);
56
56
  left: 0;
57
57
  top: 0;
58
58
  right: 0;
@@ -62,6 +62,6 @@
62
62
  .tabsContainer {
63
63
  position: sticky;
64
64
  top: var(--header-height);
65
- z-index: calc(var(--layer-high) - 1);
65
+ z-index: calc(var(--layer-xhigh) + 1);
66
66
  }
67
67
  }
@@ -297,7 +297,7 @@
297
297
  }
298
298
 
299
299
  .tooltip {
300
- z-index: var(--layer-xxhigh);
300
+ z-index: var(--layer-high);
301
301
  padding: var(--space-xsmall) var(--space-small);
302
302
  border-radius: var(--radius-medium);
303
303
  width: calc(100vw - 2 * var(--space-small));
@@ -188,8 +188,10 @@
188
188
  --layer-xlow: 1;
189
189
  --layer-low: 10;
190
190
  --layer: 100;
191
+ /** for components with overlays (tooltips, hovercards) */
191
192
  --layer-high: 1000;
192
193
  --layer-xhigh: 10000;
194
+ /** for dialogs/modals */
193
195
  --layer-xxhigh: 100000;
194
196
 
195
197
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
@@ -2,7 +2,7 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
- z-index: 99999 !important;
5
+ z-index: var(--layer-xxhigh);
6
6
  }
7
7
 
8
8
  .backdrop::before {
@@ -13,7 +13,6 @@
13
13
  width: 100%;
14
14
  height: 100%;
15
15
  background: var(--color-backdrop);
16
- filter:
17
16
  }
18
17
 
19
18
  .dialog {
@@ -27,6 +26,7 @@
27
26
  padding: var(--dialog-padding);
28
27
  background: var(--color-background);
29
28
  box-shadow: 0 0 var(--space-medium) var(--color-shadow);
29
+ z-index: var(--layer-xxhigh);
30
30
  }
31
31
 
32
32
  .header {
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .hoverCard {
20
- z-index: var(--layer-xxhigh);
20
+ z-index: var(--layer-high);
21
21
  padding: var(--space-small);
22
22
  border-radius: var(--radius-medium);
23
23
  width: calc(100vw - 2 * var(--space-small));
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  .tooltip {
14
- z-index: var(--layer-xxhigh);
14
+ z-index: var(--layer-high);
15
15
  padding: var(--space-xxxsmall) var(--space-xxsmall);
16
16
  border-radius: var(--radius-small);
17
17
  background: var(--color-text);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "4.21.2",
3
+ "version": "4.21.3",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -36,12 +36,12 @@
36
36
  },
37
37
  "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
38
38
  "devDependencies": {
39
- "@babel/preset-env": "7.28.0",
39
+ "@babel/preset-env": "7.28.3",
40
40
  "@babel/preset-react": "7.27.1",
41
41
  "@babel/preset-typescript": "7.27.1",
42
42
  "@storybook/addon-webpack5-compiler-babel": "3.0.6",
43
- "@storybook/react": "9.1.1",
44
- "@storybook/react-webpack5": "9.1.1",
43
+ "@storybook/react": "9.1.3",
44
+ "@storybook/react-webpack5": "9.1.3",
45
45
  "@types/d3": "7.4.3",
46
46
  "@types/react": "18.3.13",
47
47
  "@types/react-router-dom": "5.3.3",
@@ -60,7 +60,7 @@
60
60
  "react-dom": "18.3.1",
61
61
  "react-router-dom": "5.3.4",
62
62
  "rimraf": "6.0.1",
63
- "storybook": "9.1.1",
63
+ "storybook": "9.1.3",
64
64
  "typescript": "5.9.2",
65
65
  "typescript-plugin-css-modules": "5.2.0"
66
66
  },
@@ -73,7 +73,7 @@
73
73
  "react-router-dom": "^5.0.0"
74
74
  },
75
75
  "dependencies": {
76
- "@bundle-stats/utils": "^4.21.2",
76
+ "@bundle-stats/utils": "^4.21.3",
77
77
  "ariakit": "2.0.0-next.44",
78
78
  "d3": "7.9.0",
79
79
  "modern-css-reset": "1.4.0",
@@ -81,5 +81,5 @@
81
81
  "snarkdown": "2.0.0",
82
82
  "use-query-params": "2.2.1"
83
83
  },
84
- "gitHead": "19b2c706ca1180f9084a9e860009c6849aa85de9"
84
+ "gitHead": "6a7a0578fe14588dff60f54330c59fa10feaf835"
85
85
  }
@@ -52,7 +52,7 @@
52
52
 
53
53
  .header {
54
54
  position: fixed;
55
- z-index: var(--layer-high);
55
+ z-index: calc(var(--layer-xhigh) + 2);
56
56
  left: 0;
57
57
  top: 0;
58
58
  right: 0;
@@ -62,6 +62,6 @@
62
62
  .tabsContainer {
63
63
  position: sticky;
64
64
  top: var(--header-height);
65
- z-index: calc(var(--layer-high) - 1);
65
+ z-index: calc(var(--layer-xhigh) + 1);
66
66
  }
67
67
  }
@@ -297,7 +297,7 @@
297
297
  }
298
298
 
299
299
  .tooltip {
300
- z-index: var(--layer-xxhigh);
300
+ z-index: var(--layer-high);
301
301
  padding: var(--space-xsmall) var(--space-small);
302
302
  border-radius: var(--radius-medium);
303
303
  width: calc(100vw - 2 * var(--space-small));
@@ -188,8 +188,10 @@
188
188
  --layer-xlow: 1;
189
189
  --layer-low: 10;
190
190
  --layer: 100;
191
+ /** for components with overlays (tooltips, hovercards) */
191
192
  --layer-high: 1000;
192
193
  --layer-xhigh: 10000;
194
+ /** for dialogs/modals */
193
195
  --layer-xxhigh: 100000;
194
196
 
195
197
  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
@@ -2,7 +2,7 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
- z-index: 99999 !important;
5
+ z-index: var(--layer-xxhigh);
6
6
  }
7
7
 
8
8
  .backdrop::before {
@@ -13,7 +13,6 @@
13
13
  width: 100%;
14
14
  height: 100%;
15
15
  background: var(--color-backdrop);
16
- filter:
17
16
  }
18
17
 
19
18
  .dialog {
@@ -27,6 +26,7 @@
27
26
  padding: var(--dialog-padding);
28
27
  background: var(--color-background);
29
28
  box-shadow: 0 0 var(--space-medium) var(--color-shadow);
29
+ z-index: var(--layer-xxhigh);
30
30
  }
31
31
 
32
32
  .header {
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .hoverCard {
20
- z-index: var(--layer-xxhigh);
20
+ z-index: var(--layer-high);
21
21
  padding: var(--space-small);
22
22
  border-radius: var(--radius-medium);
23
23
  width: calc(100vw - 2 * var(--space-small));
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  .tooltip {
14
- z-index: var(--layer-xxhigh);
14
+ z-index: var(--layer-high);
15
15
  padding: var(--space-xxxsmall) var(--space-xxsmall);
16
16
  border-radius: var(--radius-small);
17
17
  background: var(--color-text);