@patternfly/react-styles 5.1.0 → 5.1.1-prerelease.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. package/CHANGELOG.md +4 -2
  2. package/css/components/AboutModalBox/about-modal-box.css +20 -13
  3. package/css/components/Accordion/accordion.css +30 -20
  4. package/css/components/ActionList/action-list.css +2 -2
  5. package/css/components/Alert/alert-group.css +7 -4
  6. package/css/components/Alert/alert.css +16 -13
  7. package/css/components/AppLauncher/app-launcher.css +32 -23
  8. package/css/components/BackToTop/back-to-top.css +2 -2
  9. package/css/components/Backdrop/backdrop.css +2 -2
  10. package/css/components/BackgroundImage/background-image.css +2 -2
  11. package/css/components/Badge/badge.css +2 -2
  12. package/css/components/Banner/banner.css +5 -2
  13. package/css/components/Breadcrumb/breadcrumb.css +6 -3
  14. package/css/components/Button/button.css +23 -17
  15. package/css/components/CalendarMonth/calendar-month.css +21 -15
  16. package/css/components/Card/card.css +21 -16
  17. package/css/components/Check/check.css +2 -2
  18. package/css/components/Chip/chip-group.css +6 -6
  19. package/css/components/Chip/chip.css +16 -9
  20. package/css/components/Chip/chip.d.ts +1 -0
  21. package/css/components/Chip/chip.js +1 -0
  22. package/css/components/Chip/chip.mjs +1 -0
  23. package/css/components/ClipboardCopy/clipboard-copy.css +16 -10
  24. package/css/components/CodeBlock/code-block.css +6 -3
  25. package/css/components/CodeEditor/code-editor.css +31 -22
  26. package/css/components/Content/content.css +33 -30
  27. package/css/components/ContextSelector/context-selector.css +41 -26
  28. package/css/components/DataList/data-list-grid.css +21 -49
  29. package/css/components/DataList/data-list.css +66 -84
  30. package/css/components/DatePicker/date-picker.css +8 -8
  31. package/css/components/DescriptionList/description-list.css +8 -5
  32. package/css/components/DragDrop/drag-drop.css +8 -8
  33. package/css/components/Drawer/drawer.css +75 -60
  34. package/css/components/Dropdown/dropdown.css +75 -66
  35. package/css/components/DualListSelector/dual-list-selector.css +20 -14
  36. package/css/components/EmptyState/empty-state.css +7 -4
  37. package/css/components/ExpandableSection/expandable-section.css +13 -10
  38. package/css/components/FileUpload/file-upload.css +9 -15
  39. package/css/components/Form/form.css +50 -50
  40. package/css/components/FormControl/form-control.css +21 -11
  41. package/css/components/HelperText/helper-text.css +1 -1
  42. package/css/components/Hint/hint.css +9 -6
  43. package/css/components/Icon/icon.css +1 -1
  44. package/css/components/InlineEdit/inline-edit.css +4 -4
  45. package/css/components/InputGroup/input-group.css +12 -6
  46. package/css/components/JumpLinks/jump-links.css +24 -24
  47. package/css/components/Label/label-group.css +13 -10
  48. package/css/components/Label/label.css +9 -9
  49. package/css/components/List/list.css +9 -9
  50. package/css/components/LogViewer/log-viewer.css +14 -14
  51. package/css/components/Login/login.css +36 -27
  52. package/css/components/Masthead/masthead.css +19 -22
  53. package/css/components/Menu/menu.css +69 -66
  54. package/css/components/MenuToggle/menu-toggle.css +41 -29
  55. package/css/components/ModalBox/modal-box.css +19 -19
  56. package/css/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  57. package/css/components/Nav/nav.css +100 -93
  58. package/css/components/NotificationBadge/notification-badge.css +13 -7
  59. package/css/components/NotificationDrawer/notification-drawer.css +28 -19
  60. package/css/components/NumberInput/number-input.css +3 -3
  61. package/css/components/OptionsMenu/options-menu.css +43 -31
  62. package/css/components/OverflowMenu/overflow-menu.css +2 -2
  63. package/css/components/Page/page.css +119 -65
  64. package/css/components/Pagination/pagination.css +24 -18
  65. package/css/components/Panel/panel.css +13 -7
  66. package/css/components/Popover/popover.css +24 -21
  67. package/css/components/Progress/progress.css +7 -7
  68. package/css/components/ProgressStepper/progress-stepper.css +26 -20
  69. package/css/components/Radio/radio.css +4 -5
  70. package/css/components/Select/select.css +56 -47
  71. package/css/components/Sidebar/sidebar.css +11 -5
  72. package/css/components/SimpleList/simple-list.css +10 -4
  73. package/css/components/Skeleton/skeleton.css +2 -5
  74. package/css/components/SkipToContent/skip-to-content.css +3 -3
  75. package/css/components/Slider/slider.css +17 -20
  76. package/css/components/Switch/switch.css +5 -5
  77. package/css/components/TabContent/tab-content.css +4 -1
  78. package/css/components/Table/table-grid.css +256 -219
  79. package/css/components/Table/table-scrollable.css +2 -2
  80. package/css/components/Table/table-tree-view.css +107 -104
  81. package/css/components/Table/table.css +87 -69
  82. package/css/components/Tabs/tabs.css +66 -48
  83. package/css/components/TextInputGroup/text-input-group.css +15 -15
  84. package/css/components/Tile/tile.css +10 -10
  85. package/css/components/ToggleGroup/toggle-group.css +14 -11
  86. package/css/components/Toolbar/toolbar.css +44 -41
  87. package/css/components/Tooltip/tooltip.css +19 -16
  88. package/css/components/TreeView/tree-view.css +42 -27
  89. package/css/components/Wizard/wizard.css +47 -35
  90. package/css/docs/components/Button/examples/Button.css +2 -2
  91. package/css/docs/components/DragDrop/examples/DragDrop.css +2 -2
  92. package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  93. package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
  94. package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
  95. package/css/docs/components/Nav/examples/Navigation.css +2 -2
  96. package/css/docs/components/Popover/examples/Popover.css +2 -2
  97. package/css/docs/components/Select/deprecated/Select.css +3 -3
  98. package/css/docs/components/Table/examples/Table.css +2 -2
  99. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  100. package/css/docs/components/Tile/examples/Tile.css +1 -1
  101. package/css/docs/demos/Card/examples/Card.css +3 -3
  102. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  103. package/css/layouts/Flex/flex.css +115 -43
  104. package/css/utilities/Accessibility/accessibility.css +12 -12
  105. package/css/utilities/Spacing/spacing.css +720 -960
  106. package/package.json +4 -8
