@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
package/patternfly.css CHANGED
@@ -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(html,
559
578
  body,
560
579
  p,
@@ -5447,6 +5466,7 @@ button) {
5447
5466
  --pf-v5-c-about-modal-box--Width: 100%;
5448
5467
  --pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
5449
5468
  --pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
5469
+ --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
5450
5470
  --pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-v5-global--spacer--2xl);
5451
5471
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-global--spacer--xl);
5452
5472
  --pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-global--spacer--xl);
@@ -5499,6 +5519,10 @@ button) {
5499
5519
  background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
5500
5520
  background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
5501
5521
  }
5522
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box {
5523
+ --pf-v5-c-about-modal-box--BackgroundPosition: bottom left;
5524
+ }
5525
+
5502
5526
  @media screen and (min-width: 576px) {
5503
5527
  .pf-v5-c-about-modal-box {
5504
5528
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);
@@ -5838,6 +5862,9 @@ button) {
5838
5862
  .pf-v5-c-accordion__toggle-icon {
5839
5863
  transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
5840
5864
  }
5865
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
5866
+ scale: -1 1;
5867
+ }
5841
5868
 
5842
5869
  .pf-v5-c-accordion__expandable-content {
5843
5870
  font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
@@ -6061,6 +6088,9 @@ button) {
6061
6088
  transition: var(--pf-v5-c-alert__toggle-icon--Transition);
6062
6089
  transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
6063
6090
  }
6091
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
6092
+ scale: -1 1;
6093
+ }
6064
6094
 
6065
6095
  .pf-v5-c-alert__icon {
6066
6096
  display: flex;
@@ -6714,11 +6744,11 @@ button) {
6714
6744
  .pf-v5-c-background-image {
6715
6745
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6716
6746
  --pf-v5-c-background-image--BackgroundImage: none;
6717
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
6718
6747
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6719
6748
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
6720
6749
  --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
6721
6750
  --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));
6751
+ --pf-v5-c-background-image--BackgroundPosition: bottom right;
6722
6752
  position: fixed;
6723
6753
  inset-block-start: 0;
6724
6754
  inset-inline-start: 0;
@@ -6731,6 +6761,9 @@ button) {
6731
6761
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6732
6762
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
6733
6763
  }
6764
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
6765
+ --pf-v5-c-background-image--BackgroundPosition: bottom left;
6766
+ }
6734
6767
 
6735
6768
  .pf-v5-c-back-to-top {
6736
6769
  --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
@@ -6906,9 +6939,6 @@ button) {
6906
6939
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
6907
6940
  }
6908
6941
 
6909
- :where(.pf-v5-theme-dark) .pf-v5-c-banner {
6910
- color: var(false);
6911
- }
6912
6942
  :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 {
6913
6943
  --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
6914
6944
  }
@@ -7023,6 +7053,9 @@ button) {
7023
7053
  line-height: 1;
7024
7054
  color: var(--pf-v5-c-breadcrumb__item-divider--Color);
7025
7055
  }
7056
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
7057
+ scale: -1 1;
7058
+ }
7026
7059
 
7027
7060
  .pf-v5-c-breadcrumb__link {
7028
7061
  font-size: inherit;
@@ -7506,6 +7539,9 @@ button.pf-v5-c-breadcrumb__link {
7506
7539
  color: var(--pf-v5-c-button--m-plain--Color);
7507
7540
  background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
7508
7541
  }
7542
+ .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
7543
+ padding: 0;
7544
+ }
7509
7545
  .pf-v5-c-button.pf-m-plain:hover {
7510
7546
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
7511
7547
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
@@ -7709,6 +7745,10 @@ button.pf-v5-c-breadcrumb__link {
7709
7745
  margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
7710
7746
  margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
7711
7747
  }
7748
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
7749
+ scale: -1 1;
7750
+ }
7751
+
7712
7752
  .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
7713
7753
  --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
