@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
package/css/components/Table/table-grid.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --pf-v5-c-table--m-compact__tr--responsive--PaddingBottom: var(--pf-v5-global--spacer--sm);
40
40
  --pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop: var(--pf-v5-global--spacer--xs);
41
41
  --pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom: var(--pf-v5-global--spacer--xs);
42
+ --pf-v5-c-table--m-compact__check--responsive--MarginTop: 0.4375rem;
42
43
  --pf-v5-c-table--m-compact__action--responsive--MarginTop: calc(var(--pf-v5-global--spacer--xs) * -1);
43
44
  --pf-v5-c-table--m-compact__action--responsive--MarginBottom: calc(var(--pf-v5-global--spacer--xs) * -1);
44
45
  --pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom: calc(0.375rem * -1);
@@ -107,26 +108,26 @@
107
108
  display: block;
108
109
  }
109
110
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
110
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
111
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
111
112
  }
112
113
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
113
- border-top: 0;
114
+ border-block-start: 0;
114
115
  }
115
116
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
116
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
117
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
117
118
  }
118
119
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
119
120
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
120
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
121
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
121
122
  }
122
123
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
123
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
124
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
124
125
  }
125
126
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
126
- border-bottom: 0;
127
+ border-block-end: 0;
127
128
  }
128
129
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
129
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
130
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
130
131
  }
131
132
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
132
133
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -138,10 +139,16 @@
138
139
  height: auto;
139
140
  grid-auto-columns: max-content;
140
141
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
141
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
142
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
143
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
144
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
145
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
142
146
  }
143
147
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
144
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
148
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
149
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
150
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
151
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
145
152
  }
146
153
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
147
154
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -151,17 +158,18 @@
151
158
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
152
159
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
153
160
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
161
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
154
162
  --pf-v5-c-table__check--input--MarginTop: 0;
155
163
  }
156
164
  .pf-m-grid.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
157
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
158
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
165
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
166
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
159
167
  }
160
168
  .pf-m-grid.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
161
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
169
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
162
170
  }
163
171
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__icon > * {
164
- text-align: left;
172
+ text-align: start;
165
173
  }
166
174
  .pf-m-grid.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
167
175
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -175,7 +183,7 @@
175
183
  }
176
184
  .pf-m-grid.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
177
185
  font-weight: bold;
178
- text-align: left;
186
+ text-align: start;
179
187
  content: attr(data-label);
180
188
  }
181
189
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -204,12 +212,12 @@
204
212
  }
205
213
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
206
214
  position: absolute;
207
- top: 0;
208
- bottom: 0;
209
- left: 0;
215
+ inset-block-start: 0;
216
+ inset-block-end: 0;
217
+ inset-inline-start: 0;
210
218
  content: "";
211
219
  border: 0;
212
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
220
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
213
221
  }
214
222
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
215
223
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -233,7 +241,7 @@
233
241
  display: block;
234
242
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
235
243
  overflow-y: auto;
236
- border-bottom: none;
244
+ border-block-end: none;
237
245
  box-shadow: none;
238
246
  }
239
247
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -241,7 +249,7 @@
241
249
  display: block;
242
250
  }
243
251
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
244
- border-top-color: var(--pf-v5-c-table--BorderColor);
252
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
245
253
  }
246
254
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
247
255
  content: none;
@@ -254,8 +262,8 @@
254
262
  display: none;
255
263
  }
256
264
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
257
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
258
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
265
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
266
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
259
267
  }
260
268
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
261
269
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -268,9 +276,9 @@
268
276
  .pf-m-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
269
277
  content: "";
270
278
  position: absolute;
271
- top: 0;
272
- bottom: 0;
273
- left: 0;
279
+ inset-block-start: 0;
280
+ inset-block-end: 0;
281
+ inset-inline-start: 0;
274
282
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
275
283
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
276
284
  }
@@ -285,9 +293,9 @@
285
293
  .pf-m-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
286
294
  content: "";
287
295
  position: absolute;
288
- top: 0;
289
- bottom: 0;
290
- left: 0;
296
+ inset-block-start: 0;
297
+ inset-block-end: 0;
298
+ inset-inline-start: 0;
291
299
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
292
300
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
293
301
  }
@@ -302,7 +310,7 @@
302
310
  grid-row-start: 20;
303
311
  grid-column: -1;
304
312
  justify-self: end;
