@patternfly/patternfly 5.1.0-prerelease.30 → 5.1.0-prerelease.32

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 (14) hide show
  1. package/components/Popover/popover.css +43 -62
  2. package/components/Popover/popover.scss +45 -84
  3. package/components/Toolbar/toolbar.scss +2 -0
  4. package/components/Tooltip/tooltip.css +44 -63
  5. package/components/Tooltip/tooltip.scss +45 -84
  6. package/docs/components/Popover/examples/Popover.md +4 -4
  7. package/docs/components/Tooltip/examples/Tooltip.md +5 -5
  8. package/docs/demos/DataList/examples/DataList.md +8 -2
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +87 -125
  11. package/patternfly-theme-dark-unversioned.css +87 -125
  12. package/patternfly.css +87 -125
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -22619,85 +22619,59 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22619
22619
  }
22620
22620
  .pf-v5-c-popover:is(.pf-m-top,
22621
22621
  .pf-m-top-left,
22622
- .pf-m-top-right,
22623
- .pf-m-block-start,
22624
- .pf-m-block-start-inline-start,
22625
- .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22626
- inset-block-end: 0;
22627
- inset-inline-start: 50%;
22628
- transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
22629
- }
22630
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22631
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
22622
+ .pf-m-top-right) {
22623
+ --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover--m-top--Bottom, 0);
22624
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-top--Left, 50%);
22625
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-top--TranslateX);
22626
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
22627
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-top--Rotate);
22632
22628
  }
22633
-
22634
22629
  .pf-v5-c-popover:is(.pf-m-bottom,
22635
22630
  .pf-m-bottom-left,
22636
- .pf-m-bottom-right,
22637
- .pf-m-block-end,
22638
- .pf-m-block-end-inline-start,
22639
- .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22640
- inset-block-start: 0;
22641
- inset-inline-start: 50%;
22642
- transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
22631
+ .pf-m-bottom-right) {
22632
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-bottom--Top, 0);
22633
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-bottom--Left, 50%);
22634
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-bottom--TranslateX);
22635
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-bottom--TranslateY);
22636
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-bottom--Rotate);
22643
22637
  }
22644
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22645
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
22646
- }
22647
-
22648
22638
  .pf-v5-c-popover:is(.pf-m-left,
22649
22639
  .pf-m-left-top,
22650
- .pf-m-left-bottom,
22651
- .pf-m-inline-start,
22652
- .pf-m-inline-start-block-start,
22653
- .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22654
- inset-block-start: 50%;
22655
- inset-inline-end: 0;
22656
- transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
22657
- }
22658
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22659
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
22640
+ .pf-m-left-bottom) {
22641
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-left--Top, 50%);
22642
+ --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover--m-left--Right, 0);
22643
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
22644
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-left--TranslateY);
22645
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-left--Rotate);
22660
22646
  }
22661
-
22662
22647
  .pf-v5-c-popover:is(.pf-m-right,
22663
22648
  .pf-m-right-top,
22664
- .pf-m-right-bottom,
22665
- .pf-m-inline-end,
22666
- .pf-m-inline-end-block-start,
22667
- .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22668
- inset-block-start: 50%;
22669
- inset-inline-start: 0;
22670
- transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
22649
+ .pf-m-right-bottom) {
22650
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-right--Top, 50%);
22651
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-right--Left, 0);
22652
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-right--TranslateX);
22653
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-right--TranslateY);
22654
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-right--Rotate);
22671
22655
  }
22672
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22673
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
22674
- }
22675
-
22676
22656
  .pf-v5-c-popover:is(.pf-m-left-top,
22677
- .pf-m-right-top,
22678
- .pf-m-inline-start-block-start,
22679
- .pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
22680
- inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22657
+ .pf-m-right-top) {
22658
+ --pf-v5-c-popover__arrow--Top: 0;
22659
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
22681
22660
  }