@@ -289,27 +289,27 @@
289
289
  position: relative;
290
290
  }
291
291
  .pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) {
292
- border-bottom: 0;
292
+ border-block-end: 0;
293
293
  }
294
294
  .pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) > * {
295
295
  z-index: var(--pf-v5-c-table--m-sticky-header--cell--ZIndex);
296
296
  }
297
297
  .pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > * {
298
298
  position: sticky;
299
- top: 0;
299
+ inset-block-start: 0;
300
300
  background: var(--pf-v5-c-table--BackgroundColor);
301
301
  }
302
302
  .pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > *::after {
303
303
  position: absolute;
304
- right: 0;
305
- bottom: 0;
306
- left: 0;
304
+ inset-block-end: 0;
305
+ inset-inline-start: 0;
306
+ inset-inline-end: 0;
307
307
  content: "";
308
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
308
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
309
309
  }
310
310
  .pf-v5-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
311
311
  position: sticky;
312
- top: 0;
312
+ inset-block-start: 0;
313
313
  z-index: var(--pf-v5-global--ZIndex--xs);
314
314
  background: var(--pf-v5-c-table--BackgroundColor);
315
315
  }
@@ -322,7 +322,7 @@
322
322
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table__thead--m-nested-column-header__tr--PaddingBottom);
323
323
  }
324
324
  .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) {
325
- border-bottom: 0;
325
+ border-block-end: 0;
326
326
  }
327
327
  .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) th:where(.pf-v5-c-table__th):not([rowspan]),
328
328
  .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) td:where(.pf-v5-c-table__td):not([rowspan]) {
@@ -336,7 +336,7 @@
336
336
  background: var(--pf-v5-c-table--m-striped__tr--BackgroundColor);
337
337
  }
338
338
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
339
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
339
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
340
340
  }
341
341
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row).pf-m-ghost-row {
342
342
  background-color: var(--pf-v5-c-table__tr--m-ghost-row--BackgroundColor);
@@ -348,7 +348,10 @@
348
348
  width: var(--pf-v5-c-table--cell--Width);
349
349
  min-width: var(--pf-v5-c-table--cell--MinWidth);
350
350
  max-width: var(--pf-v5-c-table--cell--MaxWidth);
351
- padding: var(--pf-v5-c-table--cell--PaddingTop) var(--pf-v5-c-table--cell--PaddingRight) var(--pf-v5-c-table--cell--PaddingBottom) var(--pf-v5-c-table--cell--PaddingLeft);
351
+ padding-block-start: var(--pf-v5-c-table--cell--PaddingTop);
352
+ padding-block-end: var(--pf-v5-c-table--cell--PaddingBottom);
353
+ padding-inline-start: var(--pf-v5-c-table--cell--PaddingLeft);
354
+ padding-inline-end: var(--pf-v5-c-table--cell--PaddingRight);
352
355
  overflow: var(--pf-v5-c-table--cell--Overflow);
353
356
  font-size: var(--pf-v5-c-table--cell--FontSize);
354
357
  font-weight: var(--pf-v5-c-table--cell--FontWeight);
@@ -382,26 +385,26 @@
382
385
  }
383
386
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before, .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
384
387
  position: absolute;
385
- top: 0;
386
- right: 0;
387
- bottom: 0;
388
- left: 0;
388
+ inset-block-start: 0;
389
+ inset-block-end: 0;
390
+ inset-inline-start: 0;
391
+ inset-inline-end: 0;
389
392
  pointer-events: none;
390
393
  content: "";
391
394
  }
392
395
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before {
393
- border-right: var(--pf-v5-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-v5-c-table--cell--m-border-right--before--BorderRightColor);
396
+ border-inline-end: var(--pf-v5-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-v5-c-table--cell--m-border-right--before--BorderRightColor);
394
397
  }
395
398
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
396
- border-left: var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftColor);
399
+ border-inline-start: var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftColor);
397
400
  }