305
- padding-right: 0;
313
+ padding-inline-end: 0;
306
314
  }
307
315
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__toggle::after {
308
316
  content: none;
@@ -320,33 +328,38 @@
320
328
  grid-column-start: 2;
321
329
  }
322
330
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check {
323
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
324
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
331
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
332
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
333
+ line-height: 1;
325
334
  }
326
335
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
327
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
336
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
328
337
  }
329
338
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
330
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
339
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
331
340
  }
332
341
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
333
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
342
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
343
+ }
344
+ .pf-m-grid.pf-v5-c-table .pf-v5-c-table__check label {
345
+ display: inline-block;
346
+ margin: 0;
334
347
  }
335
348
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__favorite {
336
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
349
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
337
350
  }
338
351
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
339
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
352
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
340
353
  }
341
354
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__action {
342
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
343
- text-align: right;
355
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
356
+ text-align: end;
344
357
  }
345
358
  @media screen and (max-width: 576px) {
346
359
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__action {
347
360
  grid-row-start: 1;
348
361
  grid-column-start: 2;
349
- margin-left: 0;
362
+ margin-inline-start: 0;
350
363
  }
351
364
  }
352
365
  .pf-m-grid.pf-v5-c-table .pf-v5-c-table__inline-edit-action {
@@ -410,26 +423,26 @@
410
423
  display: block;
411
424
  }
412
425
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
413
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
426
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
414
427
  }
415
428
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
416
- border-top: 0;
429
+ border-block-start: 0;
417
430
  }
418
431
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
419
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
432
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
420
433
  }
421
434
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
422
435
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
423
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
436
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
424
437
  }
425
438
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
426
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
439
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
427
440
  }
428
441
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
429
- border-bottom: 0;
442
+ border-block-end: 0;
430
443
  }
431
444
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
432
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
445
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
433
446
  }
434
447
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
435
448
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -441,10 +454,16 @@
441
454
  height: auto;
442
455
  grid-auto-columns: max-content;
443
456
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
444
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
457
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
458
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
459
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
460
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
445
461
  }
446
462
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
447
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
463
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
464
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
465
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
466
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
448
467
  }
449
468
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
450
469
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -454,17 +473,18 @@
454
473
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
455
474
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
456
475
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
476
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
457
477
  --pf-v5-c-table__check--input--MarginTop: 0;
458
478
  }
459
479
  .pf-m-grid-md.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
460
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
461
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
480
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
481
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
462
482
  }
463
483
  .pf-m-grid-md.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
464
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
484
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
465
485
  }
466
486
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__icon > * {
467
- text-align: left;
487
+ text-align: start;
468
488
  }
469
489
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
470
490
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -478,7 +498,7 @@
478
498
  }
479
499
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
480
500
  font-weight: bold;
481
- text-align: left;
501
+ text-align: start;
482
502
  content: attr(data-label);
483
503
  }
484
504
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -507,12 +527,12 @@
507
527
  }
508
528
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
509
529
  position: absolute;
510
- top: 0;
511
- bottom: 0;
512
- left: 0;
530
+ inset-block-start: 0;
531
+ inset-block-end: 0;
532
+ inset-inline-start: 0;
513
533
  content: "";
514
534
  border: 0;
515
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
535
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
516
536
  }
517
537
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
518
538
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -536,7 +556,7 @@
536
556
  display: block;
537
557
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
538
558
  overflow-y: auto;
539
- border-bottom: none;
559
+ border-block-end: none;
540
560
  box-shadow: none;
541
561
  }
542
562
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -544,7 +564,7 @@
544
564
  display: block;
545
565
  }
546
566
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
547
- border-top-color: var(--pf-v5-c-table--BorderColor);
567
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
548
568
  }
549
569
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
550
570
  content: none;
@@ -557,8 +577,8 @@
557
577
  display: none;
558
578
  }
559
579
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
560
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
561
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
580
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
581
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
562
582
  }
563
583
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
564
584
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -571,9 +591,9 @@
571
591
  .pf-m-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
572
592
  content: "";
573
593
  position: absolute;
574
- top: 0;
575
- bottom: 0;
576
- left: 0;
594
+ inset-block-start: 0;
595
+ inset-block-end: 0;
596
+ inset-inline-start: 0;
577
597
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
578
598
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
579
599
  }
@@ -588,9 +608,9 @@
588
608
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
589
609
  content: "";
