@patternfly/patternfly 5.1.0-prerelease.8 → 5.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 (113) hide show
  1. package/README.md +13 -3
  2. package/base/_common.scss +21 -0
  3. package/base/_variables.scss +7 -0
  4. package/base/patternfly-common.css +14 -0
  5. package/base/patternfly-variables.css +5 -0
  6. package/components/AboutModalBox/about-modal-box.css +5 -0
  7. package/components/AboutModalBox/about-modal-box.scss +7 -0
  8. package/components/Accordion/accordion.css +3 -0
  9. package/components/Accordion/accordion.scss +2 -0
  10. package/components/Alert/alert.css +3 -0
  11. package/components/Alert/alert.scss +2 -0
  12. package/components/BackgroundImage/background-image.css +4 -1
  13. package/components/BackgroundImage/background-image.scss +6 -1
  14. package/components/Banner/banner.css +0 -3
  15. package/components/Breadcrumb/breadcrumb.css +3 -0
  16. package/components/Breadcrumb/breadcrumb.scss +2 -0
  17. package/components/Button/button.css +3 -0
  18. package/components/Button/button.scss +4 -0
  19. package/components/CalendarMonth/calendar-month.css +4 -0
  20. package/components/CalendarMonth/calendar-month.scss +2 -0
  21. package/components/Card/card.css +4 -1
  22. package/components/Card/card.scss +3 -1
  23. package/components/ClipboardCopy/clipboard-copy.css +3 -0
  24. package/components/ClipboardCopy/clipboard-copy.scss +2 -0
  25. package/components/DataList/data-list.css +3 -0
  26. package/components/DataList/data-list.scss +2 -0
  27. package/components/Drawer/drawer.css +45 -1
  28. package/components/Drawer/drawer.scss +43 -9
  29. package/components/DualListSelector/dual-list-selector.css +9 -1
  30. package/components/DualListSelector/dual-list-selector.scss +12 -3
  31. package/components/ExpandableSection/expandable-section.css +4 -0
  32. package/components/ExpandableSection/expandable-section.scss +2 -0
  33. package/components/Form/form.css +3 -0
  34. package/components/Form/form.scss +2 -0
  35. package/components/Icon/icon.scss +1 -1
  36. package/components/JumpLinks/jump-links.css +3 -0
  37. package/components/JumpLinks/jump-links.scss +2 -0
  38. package/components/Menu/menu.css +11 -0
  39. package/components/Menu/menu.scss +12 -2
  40. package/components/Nav/nav.css +20 -0
  41. package/components/Nav/nav.scss +22 -2
  42. package/components/NotificationDrawer/notification-drawer.css +4 -0
  43. package/components/NotificationDrawer/notification-drawer.scss +2 -0
  44. package/components/Page/page.css +4 -0
  45. package/components/Page/page.scss +6 -1
  46. package/components/Pagination/pagination.css +4 -0
  47. package/components/Pagination/pagination.scss +2 -0
  48. package/components/Popover/popover.css +62 -33
  49. package/components/Popover/popover.scss +88 -71
  50. package/components/Progress/progress.css +6 -4
  51. package/components/Progress/progress.scss +9 -4
  52. package/components/Skeleton/skeleton.css +4 -0
  53. package/components/Skeleton/skeleton.scss +2 -0
  54. package/components/Slider/slider.css +30 -6
  55. package/components/Slider/slider.scss +50 -19
  56. package/components/Switch/switch.css +4 -0
  57. package/components/Switch/switch.scss +5 -1
  58. package/components/Table/table-scrollable.css +2 -2
  59. package/components/Table/table-scrollable.scss +4 -2
  60. package/components/Table/table-tree-view.css +5 -1
  61. package/components/Table/table-tree-view.scss +7 -2
  62. package/components/Table/table.css +4 -0
  63. package/components/Table/table.scss +2 -0
  64. package/components/Tabs/tabs.css +10 -0
  65. package/components/Tabs/tabs.scss +8 -0
  66. package/components/Toolbar/toolbar.scss +2 -0
  67. package/components/Tooltip/tooltip.css +55 -26
  68. package/components/Tooltip/tooltip.scss +71 -54
  69. package/components/TreeView/tree-view.css +6 -0
  70. package/components/TreeView/tree-view.scss +10 -3
  71. package/components/Truncate/truncate.css +9 -0
  72. package/components/Truncate/truncate.scss +16 -3
  73. package/components/Wizard/wizard.css +10 -1
  74. package/components/Wizard/wizard.scss +12 -3
  75. package/docs/components/Button/examples/Button.md +15 -3
  76. package/docs/components/Card/examples/Card.md +2 -2
  77. package/docs/components/Chip/examples/Chip.md +1 -1
  78. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  79. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  80. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  81. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  82. package/docs/components/Label/examples/Label.md +1 -1
  83. package/docs/components/Menu/examples/Menu.css +8 -0
  84. package/docs/components/Menu/examples/Menu.md +90 -73
  85. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  86. package/docs/components/Nav/examples/Navigation.css +3 -26
  87. package/docs/components/Nav/examples/Navigation.md +99 -0
  88. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  89. package/docs/components/Popover/examples/Popover.css +4 -9
  90. package/docs/components/Table/examples/Table.md +2 -2
  91. package/docs/components/Toolbar/examples/Toolbar.md +76 -60
  92. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  93. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  94. package/docs/components/Truncate/examples/Truncate.md +2 -2
  95. package/docs/demos/Card/examples/Card.md +23 -7
  96. package/docs/demos/DataList/examples/DataList.md +8 -2
  97. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +16 -4
  98. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  99. package/docs/demos/Table/examples/Table.md +48 -12
  100. package/docs/demos/Tabs/examples/Tabs.md +4 -1
  101. package/package.json +6 -5
  102. package/patternfly-base-no-globals-theme-dark-unversioned.css +19 -0
  103. package/patternfly-base-no-globals.css +19 -0
  104. package/patternfly-base-theme-dark-unversioned.css +19 -0
  105. package/patternfly-base.css +19 -0
  106. package/patternfly-no-globals.css +375 -87
  107. package/patternfly-theme-dark-unversioned.css +375 -87
  108. package/patternfly.css +375 -87
  109. package/patternfly.min.css +1 -1
  110. package/patternfly.min.css.map +1 -1
  111. package/sass-utilities/functions.scss +6 -0
  112. package/sass-utilities/mixins.scss +60 -0
  113. package/sass-utilities/themes/dark/mixins.scss +3 -1