398
401
  .pf-v5-c-table caption:where(.pf-v5-c-table__caption) {
399
- padding-top: var(--pf-v5-c-table__caption--PaddingTop);
400
- padding-bottom: var(--pf-v5-c-table__caption--PaddingBottom);
401
- padding-left: var(--pf-v5-c-table__caption--PaddingLeft);
402
+ padding-block-start: var(--pf-v5-c-table__caption--PaddingTop);
403
+ padding-block-end: var(--pf-v5-c-table__caption--PaddingBottom);
404
+ padding-inline-start: var(--pf-v5-c-table__caption--PaddingLeft);
402
405
  font-size: var(--pf-v5-c-table__caption--FontSize);
403
406
  color: var(--pf-v5-c-table__caption--Color);
404
- text-align: left;
407
+ text-align: start;
405
408
  background-color: var(--pf-v5-c-table--BackgroundColor);
406
409
  }
407
410
  .pf-v5-c-table thead:where(.pf-v5-c-table__thead) {
@@ -439,19 +442,19 @@
439
442
  }
440
443
  .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
441
444
  position: absolute;
442
- top: var(--pf-v5-c-table__expandable-row--after--Top);
443
- bottom: var(--pf-v5-c-table__expandable-row--after--Bottom);
444
- left: 0;
445
+ inset-block-start: var(--pf-v5-c-table__expandable-row--after--Top);
446
+ inset-block-end: var(--pf-v5-c-table__expandable-row--after--Bottom);
447
+ inset-inline-start: 0;
445
448
  content: "";
446
449
  background-color: transparent;
447
- border-left: var(--pf-v5-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-v5-c-table__expandable-row--after--BorderColor);
450
+ border-inline-start: var(--pf-v5-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-v5-c-table__expandable-row--after--BorderColor);
448
451
  }
449
452
  .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__check input:where(.pf-v5-c-check__input) {
450
- margin-top: var(--pf-v5-c-table__check--input--MarginTop);
453
+ margin-block-start: var(--pf-v5-c-table__check--input--MarginTop);
451
454
  vertical-align: top;
452
455
  }
453
456
  .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > :first-child:not(.pf-v5-c-table__control-row) {
454
- border-bottom-width: 0;
457
+ border-block-end-width: 0;
455
458
  }
456
459
  .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:first-child, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:last-child {
457
460
  padding: 0;
@@ -497,19 +500,19 @@
497
500
  --pf-v5-c-table--cell--WhiteSpace: normal;
498
501
  }
499
502
  .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) {
500
- border-bottom: 0;
503
+ border-block-end: 0;
501
504
  }
502
505
  .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
503
- border-left: 0;
506
+ border-inline-start: 0;
504
507
  }
505
508
  .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody):not(.pf-m-expanded) .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
506
509
  display: none;
507
510
  }
508
511
  .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > .pf-v5-c-table__control-row {
509
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
512
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
510
513
  }
511
514
  .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__control-row > .pf-v5-c-table__compound-expansion-toggle:first-child > ::before {
512
- border-left-width: 0;
515
+ border-inline-start-width: 0;
513
516
  }
514
517
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable {
515
518
  cursor: pointer;
@@ -620,11 +623,14 @@
620
623
  .pf-v5-c-table__button {
621
624
  position: static;
622
625
  width: 100%;
623
- padding: var(--pf-v5-c-table--cell--PaddingTop) var(--pf-v5-c-table--cell--PaddingRight) var(--pf-v5-c-table--cell--PaddingBottom) var(--pf-v5-c-table--cell--PaddingLeft);
626
+ padding-block-start: var(--pf-v5-c-table--cell--PaddingTop);
627
+ padding-block-end: var(--pf-v5-c-table--cell--PaddingBottom);
628
+ padding-inline-start: var(--pf-v5-c-table--cell--PaddingLeft);
629
+ padding-inline-end: var(--pf-v5-c-table--cell--PaddingRight);
624
630
  font-size: inherit;
625
631
  font-weight: inherit;
626
632
  color: var(--pf-v5-c-table__button--Color);
627
- text-align: left;
633
+ text-align: start;
628
634
  white-space: inherit;
629
635
  user-select: text;
630
636
  background-color: var(--pf-v5-c-table__button--BackgroundColor);
@@ -632,10 +638,10 @@
632
638
  }
633
639
  .pf-v5-c-table__button::before {
634
640
  position: absolute;
635
- top: 0;
636
- right: 0;
637
- bottom: 0;
638
- left: 0;
641
+ inset-block-start: 0;
642
+ inset-block-end: 0;
643
+ inset-inline-start: 0;
644
+ inset-inline-end: 0;
639
645
  cursor: pointer;
640
646
  content: "";
641
647
  }
@@ -718,8 +724,8 @@
718
724
  vertical-align: top;
719
725
  }
720
726
  .pf-v5-c-table__toggle .pf-v5-c-button {
721
- margin-top: var(--pf-v5-c-table__toggle--c-button--MarginTop);
722
- margin-bottom: var(--pf-v5-c-table__toggle--c-button--MarginBottom);
727
+ margin-block-start: var(--pf-v5-c-table__toggle--c-button--MarginTop);
728
+ margin-block-end: var(--pf-v5-c-table__toggle--c-button--MarginBottom);
723
729
  }
