@patternfly/patternfly 5.1.0-prerelease.9 → 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 (110) hide show
  1. package/README.md +6 -6
  2. package/base/_common.scss +9 -8
  3. package/base/_variables.scss +5 -1
  4. package/base/patternfly-common.css +4 -11
  5. package/base/patternfly-variables.css +5 -1
  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 +6 -2
  30. package/components/DualListSelector/dual-list-selector.scss +7 -2
  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 +1 -1
  47. package/components/Pagination/pagination.scss +1 -1
  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 +5 -1
  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 +6 -3
  74. package/components/Wizard/wizard.scss +8 -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/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  78. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  79. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  80. package/docs/components/Menu/examples/Menu.css +8 -0
  81. package/docs/components/Menu/examples/Menu.md +90 -73
  82. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  83. package/docs/components/Nav/examples/Navigation.css +3 -26
  84. package/docs/components/Nav/examples/Navigation.md +99 -0
  85. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  86. package/docs/components/Popover/examples/Popover.css +4 -9
  87. package/docs/components/Table/examples/Table.md +2 -2
  88. package/docs/components/Toolbar/examples/Toolbar.md +76 -60
  89. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  90. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  91. package/docs/components/Truncate/examples/Truncate.md +2 -2
  92. package/docs/demos/Card/examples/Card.md +23 -7
  93. package/docs/demos/DataList/examples/DataList.md +8 -2
  94. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +16 -4
  95. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  96. package/docs/demos/Table/examples/Table.md +48 -12
  97. package/docs/demos/Tabs/examples/Tabs.md +4 -1
  98. package/package.json +6 -5
  99. package/patternfly-base-no-globals-theme-dark-unversioned.css +9 -12
  100. package/patternfly-base-no-globals.css +9 -12
  101. package/patternfly-base-theme-dark-unversioned.css +9 -12
  102. package/patternfly-base.css +9 -12
  103. package/patternfly-no-globals.css +356 -104
  104. package/patternfly-theme-dark-unversioned.css +356 -104
  105. package/patternfly.css +356 -104
  106. package/patternfly.min.css +1 -1
  107. package/patternfly.min.css.map +1 -1
  108. package/sass-utilities/functions.scss +6 -0
  109. package/sass-utilities/mixins.scss +55 -20
  110. package/sass-utilities/themes/dark/mixins.scss +3 -1
@@ -317,7 +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--rtl--transform--flip: 1;
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;
321
325
  }
322
326
 
323
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,
@@ -557,26 +561,19 @@
557
561
  }
558
562
 
559
563
  .pf-v5-m-dir-rtl {
564
+ --pf-v5-global--inverse--multiplier: -1;
560
565
  direction: rtl;
561
566
  }
562
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
563
- --pf-v5-global--rtl--transform--flip: -1;
564
- }
565
567
 
566
- .pf-v5-m-dir-ltr,
567
- .ws-dir-ltr {
568
- --pf-v5-global--rtl--transform--flip: 1;
568
+ .pf-v5-m-dir-ltr {
569
+ --pf-v5-global--inverse--multiplier: 1;
569
570
  direction: ltr;
570
571
  }
571
572
 
572
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
573
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-mirror-inline-rtl {
573
574
  scale: -1 1;
574
575
  }
575
576
 
576
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
577
- --pf-v5-global--rtl--transform--flip: -1;
578
- }
579
-
580
577
  :where(.pf-v5-theme-dark) {
581
578
  color-scheme: dark;
582
579
  }
@@ -5352,6 +5349,7 @@
5352
5349
  --pf-v5-c-about-modal-box--Width: 100%;
5353
5350
  --pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
5354
5351
  --pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
5352
+ --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
5355
5353
  --pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-v5-global--spacer--2xl);
5356
5354
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-global--spacer--xl);
5357
5355
  --pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-global--spacer--xl);
@@ -5404,6 +5402,10 @@
5404
5402
  background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
5405
5403
  background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
