@patternfly/patternfly 5.1.0-prerelease.9 → 5.2.0-prerelease.1

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 (118) 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 +15 -15
  77. package/docs/components/Check/examples/Check.md +71 -59
  78. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  79. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  80. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  81. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  82. package/docs/components/Menu/examples/Menu.css +8 -0
  83. package/docs/components/Menu/examples/Menu.md +90 -73
  84. package/docs/components/MenuToggle/examples/MenuToggle.md +60 -39
  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/Radio/examples/Radio.md +63 -55
  91. package/docs/components/Select/deprecated/Select.md +184 -177
  92. package/docs/components/Table/examples/Table.md +2 -2
  93. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  94. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  95. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  96. package/docs/components/Truncate/examples/Truncate.md +2 -2
  97. package/docs/demos/Card/examples/Card.md +23 -7
  98. package/docs/demos/CardView/examples/CardView.md +24 -20
  99. package/docs/demos/DataList/examples/DataList.md +8 -2
  100. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -124
  101. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  102. package/docs/demos/Table/examples/Table.md +336 -252
  103. package/docs/demos/Tabs/examples/Tabs.md +28 -21
  104. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  105. package/docs/demos/Toolbar/examples/Toolbar.md +44 -44
  106. package/package.json +6 -5
  107. package/patternfly-base-no-globals-theme-dark-unversioned.css +9 -12
  108. package/patternfly-base-no-globals.css +9 -12
  109. package/patternfly-base-theme-dark-unversioned.css +9 -12
  110. package/patternfly-base.css +9 -12
  111. package/patternfly-no-globals.css +356 -104
  112. package/patternfly-theme-dark-unversioned.css +356 -104
  113. package/patternfly.css +356 -104
  114. package/patternfly.min.css +1 -1
  115. package/patternfly.min.css.map +1 -1
  116. package/sass-utilities/functions.scss +6 -0
  117. package/sass-utilities/mixins.scss +55 -20
  118. 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-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-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(html,
581
578
  body,
582
579
  p,
@@ -5469,6 +5466,7 @@ button) {
5469
5466
  --pf-v5-c-about-modal-box--Width: 100%;
5470
5467
  --pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
5471
5468
  --pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
5469
+ --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
5472
5470
  --pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-v5-global--spacer--2xl);
5473
5471
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-global--spacer--xl);
5474
5472
  --pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-global--spacer--xl);
@@ -5521,6 +5519,10 @@ button) {
5521
5519
  background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
5522
5520
  background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
5523
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
+
5524
5526
  @media screen and (min-width: 576px) {
5525
5527
  .pf-v5-c-about-modal-box {
5526
5528
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);
@@ -5860,6 +5862,9 @@ button) {
5860
5862
  .pf-v5-c-accordion__toggle-icon {
5861
5863
  transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
5862
5864
  }
5865
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
5866
+ scale: -1 1;
5867
+ }
5863
5868
 
5864
5869
  .pf-v5-c-accordion__expandable-content {
5865
5870
  font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
@@ -6083,6 +6088,9 @@ button) {
6083
6088
  transition: var(--pf-v5-c-alert__toggle-icon--Transition);
6084
6089
  transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
6085
6090
  }
6091
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
6092
+ scale: -1 1;
6093
+ }
6086
6094
 
