@db-ux/core-components 2.1.2 → 2.2.0

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/build/components/custom-select/custom-select.css +9 -34
  2. package/build/components/custom-select/custom-select.scss +0 -48
  3. package/build/components/input/input.css +9 -0
  4. package/build/components/navigation/navigation.css +0 -7
  5. package/build/components/navigation/navigation.scss +0 -10
  6. package/build/components/popover/popover.css +79 -82
  7. package/build/components/popover/popover.scss +0 -1
  8. package/build/components/select/select.css +9 -0
  9. package/build/components/tab-list/tab-list.css +6 -0
  10. package/build/components/textarea/textarea.css +22 -4
  11. package/build/components/textarea/textarea.scss +16 -9
  12. package/build/components/tooltip/tooltip.css +87 -89
  13. package/build/components/tooltip/tooltip.scss +13 -13
  14. package/build/styles/absolute.css +5 -5
  15. package/build/styles/index.css +5 -5
  16. package/build/styles/internal/_form-components.scss +11 -0
  17. package/build/styles/internal/_popover-component.scss +69 -106
  18. package/build/styles/internal/_scrollbar.scss +9 -0
  19. package/build/styles/relative.css +5 -5
  20. package/build/styles/rollup.css +5 -5
  21. package/build/styles/webpack.css +5 -5
  22. package/package.json +3 -3
package/build/components/tooltip/tooltip.css CHANGED
@@ -203,15 +203,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
203
203
  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
204
204
  }
205
205
 