5406
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
+
5407
5409
  @media screen and (min-width: 576px) {
5408
5410
  .pf-v5-c-about-modal-box {
5409
5411
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);
@@ -5743,6 +5745,9 @@
5743
5745
  .pf-v5-c-accordion__toggle-icon {
5744
5746
  transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
5745
5747
  }
5748
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
5749
+ scale: -1 1;
5750
+ }
5746
5751
 
5747
5752
  .pf-v5-c-accordion__expandable-content {
5748
5753
  font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
@@ -5966,6 +5971,9 @@
5966
5971
  transition: var(--pf-v5-c-alert__toggle-icon--Transition);
5967
5972
  transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
5968
5973
  }
5974
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
5975
+ scale: -1 1;
5976
+ }
5969
5977
 
5970
5978
  .pf-v5-c-alert__icon {
5971
5979
  display: flex;
@@ -6619,11 +6627,11 @@
6619
6627
  .pf-v5-c-background-image {
6620
6628
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6621
6629
  --pf-v5-c-background-image--BackgroundImage: none;
6622
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
6623
6630
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6624
6631
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
6625
6632
  --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
6626
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;
6627
6635
  position: fixed;
6628
6636
  inset-block-start: 0;
6629
6637
  inset-inline-start: 0;
@@ -6636,6 +6644,9 @@
6636
6644
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6637
6645
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
6638
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
+ }
6639
6650
 
6640
6651
  .pf-v5-c-back-to-top {
6641
6652
  --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
@@ -6811,9 +6822,6 @@
6811
6822
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
6812
6823
  }
6813
6824
 
6814
- :where(.pf-v5-theme-dark) .pf-v5-c-banner {
6815
- color: var(false);
6816
- }
6817
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 {
6818
6826
  --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
6819
6827
  }
@@ -6928,6 +6936,9 @@
6928
6936
  line-height: 1;
6929
6937
  color: var(--pf-v5-c-breadcrumb__item-divider--Color);
6930
6938
  }
6939
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
6940
+ scale: -1 1;
6941
+ }
6931
6942
 
6932
6943
  .pf-v5-c-breadcrumb__link {
6933
6944
  font-size: inherit;
@@ -7411,6 +7422,9 @@ button.pf-v5-c-breadcrumb__link {
7411
7422
  color: var(--pf-v5-c-button--m-plain--Color);
7412
7423
  background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
7413
7424
  }
7425
+ .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
7426
+ padding: 0;
7427
+ }
7414
7428
  .pf-v5-c-button.pf-m-plain:hover {
7415
7429
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
7416
7430
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
@@ -7614,6 +7628,10 @@ button.pf-v5-c-breadcrumb__link {
7614
7628
  margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
7615
7629
  margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
7616
7630
  }
7631
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
7632
+ scale: -1 1;
7633
+ }
7634
+
7617
7635
  .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
7618
7636
  --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
7619
7637
  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
@@ -7806,7 +7824,7 @@ button.pf-v5-c-breadcrumb__link {
7806
7824
  --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7807
7825
  --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7808
7826
  --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7809
- --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;
7810
7828
  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7811
7829
  --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
7812
7830
  --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);
@@ -8040,6 +8058,9 @@ button.pf-v5-c-breadcrumb__link {
8040
8058
  display: inline-block;
8041
8059
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8042
8060
  }
8061
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8062
+ scale: -1 1;
8063
+ }
8043
8064
 
8044
8065
  .pf-v5-c-card__title-text {
8045
8066
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -8505,6 +8526,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
8505
8526
  .pf-v5-c-clipboard-copy__toggle-icon {
8506
8527
  transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
8507
8528
  }
8529
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
8530
+ scale: -1 1;
8531
+ }
8508
8532
 
8509
8533
  .pf-v5-c-clipboard-copy__expandable-content {
8510
8534
  padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);
@@ -10112,6 +10136,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10112
10136
  transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
10113
10137
  transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
10114
10138
  }
10139
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
10140
+ scale: -1 1;
10141
+ }
10115
10142
 