590
610
  position: absolute;
591
- top: 0;
592
- bottom: 0;
593
- left: 0;
611
+ inset-block-start: 0;
612
+ inset-block-end: 0;
613
+ inset-inline-start: 0;
594
614
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
595
615
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
596
616
  }
@@ -605,7 +625,7 @@
605
625
  grid-row-start: 20;
606
626
  grid-column: -1;
607
627
  justify-self: end;
608
- padding-right: 0;
628
+ padding-inline-end: 0;
609
629
  }
610
630
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle::after {
611
631
  content: none;
@@ -623,34 +643,39 @@
623
643
  grid-column-start: 2;
624
644
  }
625
645
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check {
626
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
627
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
646
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
647
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
648
+ line-height: 1;
628
649
  }
629
650
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
630
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
651
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
631
652
  }
632
653
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
633
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
654
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
634
655
  }
635
656
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
636
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
657
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
658
+ }
659
+ .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__check label {
660
+ display: inline-block;
661
+ margin: 0;
637
662
  }
638
663
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__favorite {
639
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
664
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
640
665
  }
641
666
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
642
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
667
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
643
668
  }
644
669
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__action {
645
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
646
- text-align: right;
670
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
671
+ text-align: end;
647
672
  }
648
673
  }
649
674
  @media screen and (max-width: 768px) and (max-width: 576px) {
650
675
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__action {
651
676
  grid-row-start: 1;
652
677
  grid-column-start: 2;
653
- margin-left: 0;
678
+ margin-inline-start: 0;
654
679
  }
655
680
  }
656
681
  @media screen and (max-width: 768px) {
@@ -658,16 +683,12 @@
658
683
  grid-column: 2;
659
684
  grid-row: 2;
660
685
  }
661
- }
662
- @media screen and (max-width: 768px) {
663
686
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle-icon {
664
687
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
665
688
  }
666
689
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle-icon {
667
690
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
668
691
  }
669
- }
670
- @media screen and (max-width: 768px) {
671
692
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
672
693
  --pf-v5-c-table--cell--Overflow: auto;
673
694
  }
@@ -678,8 +699,6 @@
678
699
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
679
700
  --pf-v5-c-table--cell--MaxWidth: 100%;
680
701
  }
681
- }
682
- @media screen and (max-width: 768px) {
683
702
  .pf-m-grid-md.pf-v5-c-table [class*=pf-m-width] {
684
703
  --pf-v5-c-table--cell--Width: auto;
685
704
  }
@@ -722,26 +741,26 @@
722
741
  display: block;
723
742
  }
724
743
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
725
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
744
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
726
745
  }
727
746
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
728
- border-top: 0;
747
+ border-block-start: 0;
729
748
  }
730
749
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
731
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
750
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
732
751
  }
733
752
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
734
753
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
735
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
754
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
736
755
  }
737
756
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
738
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
757
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
739
758
  }
740
759
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
741
- border-bottom: 0;
760
+ border-block-end: 0;
742
761
  }
743
762
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
744
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
763
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
745
764
  }
746
765
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
747
766
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -753,10 +772,16 @@
753
772
  height: auto;
754
773
  grid-auto-columns: max-content;
755
774
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
756
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
775
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
776
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
777
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
778
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
757
779
  }
758
780
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
759
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
781
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
782
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
783
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
784
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
760
785
  }
761
786
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
762
787
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -766,17 +791,18 @@
766
791
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
767
792
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
768
793
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
794
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
769
795
  --pf-v5-c-table__check--input--MarginTop: 0;
770
796
  }
771
797
  .pf-m-grid-lg.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
772
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
773
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
798
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
799
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
774
800
  }
775
801
  .pf-m-grid-lg.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
776
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
802
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
777
803
  }
778
804
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__icon > * {
779
- text-align: left;
805
+ text-align: start;
780
806
  }
781
807
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
782
808
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -790,7 +816,7 @@
790
816
  }
791
817
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
792
818
  font-weight: bold;
793
- text-align: left;
819
+ text-align: start;
794
820
  content: attr(data-label);
795
821
  }
796
822
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -819,12 +845,12 @@
819
845
  }
820
846
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
821
847
  position: absolute;
822
- top: 0;
823
- bottom: 0;
824
- left: 0;
848
+ inset-block-start: 0;
849
+ inset-block-end: 0;
850
+ inset-inline-start: 0;
825
851
  content: "";