@@ -317,6 +317,11 @@
317
317
  --pf-v5-global--arrow--width-lg: 1.5625rem;
318
318
  --pf-v5-global--target-size--MinWidth: 44px;
319
319
  --pf-v5-global--target-size--MinHeight: 44px;
320
+ --pf-v5-global--inverse--multiplier: 1;
321
+ }
322
+
323
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) {
324
+ --pf-v5-global--inverse--multiplier: -1;
320
325
  }
321
326
 
322
327
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
@@ -555,6 +560,20 @@
555
560
  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
556
561
  }
557
562
 
563
+ .pf-v5-m-dir-rtl {
564
+ --pf-v5-global--inverse--multiplier: -1;
565
+ direction: rtl;
566
+ }
567
+
568
+ .pf-v5-m-dir-ltr {
569
+ --pf-v5-global--inverse--multiplier: 1;
570
+ direction: ltr;
571
+ }
572
+
573
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-mirror-inline-rtl {
574
+ scale: -1 1;
575
+ }
576
+
558
577
  :where(.pf-v5-theme-dark) {
559
578
  color-scheme: dark;
560
579
  }
@@ -5330,6 +5349,7 @@
5330
5349
  --pf-v5-c-about-modal-box--Width: 100%;
5331
5350
  --pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
5332
5351
  --pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
5352
+ --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
5333
5353
  --pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-v5-global--spacer--2xl);
5334
5354
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-global--spacer--xl);
5335
5355
  --pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-global--spacer--xl);
@@ -5382,6 +5402,10 @@
5382
5402
  background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
5383
5403
  background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
5384
5404
  }
5405
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box {
5406
+ --pf-v5-c-about-modal-box--BackgroundPosition: bottom left;
5407
+ }
5408
+
5385
5409
  @media screen and (min-width: 576px) {
5386
5410
  .pf-v5-c-about-modal-box {
5387
5411
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);
@@ -5721,6 +5745,9 @@
5721
5745
  .pf-v5-c-accordion__toggle-icon {
5722
5746
  transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
5723
5747
  }
5748
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
5749
+ scale: -1 1;
5750
+ }
5724
5751
 
5725
5752
  .pf-v5-c-accordion__expandable-content {
5726
5753
  font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
@@ -5944,6 +5971,9 @@
5944
5971
  transition: var(--pf-v5-c-alert__toggle-icon--Transition);
5945
5972
  transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
5946
5973
  }
5974
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
5975
+ scale: -1 1;
5976
+ }
5947
5977
 
5948
5978
  .pf-v5-c-alert__icon {
5949
5979
  display: flex;
@@ -6597,11 +6627,11 @@
6597
6627
  .pf-v5-c-background-image {
6598
6628
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6599
6629
  --pf-v5-c-background-image--BackgroundImage: none;
6600
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
6601
6630
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6602
6631
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
6603
6632
  --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
6604
6633
  --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
6634
+ --pf-v5-c-background-image--BackgroundPosition: bottom right;
6605
6635
  position: fixed;
6606
6636
  inset-block-start: 0;
6607
6637
  inset-inline-start: 0;
@@ -6614,6 +6644,9 @@
6614
6644
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6615
6645
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
6616
6646
  }
6647
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
6648
+ --pf-v5-c-background-image--BackgroundPosition: bottom left;
6649
+ }
6617
6650
 
6618
6651
  .pf-v5-c-back-to-top {
6619
6652
  --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
@@ -6789,9 +6822,6 @@
6789
6822
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
6790
6823
  }
6791
6824
 
6792
- :where(.pf-v5-theme-dark) .pf-v5-c-banner {
6793
- color: var(false);
6794
- }
6795
6825
  :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
6796
6826
  --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
6797
6827
  }
@@ -6906,6 +6936,9 @@
6906
6936
  line-height: 1;
6907
6937
  color: var(--pf-v5-c-breadcrumb__item-divider--Color);
6908
6938
  }
6939
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
6940
+ scale: -1 1;
6941
+ }
6909
6942
 
