@patternfly/patternfly 5.1.0-prerelease.13 → 5.1.0-prerelease.15

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 (23) hide show
  1. package/components/Card/card.css +3 -0
  2. package/components/Card/card.scss +2 -0
  3. package/components/DataList/data-list.css +3 -0
  4. package/components/DataList/data-list.scss +2 -0
  5. package/components/JumpLinks/jump-links.css +3 -0
  6. package/components/JumpLinks/jump-links.scss +2 -0
  7. package/components/Popover/popover.css +56 -8
  8. package/components/Popover/popover.scss +96 -40
  9. package/components/Tabs/tabs.css +10 -0
  10. package/components/Tabs/tabs.scss +8 -0
  11. package/components/Tooltip/tooltip.css +57 -9
  12. package/components/Tooltip/tooltip.scss +81 -25
  13. package/docs/components/Popover/examples/Popover.css +3 -9
  14. package/docs/components/Popover/examples/Popover.md +4 -4
  15. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  16. package/docs/components/Tooltip/examples/Tooltip.md +8 -6
  17. package/docs/demos/Card/examples/Card.md +21 -5
  18. package/package.json +2 -2
  19. package/patternfly-no-globals.css +132 -17
  20. package/patternfly-theme-dark-unversioned.css +132 -17
  21. package/patternfly.css +132 -17
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -8168,6 +8168,9 @@ button.pf-v5-c-breadcrumb__link {
8168
8168
  display: inline-block;
8169
8169
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8170
8170
  }
8171
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8172
+ scale: -1 1;
8173
+ }
8171
8174
 
8172
8175
  .pf-v5-c-card__title-text {
8173
8176
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -10243,6 +10246,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10243
10246
  transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
10244
10247
  transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
10245
10248
  }
10249
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
10250
+ scale: -1 1;
10251
+ }
10246
10252
 
10247
10253
  .pf-v5-c-data-list__item-content {
10248
10254
  display: grid;
@@ -15981,6 +15987,9 @@ label.pf-v5-c-input-group__text {
15981
15987
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15982
15988
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15983
15989
  }
15990
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
15991
+ scale: -1 1;
15992
+ }
15984
15993
 
15985
15994
  .pf-v5-c-jump-links__toggle-text {
15986
15995
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -22554,37 +22563,85 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22554
22563
  --pf-v5-c-popover--MinWidth: auto;
22555
22564
  --pf-v5-c-popover--MaxWidth: none;
22556
22565
  }
22557
- .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 {
22566
+ .pf-v5-c-popover:is(.pf-m-top,
22567
+ .pf-m-top-left,
22568
+ .pf-m-top-right,
22569
+ .pf-m-block-start,
22570
+ .pf-m-block-start-inline-start,
22571
+ .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22558
22572
  inset-block-end: 0;
22559
22573
  inset-inline-start: 50%;
22560
22574
  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));
22561
22575
  }
22562
- .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 {
22576
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22577
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
22578
+ }
22579
+
22580
+ .pf-v5-c-popover:is(.pf-m-bottom,
22581
+ .pf-m-bottom-left,
22582
+ .pf-m-bottom-right,
22583
+ .pf-m-block-end,
22584
+ .pf-m-block-end-inline-start,
22585
+ .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22563
22586
  inset-block-start: 0;
22564
22587
  inset-inline-start: 50%;
22565
22588
  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));
22566
22589
  }
22567
- .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 {
22590
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22591
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
22592
+ }
22593
+
22594
+ .pf-v5-c-popover:is(.pf-m-left,
22595
+ .pf-m-left-top,
22596
+ .pf-m-left-bottom,
22597
+ .pf-m-inline-start,
22598
+ .pf-m-inline-start-block-start,
22599
+ .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22568
22600
  inset-block-start: 50%;
22569
22601
  inset-inline-end: 0;
22570
22602
  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));
22571
22603
  }
22572
- .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 {
22604
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22605
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
22606
+ }
22607
+
22608
+ .pf-v5-c-popover:is(.pf-m-right,
22609
+ .pf-m-right-top,
22610
+ .pf-m-right-bottom,
22611
+ .pf-m-inline-end,
22612
+ .pf-m-inline-end-block-start,
22613
+ .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22573
22614
  inset-block-start: 50%;
22574
22615
  inset-inline-start: 0;
22575
22616
  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));
22576
22617
  }
22577
- .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 {
22618
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22619
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
22620
+ }
22621
+
22622
+ .pf-v5-c-popover:is(.pf-m-left-top,
22623
+ .pf-m-right-top,
22624
+ .pf-m-inline-start-block-start,
22625
+ .pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
22578
22626
  inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22579
22627
  }
