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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (154) hide show
  1. package/CHANGELOG.md +8 -2
  2. package/css/components/AboutModalBox/about-modal-box.css +20 -13
  3. package/css/components/Accordion/accordion.css +33 -20
  4. package/css/components/Accordion/accordion.d.ts +3 -1
  5. package/css/components/Accordion/accordion.js +3 -1
  6. package/css/components/Accordion/accordion.mjs +3 -1
  7. package/css/components/ActionList/action-list.css +2 -2
  8. package/css/components/Alert/alert-group.css +7 -4
  9. package/css/components/Alert/alert.css +19 -13
  10. package/css/components/Alert/alert.d.ts +3 -1
  11. package/css/components/Alert/alert.js +3 -1
  12. package/css/components/Alert/alert.mjs +3 -1
  13. package/css/components/AppLauncher/app-launcher.css +32 -23
  14. package/css/components/BackToTop/back-to-top.css +2 -2
  15. package/css/components/Backdrop/backdrop.css +2 -2
  16. package/css/components/BackgroundImage/background-image.css +2 -2
  17. package/css/components/Badge/badge.css +2 -2
  18. package/css/components/Banner/banner.css +5 -2
  19. package/css/components/Breadcrumb/breadcrumb.css +9 -3
  20. package/css/components/Breadcrumb/breadcrumb.d.ts +3 -1
  21. package/css/components/Breadcrumb/breadcrumb.js +3 -1
  22. package/css/components/Breadcrumb/breadcrumb.mjs +3 -1
  23. package/css/components/Button/button.css +23 -17
  24. package/css/components/CalendarMonth/calendar-month.css +25 -15
  25. package/css/components/CalendarMonth/calendar-month.d.ts +3 -1
  26. package/css/components/CalendarMonth/calendar-month.js +3 -1
  27. package/css/components/CalendarMonth/calendar-month.mjs +3 -1
  28. package/css/components/Card/card.css +21 -16
  29. package/css/components/Check/check.css +2 -2
  30. package/css/components/Chip/chip-group.css +6 -6
  31. package/css/components/Chip/chip.css +16 -9
  32. package/css/components/Chip/chip.d.ts +1 -0
  33. package/css/components/Chip/chip.js +1 -0
  34. package/css/components/Chip/chip.mjs +1 -0
  35. package/css/components/ClipboardCopy/clipboard-copy.css +19 -10
  36. package/css/components/ClipboardCopy/clipboard-copy.d.ts +3 -1
  37. package/css/components/ClipboardCopy/clipboard-copy.js +3 -1
  38. package/css/components/ClipboardCopy/clipboard-copy.mjs +3 -1
  39. package/css/components/CodeBlock/code-block.css +6 -3
  40. package/css/components/CodeEditor/code-editor.css +31 -22
  41. package/css/components/Content/content.css +33 -30
  42. package/css/components/ContextSelector/context-selector.css +41 -26
  43. package/css/components/DataList/data-list-grid.css +21 -49
  44. package/css/components/DataList/data-list.css +66 -84
  45. package/css/components/DatePicker/date-picker.css +8 -8
  46. package/css/components/DescriptionList/description-list.css +8 -5
  47. package/css/components/DragDrop/drag-drop.css +8 -8
  48. package/css/components/Drawer/drawer.css +75 -60
  49. package/css/components/Dropdown/dropdown.css +75 -66
  50. package/css/components/DualListSelector/dual-list-selector.css +29 -15
  51. package/css/components/DualListSelector/dual-list-selector.d.ts +4 -1
  52. package/css/components/DualListSelector/dual-list-selector.js +4 -1
  53. package/css/components/DualListSelector/dual-list-selector.mjs +4 -1
  54. package/css/components/EmptyState/empty-state.css +7 -4
  55. package/css/components/ExpandableSection/expandable-section.css +17 -10
  56. package/css/components/ExpandableSection/expandable-section.d.ts +3 -1
  57. package/css/components/ExpandableSection/expandable-section.js +3 -1
  58. package/css/components/ExpandableSection/expandable-section.mjs +3 -1
  59. package/css/components/FileUpload/file-upload.css +9 -15
  60. package/css/components/Form/form.css +50 -50
  61. package/css/components/FormControl/form-control.css +21 -11
  62. package/css/components/HelperText/helper-text.css +1 -1
  63. package/css/components/Hint/hint.css +9 -6
  64. package/css/components/Icon/icon.css +1 -1
  65. package/css/components/InlineEdit/inline-edit.css +4 -4
  66. package/css/components/InputGroup/input-group.css +12 -6
  67. package/css/components/JumpLinks/jump-links.css +24 -24
  68. package/css/components/Label/label-group.css +13 -10
  69. package/css/components/Label/label.css +9 -9
  70. package/css/components/List/list.css +9 -9
  71. package/css/components/LogViewer/log-viewer.css +14 -14
  72. package/css/components/Login/login.css +36 -27
  73. package/css/components/Masthead/masthead.css +19 -22
  74. package/css/components/Menu/menu.css +80 -66
  75. package/css/components/Menu/menu.d.ts +3 -1
  76. package/css/components/Menu/menu.js +3 -1
  77. package/css/components/Menu/menu.mjs +3 -1
  78. package/css/components/MenuToggle/menu-toggle.css +41 -29
  79. package/css/components/ModalBox/modal-box.css +19 -19
  80. package/css/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  81. package/css/components/Nav/nav.css +120 -93
  82. package/css/components/Nav/nav.d.ts +3 -1
  83. package/css/components/Nav/nav.js +3 -1
  84. package/css/components/Nav/nav.mjs +3 -1
  85. package/css/components/NotificationBadge/notification-badge.css +13 -7
  86. package/css/components/NotificationDrawer/notification-drawer.css +32 -19
  87. package/css/components/NotificationDrawer/notification-drawer.d.ts +3 -1
  88. package/css/components/NotificationDrawer/notification-drawer.js +3 -1
  89. package/css/components/NotificationDrawer/notification-drawer.mjs +3 -1
  90. package/css/components/NumberInput/number-input.css +3 -3
  91. package/css/components/OptionsMenu/options-menu.css +43 -31
  92. package/css/components/OverflowMenu/overflow-menu.css +2 -2
  93. package/css/components/Page/page.css +123 -65
  94. package/css/components/Page/page.d.ts +3 -1
  95. package/css/components/Page/page.js +3 -1
  96. package/css/components/Page/page.mjs +3 -1
  97. package/css/components/Pagination/pagination.css +28 -18
  98. package/css/components/Pagination/pagination.d.ts +3 -1
  99. package/css/components/Pagination/pagination.js +3 -1
  100. package/css/components/Pagination/pagination.mjs +3 -1
  101. package/css/components/Panel/panel.css +13 -7
  102. package/css/components/Popover/popover.css +24 -21
  103. package/css/components/Progress/progress.css +7 -7
  104. package/css/components/ProgressStepper/progress-stepper.css +26 -20
  105. package/css/components/Radio/radio.css +4 -5
  106. package/css/components/Select/select.css +56 -47
  107. package/css/components/Sidebar/sidebar.css +11 -5
  108. package/css/components/SimpleList/simple-list.css +10 -4
  109. package/css/components/Skeleton/skeleton.css +2 -5
  110. package/css/components/SkipToContent/skip-to-content.css +3 -3
  111. package/css/components/Slider/slider.css +46 -26
  112. package/css/components/Slider/slider.d.ts +3 -1
  113. package/css/components/Slider/slider.js +3 -1
  114. package/css/components/Slider/slider.mjs +3 -1
  115. package/css/components/Switch/switch.css +9 -5
  116. package/css/components/Switch/switch.d.ts +3 -1
  117. package/css/components/Switch/switch.js +3 -1
  118. package/css/components/Switch/switch.mjs +3 -1
  119. package/css/components/TabContent/tab-content.css +4 -1
  120. package/css/components/Table/table-grid.css +256 -219
  121. package/css/components/Table/table-scrollable.css +2 -2
  122. package/css/components/Table/table-tree-view.css +107 -104
  123. package/css/components/Table/table.css +87 -69
  124. package/css/components/Tabs/tabs.css +66 -48
  125. package/css/components/TextInputGroup/text-input-group.css +15 -15
  126. package/css/components/Tile/tile.css +10 -10
  127. package/css/components/ToggleGroup/toggle-group.css +14 -11
  128. package/css/components/Toolbar/toolbar.css +44 -41
  129. package/css/components/Tooltip/tooltip.css +19 -16
  130. package/css/components/TreeView/tree-view.css +42 -27
  131. package/css/components/Wizard/wizard.css +57 -36
  132. package/css/components/Wizard/wizard.d.ts +3 -1
  133. package/css/components/Wizard/wizard.js +3 -1
  134. package/css/components/Wizard/wizard.mjs +3 -1
  135. package/css/docs/components/Button/examples/Button.css +2 -2
  136. package/css/docs/components/DragDrop/examples/DragDrop.css +2 -2
  137. package/css/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  138. package/css/docs/components/LogViewer/examples/LogViewer.css +2 -2
  139. package/css/docs/components/ModalBox/examples/ModalBox.css +2 -2
  140. package/css/docs/components/Nav/examples/Navigation.css +3 -26
  141. package/css/docs/components/Nav/examples/Navigation.d.ts +1 -1
  142. package/css/docs/components/Nav/examples/Navigation.js +1 -1
  143. package/css/docs/components/Nav/examples/Navigation.mjs +1 -1
  144. package/css/docs/components/Popover/examples/Popover.css +2 -2
  145. package/css/docs/components/Select/deprecated/Select.css +3 -3
  146. package/css/docs/components/Table/examples/Table.css +2 -2
  147. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  148. package/css/docs/components/Tile/examples/Tile.css +1 -1
  149. package/css/docs/demos/Card/examples/Card.css +3 -3
  150. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  151. package/css/layouts/Flex/flex.css +115 -43
  152. package/css/utilities/Accessibility/accessibility.css +12 -12
  153. package/css/utilities/Spacing/spacing.css +720 -960
  154. package/package.json +4 -8