6910
6943
  .pf-v5-c-breadcrumb__link {
6911
6944
  font-size: inherit;
@@ -7389,6 +7422,9 @@ button.pf-v5-c-breadcrumb__link {
7389
7422
  color: var(--pf-v5-c-button--m-plain--Color);
7390
7423
  background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
7391
7424
  }
7425
+ .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
7426
+ padding: 0;
7427
+ }
7392
7428
  .pf-v5-c-button.pf-m-plain:hover {
7393
7429
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
7394
7430
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
@@ -7592,6 +7628,10 @@ button.pf-v5-c-breadcrumb__link {
7592
7628
  margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
7593
7629
  margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
7594
7630
  }
7631
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
7632
+ scale: -1 1;
7633
+ }
7634
+
7595
7635
  .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
7596
7636
  --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
7597
7637
  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
@@ -7784,7 +7824,7 @@ button.pf-v5-c-breadcrumb__link {
7784
7824
  --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7785
7825
  --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7786
7826
  --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7787
- --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-v5-global--BorderColor--100);
7827
+ --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
7788
7828
  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7789
7829
  --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
7790
7830
  --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);
@@ -8018,6 +8058,9 @@ button.pf-v5-c-breadcrumb__link {
8018
8058
  display: inline-block;
8019
8059
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8020
8060
  }
8061
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8062
+ scale: -1 1;
8063
+ }
8021
8064
 
8022
8065
  .pf-v5-c-card__title-text {
8023
8066
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -8483,6 +8526,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
8483
8526
  .pf-v5-c-clipboard-copy__toggle-icon {
8484
8527
  transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
8485
8528
  }
8529
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
8530
+ scale: -1 1;
8531
+ }
8486
8532
 
8487
8533
  .pf-v5-c-clipboard-copy__expandable-content {
8488
8534
  padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);
@@ -10090,6 +10136,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10090
10136
  transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
10091
10137
  transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
10092
10138
  }
10139
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
10140
+ scale: -1 1;
10141
+ }
10093
10142
 
10094
10143
  .pf-v5-c-data-list__item-content {
10095
10144
  display: grid;
@@ -10706,11 +10755,15 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10706
10755
  --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: 0;
10707
10756
  }
10708
10757
  .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
10758
+ transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
10709
10759
  position: absolute;
10710
10760
  inset-block-start: 0;
10711
10761
  inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
10712
- transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
10713
10762
  }
10763
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
10764
+ transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
10765
+ }
10766
+
10714
10767
  .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
10715
10768
  overflow-anchor: none;
10716
10769
  }
@@ -10809,6 +10862,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10809
10862
  padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
10810
10863
  }
10811
10864
 
10865
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
10866
+ scale: -1 1;
10867
+ }
10868
+
10812
10869
  .pf-v5-c-dual-list-selector__item-main {
10813
10870
  display: flex;
10814
10871
  min-width: 0;
@@ -12572,9 +12629,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12572
12629
  --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
12573
12630
  --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
12574
12631
  --pf-v5-c-drawer__panel--BoxShadow: none;
12632
+ --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
12575
12633
  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
12576
12634
  --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
12577
- --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
12578
12635
  --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
12579
12636
  --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
12580
12637
  --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
@@ -12608,6 +12665,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12608
12665
  --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
12609
12666
  }
12610
12667
  }
12668
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
12669
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
12670
+ }
12671
+
12672
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
12673
+ --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
12674
+ }
12675
+
12611
12676
  .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
12612
12677
  padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
12613
12678
  }
@@ -12616,6 +12681,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12616
12681
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
12617
12682
  transform: translateX(-100%);
12618
12683
  }
12684
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12685
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
12686
+ }
12687
+
12619
12688
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
12620
12689
  order: 1;
12621
12690
  }
@@ -12625,6 +12694,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12625
12694
  .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12626
12695
  transform: translateX(-100%);
12627
12696
  }
12697
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12698
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
12699
+ }
12700
+
12628
12701
  .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12629
12702
  transform: translateX(0);
12630
12703
  }
@@ -12839,6 +12912,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12839
12912
  inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
12840
12913
  transform: translate(-50%, -50%);
12841
12914
  }
12915
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer__splitter-handle {
12916
+ transform: translate(calc(-50% * var(--pf-v5-global--inverse--multiplier)), -50%);
12917
+ }
12918
+
12842
12919
  .pf-v5-c-drawer__splitter-handle::after {
12843
12920
  display: block;
12844
12921
  width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
@@ -13044,6 +13121,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13044
13121
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13045
13122
  transform: translateX(100%);
13046
13123
  }
13124
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13125
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13126
+ }
13047
13127
  .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13048
13128
  margin-inline-start: 0;
13049
13129
  transform: translateX(0);
@@ -13056,6 +13136,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13056
13136
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13057
13137
  transform: translateX(-100%);
13058
13138
  }
13139
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13140
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13141
+ }
13059
13142
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13060
13143
  margin-inline-end: 0;
13061
13144
  transform: translateX(0);
@@ -13105,6 +13188,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13105
13188
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13106
13189
  transform: translateX(100%);
13107
13190
  }
13191
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13192
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13193
+ }
13108
13194
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13109
13195
  margin-inline-start: 0;
13110
13196
  transform: translateX(0);
@@ -13117,6 +13203,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13117
13203
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13118
13204
  transform: translateX(-100%);