10116
10143
  .pf-v5-c-data-list__item-content {
10117
10144
  display: grid;
@@ -10728,11 +10755,15 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10728
10755
  --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: 0;
10729
10756
  }
10730
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));
10731
10759
  position: absolute;
10732
10760
  inset-block-start: 0;
10733
10761
  inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
10734
- transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
10735
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
+
10736
10767
  .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
10737
10768
  overflow-anchor: none;
10738
10769
  }
@@ -10831,7 +10862,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10831
10862
  padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
10832
10863
  }
10833
10864
 
10834
- :where(.ws-dir-rtl, .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) {
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) {
10835
10866
  scale: -1 1;
10836
10867
  }
10837
10868
 
@@ -12598,9 +12629,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12598
12629
  --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
12599
12630
  --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
12600
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);
12601
12633
  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
12602
12634
  --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
12603
- --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
12604
12635
  --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
12605
12636
  --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
12606
12637
  --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
@@ -12634,6 +12665,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12634
12665
  --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
12635
12666
  }
12636
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
+
12637
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) {
12638
12677
  padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
12639
12678
  }
@@ -12642,6 +12681,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12642
12681
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
12643
12682
  transform: translateX(-100%);
12644
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
+
12645
12688
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
12646
12689
  order: 1;
12647
12690
  }
@@ -12651,6 +12694,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12651
12694
  .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12652
12695
  transform: translateX(-100%);
12653
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
+
12654
12701
  .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12655
12702
  transform: translateX(0);
12656
12703
  }
@@ -12865,6 +12912,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12865
12912
  inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
12866
12913
  transform: translate(-50%, -50%);
12867
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
+
12868
12919
  .pf-v5-c-drawer__splitter-handle::after {
12869
12920
  display: block;
12870
12921
  width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
@@ -13070,6 +13121,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13070
13121
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13071
13122
  transform: translateX(100%);
13072
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
+ }
13073
13127
  .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13074
13128
  margin-inline-start: 0;
13075
13129
  transform: translateX(0);
@@ -13082,6 +13136,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13082
13136
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13083
13137
  transform: translateX(-100%);
13084
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
+ }
13085
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 {
13086
13143
  margin-inline-end: 0;
13087
13144
  transform: translateX(0);
@@ -13131,6 +13188,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13131
13188
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13132
13189
  transform: translateX(100%);
13133
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
+ }
13134
13194
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13135
13195
  margin-inline-start: 0;
13136
13196
  transform: translateX(0);
@@ -13143,6 +13203,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13143
13203
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13144
13204
  transform: translateX(-100%);
13145
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
+ }
13146
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 {
13147
13210
  margin-inline-end: 0;
13148
13211
  transform: translateX(0);
@@ -13192,6 +13255,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13192
13255
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13193
13256
  transform: translateX(100%);
13194
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
+ }
13195
13261
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13196
13262
  margin-inline-start: 0;
13197
13263
  transform: translateX(0);
@@ -13204,6 +13270,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13204
13270
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13205
13271
  transform: translateX(-100%);
13206
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
+ }
13207
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 {
13208
13277
  margin-inline-end: 0;
13209
13278
  transform: translateX(0);
@@ -13253,6 +13322,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13253
13322
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13254
13323
  transform: translateX(100%);
13255
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
+ }
13256
13328
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13257
13329
  margin-inline-start: 0;
13258
13330
  transform: translateX(0);
@@ -13265,6 +13337,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13265
13337
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13266
13338
  transform: translateX(-100%);
13267
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
+ }
13268
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 {
13269
13344
  margin-inline-end: 0;
13270
13345
  transform: translateX(0);
@@ -14240,6 +14315,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14240
14315
  transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
14241
14316
  transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
14242
14317
  }
14318
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
14319
+ scale: -1 1;
14320
+ }
14321
+
14243
14322
  .pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
14244
14323
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
14245
14324
  }
@@ -14775,6 +14854,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14775
14854
  transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
14776
14855
  transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
14777
14856
  }
