@dialpad/dialtone 6.14.0 → 6.15.0-beta.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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/build/less/components/popover.less +49 -0
  3. package/lib/build/less/components/tooltip.less +76 -56
  4. package/lib/build/less/dialtone.less +1 -0
  5. package/lib/build/less/utilities/layout.less +1 -0
  6. package/lib/build/less/variables/layout.less +2 -0
  7. package/lib/build/svg/system/device-settings.svg +3 -0
  8. package/lib/dist/css/dialtone.css +114 -0
  9. package/lib/dist/css/dialtone.min.css +1 -1
  10. package/lib/dist/svg/system/device-settings.svg +1 -0
  11. package/lib/dist/vue/icons/IconDeviceSettings.vue +3 -0
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ # [6.15.0-beta.1](https://github.com/dialpad/dialtone/compare/v6.14.0...v6.15.0-beta.1) (2022-02-01)
2
+
3
+
4
+ ### Features
5
+
6
+ * add popover css and documentation ([df3d204](https://github.com/dialpad/dialtone/commit/df3d2049a8391918e72c912e79da00b00e00bb07))
7
+ * **device settings:** gear icon for device settings ([#539](https://github.com/dialpad/dialtone/issues/539)) ([805f17f](https://github.com/dialpad/dialtone/commit/805f17ff777419877cf36f49a24b75982bc1eac4))
8
+
1
9
  # [6.14.0](https://github.com/dialpad/dialtone/compare/v6.13.0...v6.14.0) (2022-01-28)
2
10
 
3
11
 
package/lib/build/less/components/popover.less ADDED
@@ -0,0 +1,49 @@
1
+ .d-popover__dialog {
2
+ &,
3
+ *,
4
+ *::before,
5
+ *::after {
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ z-index: var(--zi-popover);
10
+ display: grid;
11
+ grid-template-rows: auto 1fr;
12
+ overflow: auto;
13
+ background-color: var(--white);
14
+ border-color: var(--black-100);
15
+ border-radius: var(--su8);
16
+ box-shadow: var(--bs-card);
17
+ }
18
+
19
+ .d-popover__content {
20
+ overflow: auto;
21
+ }
22
+
23
+ .d-popover__header-footer-base {
24
+ display: flex;
25
+ align-items: center;
26
+ width: 100%;
27
+ min-height: var(--size48);
28
+ padding: var(--su6) var(--su8) var(--su6) var(--su12);
29
+ overflow: auto;
30
+ font-weight: var(--fw-bold);
31
+ font-size: var(--fs16);
32
+ }
33
+
34
+ .d-popover__header {
35
+ .d-popover__header-footer-base();
36
+
37
+ border-bottom: var(--su1) solid var(--black-075);
38
+ }
39
+
40
+ .d-popover__footer {
41
+ .d-popover__header-footer-base();
42
+
43
+ border-top: var(--su1) solid var(--black-075);
44
+ }
45
+
46
+ //When modal overlay is displayed, put the popover anchor on top of it.
47
+ .d-modal[aria-hidden='false'] + .d-popover > * {
48
+ z-index: var(--zi-modal-element);
49
+ }
package/lib/build/less/components/tooltip.less CHANGED
@@ -113,128 +113,148 @@
113
113
  // ============================================================================
114
114
  // $$ TOP
115
115
  // ----------------------------------------------------------------------------
116
+ .d-tooltip__arrow-tippy--bottom-start,
117
+ .d-tooltip__arrow-tippy--bottom,
118
+ .d-tooltip__arrow-tippy--bottom-end,
116
119
  .d-tooltip__arrow--top-left,
117
120
  .d-tooltip__arrow--top-center,
118
121
  .d-tooltip__arrow--top-right {
119
- top: calc(100% + var(--su12));
120
- transform: translateY(var(--su16));
122
+ top: calc(100% + var(--su12));
123
+ transform: translateY(var(--su16));
121
124
 
122
- &::after {
123
- top: var(--sun6);
124
- border-top-width: 0;
125
- border-bottom-color: var(--tooltip--bgc);
126
- }
125
+ &::after {
126
+ top: var(--sun6);
127
+ border-top-width: 0;
128
+ border-bottom-color: var(--tooltip--bgc);
129
+ }
127
130
  }
128
131
 
129
-
130
132
  // $$ BOTTOM
131
133
  // ----------------------------------------------------------------------------
134
+ .d-tooltip__arrow-tippy--top-start,
135
+ .d-tooltip__arrow-tippy--top,
136
+ .d-tooltip__arrow-tippy--top-end,
132
137
  .d-tooltip__arrow--bottom-left,
133
138
  .d-tooltip__arrow--bottom-center,
134
139
  .d-tooltip__arrow--bottom-right {
135
- bottom: calc(100% + var(--su12));
136
- transform: translateY(var(--sun16));
140
+ bottom: calc(100% + var(--su12));
141
+ transform: translateY(var(--sun16));
137
142
 
138
- &::after {
139
- bottom: var(--sun6);
140
- border-top-color: var(--tooltip--bgc);
141
- border-bottom-width: 0;
142
- }
143
+ &::after {
144
+ bottom: var(--sun6);
145
+ border-top-color: var(--tooltip--bgc);
146
+ border-bottom-width: 0;
147
+ }
143
148
  }
144
149
 
145
-
146
150
  // $$ TOP / BOTTOM LEFT
147
151
  // ----------------------------------------------------------------------------
152
+ .d-tooltip__arrow-tippy--bottom-start,
153
+ .d-tooltip__arrow-tippy--top-start,
148
154
  .d-tooltip__arrow--top-left,
149
155
  .d-tooltip__arrow--bottom-left {
150
- left: var(--sun2);
156
+ left: var(--sun2);
151
157
 
152
- &::after {
153
- left: var(--su16);
154
- }
158
+ &::after {
159
+ left: var(--su16);
160
+ }
155
161
  }
156
162
 
157
163
  // $$ TOP / BOTTOM CENTER
158
164
  // ----------------------------------------------------------------------------
165
+ .d-tooltip__arrow-tippy--bottom,
166
+ .d-tooltip__arrow-tippy--top,
159
167
  .d-tooltip__arrow--top-center,
160
168
  .d-tooltip__arrow--bottom-center {
161
- &::after {
162
- left: 50%;
163
- margin-left: var(--sun6);
164
- }
169
+ &::after {
170
+ left: 50%;
171
+ margin-left: var(--sun6);
172
+ }
165
173
  }
166
174
 
167
175
  // $$ TOP / BOTTOM RIGHT
168
176
  // ----------------------------------------------------------------------------
177
+ .d-tooltip__arrow-tippy--bottom-end,
178
+ .d-tooltip__arrow-tippy--top-end,
169
179
  .d-tooltip__arrow--top-right,
170
180
  .d-tooltip__arrow--bottom-right {
171
- right: var(--sun2);
181
+ right: var(--sun2);
172
182
 
173
- &::after {
174
- right: var(--su16);
175
- }
183
+ &::after {
184
+ right: var(--su16);
185
+ }
176
186
  }
177
187
 
178
188
  // $$ RIGHT
179
189
  // ----------------------------------------------------------------------------
190
+ .d-tooltip__arrow-tippy--left-start,
191
+ .d-tooltip__arrow-tippy--left,
192
+ .d-tooltip__arrow-tippy--left-end,
180
193
  .d-tooltip__arrow--right-top,
181
194
  .d-tooltip__arrow--right-center,
182
195
  .d-tooltip__arrow--right-bottom {
183
- right: calc(100% + var(--su12));
184
- transform: translateX(var(--sun16));
196
+ right: calc(100% + var(--su12));
197
+ transform: translateX(var(--sun16));
185
198
 
186
- &::after {
187
- right: var(--sun6);
188
- border-right-width: 0;
189
- border-left-color: var(--tooltip--bgc);
190
- }
199
+ &::after {
200
+ right: var(--sun6);
201
+ border-right-width: 0;
202
+ border-left-color: var(--tooltip--bgc);
203
+ }
191
204
  }
192
205
 
193
-
194
206
  // $$ LEFT
195
207
  // ----------------------------------------------------------------------------
208
+ .d-tooltip__arrow-tippy--right-start,
209
+ .d-tooltip__arrow-tippy--right,
210
+ .d-tooltip__arrow-tippy--right-end,
196
211
  .d-tooltip__arrow--left-top,
197
212
  .d-tooltip__arrow--left-center,
198
213
  .d-tooltip__arrow--left-bottom {
199
- left: calc(100% + var(--su12));
200
- transform: translateX(var(--su16));
214
+ left: calc(100% + var(--su12));
215
+ transform: translateX(var(--su16));
201
216
 
202
- &::after {
203
- left: var(--sun6);
204
- border-right-color: var(--tooltip--bgc);
205
- border-left-width: 0;
206
- }
217
+ &::after {
218
+ left: var(--sun6);
219
+ border-right-color: var(--tooltip--bgc);
220
+ border-left-width: 0;
221
+ }
207
222
  }
208
223
 
209
-
210
224
  // $$ RIGHT / LEFT TOP
211
225
  // ----------------------------------------------------------------------------
226
+ .d-tooltip__arrow-tippy--right-start,
227
+ .d-tooltip__arrow-tippy--left-start,
212
228
  .d-tooltip__arrow--right-top,
213
229
  .d-tooltip__arrow--left-top {
214
- top: var(--sun1);
230
+ top: var(--sun1);
215
231
 
216
- &::after {
217
- top: var(--su8);
218
- }
232
+ &::after {
233
+ top: var(--su8);
234
+ }
219
235
  }
220
236
 
221
237
  // $$ RIGHT / LEFT CENTER
222
238
  // ----------------------------------------------------------------------------
239
+ .d-tooltip__arrow-tippy--right,
240
+ .d-tooltip__arrow-tippy--left,
223
241
  .d-tooltip__arrow--right-center,
224
242
  .d-tooltip__arrow--left-center {
225
- &::after {
226
- top: 50%;
227
- margin-top: var(--sun6);
228
- }
243
+ &::after {
244
+ top: 50%;
245
+ margin-top: var(--sun6);
246
+ }
229
247
  }
230
248
 
231
249
  // $$ RIGHT / LEFT BOTTOM
232
250
  // ----------------------------------------------------------------------------
251
+ .d-tooltip__arrow-tippy--right-end,
252
+ .d-tooltip__arrow-tippy--left-end,
233
253
  .d-tooltip__arrow--right-bottom,
234
254
  .d-tooltip__arrow--left-bottom {
235
- bottom: var(--sun1);
255
+ bottom: var(--sun1);
236
256
 
237
- &::after {
238
- bottom: var(--su8);
239
- }
257
+ &::after {
258
+ bottom: var(--su8);
259
+ }
240
260
  }
package/lib/build/less/dialtone.less CHANGED
@@ -23,6 +23,7 @@
23
23
  @import 'components/modal';
24
24
  @import 'components/toast'; // Needs to come before Notice styles
25
25
  @import 'components/notice';
26
+ @import 'components/popover';
26
27
  @import 'components/radio-checkbox';
27
28
  @import 'components/selects';
28
29
  @import 'components/skeleton';
package/lib/build/less/utilities/layout.less CHANGED
@@ -196,5 +196,6 @@
196
196
  .d-zi-tooltip { z-index: var(--zi-tooltip) !important; }
197
197
  .d-zi-drawer { z-index: var(--zi-drawer) !important; }
198
198
  .d-zi-modal { z-index: var(--zi-modal) !important; }
199
+ .d-zi-modal-element { z-index: var(--zi-modal-element) !important; }
199
200
  .d-zi-notification { z-index: var(--zi-notification) !important; }
200
201
  .d-zi-unset { z-index: unset !important; }
package/lib/build/less/variables/layout.less CHANGED
@@ -113,6 +113,7 @@
113
113
  @zi-tooltip: 400;
114
114
  @zi-drawer: 500;
115
115
  @zi-modal: 600;
116
+ @zi-modal-element: 650;
116
117
  @zi-notification: 700;
117
118
 
118
119
  @zi-vars: {
@@ -128,6 +129,7 @@
128
129
  zi-tooltip: @zi-tooltip;
129
130
  zi-drawer: @zi-drawer;
130
131
  zi-modal: @zi-modal;
132
+ zi-modal-element: @zi-modal-element;
131
133
  zi-notification: @zi-notification;
132
134
  }
133
135
 
package/lib/build/svg/system/device-settings.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M19.6462 12.9792C19.689 12.6667 19.7104 12.3437 19.7104 12C19.7104 11.6667 19.689 11.3333 19.6355 11.0208L21.8094 9.375C22.0021 9.22917 22.0557 8.94792 21.9379 8.73958L19.8818 5.28125C19.7533 5.05208 19.4855 4.97917 19.2499 5.05208L16.6905 6.05208C16.1551 5.65625 15.5875 5.32292 14.9557 5.07292L14.5701 2.42708C14.5273 2.17708 14.3131 2 14.0561 2H9.94388C9.68687 2 9.4834 2.17708 9.44056 2.42708L9.05504 5.07292C8.42322 5.32292 7.84493 5.66667 7.3202 6.05208L4.76076 5.05208C4.52517 4.96875 4.25744 5.05208 4.12894 5.28125L2.08353 8.73958C1.95502 8.95833 1.99786 9.22917 2.21204 9.375L4.38595 11.0208C4.33241 11.3333 4.28957 11.6771 4.28957 12C4.28957 12.3229 4.31099 12.6667 4.36453 12.9792L2.19062 14.625C1.99786 14.7708 1.94431 15.0521 2.06211 15.2604L4.11823 18.7187C4.24673 18.9479 4.51446 19.0208 4.75005 18.9479L7.30949 17.9479C7.84493 18.3437 8.41251 18.6771 9.04433 18.9271L9.42986 21.5729C9.4834 21.8229 9.68687 22 9.94388 22H14.0561C14.3131 22 14.5273 21.8229 14.5594 21.5729L14.945 18.9271C15.5768 18.6771 16.1551 18.3437 16.6798 17.9479L19.2392 18.9479C19.4748 19.0312 19.7426 18.9479 19.8711 18.7187L21.9272 15.2604C22.0557 15.0312 22.0021 14.7708 21.7987 14.625L19.6462 12.9792ZM12 15.75C9.87963 15.75 8.14478 14.0625 8.14478 12C8.14478 9.9375 9.87963 8.25 12 8.25C14.1204 8.25 15.8552 9.9375 15.8552 12C15.8552 14.0625 14.1204 15.75 12 15.75Z" fill="#000000"/>
3
+ </svg>
package/lib/dist/css/dialtone.css CHANGED
@@ -1938,6 +1938,60 @@ legend .d-label {
1938
1938
  --notice--bgc: var(--yellow-400);
1939
1939
  --notice--fc: var(--fc-dark);
1940
1940
  }
1941
+ .d-popover__dialog {
1942
+ z-index: var(--zi-popover);
1943
+ display: grid;
1944
+ grid-template-rows: auto 1fr;
1945
+ overflow: auto;
1946
+ background-color: var(--white);
1947
+ border-color: var(--black-100);
1948
+ border-radius: var(--su8);
1949
+ box-shadow: var(--bs-card);
1950
+ }
1951
+ .d-popover__dialog,
1952
+ .d-popover__dialog *,
1953
+ .d-popover__dialog *::before,
1954
+ .d-popover__dialog *::after {
1955
+ box-sizing: border-box;
1956
+ }
1957
+ .d-popover__content {
1958
+ overflow: auto;
1959
+ }
1960
+ .d-popover__header-footer-base {
1961
+ display: flex;
1962
+ align-items: center;
1963
+ width: 100%;
1964
+ min-height: var(--size48);
1965
+ padding: var(--su6) var(--su8) var(--su6) var(--su12);
1966
+ overflow: auto;
1967
+ font-weight: var(--fw-bold);
1968
+ font-size: var(--fs16);
1969
+ }
1970
+ .d-popover__header {
1971
+ display: flex;
1972
+ align-items: center;
1973
+ width: 100%;
1974
+ min-height: var(--size48);
1975
+ padding: var(--su6) var(--su8) var(--su6) var(--su12);
1976
+ overflow: auto;
1977
+ font-weight: var(--fw-bold);
1978
+ font-size: var(--fs16);
1979
+ border-bottom: var(--su1) solid var(--black-075);
1980
+ }
1981
+ .d-popover__footer {
1982
+ display: flex;
1983
+ align-items: center;
1984
+ width: 100%;
1985
+ min-height: var(--size48);
1986
+ padding: var(--su6) var(--su8) var(--su6) var(--su12);
1987
+ overflow: auto;
1988
+ font-weight: var(--fw-bold);
1989
+ font-size: var(--fs16);
1990
+ border-top: var(--su1) solid var(--black-075);
1991
+ }
1992
+ .d-modal[aria-hidden='false'] + .d-popover > * {
1993
+ z-index: var(--zi-modal-element);
1994
+ }
1941
1995
  .d-checkbox,
1942
1996
  .d-radio {
1943
1997
  --check-radio--color: var(--primary-color);
@@ -2628,12 +2682,18 @@ legend .d-label {
2628
2682
  opacity: 1;
2629
2683
  transition: visibility 0s 0s, transform 200ms var(--ttf-in-out) 10ms, opacity 200ms var(--ttf-in-out) 10ms;
2630
2684
  }
2685
+ .d-tooltip__arrow-tippy--bottom-start,
2686
+ .d-tooltip__arrow-tippy--bottom,
2687
+ .d-tooltip__arrow-tippy--bottom-end,
2631
2688
  .d-tooltip__arrow--top-left,
2632
2689
  .d-tooltip__arrow--top-center,
2633
2690
  .d-tooltip__arrow--top-right {
2634
2691
  top: calc(100% + var(--su12));
2635
2692
  transform: translateY(var(--su16));
2636
2693
  }
2694
+ .d-tooltip__arrow-tippy--bottom-start::after,
2695
+ .d-tooltip__arrow-tippy--bottom::after,
2696
+ .d-tooltip__arrow-tippy--bottom-end::after,
2637
2697
  .d-tooltip__arrow--top-left::after,
2638
2698
  .d-tooltip__arrow--top-center::after,
2639
2699
  .d-tooltip__arrow--top-right::after {
@@ -2641,12 +2701,18 @@ legend .d-label {
2641
2701
  border-top-width: 0;
2642
2702
  border-bottom-color: var(--tooltip--bgc);
2643
2703
  }
2704
+ .d-tooltip__arrow-tippy--top-start,
2705
+ .d-tooltip__arrow-tippy--top,
2706
+ .d-tooltip__arrow-tippy--top-end,
2644
2707
  .d-tooltip__arrow--bottom-left,
2645
2708
  .d-tooltip__arrow--bottom-center,
2646
2709
  .d-tooltip__arrow--bottom-right {
2647
2710
  bottom: calc(100% + var(--su12));
2648
2711
  transform: translateY(var(--sun16));
2649
2712
  }
2713
+ .d-tooltip__arrow-tippy--top-start::after,
2714
+ .d-tooltip__arrow-tippy--top::after,
2715
+ .d-tooltip__arrow-tippy--top-end::after,
2650
2716
  .d-tooltip__arrow--bottom-left::after,
2651
2717
  .d-tooltip__arrow--bottom-center::after,
2652
2718
  .d-tooltip__arrow--bottom-right::after {
@@ -2654,33 +2720,49 @@ legend .d-label {
2654
2720
  border-top-color: var(--tooltip--bgc);
2655
2721
  border-bottom-width: 0;
2656
2722
  }
2723
+ .d-tooltip__arrow-tippy--bottom-start,
2724
+ .d-tooltip__arrow-tippy--top-start,
2657
2725
  .d-tooltip__arrow--top-left,
2658
2726
  .d-tooltip__arrow--bottom-left {
2659
2727
  left: var(--sun2);
2660
2728
  }
2729
+ .d-tooltip__arrow-tippy--bottom-start::after,
2730
+ .d-tooltip__arrow-tippy--top-start::after,
2661
2731
  .d-tooltip__arrow--top-left::after,
2662
2732
  .d-tooltip__arrow--bottom-left::after {
2663
2733
  left: var(--su16);
2664
2734
  }
2735
+ .d-tooltip__arrow-tippy--bottom::after,
2736
+ .d-tooltip__arrow-tippy--top::after,
2665
2737
  .d-tooltip__arrow--top-center::after,
2666
2738
  .d-tooltip__arrow--bottom-center::after {
2667
2739
  left: 50%;
2668
2740
  margin-left: var(--sun6);
2669
2741
  }
2742
+ .d-tooltip__arrow-tippy--bottom-end,
2743
+ .d-tooltip__arrow-tippy--top-end,
2670
2744
  .d-tooltip__arrow--top-right,
2671
2745
  .d-tooltip__arrow--bottom-right {
2672
2746
  right: var(--sun2);
2673
2747
  }
2748
+ .d-tooltip__arrow-tippy--bottom-end::after,
2749
+ .d-tooltip__arrow-tippy--top-end::after,
2674
2750
  .d-tooltip__arrow--top-right::after,
2675
2751
  .d-tooltip__arrow--bottom-right::after {
2676
2752
  right: var(--su16);
2677
2753
  }
2754
+ .d-tooltip__arrow-tippy--left-start,
2755
+ .d-tooltip__arrow-tippy--left,
2756
+ .d-tooltip__arrow-tippy--left-end,
2678
2757
  .d-tooltip__arrow--right-top,
2679
2758
  .d-tooltip__arrow--right-center,
2680
2759
  .d-tooltip__arrow--right-bottom {
2681
2760
  right: calc(100% + var(--su12));
2682
2761
  transform: translateX(var(--sun16));
2683
2762
  }
2763
+ .d-tooltip__arrow-tippy--left-start::after,
2764
+ .d-tooltip__arrow-tippy--left::after,
2765
+ .d-tooltip__arrow-tippy--left-end::after,
2684
2766
  .d-tooltip__arrow--right-top::after,
2685
2767
  .d-tooltip__arrow--right-center::after,
2686
2768
  .d-tooltip__arrow--right-bottom::after {
@@ -2688,12 +2770,18 @@ legend .d-label {
2688
2770
  border-right-width: 0;
2689
2771
  border-left-color: var(--tooltip--bgc);
2690
2772
  }
2773
+ .d-tooltip__arrow-tippy--right-start,
2774
+ .d-tooltip__arrow-tippy--right,
2775
+ .d-tooltip__arrow-tippy--right-end,
2691
2776
  .d-tooltip__arrow--left-top,
2692
2777
  .d-tooltip__arrow--left-center,
2693
2778
  .d-tooltip__arrow--left-bottom {
2694
2779
  left: calc(100% + var(--su12));
2695
2780
  transform: translateX(var(--su16));
2696
2781
  }
2782
+ .d-tooltip__arrow-tippy--right-start::after,
2783
+ .d-tooltip__arrow-tippy--right::after,
2784
+ .d-tooltip__arrow-tippy--right-end::after,
2697
2785
  .d-tooltip__arrow--left-top::after,
2698
2786
  .d-tooltip__arrow--left-center::after,
2699
2787
  .d-tooltip__arrow--left-bottom::after {
@@ -2701,23 +2789,33 @@ legend .d-label {
2701
2789
  border-right-color: var(--tooltip--bgc);
2702
2790
  border-left-width: 0;
2703
2791
  }
2792
+ .d-tooltip__arrow-tippy--right-start,
2793
+ .d-tooltip__arrow-tippy--left-start,
2704
2794
  .d-tooltip__arrow--right-top,
2705
2795
  .d-tooltip__arrow--left-top {
2706
2796
  top: var(--sun1);
2707
2797
  }
2798
+ .d-tooltip__arrow-tippy--right-start::after,
2799
+ .d-tooltip__arrow-tippy--left-start::after,
2708
2800
  .d-tooltip__arrow--right-top::after,
2709
2801
  .d-tooltip__arrow--left-top::after {
2710
2802
  top: var(--su8);
2711
2803
  }
2804
+ .d-tooltip__arrow-tippy--right::after,
2805
+ .d-tooltip__arrow-tippy--left::after,
2712
2806
  .d-tooltip__arrow--right-center::after,
2713
2807
  .d-tooltip__arrow--left-center::after {
2714
2808
  top: 50%;
2715
2809
  margin-top: var(--sun6);
2716
2810
  }
2811
+ .d-tooltip__arrow-tippy--right-end,
2812
+ .d-tooltip__arrow-tippy--left-end,
2717
2813
  .d-tooltip__arrow--right-bottom,
2718
2814
  .d-tooltip__arrow--left-bottom {
2719
2815
  bottom: var(--sun1);
2720
2816
  }
2817
+ .d-tooltip__arrow-tippy--right-end::after,
2818
+ .d-tooltip__arrow-tippy--left-end::after,
2721
2819
  .d-tooltip__arrow--right-bottom::after,
2722
2820
  .d-tooltip__arrow--left-bottom::after {
2723
2821
  bottom: var(--su8);
@@ -16430,6 +16528,9 @@ body.theme-dark .d\:d-bgg-to-0 {
16430
16528
  .d-zi-modal {
16431
16529
  z-index: var(--zi-modal) !important;
16432
16530
  }
16531
+ .d-zi-modal-element {
16532
+ z-index: var(--zi-modal-element) !important;
16533
+ }
16433
16534
  .d-zi-notification {
16434
16535
  z-index: var(--zi-notification) !important;
16435
16536
  }
@@ -19220,6 +19321,7 @@ body {
19220
19321
  --zi-tooltip: 400;
19221
19322
  --zi-drawer: 500;
19222
19323
  --zi-modal: 600;
19324
+ --zi-modal-element: 650;
19223
19325
  --zi-notification: 700;
19224
19326
  --focus-ring: hsla(var(--primary-color-hsl) / 75%);
19225
19327
  --focus-ring-success: hsla(var(--success-color-hsl) / 75%);
@@ -20025,6 +20127,9 @@ body.theme-dark {
20025
20127
  .sm\:d-modal__dialog--animate-out {
20026
20128
  transition: none !important;
20027
20129
  }
20130
+ .sm\:d-modal[aria-hidden='false'] + .d-popover > * {
20131
+ z-index: var(--zi-modal-element);
20132
+ }
20028
20133
  .sm\:d-m0 {
20029
20134
  margin: 0 !important;
20030
20135
  }
@@ -21137,6 +21242,9 @@ body.theme-dark {
21137
21242
  .md\:d-modal__dialog--animate-out {
21138
21243
  transition: none !important;
21139
21244
  }
21245
+ .md\:d-modal[aria-hidden='false'] + .d-popover > * {
21246
+ z-index: var(--zi-modal-element);
21247
+ }
21140
21248
  .md\:d-m0 {
21141
21249
  margin: 0 !important;
21142
21250
  }
@@ -22249,6 +22357,9 @@ body.theme-dark {
22249
22357
  .lg\:d-modal__dialog--animate-out {
22250
22358
  transition: none !important;
22251
22359
  }
22360
+ .lg\:d-modal[aria-hidden='false'] + .d-popover > * {
22361
+ z-index: var(--zi-modal-element);
22362
+ }
22252
22363
  .lg\:d-m0 {
22253
22364
  margin: 0 !important;
22254
22365
  }
@@ -23361,6 +23472,9 @@ body.theme-dark {
23361
23472
  .xl\:d-modal__dialog--animate-out {
23362
23473
  transition: none !important;
23363
23474
  }
23475
+ .xl\:d-modal[aria-hidden='false'] + .d-popover > * {
23476
+ z-index: var(--zi-modal-element);
23477
+ }
23364
23478
  .xl\:d-m0 {
23365
23479
  margin: 0 !important;
23366
23480
  }