6087
6095
  .pf-v5-c-alert__icon {
6088
6096
  display: flex;
@@ -6736,11 +6744,11 @@ button) {
6736
6744
  .pf-v5-c-background-image {
6737
6745
  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
6738
6746
  --pf-v5-c-background-image--BackgroundImage: none;
6739
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
6740
6747
  --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
6741
6748
  --pf-v5-c-background-image--BackgroundSize--width: 60%;
6742
6749
  --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
6743
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;
6744
6752
  position: fixed;
6745
6753
  inset-block-start: 0;
6746
6754
  inset-inline-start: 0;
@@ -6753,6 +6761,9 @@ button) {
6753
6761
  background-position: var(--pf-v5-c-background-image--BackgroundPosition);
6754
6762
  background-size: var(--pf-v5-c-background-image--BackgroundSize);
6755
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
+ }
6756
6767
 
6757
6768
  .pf-v5-c-back-to-top {
6758
6769
  --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
@@ -6928,9 +6939,6 @@ button) {
6928
6939
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
6929
6940
  }
6930
6941
 
6931
- :where(.pf-theme-dark) .pf-v5-c-banner {
6932
- color: var(false);
6933
- }
6934
6942
  :where(.pf-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-theme-dark) .pf-v5-c-banner.pf-m-gold {
6935
6943
  --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
6936
6944
  }
@@ -7045,6 +7053,9 @@ button) {
7045
7053
  line-height: 1;
7046
7054
  color: var(--pf-v5-c-breadcrumb__item-divider--Color);
7047
7055
  }
7056
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
7057
+ scale: -1 1;
7058
+ }
7048
7059
 
7049
7060
  .pf-v5-c-breadcrumb__link {
7050
7061
  font-size: inherit;
@@ -7528,6 +7539,9 @@ button.pf-v5-c-breadcrumb__link {
7528
7539
  color: var(--pf-v5-c-button--m-plain--Color);
7529
7540
  background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
7530
7541
  }
7542
+ .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
7543
+ padding: 0;
7544
+ }
7531
7545
  .pf-v5-c-button.pf-m-plain:hover {
7532
7546
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
7533
7547
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
@@ -7731,6 +7745,10 @@ button.pf-v5-c-breadcrumb__link {
7731
7745
  margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
7732
7746
  margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
7733
7747
  }
7748
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
7749
+ scale: -1 1;
7750
+ }
7751
+
7734
7752
  .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
7735
7753
  --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
7736
7754
  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
@@ -7923,7 +7941,7 @@ button.pf-v5-c-breadcrumb__link {
7923
7941
  --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7924
7942
  --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7925
7943
  --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7926
- --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;
7927
7945
  --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7928
7946
  --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
7929
7947
  --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);
@@ -8157,6 +8175,9 @@ button.pf-v5-c-breadcrumb__link {
8157
8175
  display: inline-block;
8158
8176
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8159
8177
  }
8178
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8179
+ scale: -1 1;
8180
+ }
8160
8181
 
8161
8182
  .pf-v5-c-card__title-text {
8162
8183
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -8622,6 +8643,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
8622
8643
  .pf-v5-c-clipboard-copy__toggle-icon {
8623
8644
  transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
8624
8645
  }
8646
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
8647
+ scale: -1 1;
8648
+ }
8625
8649
 
8626
8650
  .pf-v5-c-clipboard-copy__expandable-content {
8627
8651
  padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);
@@ -10229,6 +10253,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10229
10253
  transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
10230
10254
  transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
10231
10255
  }
10256
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
10257
+ scale: -1 1;
10258
+ }
10232
10259
 
10233
10260
  .pf-v5-c-data-list__item-content {
10234
10261
  display: grid;
@@ -10845,11 +10872,15 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10845
10872
  --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: 0;
10846
10873
  }
10847
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));
10848
10876
  position: absolute;
10849
10877
  inset-block-start: 0;
10850
10878
  inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
10851
- transform: translateX(calc(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
10852
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
+
10853
10884
  .pf-v5-c-dual-list-selector__list.pf-m-drag-over {
10854
10885
  overflow-anchor: none;
10855
10886
  }
@@ -10948,7 +10979,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10948
10979
  padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
10949
10980
  }
10950
10981
 
10951
- :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) {
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) {
10952
10983
  scale: -1 1;
10953
10984
  }
10954
10985
 
@@ -12715,9 +12746,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12715
12746
  --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
12716
12747
  --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
12717
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);
12718
12750
  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
12719
12751
  --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
12720
- --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
12721
12752
  --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
12722
12753
  --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
12723
12754
  --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
@@ -12751,6 +12782,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12751
12782
  --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
12752
12783
  }