7714
7754
  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
@@ -7901,7 +7941,7 @@ button.pf-v5-c-breadcrumb__link {
7901
7941
  --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7902
7942
  --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7903
7943
  --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7904
- --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-v5-global--BorderColor--100);
7944
+ --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
7905
7945
  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7906
7946
  --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
7907
7947
  --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);
@@ -8135,6 +8175,9 @@ button.pf-v5-c-breadcrumb__link {
8135
8175
  display: inline-block;
8136
8176
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8137
8177
  }
8178
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8179
+ scale: -1 1;
8180
+ }
8138
8181
 
8139
8182
  .pf-v5-c-card__title-text {
8140
8183
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -8600,6 +8643,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
8600
8643
  .pf-v5-c-clipboard-copy__toggle-icon {
8601
8644
  transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
8602
8645
  }
8646
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
8647
+ scale: -1 1;
8648
+ }
8603
8649
 
8604
8650
  .pf-v5-c-clipboard-copy__expandable-content {
8605
8651
  padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);
@@ -10207,6 +10253,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10207
10253
  transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
10208
10254
  transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
10209
10255
  }
10256
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
10257
+ scale: -1 1;
10258
+ }
10210
10259
 
10211
10260
  .pf-v5-c-data-list__item-content {
10212
10261
  display: grid;
@@ -10823,11 +10872,15 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10823
10872
  --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: 0;
10824
10873
  }
10825
10874
  .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
10875
+ transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
10826
10876
  position: absolute;
10827
10877
  inset-block-start: 0;
10828
10878
  inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
10829
- transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
10830
10879
  }
10880
+ :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 {
10881
+ transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
10882
+ }
10883
+
10831
10884
  .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
10832
10885
  overflow-anchor: none;
10833
10886
  }
@@ -10926,6 +10979,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10926
10979
  padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
10927
10980
  }
10928
10981
 
10982
+ :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) {
10983
+ scale: -1 1;
10984
+ }
10985
+
10929
10986
  .pf-v5-c-dual-list-selector__item-main {
10930
10987
  display: flex;
10931
10988
  min-width: 0;
@@ -12689,9 +12746,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12689
12746
  --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
12690
12747
  --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
12691
12748
  --pf-v5-c-drawer__panel--BoxShadow: none;
12749
+ --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
12692
12750
  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
12693
12751
  --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
12694
- --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
12695
12752
  --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
12696
12753
  --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
12697
12754
  --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
@@ -12725,6 +12782,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12725
12782
  --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
12726
12783
  }
12727
12784
  }
12785
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
12786
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
12787
+ }
12788
+
12789
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
12790
+ --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
12791
+ }
12792
+
12728
12793
  .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) {
12729
12794
  padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
12730
12795
  }
@@ -12733,6 +12798,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12733
12798
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
12734
12799
  transform: translateX(-100%);
12735
12800
  }
12801
+ :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 {
12802
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
12803
+ }
12804
+
12736
12805
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
12737
12806
  order: 1;
12738
12807
  }
@@ -12742,6 +12811,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12742
12811
  .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12743
12812
  transform: translateX(-100%);
12744
12813
  }
12814
+ :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 {
12815
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
12816
+ }
12817
+
12745
12818
  .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12746
12819
  transform: translateX(0);
12747
12820
  }
@@ -12956,6 +13029,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12956
13029
  inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
12957
13030
  transform: translate(-50%, -50%);
12958
13031
  }
13032
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer__splitter-handle {
13033
+ transform: translate(calc(-50% * var(--pf-v5-global--inverse--multiplier)), -50%);
13034
+ }
13035
+
12959
13036
  .pf-v5-c-drawer__splitter-handle::after {
12960
13037
  display: block;
12961
13038
  width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
@@ -13161,6 +13238,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13161
13238
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13162
13239
  transform: translateX(100%);
13163
13240
  }