724
730
  .pf-v5-c-table__toggle .pf-v5-c-button.pf-m-expanded .pf-v5-c-table__toggle-icon {
725
731
  transform: rotate(var(--pf-v5-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
@@ -742,20 +748,29 @@
742
748
  .pf-v5-c-table__check label {
743
749
  display: block;
744
750
  padding: inherit;
745
- margin: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1) calc(var(--pf-v5-c-table--cell--PaddingRight) * -1) calc(var(--pf-v5-c-table--cell--PaddingBottom) * -1) calc(var(--pf-v5-c-table--cell--PaddingLeft) * -1);
751
+ margin-block-start: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1);
752
+ margin-block-end: calc(var(--pf-v5-c-table--cell--PaddingBottom) * -1);
753
+ margin-inline-start: calc(var(--pf-v5-c-table--cell--PaddingLeft) * -1);
754
+ margin-inline-end: calc(var(--pf-v5-c-table--cell--PaddingRight) * -1);
746
755
  }
747
756
 
748
757
  .pf-v5-c-table__favorite .pf-v5-c-button {
749
758
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--c-button--Color);
750
759
  --pf-v5-c-button--FontSize: var(--pf-v5-c-table__favorite--c-button--FontSize);
751
- margin: var(--pf-v5-c-table__favorite--c-button--MarginTop) var(--pf-v5-c-table__favorite--c-button--MarginRight) var(--pf-v5-c-table__favorite--c-button--MarginBottom) var(--pf-v5-c-table__favorite--c-button--MarginLeft);
760
+ margin-block-start: var(--pf-v5-c-table__favorite--c-button--MarginTop);
761
+ margin-block-end: var(--pf-v5-c-table__favorite--c-button--MarginBottom);
762
+ margin-inline-start: var(--pf-v5-c-table__favorite--c-button--MarginLeft);
763
+ margin-inline-end: var(--pf-v5-c-table__favorite--c-button--MarginRight);
752
764
  }
753
765
  .pf-m-favorited.pf-v5-c-table__favorite .pf-v5-c-button {
754
766
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--m-favorited--c-button--Color);
755
767
  }
756
768
 
757
769
  .pf-v5-c-table__draggable .pf-v5-c-button {
758
- margin: var(--pf-v5-c-table__draggable--c-button--MarginTop) var(--pf-v5-c-table__draggable--c-button--MarginRight) var(--pf-v5-c-table__draggable--c-button--MarginBottom) var(--pf-v5-c-table__draggable--c-button--MarginLeft);
770
+ margin-block-start: var(--pf-v5-c-table__draggable--c-button--MarginTop);
771
+ margin-block-end: var(--pf-v5-c-table__draggable--c-button--MarginBottom);
772
+ margin-inline-start: var(--pf-v5-c-table__draggable--c-button--MarginLeft);
773
+ margin-inline-end: var(--pf-v5-c-table__draggable--c-button--MarginRight);
759
774
  cursor: grab;
760
775
  }
761
776
  .pf-v5-c-table__draggable .pf-v5-c-button:active {
@@ -768,19 +783,19 @@
768
783
  --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table__action--PaddingRight);
769
784
  --pf-v5-c-table--cell--PaddingBottom: 0;
770
785
  --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table__action--PaddingLeft);
771
- padding-top: 0;
772
- padding-bottom: 0;
786
+ padding-block-start: 0;
787
+ padding-block-end: 0;
773
788
  vertical-align: middle;
774
789
  }
775
790
 
776
791
  .pf-v5-c-table__action {
777
- text-align: right;
792
+ text-align: end;
778
793
  }
779
794
 
780
795
  .pf-v5-c-table__inline-edit-action {
781
796
  --pf-v5-c-table--cell--PaddingLeft: 0;
782
797
  --pf-v5-c-table--cell--PaddingRight: 0;
783
- text-align: right;
798
+ text-align: end;
784
799
  }
785
800
 
786
801
  .pf-v5-c-table__compound-expansion-toggle {
@@ -803,25 +818,25 @@
803
818
  .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before,
804
819
  .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::after {
805
820
  position: absolute;
806
- right: 0;
821
+ inset-inline-end: 0;
807
822
  content: "";
808
823
  border-style: solid;
809
824
  border-width: 0;
810
825
  }
811
826
  .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
812
- top: 0;
813
- bottom: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Bottom);
814
- left: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Left);
827
+ inset-block-start: 0;
828
+ inset-block-end: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Bottom);
829
+ inset-inline-start: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Left);
815
830
  border-color: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderColor);
816
- border-right-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
817
- border-left-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
831
+ border-inline-start-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
832
+ border-inline-end-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
818
833
  }
819
834
  .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::after {
820
- top: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Top);
821
- left: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Left);
835
+ inset-block-start: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Top);
836
+ inset-inline-start: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Left);
822
837
  pointer-events: none;
823
838
  border-color: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderColor);
824
- border-top-width: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
839
+ border-block-start-width: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
825
840
  }
826
841
  .pf-v5-c-table__compound-expansion-toggle:hover, .pf-v5-c-table__compound-expansion-toggle:focus-within, .pf-v5-c-table__compound-expansion-toggle.pf-m-expanded {
827
842
  --pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
@@ -833,7 +848,7 @@
833
848
  --pf-v5-c-table__compound-expansion-toggle__button--after--Left: 0;
834
849
  }
835
850
  .pf-v5-c-table__compound-expansion-toggle.pf-m-expanded .pf-v5-c-table__button::before {
836
- border-bottom: var(--pf-v5-c-table--BackgroundColor) solid var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
851
+ border-block-end: var(--pf-v5-c-table--BackgroundColor) solid var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
837
852
  }
838
853
  .pf-v5-c-table__compound-expansion-toggle.pf-m-expanded:first-child {
839
854
  --pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
@@ -849,14 +864,14 @@
849
864
  }
850
865
 
851
866
  .pf-v5-c-table__column-help-action {
852
- margin-left: var(--pf-v5-c-table__column-help--MarginLeft);
867
+ margin-inline-start: var(--pf-v5-c-table__column-help--MarginLeft);
853
868
  transform: translateY(var(--pf-v5-c-table__column-help--TranslateY));
854
869
  }