12753
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
+
12754
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) {
12755
12794
  padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
12756
12795
  }
@@ -12759,6 +12798,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12759
12798
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
12760
12799
  transform: translateX(-100%);
12761
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
+
12762
12805
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
12763
12806
  order: 1;
12764
12807
  }
@@ -12768,6 +12811,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12768
12811
  .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12769
12812
  transform: translateX(-100%);
12770
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
+
12771
12818
  .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
12772
12819
  transform: translateX(0);
12773
12820
  }
@@ -12982,6 +13029,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
12982
13029
  inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
12983
13030
  transform: translate(-50%, -50%);
12984
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
+
12985
13036
  .pf-v5-c-drawer__splitter-handle::after {
12986
13037
  display: block;
12987
13038
  width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
@@ -13187,6 +13238,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13187
13238
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13188
13239
  transform: translateX(100%);
13189
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
+ }
13190
13244
  .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13191
13245
  margin-inline-start: 0;
13192
13246
  transform: translateX(0);
@@ -13199,6 +13253,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13199
13253
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13200
13254
  transform: translateX(-100%);
13201
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
+ }
13202
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 {
13203
13260
  margin-inline-end: 0;
13204
13261
  transform: translateX(0);
@@ -13248,6 +13305,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13248
13305
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13249
13306
  transform: translateX(100%);
13250
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
+ }
13251
13311
  .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13252
13312
  margin-inline-start: 0;
13253
13313
  transform: translateX(0);
@@ -13260,6 +13320,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13260
13320
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13261
13321
  transform: translateX(-100%);
13262
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
+ }
13263
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 {
13264
13327
  margin-inline-end: 0;
13265
13328
  transform: translateX(0);
@@ -13309,6 +13372,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13309
13372
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13310
13373
  transform: translateX(100%);
13311
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
+ }
13312
13378
  .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13313
13379
  margin-inline-start: 0;
13314
13380
  transform: translateX(0);
@@ -13321,6 +13387,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13321
13387
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13322
13388
  transform: translateX(-100%);
13323
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
+ }
13324
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 {
13325
13394
  margin-inline-end: 0;
13326
13395
  transform: translateX(0);
@@ -13370,6 +13439,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13370
13439
  margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13371
13440
  transform: translateX(100%);
13372
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
+ }
13373
13445
  .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
13374
13446
  margin-inline-start: 0;
13375
13447
  transform: translateX(0);
@@ -13382,6 +13454,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13382
13454
  margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
13383
13455
  transform: translateX(-100%);
13384
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
+ }
13385
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 {
13386
13461
  margin-inline-end: 0;
13387
13462
  transform: translateX(0);
@@ -14357,6 +14432,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14357
14432
  transition: var(--pf-v5-c-expandable-section__toggle-icon--Transition);
14358
14433
  transform: rotate(var(--pf-v5-c-expandable-section__toggle-icon--Rotate));
14359
14434
  }
14435
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-expandable-section__toggle-icon {
14436
+ scale: -1 1;
14437
+ }
14438
+
14360
14439
  .pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top {
14361
14440
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
14362
14441
  }
@@ -14892,6 +14971,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14892
14971
  transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
14893
14972
  transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
14894
14973
  }
14974
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
14975
+ scale: -1 1;
14976
+ }
14895
14977
 
14896
14978
  .pf-v5-c-form__field-group-header {
14897
14979
  display: flex;
@@ -15959,6 +16041,9 @@ label.pf-v5-c-input-group__text {
15959
16041
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15960
16042
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15961
16043
  }
16044
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
16045
+ scale: -1 1;
16046
+ }
15962
16047
 