package/css/components/Table/table-scrollable.css CHANGED
@@ -17,8 +17,8 @@
17
17
  --pf-v5-c-table--cell--Overflow: visible;
18
18
  --pf-v5-c-table--m-sticky-header--cell--ZIndex: var(--pf-v5-c-table--m-sticky-header__sticky-cell--ZIndex);
19
19
  position: sticky;
20
- right: var(--pf-v5-c-table__sticky-cell--Right);
21
- left: var(--pf-v5-c-table__sticky-cell--Left);
20
+ inset-inline-start: var(--pf-v5-c-table__sticky-cell--Left);
21
+ inset-inline-end: var(--pf-v5-c-table__sticky-cell--Right);
22
22
  z-index: var(--pf-v5-c-table__sticky-cell--ZIndex);
23
23
  min-width: var(--pf-v5-c-table__sticky-cell--MinWidth);
24
24
  background-color: var(--pf-v5-c-table__sticky-cell--BackgroundColor);
package/css/components/Table/table-tree-view.css CHANGED
@@ -59,26 +59,29 @@
59
59
  display: flex;
60
60
  align-items: baseline;
61
61
  min-width: 0;
62
- padding-left: var(--pf-v5-c-table__tree-view-main--PaddingLeft);
63
- margin-left: var(--pf-v5-c-table__tree-view-main--MarginLeft);
64
- text-align: left;
62
+ padding-inline-start: var(--pf-v5-c-table__tree-view-main--PaddingLeft);
63
+ margin-inline-start: var(--pf-v5-c-table__tree-view-main--MarginLeft);
64
+ text-align: start;
65
65
  cursor: pointer;