22682
22661
  .pf-v5-c-popover:is(.pf-m-left-bottom,
22683
- .pf-m-right-bottom,
22684
- .pf-m-inline-start-block-end,
22685
- .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22686
- inset-block-start: auto;
22687
- inset-block-end: 0;
22662
+ .pf-m-right-bottom) {
22663
+ --pf-v5-c-popover__arrow--Top: auto;
22664
+ --pf-v5-c-popover__arrow--Bottom: 0;
22688
22665
  }
22689
22666
  .pf-v5-c-popover:is(.pf-m-top-left,
22690
- .pf-m-bottom-left,
22691
- .pf-m-block-start-inline-start,
22692
- .pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
22693
- inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22667
+ .pf-m-bottom-left) {
22668
+ --pf-v5-c-popover__arrow--Left: 0;
22669
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
22694
22670
  }
22695
22671
  .pf-v5-c-popover:is(.pf-m-top-right,
22696
- .pf-m-bottom-right,
22697
- .pf-m-block-start-inline-end,
22698
- .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22699
- inset-inline-start: auto;
22700
- inset-inline-end: 0;
22672
+ .pf-m-bottom-right) {
22673
+ --pf-v5-c-popover__arrow--Right: 0;
22674
+ --pf-v5-c-popover__arrow--Left: auto;
22701
22675
  }
22702
22676
  .pf-v5-c-popover.pf-m-danger {
22703
22677
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -22740,11 +22714,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22740
22714
 
22741
22715
  .pf-v5-c-popover__arrow {
22742
22716
  position: absolute;
22717
+ /* stylelint-disable liberty/use-logical-spec */
22718
+ top: var(--pf-v5-c-popover__arrow--Top, auto);
22719
+ right: var(--pf-v5-c-popover__arrow--Right, auto);
22720
+ bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
22721
+ left: var(--pf-v5-c-popover__arrow--Left, auto);
22722
+ /* stylelint-enable */
22743
22723
  width: var(--pf-v5-c-popover__arrow--Width);
22744
22724
  height: var(--pf-v5-c-popover__arrow--Height);
22745
22725
  pointer-events: none;
22746
22726
  background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
22747
22727
  box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
22728
+ transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
22748
22729
  }
22749
22730
 
22750
22731
  .pf-v5-c-popover__header {
@@ -30383,85 +30364,59 @@ svg.pf-v5-c-spinner.pf-m-xl {
30383
30364
  }
30384
30365
  .pf-v5-c-tooltip:is(.pf-m-top,
30385
30366
  .pf-m-top-left,
30386
- .pf-m-top-right,
30387
- .pf-m-block-start,
30388
- .pf-m-block-start-inline-start,
30389
- .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30390
- inset-block-end: 0;
30391
- inset-inline-start: 50%;
30392
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
30393
- }
30394
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30395
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
30367
+ .pf-m-top-right) {
30368
+ --pf-v5-c-tooltip__arrow--Bottom: var(--pf-v5-c-tooltip--m-top--Bottom, 0);
30369
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-top--Left, 50%);
30370
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-top--TranslateX);
30371
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
30372
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-top--Rotate);
30396
30373
  }
30397
-
30398
30374
  .pf-v5-c-tooltip:is(.pf-m-bottom,
30399
30375
  .pf-m-bottom-left,
30400
- .pf-m-bottom-right,
30401
- .pf-m-block-end,
30402
- .pf-m-block-end-inline-start,
30403
- .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30404
- inset-block-start: 0;
30405
- inset-inline-start: 50%;
30406
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
30376
+ .pf-m-bottom-right) {
30377
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-bottom--Top, 0);
30378
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-bottom--Left, 50%);
30379
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX);
30380
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY);
30381
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate);
30407
30382
  }