13241
+ :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 {
13242
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13243
+ }
13164
13244
  .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13165
13245
  margin-inline-start: 0;
13166
13246
  transform: translateX(0);
@@ -13173,6 +13253,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13173
13253
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13174
13254
  transform: translateX(-100%);
13175
13255
  }
13256
+ :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 {
13257
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13258
+ }
13176
13259
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13177
13260
  margin-inline-end: 0;
13178
13261
  transform: translateX(0);
@@ -13222,6 +13305,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13222
13305
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13223
13306
  transform: translateX(100%);
13224
13307
  }
13308
+ :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 {
13309
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13310
+ }
13225
13311
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13226
13312
  margin-inline-start: 0;
13227
13313
  transform: translateX(0);
@@ -13234,6 +13320,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13234
13320
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13235
13321
  transform: translateX(-100%);
13236
13322
  }
13323
+ :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 {
13324
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13325
+ }
13237
13326
  .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 {
13238
13327
  margin-inline-end: 0;
13239
13328
  transform: translateX(0);
@@ -13283,6 +13372,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13283
13372
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13284
13373
  transform: translateX(100%);
13285
13374
  }
13375
+ :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 {
13376
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13377
+ }
13286
13378
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13287
13379
  margin-inline-start: 0;
13288
13380
  transform: translateX(0);
@@ -13295,6 +13387,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13295
13387
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13296
13388
  transform: translateX(-100%);
13297
13389
  }
13390
+ :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 {
13391
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13392
+ }
13298
13393
  .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 {
13299
13394
  margin-inline-end: 0;
13300
13395
  transform: translateX(0);
@@ -13344,6 +13439,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13344
13439
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13345
13440
  transform: translateX(100%);
13346
13441
  }
13442
+ :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 {
13443
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
13444
+ }
13347
13445
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13348
13446
  margin-inline-start: 0;
13349
13447
  transform: translateX(0);
@@ -13356,6 +13454,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13356
13454
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13357
13455
  transform: translateX(-100%);
13358
13456
  }
13457
+ :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 {
13458
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
13459
+ }
13359
13460
  .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 {
13360
13461
  margin-inline-end: 0;
13361
13462
  transform: translateX(0);
@@ -14331,6 +14432,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14331
14432
  transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
14332
14433
  transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
14333
14434
  }
14435
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
14436
+ scale: -1 1;
14437
+ }
14438
+
14334
14439
  .pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
14335
14440
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
14336
14441
  }
@@ -14866,6 +14971,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14866
14971
  transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
14867
14972
  transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
14868
14973
  }
14974
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
14975
+ scale: -1 1;
14976
+ }
14869
14977
 
14870
14978
  .pf-v5-c-form__field-group-header {
14871
14979
  display: flex;
@@ -15933,6 +16041,9 @@ label.pf-v5-c-input-group__text {
15933
16041
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15934
16042
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15935
16043
  }
16044
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
16045
+ scale: -1 1;
16046
+ }
15936
16047
 
15937
16048
  .pf-v5-c-jump-links__toggle-text {
15938
16049
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -17935,6 +18046,10 @@ ul.pf-v5-c-list {
17935
18046
  .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17936
18047
  transform: translateX(-100%);
17937
18048
  }
18049
+ :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 {
18050
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
18051
+ }
18052
+
17938
18053
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
17939
18054
  --pf-v5-c-menu--BoxShadow: none;
17940
18055
  position: absolute;
@@ -17946,6 +18061,10 @@ ul.pf-v5-c-list {
17946
18061
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
17947
18062
  transform: translateX(-100%);
17948
18063
  }
18064
+ :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 {
18065
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
18066
+ }
18067
+
17949
18068
  .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
17950
18069
  position: relative;
17951
18070
  overflow: hidden;
@@ -18245,6 +18364,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18245
18364
  padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
18246
18365
  color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
18247
18366
  }
18367
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
18368
+ scale: -1 1;
18369
+ }
18248
18370
 