13119
13205
  }
13206
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13207
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13208
+ }
13120
13209
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13121
13210
  margin-inline-end: 0;
13122
13211
  transform: translateX(0);
@@ -13166,6 +13255,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13166
13255
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13167
13256
  transform: translateX(100%);
13168
13257
  }
13258
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13259
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13260
+ }
13169
13261
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13170
13262
  margin-inline-start: 0;
13171
13263
  transform: translateX(0);
@@ -13178,6 +13270,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13178
13270
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13179
13271
  transform: translateX(-100%);
13180
13272
  }
13273
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13274
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13275
+ }
13181
13276
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13182
13277
  margin-inline-end: 0;
13183
13278
  transform: translateX(0);
@@ -13227,6 +13322,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13227
13322
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13228
13323
  transform: translateX(100%);
13229
13324
  }
13325
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13326
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13327
+ }
13230
13328
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13231
13329
  margin-inline-start: 0;
13232
13330
  transform: translateX(0);
@@ -13239,6 +13337,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13239
13337
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13240
13338
  transform: translateX(-100%);
13241
13339
  }
13340
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13341
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13342
+ }
13242
13343
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13243
13344
  margin-inline-end: 0;
13244
13345
  transform: translateX(0);
@@ -14214,6 +14315,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14214
14315
  transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
14215
14316
  transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
14216
14317
  }
14318
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
14319
+ scale: -1 1;
14320
+ }
14321
+
14217
14322
  .pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
14218
14323
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
14219
14324
  }
@@ -14749,6 +14854,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14749
14854
  transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
14750
14855
  transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
14751
14856
  }
14857
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
14858
+ scale: -1 1;
14859
+ }
14752
14860
 
14753
14861
  .pf-v5-c-form__field-group-header {
14754
14862
  display: flex;
@@ -15816,6 +15924,9 @@ label.pf-v5-c-input-group__text {
15816
15924
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15817
15925
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15818
15926
  }
15927
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
15928
+ scale: -1 1;
15929
+ }
15819
15930
 
15820
15931
  .pf-v5-c-jump-links__toggle-text {
15821
15932
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -17818,6 +17929,10 @@ ul.pf-v5-c-list {
17818
17929
  .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17819
17930
  transform: translateX(-100%);
17820
17931
  }
17932
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17933
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
17934
+ }
17935
+
17821
17936
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
17822
17937
  --pf-v5-c-menu--BoxShadow: none;
17823
17938
  position: absolute;
@@ -17829,6 +17944,10 @@ ul.pf-v5-c-list {
17829
17944
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
17830
17945
  transform: translateX(-100%);
17831
17946
  }
17947
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
17948
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
17949
+ }
17950
+
17832
17951
  .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
17833
17952
  position: relative;
17834
17953
  overflow: hidden;
@@ -18128,6 +18247,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18128
18247
  padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
18129
18248
  color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
18130
18249
  }
18250
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
18251
+ scale: -1 1;
18252
+ }
18131
18253
 
18132
18254
  .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
18133
18255
  margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
@@ -19451,6 +19573,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19451
19573
  .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19452
19574
  margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
19453
19575
  }
19576
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19577
+ scale: -1 1;
19578
+ }
19579
+
19454
19580
  .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
19455
19581
  content: none;
19456
19582
  }
@@ -19894,6 +20020,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19894
20020
  display: inline-block;
19895
20021
  transition: var(--pf-v5-c-nav__toggle-icon--Transition);
19896
20022
  }
20023
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
20024
+ scale: -1 1;
20025
+ }
20026
+
19897
20027
  .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
19898
20028
  transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
19899
20029
  }
@@ -19949,6 +20079,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19949
20079
  opacity: 0;
19950
20080
  transition: var(--pf-v5-c-nav__scroll-button--Transition);
19951
20081
  }
20082
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
20083
+ scale: -1 1;
20084
+ }
20085
+
19952
20086
  .pf-v5-c-nav__scroll-button::before {
19953
20087
  position: absolute;
19954
20088
  inset-block-start: 0;
@@ -19976,6 +20110,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19976
20110
  margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
19977
20111
  transform: translateX(-100%);
19978
20112
  }
20113
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
20114
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
20115
+ }
20116
+
19979
20117
  .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
19980
20118
  inset-inline-end: 0;
19981
20119
  }
@@ -19984,6 +20122,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19984
20122
  margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
19985
20123
  transform: translateX(100%);
19986
20124
  }
20125
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
20126
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
20127
+ }
20128
+
19987
20129
  .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
19988
20130
  inset-inline-start: 0;
19989
20131
  }
@@ -20418,6 +20560,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20418
20560
  color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
20419
20561
  transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
20420
20562
  }
20563
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
20564
+ scale: -1 1;
20565
+ }
20566
+
20421
20567
  .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
20422
20568
  transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
20423
20569
  }
@@ -21119,6 +21265,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21119
21265
  transition: var(--pf-v5-c-page__sidebar--Transition);
21120
21266
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21121
21267
  }
21268
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
21269
+ transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21270
+ }
21271
+
21122
21272
  .pf-v5-c-page__sidebar.pf-m-expanded {
21123
21273
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
21124
21274
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
@@ -21966,6 +22116,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21966
22116
  justify-content: flex-end;
21967
22117
  }