826
852
  border: 0;
827
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
853
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
828
854
  }
829
855
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
830
856
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -848,7 +874,7 @@
848
874
  display: block;
849
875
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
850
876
  overflow-y: auto;
851
- border-bottom: none;
877
+ border-block-end: none;
852
878
  box-shadow: none;
853
879
  }
854
880
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -856,7 +882,7 @@
856
882
  display: block;
857
883
  }
858
884
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
859
- border-top-color: var(--pf-v5-c-table--BorderColor);
885
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
860
886
  }
861
887
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
862
888
  content: none;
@@ -869,8 +895,8 @@
869
895
  display: none;
870
896
  }
871
897
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
872
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
873
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
898
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
899
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
874
900
  }
875
901
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
876
902
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -883,9 +909,9 @@
883
909
  .pf-m-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
884
910
  content: "";
885
911
  position: absolute;
886
- top: 0;
887
- bottom: 0;
888
- left: 0;
912
+ inset-block-start: 0;
913
+ inset-block-end: 0;
914
+ inset-inline-start: 0;
889
915
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
890
916
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
891
917
  }
@@ -900,9 +926,9 @@
900
926
  .pf-m-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
901
927
  content: "";
902
928
  position: absolute;
903
- top: 0;
904
- bottom: 0;
905
- left: 0;
929
+ inset-block-start: 0;
930
+ inset-block-end: 0;
931
+ inset-inline-start: 0;
906
932
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
907
933
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
908
934
  }
@@ -917,7 +943,7 @@
917
943
  grid-row-start: 20;
918
944
  grid-column: -1;
919
945
  justify-self: end;
920
- padding-right: 0;
946
+ padding-inline-end: 0;
921
947
  }
922
948
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle::after {
923
949
  content: none;
@@ -935,34 +961,39 @@
935
961
  grid-column-start: 2;
936
962
  }
937
963
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check {
938
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
939
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
964
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
965
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
966
+ line-height: 1;
940
967
  }
941
968
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
942
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
969
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
943
970
  }
944
971
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
945
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
972
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
946
973
  }
947
974
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
948
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
975
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
976
+ }
977
+ .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__check label {
978
+ display: inline-block;
979
+ margin: 0;
949
980
  }
950
981
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__favorite {
951
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
982
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
952
983
  }
953
984
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
954
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
985
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
955
986
  }
956
987
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__action {
957
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
958
- text-align: right;
988
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
989
+ text-align: end;
959
990
  }
960
991
  }
961
992
  @media screen and (max-width: 992px) and (max-width: 576px) {
962
993
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__action {
963
994
  grid-row-start: 1;
964
995
  grid-column-start: 2;
965
- margin-left: 0;
996
+ margin-inline-start: 0;
966
997
  }
967
998
  }
968
999
  @media screen and (max-width: 992px) {
@@ -970,16 +1001,12 @@
970
1001
  grid-column: 2;
971
1002
  grid-row: 2;
972
1003
  }
973
- }
974
- @media screen and (max-width: 992px) {
975
1004
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle-icon {
976
1005
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
977
1006
  }
978
1007
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle-icon {
979
1008
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
980
1009
  }
981
- }
982
- @media screen and (max-width: 992px) {
983
1010
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
984
1011
  --pf-v5-c-table--cell--Overflow: auto;
985
1012
  }
@@ -990,8 +1017,6 @@
990
1017
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
991
1018
  --pf-v5-c-table--cell--MaxWidth: 100%;
992
1019
  }
993
- }
994
- @media screen and (max-width: 992px) {
995
1020
  .pf-m-grid-lg.pf-v5-c-table [class*=pf-m-width] {
996
1021
  --pf-v5-c-table--cell--Width: auto;
997
1022
  }
@@ -1034,26 +1059,26 @@
1034
1059
  display: block;
1035
1060
  }
1036
1061
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
1037
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1062
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1038
1063
  }
1039
1064
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
1040
- border-top: 0;
1065
+ border-block-start: 0;
1041
1066
  }
1042
1067
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
1043
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1068
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1044
1069
  }
1045
1070
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
1046
1071
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
1047
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
1072
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
1048
1073
  }
1049
1074
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
1050
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
1075
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
1051
1076
  }