855
870
  .pf-v5-c-table__column-help-action .pf-v5-c-button {
856
871
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-table__column-help--c-button--PaddingRight);
857
872
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-table__column-help--c-button--PaddingLeft);
858
- margin-top: var(--pf-v5-c-table__column-help--c-button--MarginTop);
859
- margin-bottom: var(--pf-v5-c-table__column-help--c-button--MarginBottom);
873
+ margin-block-start: var(--pf-v5-c-table__column-help--c-button--MarginTop);
874
+ margin-block-end: var(--pf-v5-c-table__column-help--c-button--MarginBottom);
860
875
  font-size: inherit;
861
876
  line-height: 1;
862
877
  }
@@ -868,9 +883,9 @@
868
883
  --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table__sort__button--PaddingLeft);
869
884
  display: flex;
870
885
  width: auto;
871
- margin-top: var(--pf-v5-c-table__sort__button--MarginTop);
872
- margin-bottom: var(--pf-v5-c-table__sort__button--MarginBottom);
873
- margin-left: var(--pf-v5-c-table__sort__button--MarginLeft);
886
+ margin-block-start: var(--pf-v5-c-table__sort__button--MarginTop);
887
+ margin-block-end: var(--pf-v5-c-table__sort__button--MarginBottom);
888
+ margin-inline-start: var(--pf-v5-c-table__sort__button--MarginLeft);
874
889
  }
875
890
  .pf-v5-c-table__sort .pf-v5-c-table__button:hover {
876
891
  --pf-v5-c-table__sort-indicator--Color: var(--pf-v5-c-table__sort__button--hover__sort-indicator--Color);
@@ -905,7 +920,7 @@
905
920
 
906
921
  .pf-v5-c-table__sort-indicator {
907
922
  grid-column: 2;
908
- margin-left: var(--pf-v5-c-table__sort-indicator--MarginLeft);
923
+ margin-inline-start: var(--pf-v5-c-table__sort-indicator--MarginLeft);
909
924
  color: var(--pf-v5-c-table__sort-indicator--Color);
910
925
  pointer-events: none;
911
926
  }
@@ -914,7 +929,7 @@
914
929
  --pf-v5-c-table--cell--PaddingTop: 0;
915
930
  --pf-v5-c-table--cell--PaddingBottom: 0;
916
931
  position: relative;
917
- border-bottom: 0 solid transparent;
932
+ border-block-end: 0 solid transparent;
918
933
  box-shadow: 0 0 0 0 transparent;
919
934
  }
920
935
  .pf-v5-c-table__expandable-row,
@@ -923,19 +938,22 @@
923
938
  }
924
939
  .pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding,
925
940
  .pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding {
926
- padding: 0 0 0 var(--pf-v5-c-table__expandable-row--after--border-width--base);
941
+ padding-block-start: 0;
942
+ padding-inline-end: 0;
943
+ padding-block-end: 0;
944
+ padding-inline-start: var(--pf-v5-c-table__expandable-row--after--border-width--base);
927
945
  }
928
946
  .pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding .pf-v5-c-table__expandable-row-content,
929
947
  .pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding .pf-v5-c-table__expandable-row-content {
930
948
  padding: 0;
931
949
  }
932
950
  .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
933
- padding-top: var(--pf-v5-c-table__expandable-row-content--PaddingTop);
934
- padding-bottom: var(--pf-v5-c-table__expandable-row-content--PaddingBottom);
951
+ padding-block-start: var(--pf-v5-c-table__expandable-row-content--PaddingTop);
952
+ padding-block-end: var(--pf-v5-c-table__expandable-row-content--PaddingBottom);
935
953
  }
936
954
  .pf-v5-c-table__expandable-row.pf-m-expanded {
937
- border-bottom-color: var(--pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor);
938
- border-bottom-width: var(--pf-v5-c-table--border-width--base);
955
+ border-block-end-color: var(--pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor);
956
+ border-block-end-width: var(--pf-v5-c-table--border-width--base);
939
957
  box-shadow: var(--pf-v5-c-table__expandable-row--m-expanded--BoxShadow);
940
958
  }
941
959
  .pf-v5-c-table__expandable-row:not(.pf-m-expanded) {
@@ -1005,7 +1023,7 @@
1005
1023
  align-items: center;
1006
1024
  }
1007
1025
  .pf-v5-c-table__icon-inline > :not(:last-child) {
1008
- margin-right: var(--pf-v5-c-table__icon-inline--MarginRight);
1026
+ margin-inline-end: var(--pf-v5-c-table__icon-inline--MarginRight);
1009
1027
  }
1010
1028
 
1011
1029
  .pf-v5-c-table .pf-m-width-10 {
@@ -134,8 +134,8 @@
134
134
  position: relative;
135
135
  display: flex;
136
136
  width: var(--pf-v5-c-tabs--Width);
137
- padding-right: var(--pf-v5-c-tabs--inset);
138
- padding-left: var(--pf-v5-c-tabs--inset);
137
+ padding-inline-start: var(--pf-v5-c-tabs--inset);
138
+ padding-inline-end: var(--pf-v5-c-tabs--inset);
139
139
  overflow: hidden;
140
140
  }
141
141
  @media screen and (min-width: 1200px) {
@@ -146,11 +146,14 @@
146
146
  }