21968
22118
 
22119
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
22120
+ scale: -1 1;
22121
+ }
22122
+
21969
22123
  .pf-v5-c-pagination__nav-control .pf-v5-c-button {
21970
22124
  padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
21971
22125
  padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
@@ -22346,39 +22500,61 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22346
22500
  --pf-v5-c-popover--MinWidth: auto;
22347
22501
  --pf-v5-c-popover--MaxWidth: none;
22348
22502
  }
22349
- .pf-v5-c-popover.pf-m-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow {
22350
- inset-block-end: 0;
22351
- inset-inline-start: 50%;
22352
- 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));
22353
- }
22354
- .pf-v5-c-popover.pf-m-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
22355
- inset-block-start: 0;
22356
- inset-inline-start: 50%;
22357
- 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));
22358
- }
22359
- .pf-v5-c-popover.pf-m-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow {
22360
- inset-block-start: 50%;
22361
- inset-inline-end: 0;
22362
- 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));
22363
- }
22364
- .pf-v5-c-popover.pf-m-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
22365
- inset-block-start: 50%;
22366
- inset-inline-start: 0;
22367
- 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));
22368
- }
22369
- .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow {
22370
- inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22371
- }
22372
- .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
22373
- inset-block-start: auto;
22374
- inset-block-end: 0;
22375
- }
22376
- .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow {
22377
- inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22378
- }
22379
- .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
22380
- inset-inline-start: auto;
22381
- inset-inline-end: 0;
22503
+ .pf-v5-c-popover:is(.pf-m-top,
22504
+ .pf-m-top-left,
22505
+ .pf-m-top-right) {
22506
+ --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover--m-top--Bottom, 0);
22507
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-top--Left, 50%);
22508
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-top--TranslateX);
22509
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
22510
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-top--Rotate);
22511
+ }
22512
+ .pf-v5-c-popover:is(.pf-m-bottom,
22513
+ .pf-m-bottom-left,
22514
+ .pf-m-bottom-right) {
22515
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-bottom--Top, 0);
22516
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-bottom--Left, 50%);
22517
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-bottom--TranslateX);
22518
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-bottom--TranslateY);
22519
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-bottom--Rotate);
22520
+ }
22521
+ .pf-v5-c-popover:is(.pf-m-left,
22522
+ .pf-m-left-top,
22523
+ .pf-m-left-bottom) {
22524
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-left--Top, 50%);
22525
+ --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover--m-left--Right, 0);
22526
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
22527
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-left--TranslateY);
22528
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-left--Rotate);
22529
+ }
22530
+ .pf-v5-c-popover:is(.pf-m-right,
22531
+ .pf-m-right-top,
22532
+ .pf-m-right-bottom) {
22533
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-right--Top, 50%);
22534
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-right--Left, 0);
22535
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-right--TranslateX);
22536
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-right--TranslateY);
22537
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-right--Rotate);
22538
+ }
22539
+ .pf-v5-c-popover:is(.pf-m-left-top,
22540
+ .pf-m-right-top) {
22541
+ --pf-v5-c-popover__arrow--Top: 0;
22542
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
22543
+ }
22544
+ .pf-v5-c-popover:is(.pf-m-left-bottom,
22545
+ .pf-m-right-bottom) {
22546
+ --pf-v5-c-popover__arrow--Top: auto;
22547
+ --pf-v5-c-popover__arrow--Bottom: 0;
22548
+ }
22549
+ .pf-v5-c-popover:is(.pf-m-top-left,
22550
+ .pf-m-bottom-left) {
22551
+ --pf-v5-c-popover__arrow--Left: 0;
22552
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
22553
+ }
22554
+ .pf-v5-c-popover:is(.pf-m-top-right,
22555
+ .pf-m-bottom-right) {
22556
+ --pf-v5-c-popover__arrow--Right: 0;
22557
+ --pf-v5-c-popover__arrow--Left: auto;
22382
22558
  }
22383
22559
  .pf-v5-c-popover.pf-m-danger {
22384
22560
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -22421,11 +22597,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22421
22597
 
22422
22598
  .pf-v5-c-popover__arrow {
22423
22599
  position: absolute;
22600
+ /* stylelint-disable liberty/use-logical-spec */
22601
+ top: var(--pf-v5-c-popover__arrow--Top, auto);
22602
+ right: var(--pf-v5-c-popover__arrow--Right, auto);
22603
+ bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
22604
+ left: var(--pf-v5-c-popover__arrow--Left, auto);
22605
+ /* stylelint-enable */
22424
22606
  width: var(--pf-v5-c-popover__arrow--Width);
22425
22607
  height: var(--pf-v5-c-popover__arrow--Height);
22426
22608
  pointer-events: none;
22427
22609
  background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
22428
22610
  box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
22611
+ 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));
22429
22612
  }
22430
22613
 
22431
22614
  .pf-v5-c-popover__header {
@@ -22607,6 +22790,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22607
22790
  color: var(--pf-v5-c-progress__status-icon--Color);
22608
22791
  }
22609
22792
 
22793
+ .pf-v5-c-progress__bar::before,
22794
+ .pf-v5-c-progress__indicator {
22795
+ top: 0;
22796
+ left: 0;
22797
+ }
22798
+
22610
22799
  .pf-v5-c-progress__bar {
22611
22800
  position: relative;
22612
22801
  grid-row: 2/3;
@@ -22617,8 +22806,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22617
22806
  }
