@patternfly/react-styles 5.0.0 → 5.1.1-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 (106) hide show
  1. package/CHANGELOG.md +10 -0
  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 +3 -3
package/css/layouts/Flex/flex.css CHANGED
@@ -34,7 +34,7 @@
34
34
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
35
35
  order: var(--pf-v5-l-flex--item--Order);
36
36
  max-width: 100%;
37
- margin-right: var(--pf-v5-l-flex--spacer--column);
37
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
38
38
  }
39
39
  @media screen and (min-width: 576px) {
40
40
  .pf-v5-l-flex > * {
@@ -78,28 +78,40 @@
78
78
  align-items: normal;
79
79
  }
80
80
  .pf-v5-l-flex.pf-m-column > * {
81
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
81
+ margin-block-start: 0;
82
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
83
+ margin-inline-start: 0;
84
+ margin-inline-end: 0;
82
85
  }
83
86
  .pf-v5-l-flex.pf-m-column-reverse {
84
87
  flex-direction: column-reverse;
85
88
  align-items: normal;
86
89
  }
87
90
  .pf-v5-l-flex.pf-m-column-reverse > * {
88
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
91
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
92
+ margin-block-end: 0;
93
+ margin-inline-start: 0;
94
+ margin-inline-end: 0;
89
95
  }
90
96
  .pf-v5-l-flex.pf-m-row {
91
97
  flex-direction: row;
92
98
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
93
99
  }
94
100
  .pf-v5-l-flex.pf-m-row > * {
95
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
101
+ margin-block-start: 0;
102
+ margin-block-end: 0;
103
+ margin-inline-start: 0;
104
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
96
105
  }
97
106
  .pf-v5-l-flex.pf-m-row-reverse {
98
107
  flex-direction: row-reverse;
99
108
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
100
109
  }
101
110
  .pf-v5-l-flex.pf-m-row-reverse > * {
102
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
111
+ margin-block-start: 0;
112
+ margin-block-end: 0;
113
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
114
+ margin-inline-end: 0;
103
115
  }
104
116
  .pf-v5-l-flex.pf-m-wrap {
105
117
  flex-wrap: wrap;
@@ -162,10 +174,10 @@
162
174
  align-content: space-around;
163
175
  }
164
176
  .pf-v5-l-flex > .pf-m-align-right {
165
- margin-left: auto;
177
+ margin-inline-start: auto;
166
178
  }
167
179
  .pf-v5-l-flex > .pf-m-align-left {
168
- margin-left: 0;
180
+ margin-inline-start: 0;
169
181
  }
170
182
  .pf-v5-l-flex > .pf-m-grow {
171
183
  flex-grow: 1;
@@ -175,7 +187,7 @@
175
187
  }
176
188
  .pf-v5-l-flex > .pf-m-full-width {
177
189
  width: 100%;
178
- margin-right: 0;
190
+ margin-inline-end: 0;
179
191
  }
180
192
  .pf-v5-l-flex > .pf-m-flex-1 {
181
193
  flex: 1 0 0;
@@ -224,28 +236,40 @@
224
236
  align-items: normal;
225
237
  }
226
238
  .pf-v5-l-flex.pf-m-column-on-sm > * {
227
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
239
+ margin-block-start: 0;
240
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
241
+ margin-inline-start: 0;
242
+ margin-inline-end: 0;
228
243
  }
229
244
  .pf-v5-l-flex.pf-m-column-reverse-on-sm {
230
245
  flex-direction: column-reverse;
231
246
  align-items: normal;
232
247
  }
233
248
  .pf-v5-l-flex.pf-m-column-reverse-on-sm > * {
234
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
249
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
250
+ margin-block-end: 0;
251
+ margin-inline-start: 0;
252
+ margin-inline-end: 0;
235
253
  }
236
254
  .pf-v5-l-flex.pf-m-row-on-sm {
237
255
  flex-direction: row;
238
256
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
239
257
  }
240
258
  .pf-v5-l-flex.pf-m-row-on-sm > * {
241
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
259
+ margin-block-start: 0;
260
+ margin-block-end: 0;
261
+ margin-inline-start: 0;
262
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
242
263
  }
243
264
  .pf-v5-l-flex.pf-m-row-reverse-on-sm {
244
265
  flex-direction: row-reverse;
245
266
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
246
267
  }
247
268
  .pf-v5-l-flex.pf-m-row-reverse-on-sm > * {
248
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
269
+ margin-block-start: 0;
270
+ margin-block-end: 0;
271
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
272
+ margin-inline-end: 0;
249
273
  }
250
274
  .pf-v5-l-flex.pf-m-wrap-on-sm {
251
275
  flex-wrap: wrap;
@@ -308,10 +332,10 @@
308
332
  align-content: space-around;
309
333
  }
310
334
  .pf-v5-l-flex > .pf-m-align-right-on-sm {
311
- margin-left: auto;
335
+ margin-inline-start: auto;
312
336
  }
313
337
  .pf-v5-l-flex > .pf-m-align-left-on-sm {
314
- margin-left: 0;
338
+ margin-inline-start: 0;
315
339
  }
316
340
  .pf-v5-l-flex > .pf-m-grow-on-sm {
317
341
  flex-grow: 1;
@@ -321,7 +345,7 @@
321
345
  }
322
346
  .pf-v5-l-flex > .pf-m-full-width-on-sm {
323
347
  width: 100%;
324
- margin-right: 0;
348
+ margin-inline-end: 0;
325
349
  }
326
350
  .pf-v5-l-flex > .pf-m-flex-1-on-sm {
327
351
  flex: 1 0 0;
@@ -371,28 +395,40 @@
371
395
  align-items: normal;
372
396
  }
373
397
  .pf-v5-l-flex.pf-m-column-on-md > * {
374
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
398
+ margin-block-start: 0;
399
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
400
+ margin-inline-start: 0;
401
+ margin-inline-end: 0;
375
402
  }
376
403
  .pf-v5-l-flex.pf-m-column-reverse-on-md {
377
404
  flex-direction: column-reverse;
378
405
  align-items: normal;
379
406
  }
380
407
  .pf-v5-l-flex.pf-m-column-reverse-on-md > * {
381
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
408
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
409
+ margin-block-end: 0;
410
+ margin-inline-start: 0;
411
+ margin-inline-end: 0;
382
412
  }
383
413
  .pf-v5-l-flex.pf-m-row-on-md {
384
414
  flex-direction: row;
385
415
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
386
416
  }
387
417
  .pf-v5-l-flex.pf-m-row-on-md > * {
388
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
418
+ margin-block-start: 0;
419
+ margin-block-end: 0;
420
+ margin-inline-start: 0;
421
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
389
422
  }
390
423
  .pf-v5-l-flex.pf-m-row-reverse-on-md {
391
424
  flex-direction: row-reverse;
392
425
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
393
426
  }
394
427
  .pf-v5-l-flex.pf-m-row-reverse-on-md > * {
395
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
428
+ margin-block-start: 0;
429
+ margin-block-end: 0;
430
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
431
+ margin-inline-end: 0;
396
432
  }
397
433
  .pf-v5-l-flex.pf-m-wrap-on-md {
398
434
  flex-wrap: wrap;
@@ -455,10 +491,10 @@
455
491
  align-content: space-around;
456
492
  }
457
493
  .pf-v5-l-flex > .pf-m-align-right-on-md {
458
- margin-left: auto;
494
+ margin-inline-start: auto;
459
495
  }
460
496
  .pf-v5-l-flex > .pf-m-align-left-on-md {
461
- margin-left: 0;
497
+ margin-inline-start: 0;
462
498
  }
463
499
  .pf-v5-l-flex > .pf-m-grow-on-md {
464
500
  flex-grow: 1;
@@ -468,7 +504,7 @@
468
504
  }
469
505
  .pf-v5-l-flex > .pf-m-full-width-on-md {
470
506
  width: 100%;
471
- margin-right: 0;
507
+ margin-inline-end: 0;
472
508
  }
473
509
  .pf-v5-l-flex > .pf-m-flex-1-on-md {
474
510
  flex: 1 0 0;
@@ -518,28 +554,40 @@
518
554
  align-items: normal;
519
555
  }
520
556
  .pf-v5-l-flex.pf-m-column-on-lg > * {
521
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
557
+ margin-block-start: 0;
558
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
559
+ margin-inline-start: 0;
560
+ margin-inline-end: 0;
522
561
  }
523
562
  .pf-v5-l-flex.pf-m-column-reverse-on-lg {
524
563
  flex-direction: column-reverse;
525
564
  align-items: normal;
526
565
  }
527
566
  .pf-v5-l-flex.pf-m-column-reverse-on-lg > * {
528
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
567
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
568
+ margin-block-end: 0;
569
+ margin-inline-start: 0;
570
+ margin-inline-end: 0;
529
571
  }
530
572
  .pf-v5-l-flex.pf-m-row-on-lg {
531
573
  flex-direction: row;
532
574
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
533
575
  }
534
576
  .pf-v5-l-flex.pf-m-row-on-lg > * {
535
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
577
+ margin-block-start: 0;
578
+ margin-block-end: 0;
579
+ margin-inline-start: 0;
580
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
536
581
  }
537
582
  .pf-v5-l-flex.pf-m-row-reverse-on-lg {
538
583
  flex-direction: row-reverse;
539
584
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
540
585
  }
541
586
  .pf-v5-l-flex.pf-m-row-reverse-on-lg > * {
542
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
587
+ margin-block-start: 0;
588
+ margin-block-end: 0;
589
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
590
+ margin-inline-end: 0;
543
591
  }
544
592
  .pf-v5-l-flex.pf-m-wrap-on-lg {
545
593
  flex-wrap: wrap;
@@ -602,10 +650,10 @@
602
650
  align-content: space-around;
603
651
  }
604
652
  .pf-v5-l-flex > .pf-m-align-right-on-lg {
605
- margin-left: auto;
653
+ margin-inline-start: auto;
606
654
  }
607
655
  .pf-v5-l-flex > .pf-m-align-left-on-lg {
608
- margin-left: 0;
656
+ margin-inline-start: 0;
609
657
  }
610
658
  .pf-v5-l-flex > .pf-m-grow-on-lg {
611
659
  flex-grow: 1;
@@ -615,7 +663,7 @@
615
663
  }
616
664
  .pf-v5-l-flex > .pf-m-full-width-on-lg {
617
665
  width: 100%;
618
- margin-right: 0;
666
+ margin-inline-end: 0;
619
667
  }
620
668
  .pf-v5-l-flex > .pf-m-flex-1-on-lg {
621
669
  flex: 1 0 0;
@@ -665,28 +713,40 @@
665
713
  align-items: normal;
666
714
  }
667
715
  .pf-v5-l-flex.pf-m-column-on-xl > * {
668
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
716
+ margin-block-start: 0;
717
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
718
+ margin-inline-start: 0;
719
+ margin-inline-end: 0;
669
720
  }
670
721
  .pf-v5-l-flex.pf-m-column-reverse-on-xl {
671
722
  flex-direction: column-reverse;
672
723
  align-items: normal;
673
724
  }
674
725
  .pf-v5-l-flex.pf-m-column-reverse-on-xl > * {
675
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
726
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
727
+ margin-block-end: 0;
728
+ margin-inline-start: 0;
729
+ margin-inline-end: 0;
676
730
  }
677
731
  .pf-v5-l-flex.pf-m-row-on-xl {
678
732
  flex-direction: row;
679
733
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
680
734
  }
681
735
  .pf-v5-l-flex.pf-m-row-on-xl > * {
682
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
736
+ margin-block-start: 0;
737
+ margin-block-end: 0;
738
+ margin-inline-start: 0;
739
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
683
740
  }
684
741
  .pf-v5-l-flex.pf-m-row-reverse-on-xl {
685
742
  flex-direction: row-reverse;
686
743
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
687
744
  }
688
745
  .pf-v5-l-flex.pf-m-row-reverse-on-xl > * {
689
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
746
+ margin-block-start: 0;
747
+ margin-block-end: 0;
748
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
749
+ margin-inline-end: 0;
690
750
  }
691
751
  .pf-v5-l-flex.pf-m-wrap-on-xl {
692
752
  flex-wrap: wrap;
@@ -749,10 +809,10 @@
749
809
  align-content: space-around;
750
810
  }
751
811
  .pf-v5-l-flex > .pf-m-align-right-on-xl {
752
- margin-left: auto;
812
+ margin-inline-start: auto;
753
813
  }
754
814
  .pf-v5-l-flex > .pf-m-align-left-on-xl {
755
- margin-left: 0;
815
+ margin-inline-start: 0;
756
816
  }
757
817
  .pf-v5-l-flex > .pf-m-grow-on-xl {
758
818
  flex-grow: 1;
@@ -762,7 +822,7 @@
762
822
  }
763
823
  .pf-v5-l-flex > .pf-m-full-width-on-xl {
764
824
  width: 100%;
765
- margin-right: 0;
825
+ margin-inline-end: 0;
766
826
  }
767
827
  .pf-v5-l-flex > .pf-m-flex-1-on-xl {
768
828
  flex: 1 0 0;
@@ -812,28 +872,40 @@
812
872
  align-items: normal;
813
873
  }
814
874
  .pf-v5-l-flex.pf-m-column-on-2xl > * {
815
- margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
875
+ margin-block-start: 0;
876
+ margin-block-end: var(--pf-v5-l-flex--spacer--row);
877
+ margin-inline-start: 0;
878
+ margin-inline-end: 0;
816
879
  }
817
880
  .pf-v5-l-flex.pf-m-column-reverse-on-2xl {
818
881
  flex-direction: column-reverse;
819
882
  align-items: normal;
820
883
  }
821
884
  .pf-v5-l-flex.pf-m-column-reverse-on-2xl > * {
822
- margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
885
+ margin-block-start: var(--pf-v5-l-flex--spacer--row);
886
+ margin-block-end: 0;
887
+ margin-inline-start: 0;
888
+ margin-inline-end: 0;
823
889
  }
824
890
  .pf-v5-l-flex.pf-m-row-on-2xl {
825
891
  flex-direction: row;
826
892
  align-items: var(--pf-v5-l-flex--m-row--AlignItems);
827
893
  }
828
894
  .pf-v5-l-flex.pf-m-row-on-2xl > * {
829
- margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
895
+ margin-block-start: 0;
896
+ margin-block-end: 0;
897
+ margin-inline-start: 0;
898
+ margin-inline-end: var(--pf-v5-l-flex--spacer--column);
830
899
  }
831
900
  .pf-v5-l-flex.pf-m-row-reverse-on-2xl {
832
901
  flex-direction: row-reverse;
833
902
  align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
834
903
  }
835
904
  .pf-v5-l-flex.pf-m-row-reverse-on-2xl > * {
836
- margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
905
+ margin-block-start: 0;
906
+ margin-block-end: 0;
907
+ margin-inline-start: var(--pf-v5-l-flex--spacer--column);
908
+ margin-inline-end: 0;
837
909
  }
838
910
  .pf-v5-l-flex.pf-m-wrap-on-2xl {
839
911
  flex-wrap: wrap;
@@ -896,10 +968,10 @@
896
968
  align-content: space-around;
897
969
  }
898
970
  .pf-v5-l-flex > .pf-m-align-right-on-2xl {
899
- margin-left: auto;
971
+ margin-inline-start: auto;
900
972
  }
901
973
  .pf-v5-l-flex > .pf-m-align-left-on-2xl {
902
- margin-left: 0;
974
+ margin-inline-start: 0;
903
975
  }
904
976
  .pf-v5-l-flex > .pf-m-grow-on-2xl {
905
977
  flex-grow: 1;
@@ -909,7 +981,7 @@
909
981
  }
910
982
  .pf-v5-l-flex > .pf-m-full-width-on-2xl {
911
983
  width: 100%;
912
- margin-right: 0;
984
+ margin-inline-end: 0;
913
985
  }
914
986
  .pf-v5-l-flex > .pf-m-flex-1-on-2xl {
915
987
  flex: 1 0 0;
package/css/utilities/Accessibility/accessibility.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .pf-v5-u-screen-reader {
2
2
  position: fixed;
3
- top: 0;
4
- left: 0;
3
+ inset-block-start: 0;
4
+ inset-inline-start: 0;
5
5
  overflow: hidden;
6
6
  clip: rect(0, 0, 0, 0);
7
7
  white-space: nowrap;
@@ -23,8 +23,8 @@
23
23
  @media screen and (min-width: 576px) {
24
24
  .pf-v5-u-screen-reader-on-sm {
25
25
  position: fixed;
26
- top: 0;
27
- left: 0;
26
+ inset-block-start: 0;
27
+ inset-inline-start: 0;
28
28
  overflow: hidden;
29
29
  clip: rect(0, 0, 0, 0);
30
30
  white-space: nowrap;
@@ -51,8 +51,8 @@
51
51
  @media screen and (min-width: 768px) {
52
52
  .pf-v5-u-screen-reader-on-md {
53
53
  position: fixed;
54
- top: 0;
55
- left: 0;
54
+ inset-block-start: 0;
55
+ inset-inline-start: 0;
56
56
  overflow: hidden;
57
57
  clip: rect(0, 0, 0, 0);
58
58
  white-space: nowrap;
@@ -79,8 +79,8 @@
79
79
  @media screen and (min-width: 992px) {
80
80
  .pf-v5-u-screen-reader-on-lg {
81
81
  position: fixed;
82
- top: 0;
83
- left: 0;
82
+ inset-block-start: 0;
83
+ inset-inline-start: 0;
84
84
  overflow: hidden;
85
85
  clip: rect(0, 0, 0, 0);
86
86
  white-space: nowrap;
@@ -107,8 +107,8 @@
107
107
  @media screen and (min-width: 1200px) {
108
108
  .pf-v5-u-screen-reader-on-xl {
109
109
  position: fixed;
110
- top: 0;
111
- left: 0;
110
+ inset-block-start: 0;
111
+ inset-inline-start: 0;
112
112
  overflow: hidden;
113
113
  clip: rect(0, 0, 0, 0);
114
114
  white-space: nowrap;
@@ -135,8 +135,8 @@
135
135
  @media screen and (min-width: 1450px) {
136
136
  .pf-v5-u-screen-reader-on-2xl {
137
137
  position: fixed;
138
- top: 0;
139
- left: 0;
138
+ inset-block-start: 0;
139
+ inset-inline-start: 0;
140
140
  overflow: hidden;
141
141
  clip: rect(0, 0, 0, 0);
142
142
  white-space: nowrap;