@db-ux/core-components 2.0.9 → 2.1.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 (50) hide show
  1. package/build/components/accordion/accordion.css +4 -0
  2. package/build/components/accordion-item/accordion-item.css +30 -31
  3. package/build/components/accordion-item/accordion-item.scss +35 -39
  4. package/build/components/badge/badge.css +42 -13
  5. package/build/components/brand/brand.css +4 -0
  6. package/build/components/button/button.css +4 -0
  7. package/build/components/card/card.css +4 -0
  8. package/build/components/checkbox/checkbox.css +4 -0
  9. package/build/components/custom-select/custom-select.css +4 -0
  10. package/build/components/custom-select-dropdown/custom-select-dropdown.css +4 -0
  11. package/build/components/custom-select-form-field/custom-select-form-field.css +4 -0
  12. package/build/components/custom-select-list/custom-select-list.css +4 -0
  13. package/build/components/custom-select-list-item/custom-select-list-item.css +7 -21
  14. package/build/components/custom-select-list-item/custom-select-list-item.scss +5 -9
  15. package/build/components/divider/divider.css +4 -0
  16. package/build/components/drawer/drawer.css +16 -0
  17. package/build/components/drawer/drawer.scss +17 -0
  18. package/build/components/header/header.css +4 -0
  19. package/build/components/icon/icon.css +4 -0
  20. package/build/components/infotext/infotext.css +4 -0
  21. package/build/components/input/input.css +4 -0
  22. package/build/components/link/link.css +4 -0
  23. package/build/components/navigation/navigation.css +4 -0
  24. package/build/components/navigation-item/navigation-item.css +4 -0
  25. package/build/components/notification/notification.css +4 -0
  26. package/build/components/popover/popover.css +4 -0
  27. package/build/components/radio/radio.css +4 -0
  28. package/build/components/section/section.css +4 -0
  29. package/build/components/select/select.css +4 -0
  30. package/build/components/stack/stack-web-component.css +4 -0
  31. package/build/components/stack/stack.css +4 -0
  32. package/build/components/switch/switch.css +4 -0
  33. package/build/components/tab-item/tab-item.css +4 -0
  34. package/build/components/tab-list/tab-list.css +4 -0
  35. package/build/components/tabs/tabs.css +4 -0
  36. package/build/components/tag/tag.css +55 -17
  37. package/build/components/tag/tag.scss +6 -1
  38. package/build/components/textarea/textarea.css +4 -0
  39. package/build/components/tooltip/tooltip.css +25 -21
  40. package/build/components/tooltip/tooltip.scss +1 -1
  41. package/build/styles/absolute.css +215 -5
  42. package/build/styles/dialog-init.css +1 -1
  43. package/build/styles/index.css +30 -4
  44. package/build/styles/internal/_component.scss +5 -2
  45. package/build/styles/internal/_tag-components.scss +6 -3
  46. package/build/styles/relative.css +215 -5
  47. package/build/styles/rollup.css +215 -5
  48. package/build/styles/visually-hidden.css +1 -1
  49. package/build/styles/webpack.css +215 -5
  50. package/package.json +2 -2
package/build/components/tooltip/tooltip.css CHANGED
@@ -36,6 +36,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
36
36
 
37
37
  @layer variables {}
38
38
 