1052
1077
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
1053
- border-bottom: 0;
1078
+ border-block-end: 0;
1054
1079
  }
1055
1080
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
1056
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1081
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1057
1082
  }
1058
1083
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
1059
1084
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -1065,10 +1090,16 @@
1065
1090
  height: auto;
1066
1091
  grid-auto-columns: max-content;
1067
1092
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
1068
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
1093
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
1094
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
1095
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
1096
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
1069
1097
  }
1070
1098
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
1071
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
1099
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
1100
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
1101
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
1102
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
1072
1103
  }
1073
1104
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
1074
1105
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -1078,17 +1109,18 @@
1078
1109
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
1079
1110
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
1080
1111
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
1112
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
1081
1113
  --pf-v5-c-table__check--input--MarginTop: 0;
1082
1114
  }
1083
1115
  .pf-m-grid-xl.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
1084
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1085
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1116
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1117
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1086
1118
  }
1087
1119
  .pf-m-grid-xl.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
1088
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1120
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1089
1121
  }
1090
1122
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__icon > * {
1091
- text-align: left;
1123
+ text-align: start;
1092
1124
  }
1093
1125
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
1094
1126
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -1102,7 +1134,7 @@
1102
1134
  }
1103
1135
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
1104
1136
  font-weight: bold;
1105
- text-align: left;
1137
+ text-align: start;
1106
1138
  content: attr(data-label);
1107
1139
  }
1108
1140
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -1131,12 +1163,12 @@
1131
1163
  }
1132
1164
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
1133
1165
  position: absolute;
1134
- top: 0;
1135
- bottom: 0;
1136
- left: 0;
1166
+ inset-block-start: 0;
1167
+ inset-block-end: 0;
1168
+ inset-inline-start: 0;
1137
1169
  content: "";
1138
1170
  border: 0;
1139
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
1171
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
1140
1172
  }
1141
1173
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
1142
1174
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -1160,7 +1192,7 @@
1160
1192
  display: block;
1161
1193
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
1162
1194
  overflow-y: auto;
1163
- border-bottom: none;
1195
+ border-block-end: none;
1164
1196
  box-shadow: none;
1165
1197
  }
1166
1198
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -1168,7 +1200,7 @@
1168
1200
  display: block;
1169
1201
  }
1170
1202
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
1171
- border-top-color: var(--pf-v5-c-table--BorderColor);
1203
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
1172
1204
  }
1173
1205
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
1174
1206
  content: none;
@@ -1181,8 +1213,8 @@
1181
1213
  display: none;
1182
1214
  }
1183
1215
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
1184
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
1185
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
1216
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
1217
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
1186
1218
  }
1187
1219
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
1188
1220
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -1195,9 +1227,9 @@
1195
1227
  .pf-m-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
1196
1228
  content: "";
1197
1229
  position: absolute;
1198
- top: 0;
1199
- bottom: 0;
1200
- left: 0;
1230
+ inset-block-start: 0;
1231
+ inset-block-end: 0;
1232
+ inset-inline-start: 0;
1201
1233
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
1202
1234
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
1203
1235
  }
@@ -1212,9 +1244,9 @@
1212
1244
  .pf-m-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
1213
1245
  content: "";
1214
1246
  position: absolute;
1215
- top: 0;
1216
- bottom: 0;
1217
- left: 0;
1247
+ inset-block-start: 0;
1248
+ inset-block-end: 0;
1249
+ inset-inline-start: 0;
1218
1250
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
1219
1251
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
1220
1252
  }
@@ -1229,7 +1261,7 @@
1229
1261
  grid-row-start: 20;
1230
1262
  grid-column: -1;
1231
1263
  justify-self: end;
1232
- padding-right: 0;
1264
+ padding-inline-end: 0;
1233
1265
  }
1234
1266
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle::after {
1235
1267
  content: none;
@@ -1247,34 +1279,39 @@
1247
1279
  grid-column-start: 2;
1248
1280
  }
1249
1281
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check {
1250
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
1251
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
1282
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
1283
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
1284
+ line-height: 1;
1252
1285
  }
1253
1286
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
1254
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
1287
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
1255
1288
  }
1256
1289
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
1257
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
1290
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
1258
1291
  }
1259
1292
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
1260
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
1293
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
1294
+ }
1295
+ .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__check label {
1296
+ display: inline-block;
1297
+ margin: 0;
1261
1298
  }