14857
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
14858
+ scale: -1 1;
14859
+ }
14778
14860
 
14779
14861
  .pf-v5-c-form__field-group-header {
14780
14862
  display: flex;
@@ -15842,6 +15924,9 @@ label.pf-v5-c-input-group__text {
15842
15924
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15843
15925
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15844
15926
  }
15927
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
15928
+ scale: -1 1;
15929
+ }
15845
15930
 
15846
15931
  .pf-v5-c-jump-links__toggle-text {
15847
15932
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -17844,6 +17929,10 @@ ul.pf-v5-c-list {
17844
17929
  .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17845
17930
  transform: translateX(-100%);
17846
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
+
17847
17936
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
17848
17937
  --pf-v5-c-menu--BoxShadow: none;
17849
17938
  position: absolute;
@@ -17855,6 +17944,10 @@ ul.pf-v5-c-list {
17855
17944
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
17856
17945
  transform: translateX(-100%);
17857
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
+
17858
17951
  .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
17859
17952
  position: relative;
17860
17953
  overflow: hidden;
@@ -18154,6 +18247,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18154
18247
  padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
18155
18248
  color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
18156
18249
  }
18250
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
18251
+ scale: -1 1;
18252
+ }
18157
18253
 
18158
18254
  .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
18159
18255
  margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
@@ -19477,6 +19573,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19477
19573
  .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19478
19574
  margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
19479
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
+
19480
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 {
19481
19581
  content: none;
19482
19582
  }
@@ -19920,6 +20020,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19920
20020
  display: inline-block;
19921
20021
  transition: var(--pf-v5-c-nav__toggle-icon--Transition);
19922
20022
  }
20023
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
20024
+ scale: -1 1;
20025
+ }
20026
+
19923
20027
  .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
19924
20028
  transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
19925
20029
  }
@@ -19975,6 +20079,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19975
20079
  opacity: 0;
19976
20080
  transition: var(--pf-v5-c-nav__scroll-button--Transition);
19977
20081
  }
20082
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
20083
+ scale: -1 1;
20084
+ }
20085
+
19978
20086
  .pf-v5-c-nav__scroll-button::before {
19979
20087
  position: absolute;
19980
20088
  inset-block-start: 0;
@@ -20002,6 +20110,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20002
20110
  margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20003
20111
  transform: translateX(-100%);
20004
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
+
20005
20117
  .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
20006
20118
  inset-inline-end: 0;
20007
20119
  }
@@ -20010,6 +20122,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20010
20122
  margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20011
20123
  transform: translateX(100%);
20012
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
+
20013
20129
  .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
20014
20130
  inset-inline-start: 0;
20015
20131
  }
@@ -20444,6 +20560,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20444
20560
  color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
20445
20561
  transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
20446
20562
  }
20563
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
20564
+ scale: -1 1;
20565
+ }
20566
+
20447
20567
  .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
20448
20568
  transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
20449
20569
  }
@@ -21145,6 +21265,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21145
21265
  transition: var(--pf-v5-c-page__sidebar--Transition);
21146
21266
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21147
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
+
21148
21272
  .pf-v5-c-page__sidebar.pf-m-expanded {
21149
21273
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
21150
21274
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
@@ -21992,7 +22116,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21992
22116
  justify-content: flex-end;
21993
22117
  }
21994
22118
 
21995
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
22119
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
21996
22120
  scale: -1 1;
21997
22121
  }
21998
22122
 
@@ -22376,39 +22500,61 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22376
22500
  --pf-v5-c-popover--MinWidth: auto;
22377
22501
  --pf-v5-c-popover--MaxWidth: none;
22378
22502
  }