18249
18371
  .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
18250
18372
  margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
@@ -19568,6 +19690,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19568
19690
  .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19569
19691
  margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
19570
19692
  }
19693
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19694
+ scale: -1 1;
19695
+ }
19696
+
19571
19697
  .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 {
19572
19698
  content: none;
19573
19699
  }
@@ -20011,6 +20137,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20011
20137
  display: inline-block;
20012
20138
  transition: var(--pf-v5-c-nav__toggle-icon--Transition);
20013
20139
  }
20140
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
20141
+ scale: -1 1;
20142
+ }
20143
+
20014
20144
  .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
20015
20145
  transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
20016
20146
  }
@@ -20066,6 +20196,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20066
20196
  opacity: 0;
20067
20197
  transition: var(--pf-v5-c-nav__scroll-button--Transition);
20068
20198
  }
20199
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
20200
+ scale: -1 1;
20201
+ }
20202
+
20069
20203
  .pf-v5-c-nav__scroll-button::before {
20070
20204
  position: absolute;
20071
20205
  inset-block-start: 0;
@@ -20093,6 +20227,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20093
20227
  margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20094
20228
  transform: translateX(-100%);
20095
20229
  }
20230
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
20231
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
20232
+ }
20233
+
20096
20234
  .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
20097
20235
  inset-inline-end: 0;
20098
20236
  }
@@ -20101,6 +20239,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20101
20239
  margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20102
20240
  transform: translateX(100%);
20103
20241
  }
20242
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
20243
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
20244
+ }
20245
+
20104
20246
  .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
20105
20247
  inset-inline-start: 0;
20106
20248
  }
@@ -20535,6 +20677,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20535
20677
  color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
20536
20678
  transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
20537
20679
  }
20680
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
20681
+ scale: -1 1;
20682
+ }
20683
+
20538
20684
  .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
20539
20685
  transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
20540
20686
  }
@@ -21236,6 +21382,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21236
21382
  transition: var(--pf-v5-c-page__sidebar--Transition);
21237
21383
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21238
21384
  }
21385
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
21386
+ transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21387
+ }
21388
+
21239
21389
  .pf-v5-c-page__sidebar.pf-m-expanded {
21240
21390
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
21241
21391
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
@@ -22083,6 +22233,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22083
22233
  justify-content: flex-end;
22084
22234
  }
22085
22235
 
22236
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
22237
+ scale: -1 1;
22238
+ }
22239
+
22086
22240
  .pf-v5-c-pagination__nav-control .pf-v5-c-button {
22087
22241
  padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
22088
22242
  padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
@@ -22463,39 +22617,61 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22463
22617
  --pf-v5-c-popover--MinWidth: auto;
22464
22618
  --pf-v5-c-popover--MaxWidth: none;
22465
22619
  }