22618
22807
  .pf-v5-c-progress__bar::before {
22619
22808
  position: absolute;
22620
- inset-block-start: 0;
22621
- inset-inline-start: 0;
22622
22809
  width: 100%;
22623
22810
  height: 100%;
22624
22811
  content: "";
@@ -22628,8 +22815,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22628
22815
 
22629
22816
  .pf-v5-c-progress__indicator {
22630
22817
  position: absolute;
22631
- inset-block-start: 0;
22632
- inset-inline-start: 0;
22633
22818
  height: var(--pf-v5-c-progress__indicator--Height);
22634
22819
  background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
22635
22820
  }
@@ -24422,6 +24607,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24422
24607
  transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
24423
24608
  animation: var(--pf-v5-c-skeleton--after--AnimationName) var(--pf-v5-c-skeleton--after--AnimationDuration) var(--pf-v5-c-skeleton--after--AnimationTimingFunction) var(--pf-v5-c-skeleton--after--AnimationDelay) var(--pf-v5-c-skeleton--after--AnimationIterationCount);
24424
24609
  }
24610
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
24611
+ scale: -1 1;
24612
+ }
24613
+
24425
24614
  .pf-v5-c-skeleton.pf-m-circle {
24426
24615
  --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
24427
24616
  }
@@ -24542,6 +24731,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24542
24731
 
24543
24732
  .pf-v5-c-slider {
24544
24733
  --pf-v5-c-slider--value: 0;
24734
+ --pf-v5-c-slider__step--Left: 0;
24545
24735
  --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
24546
24736
  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
24547
24737
  --pf-v5-c-slider__rail-track--Height: 0.25rem;
@@ -24549,6 +24739,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24549
24739
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
24550
24740
  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
24551
24741
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
24742
+ --pf-v5-c-slider__rail-track--before--fill--direction: right;
24552
24743
  --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
24553
24744
  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
24554
24745
  --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
@@ -24600,6 +24791,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24600
24791
  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
24601
24792
  display: flex;
24602
24793
  }
24794
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
24795
+ --pf-v5-c-slider__rail-track--before--fill--direction: left;
24796
+ }
24797
+
24603
24798
  .pf-v5-c-slider.pf-m-disabled {
24604
24799
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
24605
24800
  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -24631,7 +24826,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24631
24826
  position: absolute;
24632
24827
  inset: 0;
24633
24828
  content: "";
24634
- background: linear-gradient(to right, var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
24829
+ background: linear-gradient(to var(--pf-v5-c-slider__rail-track--before--fill--direction), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
24635
24830
  border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
24636
24831
  }
24637
24832
 
@@ -24660,6 +24855,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24660
24855
  }
24661
24856
 
24662
24857
  .pf-v5-c-slider__step-tick {
24858
+ transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
24663
24859
  position: absolute;
24664
24860
  inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
24665
24861
  inset-inline-start: 0;
@@ -24667,17 +24863,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24667
24863
  height: var(--pf-v5-c-slider__step-tick--Height);
24668
24864
  background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
24669
24865
  border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
24670
- transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
24866
+ }
24867
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
24868
+ transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
24671
24869
  }
24672
24870
 
24673
24871
  .pf-v5-c-slider__step-label {
24872
+ transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
24674
24873
  position: absolute;
24675
24874
  inset-block-start: var(--pf-v5-c-slider__step-label--Top);
24676
24875
  word-break: normal;
24677
- transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
24876
+ }
24877
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
24878
+ transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
24678
24879
  }
24679
24880
 
24680
24881
  .pf-v5-c-slider__thumb {
24882
+ transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
24681
24883
  position: absolute;
24682
24884
  inset-block-start: var(--pf-v5-c-slider__thumb--Top);
24683
24885
  inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
@@ -24687,9 +24889,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24687
24889
  background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
24688
24890
  border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
24689
24891
  box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
24690
- transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
24691
24892
  }
24893
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
24894
+ transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
24895
+ }
24896
+
24692
24897
  .pf-v5-c-slider__thumb::before {
24898
+ transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
24693
24899
  position: absolute;
24694
24900
  inset-block-start: 50%;
24695
24901
  inset-inline-start: 50%;
@@ -24697,8 +24903,11 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24697
24903
  height: var(--pf-v5-c-slider__thumb--before--Height);
24698
24904
  content: "";
24699
24905
  border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
24700
- transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
24701
24906
  }
24907
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
24908
+ transform: translate(calc(var(--pf-v5-c-slider__thumb--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--before--TranslateY));
24909
+ }
24910
+
24702
24911
  .pf-v5-c-slider__thumb:hover {
24703
24912
  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
24704
24913
  }
@@ -24714,13 +24923,17 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24714
24923
  margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
24715
24924
  }
24716
24925
  .pf-v5-c-slider__value.pf-m-floating {
24926
+ transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
24717
24927
  --pf-v5-c-slider__value--MarginLeft: 0;
24718
24928
  position: absolute;
24719
24929
  inset-block-start: 0;
24720
24930
  inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
24721
24931
  z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
24722
- transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
24723
24932
  }