15963
16048
  .pf-v5-c-jump-links__toggle-text {
15964
16049
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -17961,6 +18046,10 @@ ul.pf-v5-c-list {
17961
18046
  .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17962
18047
  transform: translateX(-100%);
17963
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
+
17964
18053
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
17965
18054
  --pf-v5-c-menu--BoxShadow: none;
17966
18055
  position: absolute;
@@ -17972,6 +18061,10 @@ ul.pf-v5-c-list {
17972
18061
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
17973
18062
  transform: translateX(-100%);
17974
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
+
17975
18068
  .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
17976
18069
  position: relative;
17977
18070
  overflow: hidden;
@@ -18271,6 +18364,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18271
18364
  padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
18272
18365
  color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
18273
18366
  }
18367
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
18368
+ scale: -1 1;
18369
+ }
18274
18370
 
18275
18371
  .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
18276
18372
  margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
@@ -19594,6 +19690,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19594
19690
  .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19595
19691
  margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
19596
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
+
19597
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 {
19598
19698
  content: none;
19599
19699
  }
@@ -20037,6 +20137,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20037
20137
  display: inline-block;
20038
20138
  transition: var(--pf-v5-c-nav__toggle-icon--Transition);
20039
20139
  }
20140
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
20141
+ scale: -1 1;
20142
+ }
20143
+
20040
20144
  .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
20041
20145
  transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
20042
20146
  }
@@ -20092,6 +20196,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20092
20196
  opacity: 0;
20093
20197
  transition: var(--pf-v5-c-nav__scroll-button--Transition);
20094
20198
  }
20199
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
20200
+ scale: -1 1;
20201
+ }
20202
+
20095
20203
  .pf-v5-c-nav__scroll-button::before {
20096
20204
  position: absolute;
20097
20205
  inset-block-start: 0;
@@ -20119,6 +20227,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20119
20227
  margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20120
20228
  transform: translateX(-100%);
20121
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
+
20122
20234
  .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
20123
20235
  inset-inline-end: 0;
20124
20236
  }
@@ -20127,6 +20239,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20127
20239
  margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20128
20240
  transform: translateX(100%);
20129
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
+
20130
20246
  .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
20131
20247
  inset-inline-start: 0;
20132
20248
  }
@@ -20561,6 +20677,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20561
20677
  color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
20562
20678
  transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
20563
20679
  }
20680
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
20681
+ scale: -1 1;
20682
+ }
20683
+
20564
20684
  .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
20565
20685
  transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
20566
20686
  }
@@ -21262,6 +21382,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21262
21382
  transition: var(--pf-v5-c-page__sidebar--Transition);
21263
21383
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21264
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
+
21265
21389
  .pf-v5-c-page__sidebar.pf-m-expanded {
21266
21390
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
21267
21391
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
@@ -22109,7 +22233,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22109
22233
  justify-content: flex-end;
22110
22234
  }
22111
22235
 
22112
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
22236
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
22113
22237
  scale: -1 1;
22114
22238
  }
22115
22239
 
@@ -22493,39 +22617,61 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22493
22617
  --pf-v5-c-popover--MinWidth: auto;
22494
22618
  --pf-v5-c-popover--MaxWidth: none;
22495
22619
  }
22496
- .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 {
22497
- inset-block-end: 0;
22498
- inset-inline-start: 50%;
22499
- 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));
22500
- }
22501
- .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 {
22502
- inset-block-start: 0;
22503
- inset-inline-start: 50%;
22504
- 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));
22505
- }
22506
- .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 {
22507
- inset-block-start: 50%;
22508
- inset-inline-end: 0;
22509
- 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));
22510
- }
22511
- .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 {
22512
- inset-block-start: 50%;
22513
- inset-inline-start: 0;
22514
- 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));
22515
- }
22516
- .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 {
22517
- inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22518
- }
22519
- .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 {
22520
- inset-block-start: auto;
22521
- inset-block-end: 0;
22522
- }
22523
- .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 {
22524
- inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22525
- }
22526
- .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 {
22527
- inset-inline-start: auto;
22528
- 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;
22529
22675
  }
22530
22676
  .pf-v5-c-popover.pf-m-danger {
22531
22677
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
@@ -22568,11 +22714,18 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22568
22714
 
22569
22715
  .pf-v5-c-popover__arrow {
22570
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 */
22571
22723
  width: var(--pf-v5-c-popover__arrow--Width);
22572
22724
  height: var(--pf-v5-c-popover__arrow--Height);
22573
22725
  pointer-events: none;
22574
22726
  background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
22575
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));
22576
22729
  }