22466
- .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 {
22467
- inset-block-end: 0;
22468
- inset-inline-start: 50%;
22469
- 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));
22470
- }
22471
- .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 {
22472
- inset-block-start: 0;
22473
- inset-inline-start: 50%;
22474
- 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));
22475
- }
22476
- .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 {
22477
- inset-block-start: 50%;
22478
- inset-inline-end: 0;
22479
- 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));
22480
- }
22481
- .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 {
22482
- inset-block-start: 50%;
22483
- inset-inline-start: 0;
22484
- 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));
22485
- }
22486
- .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 {
22487
- inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22488
- }
22489
- .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 {
22490
- inset-block-start: auto;
22491
- inset-block-end: 0;
22492
- }
22493
- .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 {
22494
- inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22495
- }
22496
- .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 {
22497
- inset-inline-start: auto;
22498
- inset-inline-end: 0;
22620
+ .pf-v5-c-popover:is(.pf-m-top,
22621
+ .pf-m-top-left,
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);
22628
+ }
22629
+ .pf-v5-c-popover:is(.pf-m-bottom,
22630
+ .pf-m-bottom-left,
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);
22637
+ }
22638
+ .pf-v5-c-popover:is(.pf-m-left,
22639
+ .pf-m-left-top,
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);
22646
+ }
22647
+ .pf-v5-c-popover:is(.pf-m-right,
22648
+ .pf-m-right-top,
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);
22655
+ }
22656
+ .pf-v5-c-popover:is(.pf-m-left-top,
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);
22660
+ }
22661
+ .pf-v5-c-popover:is(.pf-m-left-bottom,
22662
+ .pf-m-right-bottom) {
22663
+ --pf-v5-c-popover__arrow--Top: auto;
22664
+ --pf-v5-c-popover__arrow--Bottom: 0;
22665
+ }
22666
+ .pf-v5-c-popover:is(.pf-m-top-left,
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);
22670
+ }
22671
+ .pf-v5-c-popover:is(.pf-m-top-right,
22672
+ .pf-m-bottom-right) {
22673
+ --pf-v5-c-popover__arrow--Right: 0;
22674
+ --pf-v5-c-popover__arrow--Left: auto;
22499
22675
  }
22500
22676
  .pf-v5-c-popover.pf-m-danger {
22501
22677
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -22538,11 +22714,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22538
22714
 
22539
22715
  .pf-v5-c-popover__arrow {
22540
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 */
22541
22723
  width: var(--pf-v5-c-popover__arrow--Width);
22542
22724
  height: var(--pf-v5-c-popover__arrow--Height);
22543
22725
  pointer-events: none;
22544
22726
  background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
22545
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));
22546
22729
  }
22547
22730
 
22548
22731
  .pf-v5-c-popover__header {
@@ -22724,6 +22907,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22724
22907
  color: var(--pf-v5-c-progress__status-icon--Color);
22725
22908
  }
22726
22909
 
22910
+ .pf-v5-c-progress__bar::before,
22911
+ .pf-v5-c-progress__indicator {
22912
+ top: 0;
22913
+ left: 0;
22914
+ }
22915
+
22727
22916
  .pf-v5-c-progress__bar {
22728
22917
  position: relative;
22729
22918
  grid-row: 2/3;
@@ -22734,8 +22923,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22734
22923
  }
22735
22924
  .pf-v5-c-progress__bar::before {
22736
22925
  position: absolute;
22737
- inset-block-start: 0;
22738
- inset-inline-start: 0;
22739
22926
  width: 100%;
22740
22927
  height: 100%;
22741
22928
  content: "";
@@ -22745,8 +22932,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22745
22932
 
22746
22933
  .pf-v5-c-progress__indicator {
22747
22934
  position: absolute;
22748
- inset-block-start: 0;
22749
- inset-inline-start: 0;
22750
22935
  height: var(--pf-v5-c-progress__indicator--Height);
22751
22936
  background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
22752
22937
  }
@@ -24539,6 +24724,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24539
24724
  transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
24540
24725
  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);
24541
24726
  }
24727
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
24728
+ scale: -1 1;
24729
+ }
24730
+
24542
24731
  .pf-v5-c-skeleton.pf-m-circle {
24543
24732
  --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
24544
24733
  }
@@ -24659,6 +24848,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24659
24848
 
24660
24849
  .pf-v5-c-slider {
24661
24850
  --pf-v5-c-slider--value: 0;
24851
+ --pf-v5-c-slider__step--Left: 0;
24662
24852
  --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
24663
24853
  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
24664
24854
  --pf-v5-c-slider__rail-track--Height: 0.25rem;
@@ -24666,6 +24856,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24666
24856
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
24667
24857
  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
24668
24858
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
24859
+ --pf-v5-c-slider__rail-track--before--fill--direction: right;
24669
24860
  --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
24670
24861
  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
24671
24862
  --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
@@ -24717,6 +24908,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24717
24908
  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
24718
24909
  display: flex;
24719
24910
  }