147
147
  .pf-v5-c-tabs::before {
148
148
  position: absolute;
149
- right: 0;
150
- bottom: 0;
151
- left: 0;
149
+ inset-block-end: 0;
150
+ inset-inline-start: 0;
151
+ inset-inline-end: 0;
152
152
  border: solid var(--pf-v5-c-tabs--before--BorderColor);
153
- border-width: var(--pf-v5-c-tabs--before--BorderTopWidth) var(--pf-v5-c-tabs--before--BorderRightWidth) var(--pf-v5-c-tabs--before--BorderBottomWidth) var(--pf-v5-c-tabs--before--BorderLeftWidth);
153
+ border-block-start-width: var(--pf-v5-c-tabs--before--BorderTopWidth);
154
+ border-block-end-width: var(--pf-v5-c-tabs--before--BorderBottomWidth);
155
+ border-inline-start-width: var(--pf-v5-c-tabs--before--BorderLeftWidth);
156
+ border-inline-end-width: var(--pf-v5-c-tabs--before--BorderRightWidth);
154
157
  }
155
158
  .pf-v5-c-tabs.pf-m-fill .pf-v5-c-tabs__list {
156
159
  flex-basis: 100%;
@@ -172,11 +175,11 @@
172
175
  opacity: 1;
173
176
  }
174
177
  .pf-v5-c-tabs.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(1) {
175
- margin-right: 0;
178
+ margin-inline-end: 0;
176
179
  transform: translateX(0);
177
180
  }
178
181
  .pf-v5-c-tabs.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(2) {
179
- margin-left: 0;
182
+ margin-inline-start: 0;
180
183
  transform: translateX(0);
181
184
  }
182
185
  .pf-v5-c-tabs.pf-m-no-border-bottom {
@@ -206,16 +209,16 @@
206
209
  --pf-v5-c-tabs__link--before--BorderBottomColor: var(--pf-v5-c-tabs__link--BackgroundColor);
207
210
  }
208
211
  .pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current:first-child .pf-v5-c-tabs__link::before {
209
- border-left-width: var(--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
212
+ border-inline-start-width: var(--pf-v5-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth);
210
213
  }
211
214
  .pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current:last-child .pf-v5-c-tabs__link::before {
212
- border-right-width: var(--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth);
215
+ border-inline-end-width: var(--pf-v5-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth);
213
216
  }
214
217
  .pf-v5-c-tabs.pf-m-box.pf-m-scrollable .pf-v5-c-tabs__item.pf-m-current:first-child .pf-v5-c-tabs__link::before {
215
- left: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
218
+ inset-inline-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
216
219
  }
217
220
  .pf-v5-c-tabs.pf-m-box.pf-m-scrollable .pf-v5-c-tabs__scroll-button:nth-of-type(2)::before {
218
- left: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
221
+ inset-inline-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
219
222
  }
220
223
  .pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item {
221
224
  --pf-v5-c-tabs__link--before--Left: 0;
@@ -255,21 +258,24 @@
255
258
  }
256
259
  .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__list::before {
257
260
  position: absolute;
258
- right: auto;
261
+ inset-inline-end: auto;
259
262
  border: solid var(--pf-v5-c-tabs--m-vertical__list--before--BorderColor);
260
- border-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth) var(--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth) var(--pf-v5-c-tabs--m-vertical__list--before--BorderBottomWidth) var(--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth);
263
+ border-block-start-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderTopWidth);
264
+ border-block-end-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderBottomWidth);
265
+ border-inline-start-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderLeftWidth);
266
+ border-inline-end-width: var(--pf-v5-c-tabs--m-vertical__list--before--BorderRightWidth);
261
267
  }
262
268
  .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item:first-child {
263
- margin-top: var(--pf-v5-c-tabs--inset);
269
+ margin-block-start: var(--pf-v5-c-tabs--inset);
264
270
  }
265
271
  .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item:last-child {
266
- margin-bottom: var(--pf-v5-c-tabs--inset);
272
+ margin-block-end: var(--pf-v5-c-tabs--inset);
267
273
  }
268
274
  .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__link {
269
275
  --pf-v5-c-tabs__link--after--BorderTopWidth: 0;
270
276
  --pf-v5-c-tabs__link--after--BorderLeftWidth: var(--pf-v5-c-tabs__link--after--BorderWidth);
271
277
  max-width: 100%;
272
- text-align: left;
278
+ text-align: start;
273
279
  }
274
280
  .pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__item-text {
275
281
  max-width: 100%;
@@ -348,8 +354,8 @@
348
354
  --pf-v5-c-tabs__link--disabled--before--BorderLeftWidth: 0;
349
355
  }
350
356
  .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__list::before {
351
- right: 0;
352
- left: auto;
357
+ inset-inline-start: auto;
358
+ inset-inline-end: 0;
353
359
  }
354
360
  .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:last-child {
355
361
  --pf-v5-c-tabs__link--before--BorderBottomWidth: 0;
@@ -367,11 +373,11 @@
367
373
  --pf-v5-c-tabs__link--before--BorderTopWidth: var(--pf-v5-c-tabs__link--before--border-width--base);
368
374
  }
369
375
  .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__link::after {
370
- top: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
376
+ inset-block-start: calc(var(--pf-v5-c-tabs__link--before--border-width--base) * -1);
371
377
  }
372
378
  .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item:first-child .pf-v5-c-tabs__link::after,