22577
22730
 
22578
22731
  .pf-v5-c-popover__header {
@@ -22754,6 +22907,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22754
22907
  color: var(--pf-v5-c-progress__status-icon--Color);
22755
22908
  }
22756
22909
 
22910
+ .pf-v5-c-progress__bar::before,
22911
+ .pf-v5-c-progress__indicator {
22912
+ top: 0;
22913
+ left: 0;
22914
+ }
22915
+
22757
22916
  .pf-v5-c-progress__bar {
22758
22917
  position: relative;
22759
22918
  grid-row: 2/3;
@@ -22764,8 +22923,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22764
22923
  }
22765
22924
  .pf-v5-c-progress__bar::before {
22766
22925
  position: absolute;
22767
- inset-block-start: 0;
22768
- inset-inline-start: 0;
22769
22926
  width: 100%;
22770
22927
  height: 100%;
22771
22928
  content: "";
@@ -22775,8 +22932,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22775
22932
 
22776
22933
  .pf-v5-c-progress__indicator {
22777
22934
  position: absolute;
22778
- inset-block-start: 0;
22779
- inset-inline-start: 0;
22780
22935
  height: var(--pf-v5-c-progress__indicator--Height);
22781
22936
  background-color: var(--pf-v5-c-progress__indicator--BackgroundColor);
22782
22937
  }
@@ -24569,6 +24724,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24569
24724
  transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
24570
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);
24571
24726
  }
24727
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
24728
+ scale: -1 1;
24729
+ }
24730
+
24572
24731
  .pf-v5-c-skeleton.pf-m-circle {
24573
24732
  --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
24574
24733
  }
@@ -24689,6 +24848,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24689
24848
 
24690
24849
  .pf-v5-c-slider {
24691
24850
  --pf-v5-c-slider--value: 0;
24851
+ --pf-v5-c-slider__step--Left: 0;
24692
24852
  --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
24693
24853
  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
24694
24854
  --pf-v5-c-slider__rail-track--Height: 0.25rem;
@@ -24696,6 +24856,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24696
24856
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
24697
24857
  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
24698
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;
24699
24860
  --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
24700
24861
  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
24701
24862
  --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
@@ -24747,6 +24908,10 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24747
24908
  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
24748
24909
  display: flex;
24749
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
+
24750
24915
  .pf-v5-c-slider.pf-m-disabled {
24751
24916
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
24752
24917
  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -24778,7 +24943,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24778
24943
  position: absolute;
24779
24944
  inset: 0;
24780
24945
  content: "";
24781
- 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));
24782
24947
  border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
24783
24948
  }
24784
24949
 
@@ -24807,6 +24972,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24807
24972
  }
24808
24973
 
24809
24974
  .pf-v5-c-slider__step-tick {
24975
+ transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
24810
24976
  position: absolute;
24811
24977
  inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
24812
24978
  inset-inline-start: 0;
@@ -24814,17 +24980,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24814
24980
  height: var(--pf-v5-c-slider__step-tick--Height);
24815
24981
  background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
24816
24982
  border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
24817
- 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)));
24818
24986
  }
24819
24987
 
24820
24988
  .pf-v5-c-slider__step-label {
24989
+ transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
24821
24990
  position: absolute;
24822
24991
  inset-block-start: var(--pf-v5-c-slider__step-label--Top);
24823
24992
  word-break: normal;
24824
- 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)));
24825
24996
  }
24826
24997
 
24827
24998
  .pf-v5-c-slider__thumb {
24999
+ transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
24828
25000
  position: absolute;
24829
25001
  inset-block-start: var(--pf-v5-c-slider__thumb--Top);
24830
25002
  inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
@@ -24834,9 +25006,13 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24834
25006
  background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
24835
25007
  border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
24836
25008
  box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
24837
- transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
24838
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
+
24839
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));
24840
25016
  position: absolute;