24911
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
24912
+ --pf-v5-c-slider__rail-track--before--fill--direction: left;
24913
+ }
24914
+
24720
24915
  .pf-v5-c-slider.pf-m-disabled {
24721
24916
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
24722
24917
  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -24748,7 +24943,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24748
24943
  position: absolute;
24749
24944
  inset: 0;
24750
24945
  content: "";
24751
- 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));
24946
+ 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));
24752
24947
  border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
24753
24948
  }
24754
24949
 
@@ -24777,6 +24972,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24777
24972
  }
24778
24973
 
24779
24974
  .pf-v5-c-slider__step-tick {
24975
+ transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
24780
24976
  position: absolute;
24781
24977
  inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
24782
24978
  inset-inline-start: 0;
@@ -24784,17 +24980,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24784
24980
  height: var(--pf-v5-c-slider__step-tick--Height);
24785
24981
  background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
24786
24982
  border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
24787
- transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
24983
+ }
24984
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
24985
+ transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
24788
24986
  }
24789
24987
 
24790
24988
  .pf-v5-c-slider__step-label {
24989
+ transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
24791
24990
  position: absolute;
24792
24991
  inset-block-start: var(--pf-v5-c-slider__step-label--Top);
24793
24992
  word-break: normal;
24794
- transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
24993
+ }
24994
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
24995
+ transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
24795
24996
  }
24796
24997
 
24797
24998
  .pf-v5-c-slider__thumb {
24999
+ transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
24798
25000
  position: absolute;
24799
25001
  inset-block-start: var(--pf-v5-c-slider__thumb--Top);
24800
25002
  inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
@@ -24804,9 +25006,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24804
25006
  background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
24805
25007
  border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
24806
25008
  box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
24807
- transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
24808
25009
  }
25010
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
25011
+ transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
25012
+ }
25013
+
24809
25014
  .pf-v5-c-slider__thumb::before {
25015
+ transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
24810
25016
  position: absolute;
24811
25017
  inset-block-start: 50%;
24812
25018
  inset-inline-start: 50%;
@@ -24814,8 +25020,11 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24814
25020
  height: var(--pf-v5-c-slider__thumb--before--Height);
24815
25021
  content: "";
24816
25022
  border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
24817
- transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
24818
25023
  }
25024
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
25025
+ 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));
25026
+ }
25027
+
24819
25028
  .pf-v5-c-slider__thumb:hover {
24820
25029
  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
24821
25030
  }
@@ -24831,13 +25040,17 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24831
25040
  margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
24832
25041
  }
24833
25042
  .pf-v5-c-slider__value.pf-m-floating {
25043
+ transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
24834
25044
  --pf-v5-c-slider__value--MarginLeft: 0;
24835
25045
  position: absolute;
24836
25046
  inset-block-start: 0;
24837
25047
  inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
24838
25048
  z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
24839
- transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
24840
25049
  }
25050
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
25051
+ 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));
25052
+ }
25053
+
24841
25054
  .pf-v5-c-slider__value .pf-v5-c-form-control {
24842
25055
  width: var(--pf-v5-c-slider__value--c-form-control--Width);
24843
25056
  }
@@ -25016,6 +25229,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
25016
25229
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
25017
25230
  transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
25018
25231
  }
25232
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
25233
+ transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
25234
+ }
25235
+
25019
25236
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
25020
25237
  display: none;
25021
25238
  }
@@ -27474,6 +27691,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27474
27691
  transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
27475
27692
  transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
27476
27693
  }
27694
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
27695
+ scale: -1 1;
27696
+ }
27697
+
27477
27698
  .pf-v5-c-table__toggle svg {
27478
27699
  pointer-events: none;
27479
27700
  }
@@ -27870,10 +28091,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27870
28091
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
27871
28092
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
27872
28093
  }