22580
- .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 {
22628
+ .pf-v5-c-popover:is(.pf-m-left-bottom,
22629
+ .pf-m-right-bottom,
22630
+ .pf-m-inline-start-block-end,
22631
+ .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22581
22632
  inset-block-start: auto;
22582
22633
  inset-block-end: 0;
22583
22634
  }
22584
- .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 {
22635
+ .pf-v5-c-popover:is(.pf-m-top-left,
22636
+ .pf-m-bottom-left,
22637
+ .pf-m-block-start-inline-start,
22638
+ .pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
22585
22639
  inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22586
22640
  }
22587
- .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 {
22641
+ .pf-v5-c-popover:is(.pf-m-top-right,
22642
+ .pf-m-bottom-right,
22643
+ .pf-m-block-start-inline-end,
22644
+ .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22588
22645
  inset-inline-start: auto;
22589
22646
  inset-inline-end: 0;
22590
22647
  }
@@ -29235,6 +29292,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29235
29292
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29236
29293
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29237
29294
  }
29295
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29296
+ scale: -1 1;
29297
+ }
29238
29298
 
29239
29299
  .pf-v5-c-tabs__toggle-text {
29240
29300
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29409,6 +29469,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29409
29469
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29410
29470
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29411
29471
  }
29472
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29473
+ scale: -1 1;
29474
+ }
29412
29475
 
29413
29476
  .pf-v5-c-tabs__item-action {
29414
29477
  display: flex;
@@ -29440,6 +29503,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29440
29503
  opacity: 0;
29441
29504
  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);
29442
29505
  }
29506
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29507
+ scale: -1 1;
29508
+ }
29509
+
29443
29510
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29444
29511
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29445
29512
  }
@@ -30245,37 +30312,85 @@ svg.pf-v5-c-spinner.pf-m-xl {
30245
30312
  max-width: var(--pf-v5-c-tooltip--MaxWidth);
30246
30313
  box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
30247
30314
  }
30248
- .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 {
30315
+ .pf-v5-c-tooltip:is(.pf-m-top,
30316
+ .pf-m-top-left,
30317
+ .pf-m-top-right,
30318
+ .pf-m-block-start,
30319
+ .pf-m-block-start-inline-start,
30320
+ .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30249
30321
  inset-block-end: 0;
30250
30322
  inset-inline-start: 50%;
30251
30323
  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));
30252
30324
  }
30253
- .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 {
30325
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30326
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
30327
+ }
30328
+
30329
+ .pf-v5-c-tooltip:is(.pf-m-bottom,
30330
+ .pf-m-bottom-left,
30331
+ .pf-m-bottom-right,
30332
+ .pf-m-block-end,
30333
+ .pf-m-block-end-inline-start,
30334
+ .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30254
30335
  inset-block-start: 0;
30255
30336
  inset-inline-start: 50%;
30256
30337
  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));
30257
30338
  }
30258
- .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 {
30339
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30340
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
30341
+ }
30342
+
30343
+ .pf-v5-c-tooltip:is(.pf-m-left,
30344
+ .pf-m-left-top,
30345
+ .pf-m-left-bottom,
30346
+ .pf-m-inline-start,
30347
+ .pf-m-inline-start-block-start,
30348
+ .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30259
30349
  inset-block-start: 50%;
30260
30350
  inset-inline-end: 0;
30261
30351
  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));
30262
30352
  }
30263
- .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 {
30353
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30354
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
30355
+ }
30356
+
30357
+ .pf-v5-c-tooltip:is(.pf-m-right,
30358
+ .pf-m-right-top,
30359
+ .pf-m-right-bottom,
30360
+ .pf-m-inline-end,
30361
+ .pf-m-inline-end-block-start,
30362
+ .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30264
30363
  inset-block-start: 50%;
30265
30364
  inset-inline-start: 0;
30266
30365
  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));
30267
30366
  }
30268
- .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 {
30367
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30368
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
30369
+ }
30370
+
30371
+ .pf-v5-c-tooltip:is(.pf-m-left-top,
30372
+ .pf-m-right-top,
30373
+ .pf-m-inline-start-block-start,
30374
+ .pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
30269
30375
  inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30270
30376
  }