30408
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30409
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
30410
- }
30411
-
30412
30383
  .pf-v5-c-tooltip:is(.pf-m-left,
30413
30384
  .pf-m-left-top,
30414
- .pf-m-left-bottom,
30415
- .pf-m-inline-start,
30416
- .pf-m-inline-start-block-start,
30417
- .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30418
- inset-block-start: 50%;
30419
- inset-inline-end: 0;
30420
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
30421
- }
30422
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30423
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
30385
+ .pf-m-left-bottom) {
30386
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-left--Top, 50%);
30387
+ --pf-v5-c-tooltip__arrow--Right: var(--pf-v5-c-tooltip--m-left--Right, 0);
30388
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
30389
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-left--TranslateY);
30390
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-left--Rotate);
30424
30391
  }
30425
-
30426
30392
  .pf-v5-c-tooltip:is(.pf-m-right,
30427
30393
  .pf-m-right-top,
30428
- .pf-m-right-bottom,
30429
- .pf-m-inline-end,
30430
- .pf-m-inline-end-block-start,
30431
- .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30432
- inset-block-start: 50%;
30433
- inset-inline-start: 0;
30434
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
30394
+ .pf-m-right-bottom) {
30395
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-right--Top, 50%);
30396
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-right--Left, 0);
30397
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-right--TranslateX);
30398
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-right--TranslateY);
30399
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-right--Rotate);
30435
30400
  }
30436
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30437
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
30438
- }
30439
-
30440
30401
  .pf-v5-c-tooltip:is(.pf-m-left-top,
30441
- .pf-m-right-top,
30442
- .pf-m-inline-start-block-start,
30443
- .pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
30444
- inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30402
+ .pf-m-right-top) {
30403
+ --pf-v5-c-tooltip__arrow--Top: 0;
30404
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
30445
30405
  }
30446
30406
  .pf-v5-c-tooltip:is(.pf-m-left-bottom,
30447
- .pf-m-right-bottom,
30448
- .pf-m-inline-start-block-end,
30449
- .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30450
- inset-block-start: auto;
30451
- inset-block-end: 0;
30407
+ .pf-m-right-bottom) {
30408
+ --pf-v5-c-tooltip__arrow--Top: auto;
30409
+ --pf-v5-c-tooltip__arrow--Bottom: 0;
30452
30410
  }
30453
30411
  .pf-v5-c-tooltip:is(.pf-m-top-left,
30454
- .pf-m-bottom-left,
30455
- .pf-m-block-start-block-start,
30456
- .pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
30457
- inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30412
+ .pf-m-bottom-left) {
30413
+ --pf-v5-c-tooltip__arrow--Left: 0;
30414
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
30458
30415
  }
30459
30416
  .pf-v5-c-tooltip:is(.pf-m-top-right,
30460
- .pf-m-bottom-right,
30461
- .pf-m-block-start-block-end,
30462
- .pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
30463
- inset-inline-start: auto;
30464
- inset-inline-end: 0;
30417
+ .pf-m-bottom-right) {
30418
+ --pf-v5-c-tooltip__arrow--Right: 0;
30419
+ --pf-v5-c-tooltip__arrow--Left: auto;
30465
30420
  }
30466
30421
 
30467
30422
  .pf-v5-c-tooltip__content {
@@ -30476,17 +30431,24 @@ svg.pf-v5-c-spinner.pf-m-xl {
30476
30431
  word-break: break-word;
30477
30432
  background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
30478
30433
  }
30479
- .pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
30434
+ .pf-v5-c-tooltip__content.pf-m-text-align-left {
30480
30435
  text-align: start;
30481
30436
  }
30482
30437
 
30483
30438
  .pf-v5-c-tooltip__arrow {
30484
30439
  position: absolute;
30440
+ /* stylelint-disable liberty/use-logical-spec */
30441
+ top: var(--pf-v5-c-tooltip__arrow--Top, auto);
30442
+ right: var(--pf-v5-c-tooltip__arrow--Right, auto);
30443
+ bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
30444
+ left: var(--pf-v5-c-tooltip__arrow--Left, auto);
30445
+ /* stylelint-enable */
30485
30446
  width: var(--pf-v5-c-tooltip__arrow--Width);
30486
30447
  height: var(--pf-v5-c-tooltip__arrow--Height);
30487
30448
  pointer-events: none;
30488
30449
  background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
30489
30450
  box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
30451
+ transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
30490
30452
  }
30491
30453
 
30492
30454
  :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
package/patternfly.css CHANGED
@@ -22619,85 +22619,59 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22619
22619
  }