206
- .db-tooltip:not([data-placement]), [data-placement=bottom].db-tooltip:not([data-outside-vy]), [data-placement=top].db-tooltip:not([data-outside-vy]), .db-tooltip:is([data-outside-vy=bottom], [data-outside-vy=top]):not([data-outside-vx],
207
- [data-placement$=end],
208
- [data-placement$=start]) {
206
+ .db-tooltip:not([data-placement], [data-corrected-placement]), [data-placement=bottom].db-tooltip:not([data-corrected-placement]), [data-placement=top].db-tooltip:not([data-corrected-placement]), [data-corrected-placement=bottom].db-tooltip, [data-corrected-placement=top].db-tooltip {
209
207
  --db-popover-center-x: -50%;
210
208
  inset-inline-start: 50%;
211
209
  }
212
- [data-placement=left].db-tooltip:not([data-outside-vx]), [data-placement=right].db-tooltip:not([data-outside-vx]), [data-outside-vx=left].db-tooltip:not([data-placement$=end],
213
- [data-placement$=start]), [data-outside-vx=right].db-tooltip:not([data-placement$=end],
214
- [data-placement$=start]) {
210
+ [data-corrected-placement=left].db-tooltip, [data-corrected-placement=right].db-tooltip, [data-placement=left].db-tooltip:not([data-corrected-placement]), [data-placement=right].db-tooltip:not([data-corrected-placement]) {
215
211
  --db-popover-center-y: -50%;
216
212
  inset-block-start: 50%;
217
213
  }
@@ -223,135 +219,135 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
223
219
  content: "";
224
220
  position: absolute;
225
221
  }
226
- [data-gap=true].db-tooltip {
227
- --db-popover-gap: 1;
228
- --db-popover-distance: var(--db-spacing-fixed-md);
229
- }
230
- .db-tooltip:is(.db-tooltip) {
231
- --db-popover-distance: var(--db-spacing-fixed-sm);
232
- }
233
- [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-placement$=end], [data-placement^=top].db-tooltip:not([data-outside-vy])[data-placement$=end], [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-placement$=end], [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-placement$=end] {
234
- inset-inline-end: 0;
235
- }
236
- [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-placement$=start], [data-placement^=top].db-tooltip:not([data-outside-vy])[data-placement$=start], [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-placement$=start], [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-placement$=start] {
237
- inset-inline-start: 0;
238
- }
239
- [data-placement^=left].db-tooltip:not([data-outside-vx])[data-placement$=end], [data-placement^=right].db-tooltip:not([data-outside-vx])[data-placement$=end], [data-outside-vx=left][data-placement$=end].db-tooltip, [data-outside-vx=right][data-placement$=end].db-tooltip {
240
- inset-block-end: 0;
241
- }
242
- [data-placement^=left].db-tooltip:not([data-outside-vx])[data-placement$=start], [data-placement^=right].db-tooltip:not([data-outside-vx])[data-placement$=start], [data-outside-vx=left][data-placement$=start].db-tooltip, [data-outside-vx=right][data-placement$=start].db-tooltip {
243
- inset-block-start: 0;
244
- }
245
- .db-tooltip:not([data-placement], [data-outside-vy]), [data-placement^=bottom].db-tooltip:not([data-outside-vy]), [data-outside-vy=top].db-tooltip:not([data-outside-vx]) {
246
- inset-block-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
247
- }
248
- .db-tooltip:not([data-placement], [data-outside-vy])::before, [data-placement^=bottom].db-tooltip:not([data-outside-vy])::before, [data-outside-vy=top].db-tooltip:not([data-outside-vx])::before {
249
- inset-inline-start: 0;
250
- inline-size: 100%;
222
+ .db-tooltip:not([data-placement], [data-corrected-placement])::before, [data-placement^=bottom].db-tooltip:not([data-corrected-placement])::before, [data-corrected-placement^=bottom].db-tooltip::before {
223
+ inset-block-end: 100%;
224
+ inset-inline: 0;
251
225
  block-size: var(--db-popover-distance);
252
- inset-block-start: calc(-1 * var(--db-popover-distance));
253
- }
254
- [data-placement^=top].db-tooltip:not([data-outside-vy]), [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]) {
255
- inset-block-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
256
226
  }
257
- [data-placement^=top].db-tooltip:not([data-outside-vy])::before, [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])::before {
258
- inset-inline-end: 0;
259
- inline-size: 100%;
227
+ [data-placement^=top].db-tooltip:not([data-corrected-placement])::before, [data-corrected-placement^=top].db-tooltip::before {
228
+ inset-block-start: 100%;
229
+ inset-inline: 0;
260
230
  block-size: var(--db-popover-distance);
261
- inset-block-end: calc(-1 * var(--db-popover-distance));
262
231
  }
263
- [data-placement^=left].db-tooltip:not([data-outside-vx]), [data-outside-vx=right].db-tooltip {
264
- inset-inline-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
232
+ [data-placement^=right].db-tooltip:not([data-corrected-placement])::before, [data-corrected-placement^=right].db-tooltip::before {
233
+ inset-inline-end: 100%;
234
+ inset-block: 0;
235
+ inline-size: var(--db-popover-distance);
265
236
  }
266
- [data-placement^=left].db-tooltip:not([data-outside-vx])::before, [data-outside-vx=right].db-tooltip::before {
267
- inset-block-end: 0;
268
- block-size: 100%;
237
+ [data-placement^=left].db-tooltip:not([data-corrected-placement])::before, [data-corrected-placement^=left].db-tooltip::before {
238
+ inset-inline-start: 100%;
239
+ inset-block: 0;
269
240
  inline-size: var(--db-popover-distance);
270
- inset-inline-end: calc(-1 * var(--db-popover-distance));
271
241
  }
272
- [data-placement^=right].db-tooltip:not([data-outside-vx]), [data-outside-vx=left].db-tooltip {
273
- inset-inline-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
242
+ [data-gap=true].db-tooltip {
243
+ --db-popover-gap: 1;
244
+ --db-popover-distance: var(--db-spacing-fixed-md);
274
245
  }
275
- [data-placement^=right].db-tooltip:not([data-outside-vx])::before, [data-outside-vx=left].db-tooltip::before {
276
- inset-block-start: 0;
277
- block-size: 100%;
278
- inline-size: var(--db-popover-distance);
279
- inset-inline-start: calc(-1 * var(--db-popover-distance));
246
+ .db-tooltip:is(.db-tooltip) {
247
+ --db-popover-distance: var(--db-spacing-fixed-sm);
280
248
  }
281
249
 
282
250
  .db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover .db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:first-of-type {
283
- display: revert;
251
+ visibility: var(--db-show-popover-visibility, visible);
284
252
  }
285
- .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-outside-vy]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-outside-vy]):first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]), [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx]):first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=top].db-tooltip:not([data-outside-vx]):first-of-type {
253
+ .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=bottom].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom].db-tooltip:first-of-type {
286
254
  --db-popover-translate-y: -25%;
287
255
  }