27873
- .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right {
28094
+ .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 {
27874
28095
  --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
27875
28096
  }
27876
- .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left {
28097
+ .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 {
27877
28098
  --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
27878
28099
  }
27879
28100
 
@@ -27963,10 +28184,14 @@ svg.pf-v5-c-spinner.pf-m-xl {
27963
28184
  cursor: pointer;
27964
28185
  }
27965
28186
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
28187
+ transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
27966
28188
  position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
27967
28189
  inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
27968
- transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
27969
28190
  }
28191
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
28192
+ transform: translateX(calc(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
28193
+ }
28194
+
27970
28195
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
27971
28196
  min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
27972
28197
  }
@@ -29117,6 +29342,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29117
29342
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29118
29343
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29119
29344
  }
29345
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29346
+ scale: -1 1;
29347
+ }
29120
29348
 
29121
29349
  .pf-v5-c-tabs__toggle-text {
29122
29350
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29291,6 +29519,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29291
29519
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29292
29520
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29293
29521
  }
29522
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29523
+ scale: -1 1;
29524
+ }
29294
29525
 
29295
29526
  .pf-v5-c-tabs__item-action {
29296
29527
  display: flex;
@@ -29322,6 +29553,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29322
29553
  opacity: 0;
29323
29554
  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);
29324
29555
  }
29556
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29557
+ scale: -1 1;
29558
+ }
29559
+
29325
29560
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29326
29561
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29327
29562
  }
@@ -30127,39 +30362,61 @@ svg.pf-v5-c-spinner.pf-m-xl {
30127
30362
  max-width: var(--pf-v5-c-tooltip--MaxWidth);
30128
30363
  box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
30129
30364
  }
30130
- .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 {
30131
- inset-block-end: 0;
30132
- inset-inline-start: 50%;
30133
- 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));
30134
- }
30135
- .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 {
30136
- inset-block-start: 0;
30137
- inset-inline-start: 50%;
30138
- 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));
30139
- }
30140
- .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 {
30141
- inset-block-start: 50%;
30142
- inset-inline-end: 0;
30143
- 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));
30144
- }
30145
- .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 {
30146
- inset-block-start: 50%;
30147
- inset-inline-start: 0;
30148
- 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));
30149
- }
30150
- .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 {
30151
- inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30152
- }
30153
- .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 {
30154
- inset-block-start: auto;
30155
- inset-block-end: 0;
30156
- }
30157
- .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 {
30158
- inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30159
- }
30160
- .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 {
30161
- inset-inline-start: auto;
30162
- inset-inline-end: 0;
30365
+ .pf-v5-c-tooltip:is(.pf-m-top,
30366
+ .pf-m-top-left,
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);
30373
+ }
30374
+ .pf-v5-c-tooltip:is(.pf-m-bottom,
30375
+ .pf-m-bottom-left,
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);
30382
+ }
30383
+ .pf-v5-c-tooltip:is(.pf-m-left,
30384
+ .pf-m-left-top,
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);
30391
+ }
30392
+ .pf-v5-c-tooltip:is(.pf-m-right,
30393
+ .pf-m-right-top,
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);
30400
+ }
30401
+ .pf-v5-c-tooltip:is(.pf-m-left-top,
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);
30405
+ }
30406
+ .pf-v5-c-tooltip:is(.pf-m-left-bottom,
30407
+ .pf-m-right-bottom) {
30408
+ --pf-v5-c-tooltip__arrow--Top: auto;
30409
+ --pf-v5-c-tooltip__arrow--Bottom: 0;
30410
+ }
30411
+ .pf-v5-c-tooltip:is(.pf-m-top-left,
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);
30415
+ }
30416
+ .pf-v5-c-tooltip:is(.pf-m-top-right,
30417
+ .pf-m-bottom-right) {
30418
+ --pf-v5-c-tooltip__arrow--Right: 0;
30419
+ --pf-v5-c-tooltip__arrow--Left: auto;
30163
30420
  }