1262
1299
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__favorite {
1263
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
1300
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
1264
1301
  }
1265
1302
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
1266
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
1303
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
1267
1304
  }
1268
1305
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__action {
1269
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
1270
- text-align: right;
1306
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
1307
+ text-align: end;
1271
1308
  }
1272
1309
  }
1273
1310
  @media screen and (max-width: 1200px) and (max-width: 576px) {
1274
1311
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__action {
1275
1312
  grid-row-start: 1;
1276
1313
  grid-column-start: 2;
1277
- margin-left: 0;
1314
+ margin-inline-start: 0;
1278
1315
  }
1279
1316
  }
1280
1317
  @media screen and (max-width: 1200px) {
@@ -1282,16 +1319,12 @@
1282
1319
  grid-column: 2;
1283
1320
  grid-row: 2;
1284
1321
  }
1285
- }
1286
- @media screen and (max-width: 1200px) {
1287
1322
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
1288
1323
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
1289
1324
  }
1290
1325
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
1291
1326
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
1292
1327
  }
1293
- }
1294
- @media screen and (max-width: 1200px) {
1295
1328
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
1296
1329
  --pf-v5-c-table--cell--Overflow: auto;
1297
1330
  }
@@ -1302,8 +1335,6 @@
1302
1335
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
1303
1336
  --pf-v5-c-table--cell--MaxWidth: 100%;
1304
1337
  }
1305
- }
1306
- @media screen and (max-width: 1200px) {
1307
1338
  .pf-m-grid-xl.pf-v5-c-table [class*=pf-m-width] {
1308
1339
  --pf-v5-c-table--cell--Width: auto;
1309
1340
  }
@@ -1346,26 +1377,26 @@
1346
1377
  display: block;
1347
1378
  }
1348
1379
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):first-of-type {
1349
- border-top: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1380
+ border-block-start: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1350
1381
  }
1351
1382
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table.pf-m-compact > tbody:where(.pf-v5-c-table__tbody) {
1352
- border-top: 0;
1383
+ border-block-start: 0;
1353
1384
  }
1354
1385
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
1355
- border-bottom: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1386
+ border-block-end: var(--pf-v5-c-table__tr--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1356
1387
  }
1357
1388
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):last-child,
1358
1389
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v5-c-table__tr) {
1359
- border-bottom-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
1390
+ border-block-end-width: var(--pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth);
1360
1391
  }
1361
1392
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
1362
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
1393
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
1363
1394
  }
1364
1395
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
1365
- border-bottom: 0;
1396
+ border-block-end: 0;
1366
1397
  }
1367
1398
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded:not(:last-of-type) {
1368
- border-bottom: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1399
+ border-block-end: var(--pf-v5-c-table__tbody--responsive--border-width--base) solid var(--pf-v5-c-table--responsive--BorderColor);
1369
1400
  }
1370
1401
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
1371
1402
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
@@ -1377,10 +1408,16 @@
1377
1408
  height: auto;
1378
1409
  grid-auto-columns: max-content;
1379
1410
  grid-column-gap: var(--pf-v5-c-table__tr--responsive--GridColumnGap);
1380
- padding: var(--pf-v5-c-table__tr--responsive--PaddingTop) var(--pf-v5-c-table__tr--responsive--PaddingRight) var(--pf-v5-c-table__tr--responsive--PaddingBottom) var(--pf-v5-c-table__tr--responsive--PaddingLeft);
1411
+ padding-block-start: var(--pf-v5-c-table__tr--responsive--PaddingTop);
1412
+ padding-inline-end: var(--pf-v5-c-table__tr--responsive--PaddingRight);
1413
+ padding-block-end: var(--pf-v5-c-table__tr--responsive--PaddingBottom);
1414
+ padding-inline-start: var(--pf-v5-c-table__tr--responsive--PaddingLeft);
1381
1415
  }
1382
1416
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > * {
1383
- padding: var(--pf-v5-c-table--cell--responsive--PaddingTop) var(--pf-v5-c-table--cell--responsive--PaddingRight) var(--pf-v5-c-table--cell--responsive--PaddingBottom) var(--pf-v5-c-table--cell--responsive--PaddingLeft);
1417
+ padding-block-start: var(--pf-v5-c-table--cell--responsive--PaddingTop);
1418
+ padding-inline-end: var(--pf-v5-c-table--cell--responsive--PaddingRight);
1419
+ padding-block-end: var(--pf-v5-c-table--cell--responsive--PaddingBottom);
1420
+ padding-inline-start: var(--pf-v5-c-table--cell--responsive--PaddingLeft);
1384
1421
  }