24841
25017
  inset-block-start: 50%;
24842
25018
  inset-inline-start: 50%;
@@ -24844,8 +25020,11 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24844
25020
  height: var(--pf-v5-c-slider__thumb--before--Height);
24845
25021
  content: "";
24846
25022
  border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
24847
- transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
24848
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
+
24849
25028
  .pf-v5-c-slider__thumb:hover {
24850
25029
  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
24851
25030
  }
@@ -24861,13 +25040,17 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24861
25040
  margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
24862
25041
  }
24863
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));
24864
25044
  --pf-v5-c-slider__value--MarginLeft: 0;
24865
25045
  position: absolute;
24866
25046
  inset-block-start: 0;
24867
25047
  inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
24868
25048
  z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
24869
- transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
24870
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
+
24871
25054
  .pf-v5-c-slider__value .pf-v5-c-form-control {
24872
25055
  width: var(--pf-v5-c-slider__value--c-form-control--Width);
24873
25056
  }
@@ -25044,8 +25227,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
25044
25227
  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
25045
25228
  }
25046
25229
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
25047
- transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
25230
+ transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
25048
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
+
25049
25236
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
25050
25237
  display: none;
25051
25238
  }
@@ -27504,6 +27691,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27504
27691
  transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
27505
27692
  transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
27506
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
+
27507
27698
  .pf-v5-c-table__toggle svg {
27508
27699
  pointer-events: none;
27509
27700
  }
@@ -27900,10 +28091,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
27900
28091
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
27901
28092
  --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
27902
28093
  }
27903
- .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 {
27904
28095
  --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
27905
28096
  }
27906
- .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 {
27907
28098
  --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
27908
28099
  }
27909
28100
 
@@ -27993,10 +28184,14 @@ svg.pf-v5-c-spinner.pf-m-xl {
27993
28184
  cursor: pointer;
27994
28185
  }
27995
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));
27996
28188
  position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
27997
28189
  inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
27998
- transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
27999
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
+
28000
28195
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
28001
28196
  min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
28002
28197
  }
@@ -29147,6 +29342,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29147
29342
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29148
29343
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29149
29344
  }
29345
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29346
+ scale: -1 1;
29347
+ }
29150
29348
 
29151
29349
  .pf-v5-c-tabs__toggle-text {
29152
29350
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29321,6 +29519,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29321
29519
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29322
29520
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29323
29521
  }
29522
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29523
+ scale: -1 1;
29524
+ }
29324
29525
 
29325
29526
  .pf-v5-c-tabs__item-action {
29326
29527
  display: flex;
@@ -29352,6 +29553,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29352
29553
  opacity: 0;
29353
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);
29354
29555
  }
29556
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29557
+ scale: -1 1;
29558
+ }
29559
+
29355
29560
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29356
29561
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29357
29562
  }
@@ -30157,39 +30362,61 @@ svg.pf-v5-c-spinner.pf-m-xl {
30157
30362
  max-width: var(--pf-v5-c-tooltip--MaxWidth);
30158
30363
  box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
30159
30364
  }
30160
- .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 {
30161
- inset-block-end: 0;
30162
- inset-inline-start: 50%;
30163
- 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));
30164
- }
30165
- .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 {
30166
- inset-block-start: 0;
30167
- inset-inline-start: 50%;
30168
- 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));
30169
- }
30170
- .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 {
30171
- inset-block-start: 50%;
30172
- inset-inline-end: 0;
30173
- 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));
30174
- }
30175
- .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 {
30176
- inset-block-start: 50%;
30177
- inset-inline-start: 0;
30178
- 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));
30179
- }
30180
- .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 {
30181
- inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30182
- }
30183
- .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 {
30184
- inset-block-start: auto;
30185
- inset-block-end: 0;
30186
- }
30187
- .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 {
30188
- inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30189
- }
30190
- .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 {
30191
- inset-inline-start: auto;
30192
- 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;
30193
30420
  }