288
- .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy]):not([data-animation]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-outside-vy]):not([data-animation]):first-of-type, .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy])[data-animation=false], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=false]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-outside-vy]):not([data-animation]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=false]:first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]):not([data-animation]), [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=top].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=false], [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type {
256
+ .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement]):not([data-animation]):first-of-type, .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=false]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-corrected-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-corrected-placement^=bottom].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom].db-tooltip:not([data-animation]):first-of-type, [data-corrected-placement^=bottom][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=false].db-tooltip:first-of-type {
289
257
  opacity: 1;
290
258
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
291
259
  }
292
260
  @media screen and (prefers-reduced-motion: no-preference) {
293
- .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy])[data-animation=true], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true]:first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true], [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type {
261
+ .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=bottom][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type {
294
262
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
263
+ /* stylelint-disable-next-line media-query-no-invalid */
264
+ /* stylelint-disable-next-line at-rule-empty-line-before */
295
265
  }
296
- .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type {
266
+ .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-corrected-placement^=bottom][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
297
267
  animation-delay: var(--db-transition-duration-extra-slow);
298
268
  }
299
- .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-outside-vy=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type {
300
- animation-delay: calc(var(--db-transition-duration-medium));
269
+ .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-corrected-placement^=bottom][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
270
+ animation-delay: var(--db-transition-duration-medium);
271
+ }
272
+ }
273
+ @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
274
+ .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=bottom][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
275
+ animation-delay: var(--db-transition-duration-medium);
301
276
  }
302
277
  }
303
- [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-outside-vy]):first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]), [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):first-of-type {
278
+ [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=top].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top].db-tooltip:first-of-type {
304
279
  --db-popover-translate-y: 25%;
305
280
  }
306
- [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-outside-vy]):not([data-animation]):first-of-type, [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=false]:first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]):not([data-animation]), [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=false], [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type {
281
+ [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-corrected-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-corrected-placement^=top].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top].db-tooltip:not([data-animation]):first-of-type, [data-corrected-placement^=top][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=false].db-tooltip:first-of-type {
307
282
  opacity: 1;
308
283
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
309
284
  }
310
285
  @media screen and (prefers-reduced-motion: no-preference) {
311
- [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true]:first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true], [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type {
286
+ [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=top][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type {
312
287
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
288
+ /* stylelint-disable-next-line media-query-no-invalid */
289
+ /* stylelint-disable-next-line at-rule-empty-line-before */
313
290
  }
314
- [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=slow]:first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type {
291
+ [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-corrected-placement^=top][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
315
292
  animation-delay: var(--db-transition-duration-extra-slow);
316
293
  }
317
- [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-outside-vy])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-outside-vy])[data-animation=true][data-delay=fast]:first-of-type, [data-outside-vy=bottom].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type {
318
- animation-delay: calc(var(--db-transition-duration-medium));
294
+ [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-corrected-placement^=top][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
295
+ animation-delay: var(--db-transition-duration-medium);
296
+ }
297
+ }
298
+ @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
299
+ [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=top][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
300
+ animation-delay: var(--db-transition-duration-medium);
319
301
  }
320
302
  }
321
- [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-outside-vx]):first-of-type, [data-outside-vx=left].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=left].db-tooltip:first-of-type {
303
+ [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=right].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right].db-tooltip:first-of-type {
322
304
  --db-popover-translate-x: -25%;
323
305
  }
324
- [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-outside-vx=left].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-outside-vx=left].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=left].db-tooltip:not([data-animation]):first-of-type, [data-outside-vx=left][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=left][data-animation=false].db-tooltip:first-of-type {
306
+ [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-corrected-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-corrected-placement^=right].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right].db-tooltip:not([data-animation]):first-of-type, [data-corrected-placement^=right][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=false].db-tooltip:first-of-type {
325
307
  opacity: 1;
326
308
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
327
309
  }