1385
1422
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:first-child {
1386
1423
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--cell--first-child--responsive--PaddingTop);
@@ -1390,17 +1427,18 @@
1390
1427
  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr--responsive--PaddingBottom);
1391
1428
  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop);
1392
1429
  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom);
1430
+ --pf-v5-c-table__check--responsive--MarginTop: var(--pf-v5-c-table--m-compact__check--responsive--MarginTop);
1393
1431
  --pf-v5-c-table__check--input--MarginTop: 0;
1394
1432
  }
1395
1433
  .pf-m-grid-2xl.pf-v5-c-table.pf-m-compact .pf-v5-c-table__action {
1396
- margin-top: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1397
- margin-bottom: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1434
+ margin-block-start: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1435
+ margin-block-end: var(--pf-v5-c-table--m-compact__action--responsive--MarginTop);
1398
1436
  }
1399
1437
  .pf-m-grid-2xl.pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle .pf-v5-c-button {
1400
- margin-bottom: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1438
+ margin-block-end: var(--pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1401
1439
  }
1402
1440
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__icon > * {
1403
- text-align: left;
1441
+ text-align: start;
1404
1442
  }
1405
1443
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label] {
1406
1444
  --pf-v5-c-table--cell--hidden-visible--Display: var(--pf-v5-c-table--m-grid--cell--hidden-visible--Display);
@@ -1414,7 +1452,7 @@
1414
1452
  }
1415
1453
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table__th, .pf-v5-c-table__td)[data-label]::before {
1416
1454
  font-weight: bold;
1417
- text-align: left;
1455
+ text-align: start;
1418
1456
  content: attr(data-label);
1419
1457
  }
1420
1458
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *:first-child {
@@ -1443,12 +1481,12 @@
1443
1481
  }
1444
1482
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody)::after {
1445
1483
  position: absolute;
1446
- top: 0;
1447
- bottom: 0;
1448
- left: 0;
1484
+ inset-block-start: 0;
1485
+ inset-block-end: 0;
1486
+ inset-inline-start: 0;
1449
1487
  content: "";
1450
1488
  border: 0;
1451
- border-left: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
1489
+ border-inline-start: var(--pf-v5-c-table__tbody--after--BorderLeftWidth) solid var(--pf-v5-c-table__tbody--after--BorderColor);
1452
1490
  }
1453
1491
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded {
1454
1492
  --pf-v5-c-table__tbody--after--BorderLeftWidth: var(--pf-v5-c-table__tbody--after--border-width--base);
@@ -1472,7 +1510,7 @@
1472
1510
  display: block;
1473
1511
  max-height: var(--pf-v5-c-table__expandable-row--MaxHeight);
1474
1512
  overflow-y: auto;
1475
- border-bottom: none;
1513
+ border-block-end: none;
1476
1514
  box-shadow: none;
1477
1515
  }
1478
1516
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__expandable-row > * {
@@ -1480,7 +1518,7 @@
1480
1518
  display: block;
1481
1519
  }
1482
1520
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__expandable-row.pf-m-expanded {
1483
- border-top-color: var(--pf-v5-c-table--BorderColor);
1521
+ border-block-start-color: var(--pf-v5-c-table--BorderColor);
1484
1522
  }
1485
1523
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__expandable-row > :first-child:not(.pf-v5-c-table__check)::after {
1486
1524
  content: none;
@@ -1493,8 +1531,8 @@
1493
1531
  display: none;
1494
1532
  }
1495
1533
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
1496
- padding-right: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
1497
- padding-left: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
1534
+ padding-inline-end: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingRight);
1535
+ padding-inline-start: var(--pf-v5-c-table__expandable-row-content--responsive--PaddingLeft);
1498
1536
  }