24933
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
24934
+ transform: translate(calc(var(--pf-v5-c-slider__value--m-floating--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__value--m-floating--TranslateY));
24935
+ }
24936
+
24724
24937
  .pf-v5-c-slider__value .pf-v5-c-form-control {
24725
24938
  width: var(--pf-v5-c-slider__value--c-form-control--Width);
24726
24939
  }
@@ -24899,6 +25112,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
24899
25112
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
24900
25113
  transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
24901
25114
  }
25115
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
25116
+ transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
25117
+ }
25118
+
24902
25119
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
24903
25120
  display: none;
24904
25121
  }
@@ -27357,6 +27574,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27357
27574
  transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
27358
27575
  transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
27359
27576
  }
27577
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
27578
+ scale: -1 1;
27579
+ }
27580
+
27360
27581
  .pf-v5-c-table__toggle svg {
27361
27582
  pointer-events: none;
27362
27583
  }
@@ -27753,10 +27974,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27753
27974
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
27754
27975
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
27755
27976
  }
27756
- .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right {
27977
+ .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-end {
27757
27978
  --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
27758
27979
  }
27759
- .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left {
27980
+ .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-start {
27760
27981
  --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
27761
27982
  }
27762
27983
 
@@ -27846,10 +28067,14 @@ svg.pf-v5-c-spinner.pf-m-xl {
27846
28067
  cursor: pointer;
27847
28068
  }
27848
28069
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
28070
+ transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
27849
28071
  position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
27850
28072
  inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
27851
- transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
27852
28073
  }
28074
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
28075
+ transform: translateX(calc(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
28076
+ }
28077
+
27853
28078
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
27854
28079
  min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
27855
28080
  }
@@ -29000,6 +29225,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29000
29225
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29001
29226
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29002
29227
  }
29228
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29229
+ scale: -1 1;
29230
+ }
29003
29231
 
29004
29232
  .pf-v5-c-tabs__toggle-text {
29005
29233
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29174,6 +29402,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29174
29402
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29175
29403
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29176
29404
  }
29405
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29406
+ scale: -1 1;
29407
+ }
29177
29408
 
29178
29409
  .pf-v5-c-tabs__item-action {
29179
29410
  display: flex;
@@ -29205,6 +29436,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29205
29436
  opacity: 0;
29206
29437
  transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
29207
29438
  }
29439
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29440
+ scale: -1 1;
29441
+ }
29442
+
29208
29443
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29209
29444
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29210
29445
  }
@@ -30010,39 +30245,61 @@ svg.pf-v5-c-spinner.pf-m-xl {
30010
30245
  max-width: var(--pf-v5-c-tooltip--MaxWidth);
30011
30246
  box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
30012
30247
  }
30013
- .pf-v5-c-tooltip.pf-m-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow {
30014
- inset-block-end: 0;
30015
- inset-inline-start: 50%;
30016
- 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));
30017
- }
30018
- .pf-v5-c-tooltip.pf-m-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
30019
- inset-block-start: 0;
30020
- inset-inline-start: 50%;
30021
- 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));
30022
- }
30023
- .pf-v5-c-tooltip.pf-m-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow {
30024
- inset-block-start: 50%;
30025
- inset-inline-end: 0;
30026
- 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));
30027
- }
30028
- .pf-v5-c-tooltip.pf-m-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
30029
- inset-block-start: 50%;
30030
- inset-inline-start: 0;
30031
- 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));
30032
- }
30033
- .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow {
30034
- inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30035
- }
30036
- .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
30037
- inset-block-start: auto;
30038
- inset-block-end: 0;
30039
- }
30040
- .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow {
30041
- inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30042
- }
30043
- .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
30044
- inset-inline-start: auto;
30045
- inset-inline-end: 0;
30248
+ .pf-v5-c-tooltip:is(.pf-m-top,
30249
+ .pf-m-top-left,
30250
+ .pf-m-top-right) {
30251
+ --pf-v5-c-tooltip__arrow--Bottom: var(--pf-v5-c-tooltip--m-top--Bottom, 0);
30252
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-top--Left, 50%);
30253
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-top--TranslateX);
30254
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
30255
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-top--Rotate);
30256
+ }
30257
+ .pf-v5-c-tooltip:is(.pf-m-bottom,
30258
+ .pf-m-bottom-left,
30259
+ .pf-m-bottom-right) {
30260
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-bottom--Top, 0);
30261
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-bottom--Left, 50%);
30262
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX);
30263
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY);
30264
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate);
30265
+ }
30266
+ .pf-v5-c-tooltip:is(.pf-m-left,
30267
+ .pf-m-left-top,
30268
+ .pf-m-left-bottom) {
30269
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-left--Top, 50%);
30270
+ --pf-v5-c-tooltip__arrow--Right: var(--pf-v5-c-tooltip--m-left--Right, 0);
30271
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
30272
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-left--TranslateY);
30273
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-left--Rotate);
30274
+ }
30275
+ .pf-v5-c-tooltip:is(.pf-m-right,
30276
+ .pf-m-right-top,
30277
+ .pf-m-right-bottom) {
30278
+ --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-right--Top, 50%);
30279
+ --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-right--Left, 0);
30280
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-right--TranslateX);
30281
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-right--TranslateY);
30282
+ --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-right--Rotate);
30283
+ }
30284
+ .pf-v5-c-tooltip:is(.pf-m-left-top,
30285
+ .pf-m-right-top) {
30286
+ --pf-v5-c-tooltip__arrow--Top: 0;
30287
+ --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
30288
+ }
30289
+ .pf-v5-c-tooltip:is(.pf-m-left-bottom,
30290
+ .pf-m-right-bottom) {
30291
+ --pf-v5-c-tooltip__arrow--Top: auto;
30292
+ --pf-v5-c-tooltip__arrow--Bottom: 0;
30293
+ }
30294
+ .pf-v5-c-tooltip:is(.pf-m-top-left,
30295
+ .pf-m-bottom-left) {
30296
+ --pf-v5-c-tooltip__arrow--Left: 0;
30297
+ --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
30298
+ }
30299
+ .pf-v5-c-tooltip:is(.pf-m-top-right,
30300
+ .pf-m-bottom-right) {
30301
+ --pf-v5-c-tooltip__arrow--Right: 0;
30302
+ --pf-v5-c-tooltip__arrow--Left: auto;
30046
30303
  }