66
66
  }
67
67
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
68
68
  position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
69
- left: var(--pf-v5-c-table--m-tree-view__toggle--Left);
69
+ inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
70
70
  transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
71
71
  }
72
72
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
73
73
  min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
74
74
  }
75
75
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
76
- margin-right: var(--pf-v5-c-table__tree-view-main--c-table__check--MarginRight);
76
+ margin-inline-end: var(--pf-v5-c-table__tree-view-main--c-table__check--MarginRight);
77
77
  }
78
78
  .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check label {
79
- padding-right: var(--pf-v5-c-table__tree-view-main--c-table__check--PaddingRight);
80
- padding-left: var(--pf-v5-c-table__tree-view-main--c-table__check--PaddingLeft);
81
- margin: 0 calc(var(--pf-v5-c-table__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
79
+ padding-inline-start: var(--pf-v5-c-table__tree-view-main--c-table__check--PaddingLeft);
80
+ padding-inline-end: var(--pf-v5-c-table__tree-view-main--c-table__check--PaddingRight);
81
+ margin-block-start: 0;
82
+ margin-block-end: 0;
83
+ margin-inline-start: 0;
84
+ margin-inline-end: calc(var(--pf-v5-c-table__tree-view-main--c-table__check--MarginRight) * -1);
82
85
  }
83
86
 
84
87
  .pf-v5-c-table__tree-view-text {
@@ -87,7 +90,7 @@
87
90
 
88
91
  .pf-v5-c-table__tree-view-icon {
89
92
  min-width: var(--pf-v5-c-table__tree-view-icon--MinWidth);
90
- margin-right: var(--pf-v5-c-table__tree-view-icon--MarginRight);
93
+ margin-inline-end: var(--pf-v5-c-table__tree-view-icon--MarginRight);
91
94
  }
92
95
 
93
96
  .pf-v5-c-table__tree-view-details-toggle {
@@ -121,17 +124,17 @@
121
124
  }
122
125
  .pf-m-tree-view-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
123
126
  position: relative;
124
- outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
125
127
  border: none;
128
+ outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
126
129
  }
127
130
  .pf-m-tree-view-grid.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
128
131
  position: absolute;
129
- top: 0;
130
- right: 0;
131
- bottom: 0;
132
- left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
133
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
132
+ inset-block-start: 0;
133
+ inset-block-end: 0;
134
+ inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
135
+ inset-inline-end: 0;
134
136
  content: "";
137
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
135
138
  }
136
139
  .pf-m-tree-view-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
137
140
  display: grid;
@@ -146,10 +149,10 @@
146
149
  .pf-m-tree-view-grid.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
147
150
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
148
151
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
149
- padding-left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
152
+ padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
150
153
  }