30194
30421
 
30195
30422
  .pf-v5-c-tooltip__content {
@@ -30210,11 +30437,18 @@ svg.pf-v5-c-spinner.pf-m-xl {
30210
30437
 
30211
30438
  .pf-v5-c-tooltip__arrow {
30212
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 */
30213
30446
  width: var(--pf-v5-c-tooltip__arrow--Width);
30214
30447
  height: var(--pf-v5-c-tooltip__arrow--Height);
30215
30448
  pointer-events: none;
30216
30449
  background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
30217
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));
30218
30452
  }
30219
30453
 
30220
30454
  :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
@@ -30252,16 +30486,25 @@ svg.pf-v5-c-spinner.pf-m-xl {
30252
30486
  .pf-v5-c-truncate__end {
30253
30487
  direction: rtl;
30254
30488
  }
30489
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30490
+ direction: ltr;
30491
+ }
30255
30492
 
30256
30493
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30257
30494
  overflow: visible;
30258
30495
  direction: ltr;
30259
30496
  }
30497
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
30498
+ direction: rtl;
30499
+ }
30260
30500
 
30261
30501
  @supports (-webkit-hyphens: none) {
30262
30502
  .pf-v5-c-truncate__end {
30263
30503
  direction: ltr;
30264
30504
  }
30505
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
30506
+ direction: rtl;
30507
+ }
30265
30508
  }
30266
30509
  .pf-v5-c-number-input {
30267
30510
  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
@@ -30530,6 +30773,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
30530
30773
  transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
30531
30774
  transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
30532
30775
  }
30776
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
30777
+ scale: -1 1;
30778
+ }
30533
30779
 
30534
30780
  .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
30535
30781
  --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -30619,6 +30865,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
30619
30865
  border: 0;
30620
30866
  transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
30621
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
+ }
30622
30871
 
30623
30872
  .pf-v5-c-tree-view__node-title.pf-m-truncate,
30624
30873
  .pf-v5-c-tree-view__node-text.pf-m-truncate {
@@ -31065,7 +31314,7 @@ label.pf-v5-c-tree-view__node-text {
31065
31314
  margin-inline-start: var(--pf-v5-c-wizard__toggle-separator--MarginLeft);
31066
31315
  color: var(--pf-v5-c-wizard__toggle-separator--Color);
31067
31316
  }
31068
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
31317
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__toggle-separator {
31069
31318
  scale: -1 1;
31070
31319
  }
31071
31320
 
@@ -31172,6 +31421,7 @@ label.pf-v5-c-tree-view__node-text {
31172
31421
  border: 0;
31173
31422
  }
31174
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));
31175
31425
  position: absolute;
31176
31426
  inset-block-start: var(--pf-v5-c-wizard__nav-link--before--Top);
31177
31427
  inset-inline-start: 0;
@@ -31185,7 +31435,9 @@ label.pf-v5-c-tree-view__node-text {
31185
31435
  color: var(--pf-v5-c-wizard__nav-link--before--Color);
31186
31436
  background-color: var(--pf-v5-c-wizard__nav-link--before--BackgroundColor);
31187
31437
  border-radius: var(--pf-v5-c-wizard__nav-link--before--BorderRadius);
31188
- transform: translateX(calc(var(--pf-v5-c-wizard__nav-link--before--TranslateX) * var(--pf-v5-global--rtl--transform--flip)));
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)));
31189
31441
  }
31190
31442
 
31191
31443
  .pf-v5-c-wizard__nav-link::before {
@@ -31234,7 +31486,7 @@ label.pf-v5-c-tree-view__node-text {
31234
31486
  transition: var(--pf-v5-c-wizard__nav-link-toggle-icon--Transition);
31235
31487
  transform: rotate(var(--pf-v5-c-wizard__nav-link-toggle-icon--Rotate));
31236
31488
  }
31237
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
31489
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-wizard__nav-link-toggle-icon {
31238
31490
  scale: -1 1;
31239
31491
  }
31240
31492