22620
22620
  .pf-v5-c-popover:is(.pf-m-top,
22621
22621
  .pf-m-top-left,
22622
- .pf-m-top-right,
22623
- .pf-m-block-start,
22624
- .pf-m-block-start-inline-start,
22625
- .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22626
- inset-block-end: 0;
22627
- inset-inline-start: 50%;
22628
- transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
22629
- }
22630
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22631
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
22622
+ .pf-m-top-right) {
22623
+ --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover--m-top--Bottom, 0);
22624
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-top--Left, 50%);
22625
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-top--TranslateX);
22626
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
22627
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-top--Rotate);
22632
22628
  }
22633
-
22634
22629
  .pf-v5-c-popover:is(.pf-m-bottom,
22635
22630
  .pf-m-bottom-left,
22636
- .pf-m-bottom-right,
22637
- .pf-m-block-end,
22638
- .pf-m-block-end-inline-start,
22639
- .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22640
- inset-block-start: 0;
22641
- inset-inline-start: 50%;
22642
- transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
22631
+ .pf-m-bottom-right) {
22632
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-bottom--Top, 0);
22633
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-bottom--Left, 50%);
22634
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-bottom--TranslateX);
22635
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-bottom--TranslateY);
22636
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-bottom--Rotate);
22643
22637
  }
22644
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22645
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
22646
- }
22647
-
22648
22638
  .pf-v5-c-popover:is(.pf-m-left,
22649
22639
  .pf-m-left-top,
22650
- .pf-m-left-bottom,
22651
- .pf-m-inline-start,
22652
- .pf-m-inline-start-block-start,
22653
- .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22654
- inset-block-start: 50%;
22655
- inset-inline-end: 0;
22656
- transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
22657
- }
22658
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22659
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
22640
+ .pf-m-left-bottom) {
22641
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-left--Top, 50%);
22642
+ --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover--m-left--Right, 0);
22643
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
22644
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-left--TranslateY);
22645
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-left--Rotate);
22660
22646
  }
22661
-
22662
22647
  .pf-v5-c-popover:is(.pf-m-right,
22663
22648
  .pf-m-right-top,
22664
- .pf-m-right-bottom,
22665
- .pf-m-inline-end,
22666
- .pf-m-inline-end-block-start,
22667
- .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22668
- inset-block-start: 50%;
22669
- inset-inline-start: 0;
22670
- transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
22649
+ .pf-m-right-bottom) {
22650
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-right--Top, 50%);
22651
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-right--Left, 0);
22652
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-right--TranslateX);
22653
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-right--TranslateY);
22654
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-right--Rotate);
22671
22655
  }
22672
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22673
- transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
22674
- }
22675
-
22676
22656
  .pf-v5-c-popover:is(.pf-m-left-top,
22677
- .pf-m-right-top,
22678
- .pf-m-inline-start-block-start,
22679
- .pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
22680
- inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22657
+ .pf-m-right-top) {
22658
+ --pf-v5-c-popover__arrow--Top: 0;
22659
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
22681
22660
  }
22682
22661
  .pf-v5-c-popover:is(.pf-m-left-bottom,
22683
- .pf-m-right-bottom,
22684
- .pf-m-inline-start-block-end,
22685
- .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22686
- inset-block-start: auto;
22687
- inset-block-end: 0;
22662
+ .pf-m-right-bottom) {
22663
+ --pf-v5-c-popover__arrow--Top: auto;
22664
+ --pf-v5-c-popover__arrow--Bottom: 0;
22688
22665
  }