39
+ @layer variables {}
40
+
41
+ @layer variables {}
42
+
39
43
  /**
40
44
  Generates 3 types of placeholders, e.g:
41
45
  - %db-component-variables-md
@@ -274,78 +278,78 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
274
278
  inset-inline-start: calc(-1 * var(--db-popover-distance));
275
279
  }
276
280
 
277
- .db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover .db-tooltip:first-of-type, [data-has-tooltip=true]:focus .db-tooltip:first-of-type {
281
+ .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 {
278
282
  display: revert;
279
283
  }
280
- .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 .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 [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 [data-outside-vy=top].db-tooltip:not([data-outside-vx]):first-of-type {
284
+ .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 {
281
285
  --db-popover-translate-y: -25%;
282
286
  }
283
- .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 .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 .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 [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 [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 [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 [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type {
287
+ .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 {
284
288
  opacity: 1;
285
289
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
286
290
  }
287
291
  @media screen and (prefers-reduced-motion: no-preference) {
288
- .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 .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 [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 [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type {
292
+ .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 {
289
293
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
290
294
  }
291
- .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 .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 [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 [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type {
295
+ .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 {
292
296
  animation-delay: var(--db-transition-duration-extra-slow);
293
297
  }
294
- .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 .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 [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 [data-outside-vy=top].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type {
298
+ .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 {
295
299
  animation-delay: calc(var(--db-transition-duration-medium));
296
300
  }
297
301
  }
298
- [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 [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 [data-outside-vy=bottom].db-tooltip:not([data-outside-vx]):first-of-type {
302
+ [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 {
299
303
  --db-popover-translate-y: 25%;
300
304
  }
301
- [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 [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 [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 [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 [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=false]:first-of-type {
305
+ [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 {
302
306
  opacity: 1;
303
307
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
304
308
  }
305
309
  @media screen and (prefers-reduced-motion: no-preference) {
306
- [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 [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 [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true]:first-of-type {
310
+ [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 {
307
311
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
308
312
  }
309
- [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 [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 [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=slow]:first-of-type {
313
+ [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 {
310
314
  animation-delay: var(--db-transition-duration-extra-slow);
311
315
  }
312
- [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 [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 [data-outside-vy=bottom].db-tooltip:not([data-outside-vx])[data-animation=true][data-delay=fast]:first-of-type {
316
+ [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 {
313
317
  animation-delay: calc(var(--db-transition-duration-medium));
314
318
  }
315
319
  }
316
- [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 [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 [data-outside-vx=left].db-tooltip:first-of-type {
320
+ [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 {
317
321
  --db-popover-translate-x: -25%;
318
322
  }
319
- [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 [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 [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 [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 [data-outside-vx=left][data-animation=false].db-tooltip:first-of-type {
323
+ [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 {
320
324
  opacity: 1;
321
325
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
322
326
  }
323
327
  @media screen and (prefers-reduced-motion: no-preference) {
324
- [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 [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 [data-outside-vx=left][data-animation=true].db-tooltip:first-of-type {
328
+ [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 {
325
329
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
326
330
  }
327
- [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 [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 [data-outside-vx=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
331
+ [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 {
328
332
  animation-delay: var(--db-transition-duration-extra-slow);
329
333
  }
330
- [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 [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 [data-outside-vx=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
334
+ [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 {
331
335
  animation-delay: calc(var(--db-transition-duration-medium));
332
336
  }
333
337
  }
334
- [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 [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 [data-outside-vx=right].db-tooltip:first-of-type {
338
+ [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 {
335
339
  --db-popover-translate-x: 25%;
336
340
  }
337
- [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 [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 [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 [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 [data-outside-vx=right][data-animation=false].db-tooltip:first-of-type {
341
+ [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 {
338
342
  opacity: 1;
339
343
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
340
344
  }
341
345
  @media screen and (prefers-reduced-motion: no-preference) {
342
- [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 [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 [data-outside-vx=right][data-animation=true].db-tooltip:first-of-type {
346
+ [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 {
343
347
  animation: popover-animation var(--db-transition-straight-emotional) normal both;
344
348
  }
345
- [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 [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 [data-outside-vx=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
349
+ [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 {
346
350
  animation-delay: var(--db-transition-duration-extra-slow);
347
351
  }
348
- [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 [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 [data-outside-vx=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
352
+ [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 {
349
353
  animation-delay: calc(var(--db-transition-duration-medium));
350
354
  }
351
355
  }
package/build/components/tooltip/tooltip.scss CHANGED
@@ -130,7 +130,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
130
130
  position: var(--db-tooltip-parent-position, relative);
131
131
  }
132
132
 
133
- $popover-states: "hover", "focus";
133
+ $popover-states: "hover", "focus-visible";
134
134
 
135
135
  @each $state in $popover-states {
136
136
  @include show-popover($state);