22379
- .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 {
22380
- inset-block-end: 0;
22381
- inset-inline-start: 50%;
22382
- 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));
22383
- }
22384
- .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 {
22385
- inset-block-start: 0;
22386
- inset-inline-start: 50%;
22387
- 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));
22388
- }
22389
- .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 {
22390
- inset-block-start: 50%;
22391
- inset-inline-end: 0;
22392
- 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));
22393
- }
22394
- .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 {
22395
- inset-block-start: 50%;
22396
- inset-inline-start: 0;
22397
- 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));
22398
- }
22399
- .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 {
22400
- inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22401
- }
22402
- .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 {
22403
- inset-block-start: auto;
22404
- inset-block-end: 0;
22405
- }
22406
- .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 {
22407
- inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22408
- }
22409
- .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 {
22410
- inset-inline-start: auto;
22411
- 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;
22412
22558
  }
22413
22559
  .pf-v5-c-popover.pf-m-danger {
22414
22560
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -22451,11 +22597,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22451
22597
 
22452
22598
  .pf-v5-c-popover__arrow {
22453
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 */
22454
22606
  width: var(--pf-v5-c-popover__arrow--Width);
22455
22607
  height: var(--pf-v5-c-popover__arrow--Height);
22456
22608
  pointer-events: none;
22457
22609
  background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
22458
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));
22459
22612
  }
22460
22613
 
22461
22614
  .pf-v5-c-popover__header {
@@ -22637,6 +22790,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22637
22790
  color: var(--pf-v5-c-progress__status-icon--Color);
22638
22791
  }
22639
22792
 
22793
+ .pf-v5-c-progress__bar::before,
22794
+ .pf-v5-c-progress__indicator {
22795
+ top: 0;
22796
+ left: 0;
22797
+ }
22798
+
22640
22799
  .pf-v5-c-progress__bar {
22641
22800
  position: relative;
22642
22801
  grid-row: 2/3;
@@ -22647,8 +22806,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22647
22806
  }
22648
22807
  .pf-v5-c-progress__bar::before {
22649
22808
  position: absolute;
22650
- inset-block-start: 0;
22651
- inset-inline-start: 0;
22652
22809
  width: 100%;
22653
22810
  height: 100%;
22654
22811
  content: "";
@@ -22658,8 +22815,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22658
22815
 
22659
22816
  .pf-v5-c-progress__indicator {
22660
22817
  position: absolute;
22661
- inset-block-start: 0;
22662
- inset-inline-start: 0;
22663
22818
  height: var(--pf-v5-c-progress__indicator--Height);
22664
22819
  background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
22665
22820
  }
@@ -24452,6 +24607,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24452
24607
  transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
24453
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);
24454
24609
  }
24610
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
24611
+ scale: -1 1;
24612
+ }
24613
+
24455
24614
  .pf-v5-c-skeleton.pf-m-circle {
24456
24615
  --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
24457
24616
  }
@@ -24572,6 +24731,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24572
24731
 
24573
24732
  .pf-v5-c-slider {
24574
24733
  --pf-v5-c-slider--value: 0;
24734
+ --pf-v5-c-slider__step--Left: 0;
24575
24735
  --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
24576
24736
  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
24577
24737
  --pf-v5-c-slider__rail-track--Height: 0.25rem;
@@ -24579,6 +24739,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24579
24739
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
24580
24740
  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
24581
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;
24582
24743
  --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
24583
24744
  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
24584
24745
  --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
@@ -24630,6 +24791,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24630
24791
  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
24631
24792
  display: flex;
24632
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
+
24633
24798
  .pf-v5-c-slider.pf-m-disabled {
24634
24799
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
24635
24800
  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -24661,7 +24826,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24661
24826
  position: absolute;
24662
24827
  inset: 0;
24663
24828
  content: "";
24664
- 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));
24665
24830
  border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
24666
24831
  }
24667
24832
 
@@ -24690,6 +24855,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24690
24855
  }
24691
24856
 
24692
24857
  .pf-v5-c-slider__step-tick {
24858
+ transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
24693
24859
  position: absolute;
24694
24860
  inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
24695
24861
  inset-inline-start: 0;
@@ -24697,17 +24863,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24697
24863
  height: var(--pf-v5-c-slider__step-tick--Height);
24698
24864
  background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
24699
24865
  border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
24700
- 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)));
24701
24869
  }
24702
24870
 