30047
30304
 
30048
30305
  .pf-v5-c-tooltip__content {
@@ -30063,11 +30320,18 @@ svg.pf-v5-c-spinner.pf-m-xl {
30063
30320
 
30064
30321
  .pf-v5-c-tooltip__arrow {
30065
30322
  position: absolute;
30323
+ /* stylelint-disable liberty/use-logical-spec */
30324
+ top: var(--pf-v5-c-tooltip__arrow--Top, auto);
30325
+ right: var(--pf-v5-c-tooltip__arrow--Right, auto);
30326
+ bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
30327
+ left: var(--pf-v5-c-tooltip__arrow--Left, auto);
30328
+ /* stylelint-enable */
30066
30329
  width: var(--pf-v5-c-tooltip__arrow--Width);
30067
30330
  height: var(--pf-v5-c-tooltip__arrow--Height);
30068
30331
  pointer-events: none;
30069
30332
  background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
30070
30333
  box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
30334
+ 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));
30071
30335
  }
30072
30336
 
30073
30337
  :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,
@@ -30105,16 +30369,25 @@ svg.pf-v5-c-spinner.pf-m-xl {
30105
30369
  .pf-v5-c-truncate__end {
30106
30370
  direction: rtl;
30107
30371
  }
30372
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30373
+ direction: ltr;
30374
+ }
30108
30375
 
30109
30376
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30110
30377
  overflow: visible;
30111
30378
  direction: ltr;
30112
30379
  }
30380
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30381
+ direction: rtl;
30382
+ }
30113
30383
 
30114
30384
  @supports (-webkit-hyphens: none) {
30115
30385
  .pf-v5-c-truncate__end {
30116
30386
  direction: ltr;
30117
30387
  }
30388
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30389
+ direction: rtl;
30390
+ }
30118
30391
  }
30119
30392
  .pf-v5-c-number-input {
30120
30393
  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
@@ -30383,6 +30656,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
30383
30656
  transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
30384
30657
  transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
30385
30658
  }
30659
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
30660
+ scale: -1 1;
30661
+ }
30386
30662
 
30387
30663
  .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
30388
30664
  --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -30472,6 +30748,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
30472
30748
  border: 0;
30473
30749
  transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
30474
30750
  }
30751
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
30752
+ transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
30753
+ }
30475
30754
 
30476
30755
  .pf-v5-c-tree-view__node-title.pf-m-truncate,
30477
30756
  .pf-v5-c-tree-view__node-text.pf-m-truncate {
@@ -30918,6 +31197,9 @@ label.pf-v5-c-tree-view__node-text {
30918
31197
  margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
30919
31198
  color: var(--pf-v5-c-wizard__toggle-separator--Color);
30920
31199
  }
31200
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
31201
+ scale: -1 1;
31202
+ }
30921
31203
 
30922
31204
  .pf-v5-c-wizard__toggle-icon {
30923
31205
  line-height: var(--pf-v5-c-wizard__toggle-icon--LineHeight);
@@ -31022,6 +31304,7 @@ label.pf-v5-c-tree-view__node-text {
31022
31304
  border: 0;
31023
31305
  }
31024
31306
  .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
31307
+ transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
31025
31308
  position: absolute;
31026
31309
  inset-block-start: var(--pf-v5-c-wizard__nav-link--before--Top);
31027
31310
  inset-inline-start: 0;
@@ -31035,7 +31318,9 @@ label.pf-v5-c-tree-view__node-text {
31035
31318
  color: var(--pf-v5-c-wizard__nav-link--before--Color);
31036
31319
  background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
31037
31320
  border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
31038
- transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
31321
+ }
31322
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
31323
+ transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
31039
31324
  }
31040
31325
 
31041
31326
  .pf-v5-c-wizard__nav-link::before {
@@ -31084,6 +31369,9 @@ label.pf-v5-c-tree-view__node-text {
31084
31369
  transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
31085
31370
  transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
31086
31371
  }
31372
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
31373
+ scale: -1 1;
31374
+ }
31087
31375
 
31088
31376
  .pf-v5-c-wizard__main {
31089
31377
  z-index: var(--pf-v5-c-wizard__main--ZIndex);