151
154
  .pf-m-tree-view-grid.pf-v5-c-table .pf-v5-c-table__tree-view-text {
152
- padding-right: var(--pf-v5-c-table__tree-view-text--PaddingRight);
155
+ padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
153
156
  }
154
157
  .pf-m-tree-view-grid.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
155
158
  display: none;
@@ -158,21 +161,21 @@
158
161
  display: none;
159
162
  }
160
163
  .pf-m-tree-view-grid.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
164
+ grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
161
165
  grid-column: 1;
162
166
  grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
163
- grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
164
167
  align-items: start;
165
168
  }
166
169
  .pf-m-tree-view-grid.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
167
170
  grid-column: 2;
168
171
  }
169
172
  .pf-m-tree-view-grid.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
170
- font-weight: bold;
171
- text-align: left;
173
+ font-weight: var(--pf-v5-global--FontWeight--bold);
174
+ text-align: start;
172
175
  content: attr(data-label);
173
176
  }
174
177
  .pf-m-tree-view-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
175
- padding-bottom: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
178
+ padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
176
179
  }
177
180
  .pf-m-tree-view-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
178
181
  display: grid;
@@ -189,21 +192,21 @@
189
192
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
190
193
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
191
194
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
192
- grid-column: 2;
193
195
  grid-row: 1;
196
+ grid-column: 2;
194
197
  }
195
198
  .pf-m-tree-view-grid.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
196
- margin-top: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
197
- margin-bottom: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
199
+ margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
200
+ margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
198
201
  }
199
202
  .pf-m-tree-view-grid.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
200
- margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
201
- margin-left: auto;
202
203
  order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
204
+ margin-inline-start: auto;
205
+ margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
203
206
  }
204
207
  .pf-m-tree-view-grid.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
205
- margin-top: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
206
- margin-bottom: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
208
+ margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
209
+ margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
207
210
  }
208
211
  .pf-m-tree-view-grid.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
209
212
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
@@ -261,17 +264,17 @@
261
264
  }
262
265
  .pf-m-tree-view-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
263
266
  position: relative;
264
- outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
265
267
  border: none;
268
+ outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
266
269
  }
267
270
  .pf-m-tree-view-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
268
271
  position: absolute;