22689
22666
  .pf-v5-c-popover:is(.pf-m-top-left,
22690
- .pf-m-bottom-left,
22691
- .pf-m-block-start-inline-start,
22692
- .pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
22693
- inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22667
+ .pf-m-bottom-left) {
22668
+ --pf-v5-c-popover__arrow--Left: 0;
22669
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
22694
22670
  }
22695
22671
  .pf-v5-c-popover:is(.pf-m-top-right,
22696
- .pf-m-bottom-right,
22697
- .pf-m-block-start-inline-end,
22698
- .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22699
- inset-inline-start: auto;
22700
- inset-inline-end: 0;
22672
+ .pf-m-bottom-right) {
22673
+ --pf-v5-c-popover__arrow--Right: 0;
22674
+ --pf-v5-c-popover__arrow--Left: auto;
22701
22675
  }
22702
22676
  .pf-v5-c-popover.pf-m-danger {
22703
22677
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -22740,11 +22714,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22740
22714
 
22741
22715
  .pf-v5-c-popover__arrow {
22742
22716
  position: absolute;
22717
+ /* stylelint-disable liberty/use-logical-spec */
22718
+ top: var(--pf-v5-c-popover__arrow--Top, auto);
22719
+ right: var(--pf-v5-c-popover__arrow--Right, auto);
22720
+ bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
22721
+ left: var(--pf-v5-c-popover__arrow--Left, auto);
22722
+ /* stylelint-enable */
22743
22723
  width: var(--pf-v5-c-popover__arrow--Width);
22744
22724
  height: var(--pf-v5-c-popover__arrow--Height);
22745
22725
  pointer-events: none;
22746
22726
  background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
22747
22727
  box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
22728
+ transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
22748
22729
  }
22749
22730
 
22750
22731
  .pf-v5-c-popover__header {
@@ -30383,85 +30364,59 @@ svg.pf-v5-c-spinner.pf-m-xl {
30383
30364
  }
30384
30365
  .pf-v5-c-tooltip:is(.pf-m-top,
30385
30366
  .pf-m-top-left,
30386
- .pf-m-top-right,
30387
- .pf-m-block-start,
30388
- .pf-m-block-start-inline-start,
30389
- .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30390
- inset-block-end: 0;
30391
- inset-inline-start: 50%;
30392
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
30393
- }
30394
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30395
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
30367
+ .pf-m-top-right) {
30368
+ --pf-v5-c-tooltip__arrow--Bottom: var(--pf-v5-c-tooltip--m-top--Bottom, 0);
30369
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-top--Left, 50%);
30370
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-top--TranslateX);
30371
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
30372
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-top--Rotate);
30396
30373
  }
30397
-
30398
30374
  .pf-v5-c-tooltip:is(.pf-m-bottom,
30399
30375
  .pf-m-bottom-left,
30400
- .pf-m-bottom-right,
30401
- .pf-m-block-end,
30402
- .pf-m-block-end-inline-start,
30403
- .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30404
- inset-block-start: 0;
30405
- inset-inline-start: 50%;
30406
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
30376
+ .pf-m-bottom-right) {
30377
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-bottom--Top, 0);
30378
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-bottom--Left, 50%);
30379
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX);
30380
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY);
30381
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate);
30407
30382
  }
30408
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30409
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
30410
- }
30411
-
30412
30383
  .pf-v5-c-tooltip:is(.pf-m-left,
30413
30384
  .pf-m-left-top,
30414
- .pf-m-left-bottom,
30415
- .pf-m-inline-start,
30416
- .pf-m-inline-start-block-start,
30417
- .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30418
- inset-block-start: 50%;
30419
- inset-inline-end: 0;
30420
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
30421
- }
30422
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30423
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
30385
+ .pf-m-left-bottom) {
30386
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-left--Top, 50%);
30387
+ --pf-v5-c-tooltip__arrow--Right: var(--pf-v5-c-tooltip--m-left--Right, 0);
30388
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
30389
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-left--TranslateY);
30390
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-left--Rotate);
30424
30391
  }
