@dialpad/dialtone 6.14.0 → 6.15.0-beta.4

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 +29 -0
  2. package/lib/build/less/components/popover.less +69 -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 +101 -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,32 @@
1
+ # [6.15.0-beta.4](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.3...v6.15.0-beta.4) (2022-02-15)
2
+
3
+
4
+ ### Features
5
+
6
+ * popover css and documentation ([#540](https://github.com/dialpad/dialtone/issues/540)) ([2c4dc58](https://github.com/dialpad/dialtone/commit/2c4dc58404944036693816c23b69b0453f38399f))
7
+
8
+ # [6.15.0-beta.3](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.2...v6.15.0-beta.3) (2022-02-01)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * make z-index work on all children ([7aa3fd1](https://github.com/dialpad/dialtone/commit/7aa3fd1a54c058a5db096d72f46869506e41779c))
14
+
15
+ # [6.15.0-beta.2](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.1...v6.15.0-beta.2) (2022-02-01)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * remove side padding from header footer ([e0abbcf](https://github.com/dialpad/dialtone/commit/e0abbcf74c9417e84b96d2541140254c59a10153))
21
+
22
+ # [6.15.0-beta.1](https://github.com/dialpad/dialtone/compare/v6.14.0...v6.15.0-beta.1) (2022-02-01)
23
+
24
+
25
+ ### Features
26
+
27
+ * add popover css and documentation ([df3d204](https://github.com/dialpad/dialtone/commit/df3d2049a8391918e72c912e79da00b00e00bb07))
28
+ * **device settings:** gear icon for device settings ([#539](https://github.com/dialpad/dialtone/issues/539)) ([805f17f](https://github.com/dialpad/dialtone/commit/805f17ff777419877cf36f49a24b75982bc1eac4))
29
+
1
30
  # [6.14.0](https://github.com/dialpad/dialtone/compare/v6.13.0...v6.14.0) (2022-01-28)
2
31
 
3
32
 
package/lib/build/less/components/popover.less ADDED
@@ -0,0 +1,69 @@
1
+ //
2
+ // DIALTONE
3
+ // COMPONENTS: POPOVER
4
+ //
5
+ // These are popover classes for Dialpad's design system Dialtone.
6
+ // For further documentation of these and other classes,
7
+ // visit https://dialpad.design/components/popover
8
+ //
9
+ // TABLE OF CONTENTS
10
+ // • POPOVER
11
+ // • POPOVER DIALOG
12
+ // - Base dialog style
13
+ // - Content
14
+ // - Header / Footer
15
+
16
+
17
+ // $ POPOVER
18
+ // ----------------------------------------------------------------------------
19
+
20
+ // $ POPOVER DIALOG
21
+ // ----------------------------------------------------------------------------
22
+ .d-popover__dialog {
23
+ &,
24
+ *,
25
+ *::before,
26
+ *::after {
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ display: grid;
31
+ grid-template-rows: auto 1fr;
32
+ overflow: auto;
33
+ background-color: var(--white);
34
+ border-color: var(--black-100);
35
+ border-radius: var(--su8);
36
+ box-shadow: var(--bs-card);
37
+ }
38
+
39
+ // $$ DIALOG CONTENT
40
+ // ----------------------------------------------------------------------------
41
+ .d-popover__content {
42
+ overflow: auto;
43
+ }
44
+
45
+ // $$ DIALOG HEADER / FOOTER
46
+ // ----------------------------------------------------------------------------
47
+ .d-popover__header-footer-base {
48
+ display: flex;
49
+ align-items: center;
50
+ width: 100%;
51
+ min-height: var(--size48);
52
+ padding-top: var(--su6);
53
+ padding-bottom: var(--su6);
54
+ overflow: auto;
55
+ font-weight: var(--fw-bold);
56
+ font-size: var(--fs16);
57
+ }
58
+
59
+ .d-popover__header {
60
+ .d-popover__header-footer-base();
61
+
62
+ border-bottom: var(--su1) solid var(--black-075);
63
+ }
64
+
65
+ .d-popover__footer {
66
+ .d-popover__header-footer-base();
67
+
68
+ border-top: var(--su1) solid var(--black-075);
69
+ }
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,59 @@ legend .d-label {
1938
1938
  --notice--bgc: var(--yellow-400);
1939
1939
  --notice--fc: var(--fc-dark);
1940
1940
  }
1941
+ .d-popover__dialog {
1942
+ display: grid;
1943
+ grid-template-rows: auto 1fr;
1944
+ overflow: auto;
1945
+ background-color: var(--white);
1946
+ border-color: var(--black-100);
1947
+ border-radius: var(--su8);
1948
+ box-shadow: var(--bs-card);
1949
+ }
1950
+ .d-popover__dialog,
1951
+ .d-popover__dialog *,
1952
+ .d-popover__dialog *::before,
1953
+ .d-popover__dialog *::after {
1954
+ box-sizing: border-box;
1955
+ }
1956
+ .d-popover__content {
1957
+ overflow: auto;
1958
+ }
1959
+ .d-popover__header-footer-base {
1960
+ display: flex;
1961
+ align-items: center;
1962
+ width: 100%;
1963
+ min-height: var(--size48);
1964
+ padding-top: var(--su6);
1965
+ padding-bottom: var(--su6);
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-top: var(--su6);
1976
+ padding-bottom: var(--su6);
1977
+ overflow: auto;
1978
+ font-weight: var(--fw-bold);
1979
+ font-size: var(--fs16);
1980
+ border-bottom: var(--su1) solid var(--black-075);
1981
+ }
1982
+ .d-popover__footer {
1983
+ display: flex;
1984
+ align-items: center;
1985
+ width: 100%;
1986
+ min-height: var(--size48);
1987
+ padding-top: var(--su6);
1988
+ padding-bottom: var(--su6);
1989
+ overflow: auto;
1990
+ font-weight: var(--fw-bold);
1991
+ font-size: var(--fs16);
1992
+ border-top: var(--su1) solid var(--black-075);
1993
+ }
1941
1994
  .d-checkbox,
1942
1995
  .d-radio {
1943
1996
  --check-radio--color: var(--primary-color);
@@ -2628,12 +2681,18 @@ legend .d-label {
2628
2681
  opacity: 1;
2629
2682
  transition: visibility 0s 0s, transform 200ms var(--ttf-in-out) 10ms, opacity 200ms var(--ttf-in-out) 10ms;
2630
2683
  }
2684
+ .d-tooltip__arrow-tippy--bottom-start,
2685
+ .d-tooltip__arrow-tippy--bottom,
2686
+ .d-tooltip__arrow-tippy--bottom-end,
2631
2687
  .d-tooltip__arrow--top-left,
2632
2688
  .d-tooltip__arrow--top-center,
2633
2689
  .d-tooltip__arrow--top-right {
2634
2690
  top: calc(100% + var(--su12));
2635
2691
  transform: translateY(var(--su16));
2636
2692
  }
2693
+ .d-tooltip__arrow-tippy--bottom-start::after,
2694
+ .d-tooltip__arrow-tippy--bottom::after,
2695
+ .d-tooltip__arrow-tippy--bottom-end::after,
2637
2696
  .d-tooltip__arrow--top-left::after,
2638
2697
  .d-tooltip__arrow--top-center::after,
2639
2698
  .d-tooltip__arrow--top-right::after {
@@ -2641,12 +2700,18 @@ legend .d-label {
2641
2700
  border-top-width: 0;
2642
2701
  border-bottom-color: var(--tooltip--bgc);
2643
2702
  }
2703
+ .d-tooltip__arrow-tippy--top-start,
2704
+ .d-tooltip__arrow-tippy--top,
2705
+ .d-tooltip__arrow-tippy--top-end,
2644
2706
  .d-tooltip__arrow--bottom-left,
2645
2707
  .d-tooltip__arrow--bottom-center,
2646
2708
  .d-tooltip__arrow--bottom-right {
2647
2709
  bottom: calc(100% + var(--su12));
2648
2710
  transform: translateY(var(--sun16));
2649
2711
  }
2712
+ .d-tooltip__arrow-tippy--top-start::after,
2713
+ .d-tooltip__arrow-tippy--top::after,
2714
+ .d-tooltip__arrow-tippy--top-end::after,
2650
2715
  .d-tooltip__arrow--bottom-left::after,
2651
2716
  .d-tooltip__arrow--bottom-center::after,
2652
2717
  .d-tooltip__arrow--bottom-right::after {
@@ -2654,33 +2719,49 @@ legend .d-label {
2654
2719
  border-top-color: var(--tooltip--bgc);
2655
2720
  border-bottom-width: 0;
2656
2721
  }
2722
+ .d-tooltip__arrow-tippy--bottom-start,
2723
+ .d-tooltip__arrow-tippy--top-start,
2657
2724
  .d-tooltip__arrow--top-left,
2658
2725
  .d-tooltip__arrow--bottom-left {
2659
2726
  left: var(--sun2);
2660
2727
  }
2728
+ .d-tooltip__arrow-tippy--bottom-start::after,
2729
+ .d-tooltip__arrow-tippy--top-start::after,
2661
2730
  .d-tooltip__arrow--top-left::after,
2662
2731
  .d-tooltip__arrow--bottom-left::after {
2663
2732
  left: var(--su16);
2664
2733
  }
2734
+ .d-tooltip__arrow-tippy--bottom::after,
2735
+ .d-tooltip__arrow-tippy--top::after,
2665
2736
  .d-tooltip__arrow--top-center::after,
2666
2737
  .d-tooltip__arrow--bottom-center::after {
2667
2738
  left: 50%;
2668
2739
  margin-left: var(--sun6);
2669
2740
  }
2741
+ .d-tooltip__arrow-tippy--bottom-end,
2742
+ .d-tooltip__arrow-tippy--top-end,
2670
2743
  .d-tooltip__arrow--top-right,
2671
2744
  .d-tooltip__arrow--bottom-right {
2672
2745
  right: var(--sun2);
2673
2746
  }
2747
+ .d-tooltip__arrow-tippy--bottom-end::after,
2748
+ .d-tooltip__arrow-tippy--top-end::after,
2674
2749
  .d-tooltip__arrow--top-right::after,
2675
2750
  .d-tooltip__arrow--bottom-right::after {
2676
2751
  right: var(--su16);
2677
2752
  }
2753
+ .d-tooltip__arrow-tippy--left-start,
2754
+ .d-tooltip__arrow-tippy--left,
2755
+ .d-tooltip__arrow-tippy--left-end,
2678
2756
  .d-tooltip__arrow--right-top,
2679
2757
  .d-tooltip__arrow--right-center,
2680
2758
  .d-tooltip__arrow--right-bottom {
2681
2759
  right: calc(100% + var(--su12));
2682
2760
  transform: translateX(var(--sun16));
2683
2761
  }
2762
+ .d-tooltip__arrow-tippy--left-start::after,
2763
+ .d-tooltip__arrow-tippy--left::after,
2764
+ .d-tooltip__arrow-tippy--left-end::after,
2684
2765
  .d-tooltip__arrow--right-top::after,
2685
2766
  .d-tooltip__arrow--right-center::after,
2686
2767
  .d-tooltip__arrow--right-bottom::after {
@@ -2688,12 +2769,18 @@ legend .d-label {
2688
2769
  border-right-width: 0;
2689
2770
  border-left-color: var(--tooltip--bgc);
2690
2771
  }
2772
+ .d-tooltip__arrow-tippy--right-start,
2773
+ .d-tooltip__arrow-tippy--right,
2774
+ .d-tooltip__arrow-tippy--right-end,
2691
2775
  .d-tooltip__arrow--left-top,
2692
2776
  .d-tooltip__arrow--left-center,
2693
2777
  .d-tooltip__arrow--left-bottom {
2694
2778
  left: calc(100% + var(--su12));
2695
2779
  transform: translateX(var(--su16));
2696
2780
  }
2781
+ .d-tooltip__arrow-tippy--right-start::after,
2782
+ .d-tooltip__arrow-tippy--right::after,
2783
+ .d-tooltip__arrow-tippy--right-end::after,
2697
2784
  .d-tooltip__arrow--left-top::after,
2698
2785
  .d-tooltip__arrow--left-center::after,
2699
2786
  .d-tooltip__arrow--left-bottom::after {
@@ -2701,23 +2788,33 @@ legend .d-label {
2701
2788
  border-right-color: var(--tooltip--bgc);
2702
2789
  border-left-width: 0;
2703
2790
  }
2791
+ .d-tooltip__arrow-tippy--right-start,
2792
+ .d-tooltip__arrow-tippy--left-start,
2704
2793
  .d-tooltip__arrow--right-top,
2705
2794
  .d-tooltip__arrow--left-top {
2706
2795
  top: var(--sun1);
2707
2796
  }
2797
+ .d-tooltip__arrow-tippy--right-start::after,
2798
+ .d-tooltip__arrow-tippy--left-start::after,
2708
2799
  .d-tooltip__arrow--right-top::after,
2709
2800
  .d-tooltip__arrow--left-top::after {
2710
2801
  top: var(--su8);
2711
2802
  }
2803
+ .d-tooltip__arrow-tippy--right::after,
2804
+ .d-tooltip__arrow-tippy--left::after,
2712
2805
  .d-tooltip__arrow--right-center::after,
2713
2806
  .d-tooltip__arrow--left-center::after {
2714
2807
  top: 50%;
2715
2808
  margin-top: var(--sun6);
2716
2809
  }
2810
+ .d-tooltip__arrow-tippy--right-end,
2811
+ .d-tooltip__arrow-tippy--left-end,
2717
2812
  .d-tooltip__arrow--right-bottom,
2718
2813
  .d-tooltip__arrow--left-bottom {
2719
2814
  bottom: var(--sun1);
2720
2815
  }
2816
+ .d-tooltip__arrow-tippy--right-end::after,
2817
+ .d-tooltip__arrow-tippy--left-end::after,
2721
2818
  .d-tooltip__arrow--right-bottom::after,
2722
2819
  .d-tooltip__arrow--left-bottom::after {
2723
2820
  bottom: var(--su8);
@@ -16430,6 +16527,9 @@ body.theme-dark .d\:d-bgg-to-0 {
16430
16527
  .d-zi-modal {
16431
16528
  z-index: var(--zi-modal) !important;
16432
16529
  }
16530
+ .d-zi-modal-element {
16531
+ z-index: var(--zi-modal-element) !important;
16532
+ }
16433
16533
  .d-zi-notification {
16434
16534
  z-index: var(--zi-notification) !important;
16435
16535
  }
@@ -19220,6 +19320,7 @@ body {
19220
19320
  --zi-tooltip: 400;
19221
19321
  --zi-drawer: 500;
19222
19322
  --zi-modal: 600;
19323
+ --zi-modal-element: 650;
19223
19324
  --zi-notification: 700;
19224
19325
  --focus-ring: hsla(var(--primary-color-hsl) / 75%);
19225
19326
  --focus-ring-success: hsla(var(--success-color-hsl) / 75%);