269
- top: 0;
270
- right: 0;
271
- bottom: 0;
272
- left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
273
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
272
+ inset-block-start: 0;
273
+ inset-block-end: 0;
274
+ inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
275
+ inset-inline-end: 0;
274
276
  content: "";
277
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
275
278
  }
276
279
  .pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
277
280
  display: grid;
@@ -286,10 +289,10 @@
286
289
  .pf-m-tree-view-grid-md.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
287
290
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
288
291
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
289
- padding-left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
292
+ padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
290
293
  }
291
294
  .pf-m-tree-view-grid-md.pf-v5-c-table .pf-v5-c-table__tree-view-text {
292
- padding-right: var(--pf-v5-c-table__tree-view-text--PaddingRight);
295
+ padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
293
296
  }
294
297
  .pf-m-tree-view-grid-md.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
295
298
  display: none;
@@ -298,21 +301,21 @@
298
301
  display: none;
299
302
  }
300
303
  .pf-m-tree-view-grid-md.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
304
+ grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
301
305
  grid-column: 1;
302
306
  grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
303
- grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
304
307
  align-items: start;
305
308
  }
306
309
  .pf-m-tree-view-grid-md.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
307
310
  grid-column: 2;
308
311
  }
309
312
  .pf-m-tree-view-grid-md.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
310
- font-weight: bold;
311
- text-align: left;
313
+ font-weight: var(--pf-v5-global--FontWeight--bold);
314
+ text-align: start;
312
315
  content: attr(data-label);
313
316
  }
314
317
  .pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
315
- padding-bottom: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
318
+ padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
316
319
  }
317
320
  .pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
318
321
  display: grid;
@@ -329,21 +332,21 @@
329
332
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
330
333
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
331
334
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
332
- grid-column: 2;
333
335
  grid-row: 1;
336
+ grid-column: 2;
334
337
  }
335
338
  .pf-m-tree-view-grid-md.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
336
- margin-top: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
337
- margin-bottom: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
339
+ margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
340
+ margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
338
341
  }
339
342
  .pf-m-tree-view-grid-md.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
340
- margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
341
- margin-left: auto;
342
343
  order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
344
+ margin-inline-start: auto;
345
+ margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
343
346
  }
344
347
  .pf-m-tree-view-grid-md.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
345
- margin-top: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
346
- margin-bottom: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
348
+ margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
349
+ margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
347
350
  }
348
351
  .pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
349
352
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
@@ -402,17 +405,17 @@
402
405
  }
403
406
  .pf-m-tree-view-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
404
407
  position: relative;
405
- outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
406
408
  border: none;
409
+ outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
407
410
  }
408
411
  .pf-m-tree-view-grid-lg.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
409
412
  position: absolute;
410
- top: 0;
411
- right: 0;
412
- bottom: 0;
413
- left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
414
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
413
+ inset-block-start: 0;
414
+ inset-block-end: 0;
415
+ inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
416
+ inset-inline-end: 0;
415
417
  content: "";
418
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
416
419
  }
417
420
  .pf-m-tree-view-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
418
421
  display: grid;
@@ -427,10 +430,10 @@
427
430
  .pf-m-tree-view-grid-lg.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
428
431
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
429
432
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
430
- padding-left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
433
+ padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
431
434
  }
432
435
  .pf-m-tree-view-grid-lg.pf-v5-c-table .pf-v5-c-table__tree-view-text {
433
- padding-right: var(--pf-v5-c-table__tree-view-text--PaddingRight);
436
+ padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
434
437
  }
435
438
  .pf-m-tree-view-grid-lg.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
436
439
  display: none;
@@ -439,21 +442,21 @@
439
442
  display: none;
440
443
  }
441
444
  .pf-m-tree-view-grid-lg.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
445
+ grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
442
446
  grid-column: 1;
443
447
  grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
444
- grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
445
448
  align-items: start;
446
449
  }
447
450
  .pf-m-tree-view-grid-lg.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
448
451
  grid-column: 2;
449
452
  }
450
453
  .pf-m-tree-view-grid-lg.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
451
- font-weight: bold;
452
- text-align: left;
454
+ font-weight: var(--pf-v5-global--FontWeight--bold);
455
+ text-align: start;
453
456
  content: attr(data-label);
454
457
  }