30271
- .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 {
30377
+ .pf-v5-c-tooltip:is(.pf-m-left-bottom,
30378
+ .pf-m-right-bottom,
30379
+ .pf-m-inline-start-block-end,
30380
+ .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30272
30381
  inset-block-start: auto;
30273
30382
  inset-block-end: 0;
30274
30383
  }
30275
- .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 {
30384
+ .pf-v5-c-tooltip:is(.pf-m-top-left,
30385
+ .pf-m-bottom-left,
30386
+ .pf-m-block-start-block-start,
30387
+ .pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
30276
30388
  inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30277
30389
  }
30278
- .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 {
30390
+ .pf-v5-c-tooltip:is(.pf-m-top-right,
30391
+ .pf-m-bottom-right,
30392
+ .pf-m-block-start-block-end,
30393
+ .pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
30279
30394
  inset-inline-start: auto;
30280
30395
  inset-inline-end: 0;
30281
30396
  }
@@ -30292,7 +30407,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
30292
30407
  word-break: break-word;
30293
30408
  background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
30294
30409
  }
30295
- .pf-v5-c-tooltip__content.pf-m-text-align-left {
30410
+ .pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
30296
30411
  text-align: start;
30297
30412
  }
30298
30413
 
package/patternfly.css CHANGED
@@ -8168,6 +8168,9 @@ button.pf-v5-c-breadcrumb__link {
8168
8168
  display: inline-block;
8169
8169
  transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
8170
8170
  }
8171
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
8172
+ scale: -1 1;
8173
+ }
8171
8174
 
8172
8175
  .pf-v5-c-card__title-text {
8173
8176
  font-family: var(--pf-v5-c-card__title-text--FontFamily);
@@ -10243,6 +10246,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10243
10246
  transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
10244
10247
  transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
10245
10248
  }
10249
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
10250
+ scale: -1 1;
10251
+ }
10246
10252
 
10247
10253
  .pf-v5-c-data-list__item-content {
10248
10254
  display: grid;
@@ -15981,6 +15987,9 @@ label.pf-v5-c-input-group__text {
15981
15987
  transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
15982
15988
  transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
15983
15989
  }
15990
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
15991
+ scale: -1 1;
15992
+ }
15984
15993
 
15985
15994
  .pf-v5-c-jump-links__toggle-text {
15986
15995
  margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
@@ -22554,37 +22563,85 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22554
22563
  --pf-v5-c-popover--MinWidth: auto;
22555
22564
  --pf-v5-c-popover--MaxWidth: none;
22556
22565
  }
22557
- .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 {
22566
+ .pf-v5-c-popover:is(.pf-m-top,
22567
+ .pf-m-top-left,
22568
+ .pf-m-top-right,
22569
+ .pf-m-block-start,
22570
+ .pf-m-block-start-inline-start,
22571
+ .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22558
22572
  inset-block-end: 0;
22559
22573
  inset-inline-start: 50%;
22560
22574
  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));
22561
22575
  }
22562
- .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 {
22576
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
22577
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
22578
+ }
22579
+
22580
+ .pf-v5-c-popover:is(.pf-m-bottom,
22581
+ .pf-m-bottom-left,
22582
+ .pf-m-bottom-right,
22583
+ .pf-m-block-end,
22584
+ .pf-m-block-end-inline-start,
22585
+ .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22563
22586
  inset-block-start: 0;
22564
22587
  inset-inline-start: 50%;
22565
22588
  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));
22566
22589
  }
22567
- .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 {
22590
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22591
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
22592
+ }
22593
+
22594
+ .pf-v5-c-popover:is(.pf-m-left,
22595
+ .pf-m-left-top,
22596
+ .pf-m-left-bottom,
22597
+ .pf-m-inline-start,
22598
+ .pf-m-inline-start-block-start,
22599
+ .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22568
22600
  inset-block-start: 50%;
22569
22601
  inset-inline-end: 0;
22570
22602
  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));
22571
22603
  }
22572
- .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 {
22604
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
22605
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
22606
+ }
22607
+
22608
+ .pf-v5-c-popover:is(.pf-m-right,
22609
+ .pf-m-right-top,
22610
+ .pf-m-right-bottom,
22611
+ .pf-m-inline-end,
22612
+ .pf-m-inline-end-block-start,
22613
+ .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22573
22614
  inset-block-start: 50%;
22574
22615
  inset-inline-start: 0;
22575
22616
  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));
22576
22617
  }
22577
- .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 {
22618
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22619
+ transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
22620
+ }
22621
+
22622
+ .pf-v5-c-popover:is(.pf-m-left-top,
22623
+ .pf-m-right-top,
22624
+ .pf-m-inline-start-block-start,
22625
+ .pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
22578
22626
  inset-block-start: var(--pf-v5-c-popover__arrow--Height);
22579
22627
  }
22580
- .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 {
22628
+ .pf-v5-c-popover:is(.pf-m-left-bottom,
22629
+ .pf-m-right-bottom,
22630
+ .pf-m-inline-start-block-end,
22631
+ .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
22581
22632
  inset-block-start: auto;
22582
22633
  inset-block-end: 0;
22583
22634
  }
22584
- .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 {
22635
+ .pf-v5-c-popover:is(.pf-m-top-left,
22636
+ .pf-m-bottom-left,
22637
+ .pf-m-block-start-inline-start,
22638
+ .pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
22585
22639
  inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
22586
22640
  }
22587
- .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 {
22641
+ .pf-v5-c-popover:is(.pf-m-top-right,
22642
+ .pf-m-bottom-right,
22643
+ .pf-m-block-start-inline-end,
22644
+ .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
22588
22645
  inset-inline-start: auto;
22589
22646
  inset-inline-end: 0;
22590
22647
  }
@@ -29235,6 +29292,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29235
29292
  transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
29236
29293
  transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
29237
29294
  }
29295
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
29296
+ scale: -1 1;
29297
+ }
29238
29298
 
29239
29299
  .pf-v5-c-tabs__toggle-text {
29240
29300
  margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -29409,6 +29469,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
29409
29469
  transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
29410
29470
  transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
29411
29471
  }
29472
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
29473
+ scale: -1 1;
29474
+ }
29412
29475
 