328
310
  @media screen and (prefers-reduced-motion: no-preference) {
329
- [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-outside-vx=left][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=left][data-animation=true].db-tooltip:first-of-type {
311
+ [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=right][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type {
330
312
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
313
+ /* stylelint-disable-next-line media-query-no-invalid */
314
+ /* stylelint-disable-next-line at-rule-empty-line-before */
331
315
  }
332
- [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-outside-vx=left][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
316
+ [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-corrected-placement^=right][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
333
317
  animation-delay: var(--db-transition-duration-extra-slow);
334
318
  }
335
- [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-outside-vx=left][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
336
- animation-delay: calc(var(--db-transition-duration-medium));
319
+ [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-corrected-placement^=right][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
320
+ animation-delay: var(--db-transition-duration-medium);
337
321
  }
338
322
  }
339
- [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-outside-vx]):first-of-type, [data-outside-vx=right].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=right].db-tooltip:first-of-type {
323
+ @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
324
+ [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=right][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
325
+ animation-delay: var(--db-transition-duration-medium);
326
+ }
327
+ }
328
+ [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=left].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left].db-tooltip:first-of-type {
340
329
  --db-popover-translate-x: 25%;
341
330
  }
342
- [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-outside-vx]):not([data-animation]):first-of-type, [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type, [data-outside-vx=right].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-outside-vx=right].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=right].db-tooltip:not([data-animation]):first-of-type, [data-outside-vx=right][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=right][data-animation=false].db-tooltip:first-of-type {
331
+ [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-corrected-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-corrected-placement^=left].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left].db-tooltip:not([data-animation]):first-of-type, [data-corrected-placement^=left][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=false].db-tooltip:first-of-type {
343
332
  opacity: 1;
344
333
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
345
334
  }