455
458
  .pf-m-tree-view-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
456
- padding-bottom: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
459
+ padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
457
460
  }
458
461
  .pf-m-tree-view-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
459
462
  display: grid;
@@ -470,21 +473,21 @@
470
473
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
471
474
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
472
475
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
473
- grid-column: 2;
474
476
  grid-row: 1;
477
+ grid-column: 2;
475
478
  }
476
479
  .pf-m-tree-view-grid-lg.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
477
- margin-top: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
478
- margin-bottom: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
480
+ margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
481
+ margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
479
482
  }
480
483
  .pf-m-tree-view-grid-lg.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
481
- margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
482
- margin-left: auto;
483
484
  order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
485
+ margin-inline-start: auto;
486
+ margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
484
487
  }
485
488
  .pf-m-tree-view-grid-lg.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
486
- margin-top: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
487
- margin-bottom: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
489
+ margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
490
+ margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
488
491
  }
489
492
  .pf-m-tree-view-grid-lg.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
490
493
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
@@ -543,17 +546,17 @@
543
546
  }
544
547
  .pf-m-tree-view-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
545
548
  position: relative;
546
- outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
547
549
  border: none;
550
+ outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
548
551
  }
549
552
  .pf-m-tree-view-grid-xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
550
553
  position: absolute;
551
- top: 0;
552
- right: 0;
553
- bottom: 0;
554
- left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
555
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
554
+ inset-block-start: 0;
555
+ inset-block-end: 0;
556
+ inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
557
+ inset-inline-end: 0;
556
558
  content: "";
559
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
557
560
  }
558
561
  .pf-m-tree-view-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
559
562
  display: grid;
@@ -568,10 +571,10 @@
568
571
  .pf-m-tree-view-grid-xl.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
569
572
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
570
573
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
571
- padding-left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
574
+ padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
572
575
  }
573
576
  .pf-m-tree-view-grid-xl.pf-v5-c-table .pf-v5-c-table__tree-view-text {
574
- padding-right: var(--pf-v5-c-table__tree-view-text--PaddingRight);
577
+ padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
575
578
  }
576
579
  .pf-m-tree-view-grid-xl.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
577
580
  display: none;
@@ -580,21 +583,21 @@
580
583
  display: none;
581
584
  }
582
585
  .pf-m-tree-view-grid-xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
586
+ grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
583
587
  grid-column: 1;
584
588
  grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
585
- grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
586
589
  align-items: start;
587
590
  }
588
591
  .pf-m-tree-view-grid-xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
589
592
  grid-column: 2;
590
593
  }
591
594
  .pf-m-tree-view-grid-xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
592
- font-weight: bold;
593
- text-align: left;
595
+ font-weight: var(--pf-v5-global--FontWeight--bold);
596
+ text-align: start;
594
597
  content: attr(data-label);
595
598
  }
596
599
  .pf-m-tree-view-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
597
- padding-bottom: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
600
+ padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
598
601
  }
599
602
  .pf-m-tree-view-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
600
603
  display: grid;
@@ -611,21 +614,21 @@
611
614
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
612
615
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
613
616
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
614
- grid-column: 2;
615
617
  grid-row: 1;
618
+ grid-column: 2;
616
619
  }
617
620
  .pf-m-tree-view-grid-xl.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
618
- margin-top: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
619
- margin-bottom: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
621
+ margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
622
+ margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
620
623
  }
621
624
  .pf-m-tree-view-grid-xl.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
622
- margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
623
- margin-left: auto;
624
625
  order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
626
+ margin-inline-start: auto;
627
+ margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
625
628
  }
626
629
  .pf-m-tree-view-grid-xl.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
627
- margin-top: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
628
- margin-bottom: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
630
+ margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
631
+ margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
629
632
  }
630
633
  .pf-m-tree-view-grid-xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
631
634
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));
@@ -684,17 +687,17 @@
684
687
  }
685
688
  .pf-m-tree-view-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr) {
686
689
  position: relative;
687
- outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
688
690
  border: none;
691
+ outline-offset: var(--pf-v5-c-table--m-tree-view-grid--tr--OutlineOffset);
689
692
  }
690
693
  .pf-m-tree-view-grid-2xl.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