24703
24871
  .pf-v5-c-slider__step-label {
24872
+ transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
24704
24873
  position: absolute;
24705
24874
  inset-block-start: var(--pf-v5-c-slider__step-label--Top);
24706
24875
  word-break: normal;
24707
- 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)));
24708
24879
  }
24709
24880
 
24710
24881
  .pf-v5-c-slider__thumb {
24882
+ transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
24711
24883
  position: absolute;
24712
24884
  inset-block-start: var(--pf-v5-c-slider__thumb--Top);
24713
24885
  inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
@@ -24717,9 +24889,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24717
24889
  background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
24718
24890
  border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
24719
24891
  box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
24720
- transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
24721
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
+
24722
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));
24723
24899
  position: absolute;
24724
24900
  inset-block-start: 50%;
24725
24901
  inset-inline-start: 50%;
@@ -24727,8 +24903,11 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24727
24903
  height: var(--pf-v5-c-slider__thumb--before--Height);
24728
24904
  content: "";
24729
24905
  border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
24730
- transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
24731
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
+
24732
24911
  .pf-v5-c-slider__thumb:hover {
24733
24912
  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
24734
24913
  }
@@ -24744,13 +24923,17 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24744
24923
  margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
24745
24924
  }
24746
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));
24747
24927
  --pf-v5-c-slider__value--MarginLeft: 0;
24748
24928
  position: absolute;
24749
24929
  inset-block-start: 0;
24750
24930
  inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
24751
24931
  z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
24752
- transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
24753
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
+
24754
24937
  .pf-v5-c-slider__value .pf-v5-c-form-control {
24755
24938
  width: var(--pf-v5-c-slider__value--c-form-control--Width);
24756
24939
  }
@@ -24927,8 +25110,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
24927
25110
  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
24928
25111
  }
24929
25112
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
24930
- transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
25113
+ transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
24931
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
+
24932
25119
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
24933
25120
  display: none;
24934
25121
  }
@@ -27387,6 +27574,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27387
27574
  transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
27388
27575
  transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
27389
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
+
27390
27581
  .pf-v5-c-table__toggle svg {
27391
27582
  pointer-events: none;
27392
27583
  }
@@ -27783,10 +27974,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27783
27974
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
27784
27975
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
27785
27976
  }
27786
- .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 {
27787
27978
  --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
27788
27979
  }
27789
- .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 {
27790
27981
  --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
27791
27982
  }
27792
27983
 
@@ -27876,10 +28067,14 @@ svg.pf-v5-c-spinner.pf-m-xl {
27876
28067
  cursor: pointer;
27877
28068
  }
27878
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));
27879
28071
  position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
27880
28072
  inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
27881
- transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
27882
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
+
27883
28078
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
27884
28079
  min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
27885
28080
  }
@@ -29030,6 +29225,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29030
29225
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29031
29226
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29032
29227
  }
29228
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29229
+ scale: -1 1;
29230
+ }
29033
29231
 
29034
29232
  .pf-v5-c-tabs__toggle-text {
29035
29233
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29204,6 +29402,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29204
29402
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29205
29403
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29206
29404
  }
29405
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29406
+ scale: -1 1;
29407
+ }
29207
29408
 
29208
29409
  .pf-v5-c-tabs__item-action {
29209
29410
  display: flex;
@@ -29235,6 +29436,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29235
29436
  opacity: 0;
29236
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);
29237
29438
  }
29439
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29440
+ scale: -1 1;
29441
+ }
29442
+
29238
29443
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29239
29444
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29240
29445
  }
@@ -30040,39 +30245,61 @@ svg.pf-v5-c-spinner.pf-m-xl {
30040
30245
  max-width: var(--pf-v5-c-tooltip--MaxWidth);
30041
30246
  box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
30042
30247
  }