30164
30421
 
30165
30422
  .pf-v5-c-tooltip__content {
@@ -30180,11 +30437,18 @@ svg.pf-v5-c-spinner.pf-m-xl {
30180
30437
 
30181
30438
  .pf-v5-c-tooltip__arrow {
30182
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 */
30183
30446
  width: var(--pf-v5-c-tooltip__arrow--Width);
30184
30447
  height: var(--pf-v5-c-tooltip__arrow--Height);
30185
30448
  pointer-events: none;
30186
30449
  background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
30187
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));
30188
30452
  }
30189
30453
 
30190
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,
@@ -30222,16 +30486,25 @@ svg.pf-v5-c-spinner.pf-m-xl {
30222
30486
  .pf-v5-c-truncate__end {
30223
30487
  direction: rtl;
30224
30488
  }
30489
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30490
+ direction: ltr;
30491
+ }
30225
30492
 
30226
30493
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30227
30494
  overflow: visible;
30228
30495
  direction: ltr;
30229
30496
  }
30497
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30498
+ direction: rtl;
30499
+ }
30230
30500
 
30231
30501
  @supports (-webkit-hyphens: none) {
30232
30502
  .pf-v5-c-truncate__end {
30233
30503
  direction: ltr;
30234
30504
  }
30505
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30506
+ direction: rtl;
30507
+ }
30235
30508
  }
30236
30509
  .pf-v5-c-number-input {
30237
30510
  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
@@ -30500,6 +30773,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
30500
30773
  transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
30501
30774
  transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
30502
30775
  }
30776
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
30777
+ scale: -1 1;
30778
+ }
30503
30779
 
30504
30780
  .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
30505
30781
  --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -30589,6 +30865,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
30589
30865
  border: 0;
30590
30866
  transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
30591
30867
  }
30868
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
30869
+ transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
30870
+ }
30592
30871
 
30593
30872
  .pf-v5-c-tree-view__node-title.pf-m-truncate,
30594
30873
  .pf-v5-c-tree-view__node-text.pf-m-truncate {
@@ -31035,6 +31314,9 @@ label.pf-v5-c-tree-view__node-text {
31035
31314
  margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
31036
31315
  color: var(--pf-v5-c-wizard__toggle-separator--Color);
31037
31316
  }
31317
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
31318
+ scale: -1 1;
31319
+ }
31038
31320
 
31039
31321
  .pf-v5-c-wizard__toggle-icon {
31040
31322
  line-height: var(--pf-v5-c-wizard__toggle-icon--LineHeight);
@@ -31139,6 +31421,7 @@ label.pf-v5-c-tree-view__node-text {
31139
31421
  border: 0;
31140
31422
  }
31141
31423
  .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
31424
+ transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
31142
31425
  position: absolute;
31143
31426
  inset-block-start: var(--pf-v5-c-wizard__nav-link--before--Top);
31144
31427
  inset-inline-start: 0;
@@ -31152,7 +31435,9 @@ label.pf-v5-c-tree-view__node-text {
31152
31435
  color: var(--pf-v5-c-wizard__nav-link--before--Color);
31153
31436
  background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
31154
31437
  border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
31155
- transform: translateX(var(--pf-v5-c-wizard__nav-link--before--TranslateX));
31438
+ }
31439
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-num, .pf-v5-c-wizard__nav-link::before {
31440
+ transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
31156
31441
  }
31157
31442
 
31158
31443
  .pf-v5-c-wizard__nav-link::before {
@@ -31201,6 +31486,9 @@ label.pf-v5-c-tree-view__node-text {
31201
31486
  transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
31202
31487
  transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
31203
31488
  }
31489
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
31490
+ scale: -1 1;
31491
+ }
31204
31492
 
31205
31493
  .pf-v5-c-wizard__main {
31206
31494
  z-index: var(--pf-v5-c-wizard__main--ZIndex);