691
694
  position: absolute;
692
- top: 0;
693
- right: 0;
694
- bottom: 0;
695
- left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
696
- border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
695
+ inset-block-start: 0;
696
+ inset-block-end: 0;
697
+ inset-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
698
+ inset-inline-end: 0;
697
699
  content: "";
700
+ border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
698
701
  }
699
702
  .pf-m-tree-view-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not([hidden]) {
700
703
  display: grid;
@@ -709,10 +712,10 @@
709
712
  .pf-m-tree-view-grid-2xl.pf-v5-c-table td:where(.pf-v5-c-table__td):not(.pf-v5-c-table__tree-view-title-cell) {
710
713
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
711
714
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
712
- padding-left: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
715
+ padding-inline-start: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft);
713
716
  }
714
717
  .pf-m-tree-view-grid-2xl.pf-v5-c-table .pf-v5-c-table__tree-view-text {
715
- padding-right: var(--pf-v5-c-table__tree-view-text--PaddingRight);
718
+ padding-inline-end: var(--pf-v5-c-table__tree-view-text--PaddingRight);
716
719
  }
717
720
  .pf-m-tree-view-grid-2xl.pf-v5-c-table thead:where(.pf-v5-c-table__thead) th:where(.pf-v5-c-table__th) {
718
721
  display: none;
@@ -721,21 +724,21 @@
721
724
  display: none;
722
725
  }
723
726
  .pf-m-tree-view-grid-2xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] {
727
+ grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
724
728
  grid-column: 1;
725
729
  grid-column-gap: var(--pf-v5-c-table--m-tree-view-grid__tbody--cell--GridColumnGap);
726
- grid-template-columns: var(--pf-v5-c-table--m-tree-view-grid__td--data-label--GridTemplateColumns);
727
730
  align-items: start;
728
731
  }
729
732
  .pf-m-tree-view-grid-2xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label] > * {
730
733
  grid-column: 2;
731
734
  }
732
735
  .pf-m-tree-view-grid-2xl.pf-v5-c-table td:where(.pf-v5-c-table__td)[data-label]::before {
733
- font-weight: bold;
734
- text-align: left;
736
+ font-weight: var(--pf-v5-global--FontWeight--bold);
737
+ text-align: start;
735
738
  content: attr(data-label);
736
739
  }
737
740
  .pf-m-tree-view-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
738
- padding-bottom: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
741
+ padding-block-end: var(--pf-v5-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
739
742
  }
740
743
  .pf-m-tree-view-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded td:where(.pf-v5-c-table__td)[data-label] {
741
744
  display: grid;
@@ -752,21 +755,21 @@
752
755
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
753
756
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingTop);
754
757
  --pf-v5-c-table--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-v5-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
755
- grid-column: 2;
756
758
  grid-row: 1;
759
+ grid-column: 2;
757
760
  }
758
761
  .pf-m-tree-view-grid-2xl.pf-v5-c-table .pf-v5-c-table__action > .pf-v5-c-dropdown {
759
- margin-top: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
760
- margin-bottom: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
762
+ margin-block-start: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginTop);
763
+ margin-block-end: var(--pf-v5-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
761
764
  }
762
765
  .pf-m-tree-view-grid-2xl.pf-v5-c-table .pf-v5-c-table__tree-view-main > .pf-v5-c-table__check {
763
- margin-right: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
764
- margin-left: auto;
765
766
  order: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
767
+ margin-inline-start: auto;
768
+ margin-inline-end: var(--pf-v5-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
766
769
  }
767
770
  .pf-m-tree-view-grid-2xl.pf-v5-c-table .pf-v5-c-table__tree-view-details-toggle {
768
- margin-top: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
769
- margin-bottom: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
771
+ margin-block-start: var(--pf-v5-c-table__tree-view-details-toggle--MarginTop);
772
+ margin-block-end: var(--pf-v5-c-table__tree-view-details-toggle--MarginBottom);
770
773
  }
771
774
  .pf-m-tree-view-grid-2xl.pf-v5-c-table tr:where(.pf-v5-c-table__tr)[aria-level="2"] {
772
775
  --pf-v5-c-table--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--pf-v5-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-v5-c-table__tree-view-main--indent--base));