30043
- .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 {
30044
- inset-block-end: 0;
30045
- inset-inline-start: 50%;
30046
- 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));
30047
- }
30048
- .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 {
30049
- inset-block-start: 0;
30050
- inset-inline-start: 50%;
30051
- 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));
30052
- }
30053
- .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 {
30054
- inset-block-start: 50%;
30055
- inset-inline-end: 0;
30056
- 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));
30057
- }
30058
- .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 {
30059
- inset-block-start: 50%;
30060
- inset-inline-start: 0;
30061
- 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));
30062
- }
30063
- .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 {
30064
- inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30065
- }
30066
- .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 {
30067
- inset-block-start: auto;
30068
- inset-block-end: 0;
30069
- }
30070
- .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 {
30071
- inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30072
- }
30073
- .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 {
30074
- inset-inline-start: auto;
30075
- 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;
30076
30303
  }
30077
30304
 
30078
30305
  .pf-v5-c-tooltip__content {
@@ -30093,11 +30320,18 @@ svg.pf-v5-c-spinner.pf-m-xl {
30093
30320
 
30094
30321
  .pf-v5-c-tooltip__arrow {
30095
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 */
30096
30329
  width: var(--pf-v5-c-tooltip__arrow--Width);
30097
30330
  height: var(--pf-v5-c-tooltip__arrow--Height);
30098
30331
  pointer-events: none;
30099
30332
  background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
30100
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));
30101
30335
  }
30102
30336
 
30103
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,
@@ -30135,16 +30369,25 @@ svg.pf-v5-c-spinner.pf-m-xl {
30135
30369
  .pf-v5-c-truncate__end {
30136
30370
  direction: rtl;
30137
30371
  }
30372
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30373
+ direction: ltr;
30374
+ }
30138
30375
 
30139
30376
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30140
30377
  overflow: visible;
30141
30378
  direction: ltr;
30142
30379
  }
30380
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30381
+ direction: rtl;
30382
+ }
30143
30383
 
30144
30384
  @supports (-webkit-hyphens: none) {
30145
30385
  .pf-v5-c-truncate__end {
30146
30386
  direction: ltr;
30147
30387
  }
30388
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30389
+ direction: rtl;
30390
+ }
30148
30391
  }
30149
30392
  .pf-v5-c-number-input {
30150
30393
  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
@@ -30413,6 +30656,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
30413
30656
  transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
30414
30657
  transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
30415
30658
  }
30659
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
30660
+ scale: -1 1;
30661
+ }
30416
30662
 
30417
30663
  .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
30418
30664
  --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -30502,6 +30748,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
30502
30748
  border: 0;
30503
30749
  transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
30504
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
+ }
30505
30754
 
30506
30755
  .pf-v5-c-tree-view__node-title.pf-m-truncate,
30507
30756
  .pf-v5-c-tree-view__node-text.pf-m-truncate {
@@ -30948,7 +31197,7 @@ label.pf-v5-c-tree-view__node-text {
30948
31197
  margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
30949
31198
  color: var(--pf-v5-c-wizard__toggle-separator--Color);
30950
31199
  }
30951
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
31200
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
30952
31201
  scale: -1 1;
30953
31202
  }
30954
31203
 
@@ -31055,6 +31304,7 @@ label.pf-v5-c-tree-view__node-text {
31055
31304
  border: 0;
31056
31305
  }
31057
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));
31058
31308
  position: absolute;
31059
31309
  inset-block-start: var(--pf-v5-c-wizard__nav-link--before--Top);
31060
31310
  inset-inline-start: 0;
@@ -31068,7 +31318,9 @@ label.pf-v5-c-tree-view__node-text {
31068
31318
  color: var(--pf-v5-c-wizard__nav-link--before--Color);
31069
31319
  background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
31070
31320
  border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
31071
- transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
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)));
31072
31324
  }
31073
31325
 
31074
31326
  .pf-v5-c-wizard__nav-link::before {
@@ -31117,7 +31369,7 @@ label.pf-v5-c-tree-view__node-text {
31117
31369
  transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
31118
31370
  transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
31119
31371
  }
31120
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
31372
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
31121
31373
  scale: -1 1;
31122
31374
  }
31123
31375