373
379
  .pf-v5-c-tabs.pf-m-box.pf-m-vertical .pf-v5-c-tabs__item.pf-m-current + .pf-v5-c-tabs__item .pf-v5-c-tabs__link::after {
374
- top: 0;
380
+ inset-block-start: 0;
375
381
  }
376
382
  .pf-v5-c-tabs.pf-m-secondary {
377
383
  --pf-v5-c-tabs__link--FontSize: var(--pf-v5-c-tabs--m-secondary__link--FontSize);
@@ -389,19 +395,19 @@
389
395
  .pf-v5-c-tabs__toggle {
390
396
  display: var(--pf-v5-c-tabs__toggle--Display);
391
397
  align-items: center;
392
- margin-bottom: var(--pf-v5-c-tabs__toggle--MarginBottom);
398
+ margin-block-end: var(--pf-v5-c-tabs__toggle--MarginBottom);
393
399
  }
394
400
 
395
401
  .pf-v5-c-tabs__toggle-button {
396
402
  --pf-v5-c-tabs__toggle-text--MarginLeft: var(--pf-v5-c-tabs__toggle-button__toggle-text--MarginLeft);
397
403
  --pf-v5-c-tabs__toggle-text--Color: var(--pf-v5-c-tabs__toggle-button__toggle-text--Color);
398
- margin-top: var(--pf-v5-c-tabs__toggle-button--MarginTop);
399
- margin-bottom: var(--pf-v5-c-tabs__toggle-button--MarginBottom);
400
- margin-left: var(--pf-v5-c-tabs__toggle-button--MarginLeft);
404
+ margin-block-start: var(--pf-v5-c-tabs__toggle-button--MarginTop);
405
+ margin-block-end: var(--pf-v5-c-tabs__toggle-button--MarginBottom);
406
+ margin-inline-start: var(--pf-v5-c-tabs__toggle-button--MarginLeft);
401
407
  }
402
408
  .pf-v5-c-tabs__toggle-button .pf-v5-c-button {
403
409
  display: flex;
404
- text-align: left;
410
+ text-align: start;
405
411
  white-space: normal;
406
412
  }
407
413
 
@@ -413,7 +419,7 @@
413
419
  }
414
420
 
415
421
  .pf-v5-c-tabs__toggle-text {
416
- margin-left: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
422
+ margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
417
423
  color: var(--pf-v5-c-tabs__toggle-text--Color, inherit);
418
424
  }
419
425
 
@@ -463,9 +469,9 @@
463
469
  .pf-v5-c-tabs__scroll-button::before,
464
470
  .pf-v5-c-tabs__add::before {
465
471
  position: absolute;
466
- right: 0;
467
- bottom: 0;
468
- left: 0;
472
+ inset-block-end: 0;
473
+ inset-inline-start: 0;
474
+ inset-inline-end: 0;
469
475
  content: "";
470
476
  border-style: solid;
471
477
  }
@@ -477,7 +483,7 @@
477
483
  .pf-v5-c-tabs__item.pf-m-action::after,
478
484
  .pf-v5-c-tabs__scroll-button::before,
479
485
  .pf-v5-c-tabs__add::before {
480
- top: 0;
486
+ inset-block-start: 0;
481
487
  }
482
488
 
483
489
  .pf-v5-c-tabs__link,
@@ -491,7 +497,10 @@
491
497
  position: relative;
492
498
  display: flex;
493
499
  flex: 1;
494
- padding: var(--pf-v5-c-tabs__link--PaddingTop) var(--pf-v5-c-tabs__link--PaddingRight) var(--pf-v5-c-tabs__link--PaddingBottom) var(--pf-v5-c-tabs__link--PaddingLeft);
500
+ padding-block-start: var(--pf-v5-c-tabs__link--PaddingTop);
501
+ padding-block-end: var(--pf-v5-c-tabs__link--PaddingBottom);
502
+ padding-inline-start: var(--pf-v5-c-tabs__link--PaddingLeft);
503
+ padding-inline-end: var(--pf-v5-c-tabs__link--PaddingRight);
495
504
  font-size: var(--pf-v5-c-tabs__link--FontSize);
496
505
  color: var(--pf-v5-c-tabs__link--Color);
497
506
  text-decoration: none;
@@ -504,20 +513,26 @@
504
513
 
505
514
  .pf-v5-c-tabs__item.pf-m-action::before, .pf-v5-c-tabs__link::before {
506
515
  pointer-events: none;
507
- border-width: var(--pf-v5-c-tabs__link--before--BorderTopWidth) var(--pf-v5-c-tabs__link--before--BorderRightWidth) var(--pf-v5-c-tabs__link--before--BorderBottomWidth) var(--pf-v5-c-tabs__link--before--BorderLeftWidth);
508
- border-top-color: var(--pf-v5-c-tabs__link--before--BorderTopColor);
509
- border-right-color: var(--pf-v5-c-tabs__link--before--BorderRightColor);
510
- border-bottom-color: var(--pf-v5-c-tabs__link--before--BorderBottomColor);
511
- border-left-color: var(--pf-v5-c-tabs__link--before--BorderLeftColor);
516
+ border-block-start-color: var(--pf-v5-c-tabs__link--before--BorderTopColor);
517
+ border-block-start-width: var(--pf-v5-c-tabs__link--before--BorderTopWidth);
518
+ border-block-end-color: var(--pf-v5-c-tabs__link--before--BorderBottomColor);
519
+ border-block-end-width: var(--pf-v5-c-tabs__link--before--BorderBottomWidth);
520
+ border-inline-start-color: var(--pf-v5-c-tabs__link--before--BorderLeftColor);
521
+ border-inline-start-width: var(--pf-v5-c-tabs__link--before--BorderLeftWidth);
522
+ border-inline-end-color: var(--pf-v5-c-tabs__link--before--BorderRightColor);
523
+ border-inline-end-width: var(--pf-v5-c-tabs__link--before--BorderRightWidth);
512
524
  }