29413
29476
  .pf-v5-c-tabs__item-action {
29414
29477
  display: flex;
@@ -29440,6 +29503,10 @@ svg.pf-v5-c-spinner.pf-m-xl {
29440
29503
  opacity: 0;
29441
29504
  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);
29442
29505
  }
29506
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
29507
+ scale: -1 1;
29508
+ }
29509
+
29443
29510
  .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
29444
29511
  --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
29445
29512
  }
@@ -30245,37 +30312,85 @@ svg.pf-v5-c-spinner.pf-m-xl {
30245
30312
  max-width: var(--pf-v5-c-tooltip--MaxWidth);
30246
30313
  box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
30247
30314
  }
30248
- .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 {
30315
+ .pf-v5-c-tooltip:is(.pf-m-top,
30316
+ .pf-m-top-left,
30317
+ .pf-m-top-right,
30318
+ .pf-m-block-start,
30319
+ .pf-m-block-start-inline-start,
30320
+ .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30249
30321
  inset-block-end: 0;
30250
30322
  inset-inline-start: 50%;
30251
30323
  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));
30252
30324
  }
30253
- .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 {
30325
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
30326
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
30327
+ }
30328
+
30329
+ .pf-v5-c-tooltip:is(.pf-m-bottom,
30330
+ .pf-m-bottom-left,
30331
+ .pf-m-bottom-right,
30332
+ .pf-m-block-end,
30333
+ .pf-m-block-end-inline-start,
30334
+ .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30254
30335
  inset-block-start: 0;
30255
30336
  inset-inline-start: 50%;
30256
30337
  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));
30257
30338
  }
30258
- .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 {
30339
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
30340
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
30341
+ }
30342
+
30343
+ .pf-v5-c-tooltip:is(.pf-m-left,
30344
+ .pf-m-left-top,
30345
+ .pf-m-left-bottom,
30346
+ .pf-m-inline-start,
30347
+ .pf-m-inline-start-block-start,
30348
+ .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30259
30349
  inset-block-start: 50%;
30260
30350
  inset-inline-end: 0;
30261
30351
  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));
30262
30352
  }
30263
- .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 {
30353
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
30354
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
30355
+ }
30356
+
30357
+ .pf-v5-c-tooltip:is(.pf-m-right,
30358
+ .pf-m-right-top,
30359
+ .pf-m-right-bottom,
30360
+ .pf-m-inline-end,
30361
+ .pf-m-inline-end-block-start,
30362
+ .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30264
30363
  inset-block-start: 50%;
30265
30364
  inset-inline-start: 0;
30266
30365
  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));
30267
30366
  }
30268
- .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 {
30367
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30368
+ transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
30369
+ }
30370
+
30371
+ .pf-v5-c-tooltip:is(.pf-m-left-top,
30372
+ .pf-m-right-top,
30373
+ .pf-m-inline-start-block-start,
30374
+ .pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
30269
30375
  inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
30270
30376
  }
30271
- .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 {
30377
+ .pf-v5-c-tooltip:is(.pf-m-left-bottom,
30378
+ .pf-m-right-bottom,
30379
+ .pf-m-inline-start-block-end,
30380
+ .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
30272
30381
  inset-block-start: auto;
30273
30382
  inset-block-end: 0;
30274
30383
  }
30275
- .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 {
30384
+ .pf-v5-c-tooltip:is(.pf-m-top-left,
30385
+ .pf-m-bottom-left,
30386
+ .pf-m-block-start-block-start,
30387
+ .pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
30276
30388
  inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
30277
30389
  }
30278
- .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 {
30390
+ .pf-v5-c-tooltip:is(.pf-m-top-right,
30391
+ .pf-m-bottom-right,
30392
+ .pf-m-block-start-block-end,
30393
+ .pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
30279
30394
  inset-inline-start: auto;
30280
30395
  inset-inline-end: 0;
30281
30396
  }
@@ -30292,7 +30407,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
30292
30407
  word-break: break-word;
30293
30408
  background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
30294
30409
  }
30295
- .pf-v5-c-tooltip__content.pf-m-text-align-left {
30410
+ .pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
30296
30411
  text-align: start;
30297
30412
  }
30298
30413