1499
1537
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable {
1500
1538
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
@@ -1507,9 +1545,9 @@
1507
1545
  .pf-m-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-hoverable > tr:where(.pf-v5-c-table__tr)::after {
1508
1546
  content: "";
1509
1547
  position: absolute;
1510
- top: 0;
1511
- bottom: 0;
1512
- left: 0;
1548
+ inset-block-start: 0;
1549
+ inset-block-end: 0;
1550
+ inset-inline-start: 0;
1513
1551
  width: var(--pf-v5-c-table__tbody--after__tr--BorderLeftWidth);
1514
1552
  background-color: var(--pf-v5-c-table__tbody--after__tr--BorderLeftColor);
1515
1553
  }
@@ -1524,9 +1562,9 @@
1524
1562
  .pf-m-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected::after {
1525
1563
  content: "";
1526
1564
  position: absolute;
1527
- top: 0;
1528
- bottom: 0;
1529
- left: 0;
1565
+ inset-block-start: 0;
1566
+ inset-block-end: 0;
1567
+ inset-inline-start: 0;
1530
1568
  width: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
1531
1569
  background-color: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);
1532
1570
  }
@@ -1541,7 +1579,7 @@
1541
1579
  grid-row-start: 20;
1542
1580
  grid-column: -1;
1543
1581
  justify-self: end;
1544
- padding-right: 0;
1582
+ padding-inline-end: 0;
1545
1583
  }
1546
1584
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle::after {
1547
1585
  content: none;
@@ -1559,34 +1597,39 @@
1559
1597
  grid-column-start: 2;
1560
1598
  }
1561
1599
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check {
1562
- margin-top: var(--pf-v5-c-table__check--responsive--MarginTop);
1563
- margin-left: var(--pf-v5-c-table__check--responsive--MarginLeft);
1600
+ margin-block-start: var(--pf-v5-c-table__check--responsive--MarginTop);
1601
+ margin-inline-start: var(--pf-v5-c-table__check--responsive--MarginLeft);
1602
+ line-height: 1;
1564
1603
  }
1565
1604
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite {
1566
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
1605
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft);
1567
1606
  }
1568
1607
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
1569
- margin-left: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
1608
+ margin-inline-start: var(--pf-v5-c-table--m-grid__check--favorite--action--MarginLeft);
1570
1609
  }
1571
1610
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check ~ .pf-v5-c-table__action {
1572
- margin-left: var(--pf-v5-c-table__action--responsive--MarginLeft);
1611
+ margin-inline-start: var(--pf-v5-c-table__action--responsive--MarginLeft);
1612
+ }
1613
+ .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__check label {
1614
+ display: inline-block;
1615
+ margin: 0;
1573
1616
  }
1574
1617
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__favorite {
1575
- margin-top: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
1618
+ margin-block-start: var(--pf-v5-c-table--m-grid__favorite--MarginTop);
1576
1619
  }
1577
1620
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__favorite ~ .pf-v5-c-table__action {
1578
- margin-left: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
1621
+ margin-inline-start: var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft);
1579
1622
  }
1580
1623
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__action {
1581
- margin-top: var(--pf-v5-c-table--m-grid__action--MarginTop);
1582
- text-align: right;
1624
+ margin-block-start: var(--pf-v5-c-table--m-grid__action--MarginTop);
1625
+ text-align: end;
1583
1626
  }
1584
1627
  }
1585
1628
  @media screen and (max-width: 1450px) and (max-width: 576px) {
1586
1629
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__action {
1587
1630
  grid-row-start: 1;
1588
1631
  grid-column-start: 2;
1589
- margin-left: 0;
1632
+ margin-inline-start: 0;
1590
1633
  }
1591
1634
  }
1592
1635
  @media screen and (max-width: 1450px) {
@@ -1594,16 +1637,12 @@
1594
1637
  grid-column: 2;
1595
1638
  grid-row: 2;
1596
1639
  }
1597
- }
1598
- @media screen and (max-width: 1450px) {
1599
1640
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
1600
1641
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
1601
1642
  }
1602
1643
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
1603
1644
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
1604
1645
  }
1605
- }
1606
- @media screen and (max-width: 1450px) {
1607
1646
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
1608
1647
  --pf-v5-c-table--cell--Overflow: auto;
1609
1648
  }
@@ -1614,8 +1653,6 @@
1614
1653
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
1615
1654
  --pf-v5-c-table--cell--MaxWidth: 100%;
1616
1655
  }
1617
- }
1618
- @media screen and (max-width: 1450px) {
1619
1656
  .pf-m-grid-2xl.pf-v5-c-table [class*=pf-m-width] {
1620
1657
  --pf-v5-c-table--cell--Width: auto;
1621
1658
  }