346
335
  @media screen and (prefers-reduced-motion: no-preference) {
347
- [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type, [data-outside-vx=right][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=right][data-animation=true].db-tooltip:first-of-type {
336
+ [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=left][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type {
348
337
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
338
+ /* stylelint-disable-next-line media-query-no-invalid */
339
+ /* stylelint-disable-next-line at-rule-empty-line-before */
349
340
  }
350
- [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type, [data-outside-vx=right][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
341
+ [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-corrected-placement^=left][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
351
342
  animation-delay: var(--db-transition-duration-extra-slow);
352
343
  }
353
- [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-outside-vx])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type, [data-outside-vx=right][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-outside-vx=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-outside-vx=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
354
- animation-delay: calc(var(--db-transition-duration-medium));
344
+ [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-corrected-placement^=left][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
345
+ animation-delay: var(--db-transition-duration-medium);
346
+ }
347
+ }
348
+ @media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
349
+ [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=left][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
350
+ animation-delay: var(--db-transition-duration-medium);
355
351
  }
356
352
  }
357
353
 
@@ -359,14 +355,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
359
355
  position: absolute;
360
356
  background-color: var(--db-adaptive-bg-basic-level-1-default);
361
357
  box-shadow: var(--db-elevation-md);
362
- display: none;
358
+ visibility: hidden;
363
359
  z-index: 1337;
364
- white-space: nowrap;
360
+ white-space: normal;
361
+ max-inline-size: calc(100vw - 2 * var(--db-spacing-fixed-md));
362
+ block-size: fit-content;
363
+ inline-size: fit-content;
365
364
  }
366
365
  [data-width=fixed].db-tooltip {
367
366
  inline-size: max-content;
368
- max-inline-size: var(--db-sizing-3xl);
369
- white-space: normal;
367
+ max-inline-size: min(var(--db-sizing-3xl), calc(100vw - 2 * var(--db-spacing-fixed-md)));
370
368
  text-align: initial;
371
369
  }
372
370
 
@@ -394,26 +392,26 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
394
392
  border-radius: 0 2px;
395
393
  transform: skew(-8deg, -8deg);
396
394
  }
397
- .db-tooltip:not([data-placement], [data-outside-vy])::after, .db-tooltip[data-placement^=bottom]:not([data-outside-vy])::after, .db-tooltip[data-outside-vy=top]:not([data-outside-vx])::after {
398
- inset-inline-start: 50%;
395
+ .db-tooltip:not([data-placement], [data-corrected-placement])::after, .db-tooltip[data-placement^=bottom]:not([data-corrected-placement])::after, .db-tooltip[data-corrected-placement^=bottom]::after {
396
+ inset-inline-start: var(--db-tooltip-arrow-inline-start, 50%);
399
397
  inset-block-start: 0;
400
398
  translate: -50% -50%;
401
399
  rotate: 315deg;
402
400
  }
403
- .db-tooltip[data-placement^=top]:not([data-outside-vy])::after, .db-tooltip[data-outside-vy=bottom]:not([data-outside-vx])::after {
404
- inset-inline-start: 50%;
401
+ .db-tooltip[data-placement^=top]:not([data-corrected-placement])::after, .db-tooltip[data-corrected-placement^=top]::after {
402
+ inset-inline-start: var(--db-tooltip-arrow-inline-start, 50%);
405
403
  inset-block-end: 0;
406
404
  translate: -50% 50%;
407
405
  rotate: 135deg;
408
406
  }
409
- .db-tooltip[data-placement^=right]:not([data-outside-vx])::after, .db-tooltip[data-outside-vx=left]::after {
410
- inset-block-start: 50%;
407
+ .db-tooltip[data-placement^=right]:not([data-corrected-placement])::after, .db-tooltip[data-corrected-placement^=right]::after {
408
+ inset-block-start: var(--db-tooltip-arrow-block-start, 50%);
411
409
  inset-inline-start: 0;
412
410
  translate: -50% -50%;
413
411
  rotate: 225deg;
414
412
  }
415
- .db-tooltip[data-placement^=left]:not([data-outside-vx])::after, .db-tooltip[data-outside-vx=right]::after {
416
- inset-block-start: 50%;
413
+ .db-tooltip[data-placement^=left]:not([data-corrected-placement])::after, .db-tooltip[data-corrected-placement^=left]::after {
414
+ inset-block-start: var(--db-tooltip-arrow-block-start, 50%);
417
415
  inset-inline-end: 0;
418
416
  translate: 50% -50%;
419
417
  rotate: 45deg;
package/build/components/tooltip/tooltip.scss CHANGED
@@ -59,41 +59,41 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
59
59
  }
60
60
  }
61
61
 
62
- &:not([data-placement], [data-outside-vy]),
63
- &[data-placement^="bottom"]:not([data-outside-vy]),
64
- &[data-outside-vy="top"]:not([data-outside-vx]) {
62
+ &:not([data-placement], [data-corrected-placement]),
63
+ &[data-placement^="bottom"]:not([data-corrected-placement]),
64
+ &[data-corrected-placement^="bottom"] {
65
65
  &::after {
66
- inset-inline-start: 50%;
66
+ inset-inline-start: var(--db-tooltip-arrow-inline-start, 50%);
67
67
  inset-block-start: 0;
68
68
  translate: -50% -50%;
69
69
  rotate: 315deg;
70
70
  }
71
71
  }
72
72
 
73
- &[data-placement^="top"]:not([data-outside-vy]),
74
- &[data-outside-vy="bottom"]:not([data-outside-vx]) {
73
+ &[data-placement^="top"]:not([data-corrected-placement]),
74
+ &[data-corrected-placement^="top"] {
75
75
  &::after {
76
- inset-inline-start: 50%;
76
+ inset-inline-start: var(--db-tooltip-arrow-inline-start, 50%);
77
77
  inset-block-end: 0;
78
78
  translate: -50% 50%;
79
79
  rotate: 135deg;
80
80
  }
81
81
  }
82
82
 
83
- &[data-placement^="right"]:not([data-outside-vx]),
84
- &[data-outside-vx="left"] {
83
+ &[data-placement^="right"]:not([data-corrected-placement]),
84
+ &[data-corrected-placement^="right"] {
85
85
  &::after {
86
- inset-block-start: 50%;
86
+ inset-block-start: var(--db-tooltip-arrow-block-start, 50%);
87
87
  inset-inline-start: 0;
88
88
  translate: -50% -50%;
89
89
  rotate: 225deg;
90
90
  }
91
91
  }
92
92
 
93
- &[data-placement^="left"]:not([data-outside-vx]),
94
- &[data-outside-vx="right"] {
93
+ &[data-placement^="left"]:not([data-corrected-placement]),
94
+ &[data-corrected-placement^="left"] {
95
95
  &::after {
96
- inset-block-start: 50%;
96
+ inset-block-start: var(--db-tooltip-arrow-block-start, 50%);
97
97
  inset-inline-end: 0;
98
98
  translate: 50% -50%;
99
99
  rotate: 45deg;