513
525
 
514
526
  .pf-v5-c-tabs__item.pf-m-action::after, .pf-v5-c-tabs__link::after {
515
- top: var(--pf-v5-c-tabs__link--after--Top);
516
- right: var(--pf-v5-c-tabs__link--after--Right);
517
- bottom: var(--pf-v5-c-tabs__link--after--Bottom);
518
- left: var(--pf-v5-c-tabs__link--before--Left);
527
+ inset-block-start: var(--pf-v5-c-tabs__link--after--Top);
528
+ inset-block-end: var(--pf-v5-c-tabs__link--after--Bottom);
529
+ inset-inline-start: var(--pf-v5-c-tabs__link--before--Left);
530
+ inset-inline-end: var(--pf-v5-c-tabs__link--after--Right);
519
531
  border-color: var(--pf-v5-c-tabs__link--after--BorderColor);
520
- border-width: var(--pf-v5-c-tabs__link--after--BorderTopWidth) var(--pf-v5-c-tabs__link--after--BorderRightWidth) var(--pf-v5-c-tabs__link--after--BorderBottomWidth) var(--pf-v5-c-tabs__link--after--BorderLeftWidth);
532
+ border-block-start-width: var(--pf-v5-c-tabs__link--after--BorderTopWidth);
533
+ border-block-end-width: var(--pf-v5-c-tabs__link--after--BorderBottomWidth);
534
+ border-inline-start-width: var(--pf-v5-c-tabs__link--after--BorderLeftWidth);
535
+ border-inline-end-width: var(--pf-v5-c-tabs__link--after--BorderRightWidth);
521
536
  }
522
537
 
523
538
  .pf-v5-c-tabs__item.pf-m-action:hover, .pf-v5-c-tabs__link:hover {
@@ -558,7 +573,7 @@
558
573
  }
559
574
  .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon,
560
575
  .pf-v5-c-tabs__link .pf-v5-c-tabs__item-text {
561
- margin-right: var(--pf-v5-c-tabs__link--child--MarginRight);
576
+ margin-inline-end: var(--pf-v5-c-tabs__link--child--MarginRight);
562
577
  }
563
578
  .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon:last-child,
564
579
  .pf-v5-c-tabs__link .pf-v5-c-tabs__item-text:last-child {
@@ -594,7 +609,7 @@
594
609
 
595
610
  .pf-v5-c-tabs__item-action-icon {
596
611
  display: inline-block;
597
- margin-top: var(--pf-v5-c-tabs__item-action-icon--MarginTop);
612
+ margin-block-start: var(--pf-v5-c-tabs__item-action-icon--MarginTop);
598
613
  }
599
614
 
600
615
  .pf-v5-c-tabs__scroll-button {
@@ -612,16 +627,19 @@
612
627
  }
613
628
  .pf-v5-c-tabs__scroll-button::before {
614
629
  border-color: var(--pf-v5-c-tabs__scroll-button--before--BorderColor);
615
- border-width: 0 var(--pf-v5-c-tabs__scroll-button--before--BorderRightWidth) var(--pf-v5-c-tabs__scroll-button--before--BorderBottomWidth) var(--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth);
630
+ border-block-start-width: 0;
631
+ border-block-end-width: var(--pf-v5-c-tabs__scroll-button--before--BorderBottomWidth);
632
+ border-inline-start-width: var(--pf-v5-c-tabs__scroll-button--before--BorderLeftWidth);
633
+ border-inline-end-width: var(--pf-v5-c-tabs__scroll-button--before--BorderRightWidth);
616
634
  }
617
635
  .pf-v5-c-tabs__scroll-button:nth-of-type(1) {
618
636
  --pf-v5-c-tabs__scroll-button--before--BorderRightWidth: var(--pf-v5-c-tabs__scroll-button--before--border-width--base);
619
- margin-right: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
637
+ margin-inline-end: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
620
638
  transform: translateX(-100%);
621
639
  }
622
640
  .pf-v5-c-tabs__scroll-button:nth-of-type(2) {
623
641
  --pf-v5-c-tabs__scroll-button--before--BorderLeftWidth: var(--pf-v5-c-tabs__scroll-button--before--border-width--base);
624
- margin-left: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
642
+ margin-inline-start: calc(var(--pf-v5-c-tabs__scroll-button--Width) * -1);
625
643
  transform: translateX(100%);
626
644
  }
627
645
  .pf-v5-c-tabs__scroll-button:disabled {
@@ -634,7 +652,7 @@
634
652
  display: flex;
635
653
  }
636
654
  .pf-v5-c-tabs__add::before {
637
- border-left: var(--pf-v5-c-tabs__add--before--BorderLeftWidth) solid var(--pf-v5-c-tabs__add--before--BorderColor);
655
+ border-inline-start: var(--pf-v5-c-tabs__add--before--BorderLeftWidth) solid var(--pf-v5-c-tabs__add--before--BorderColor);
638
656
  }
639
657
  .pf-v5-c-tabs__add .pf-v5-c-button {
640
658
  --pf-v5-c-button--FontSize: var(--pf-v5-c-tabs__add--c-button--FontSize);