30425
-
30426
30392
  .pf-v5-c-tooltip:is(.pf-m-right,
30427
30393
  .pf-m-right-top,
30428
- .pf-m-right-bottom,
30429
- .pf-m-inline-end,
30430
- .pf-m-inline-end-block-start,
30431
- .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30432
- inset-block-start: 50%;
30433
- inset-inline-start: 0;
30434
- transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
30394
+ .pf-m-right-bottom) {
30395
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-right--Top, 50%);
30396
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-right--Left, 0);
30397
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-right--TranslateX);
30398
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-right--TranslateY);
30399
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-right--Rotate);
30435
30400
  }
30436
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30437
- transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
30438
- }
30439
-
30440
30401
  .pf-v5-c-tooltip:is(.pf-m-left-top,
30441
- .pf-m-right-top,
30442
- .pf-m-inline-start-block-start,
30443
- .pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
30444
- inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30402
+ .pf-m-right-top) {
30403
+ --pf-v5-c-tooltip__arrow--Top: 0;
30404
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
30445
30405
  }
30446
30406
  .pf-v5-c-tooltip:is(.pf-m-left-bottom,
30447
- .pf-m-right-bottom,
30448
- .pf-m-inline-start-block-end,
30449
- .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30450
- inset-block-start: auto;
30451
- inset-block-end: 0;
30407
+ .pf-m-right-bottom) {
30408
+ --pf-v5-c-tooltip__arrow--Top: auto;
30409
+ --pf-v5-c-tooltip__arrow--Bottom: 0;
30452
30410
  }
30453
30411
  .pf-v5-c-tooltip:is(.pf-m-top-left,
30454
- .pf-m-bottom-left,
30455
- .pf-m-block-start-block-start,
30456
- .pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
30457
- inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30412
+ .pf-m-bottom-left) {
30413
+ --pf-v5-c-tooltip__arrow--Left: 0;
30414
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
30458
30415
  }
30459
30416
  .pf-v5-c-tooltip:is(.pf-m-top-right,
30460
- .pf-m-bottom-right,
30461
- .pf-m-block-start-block-end,
30462
- .pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
30463
- inset-inline-start: auto;
30464
- inset-inline-end: 0;
30417
+ .pf-m-bottom-right) {
30418
+ --pf-v5-c-tooltip__arrow--Right: 0;
30419
+ --pf-v5-c-tooltip__arrow--Left: auto;
30465
30420
  }
30466
30421
 
30467
30422
  .pf-v5-c-tooltip__content {
@@ -30476,17 +30431,24 @@ svg.pf-v5-c-spinner.pf-m-xl {
30476
30431
  word-break: break-word;
30477
30432
  background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
30478
30433
  }
30479
- .pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
30434
+ .pf-v5-c-tooltip__content.pf-m-text-align-left {
30480
30435
  text-align: start;
30481
30436
  }
30482
30437
 
30483
30438
  .pf-v5-c-tooltip__arrow {
30484
30439
  position: absolute;
30440
+ /* stylelint-disable liberty/use-logical-spec */
30441
+ top: var(--pf-v5-c-tooltip__arrow--Top, auto);
30442
+ right: var(--pf-v5-c-tooltip__arrow--Right, auto);
30443
+ bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
30444
+ left: var(--pf-v5-c-tooltip__arrow--Left, auto);
30445
+ /* stylelint-enable */
30485
30446
  width: var(--pf-v5-c-tooltip__arrow--Width);
30486
30447
  height: var(--pf-v5-c-tooltip__arrow--Height);
30487
30448
  pointer-events: none;
30488
30449
  background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
30489
30450
  box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
30451
+ transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
30490
30452
  }
30491
30453
 
30492
30454
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,