@patternfly/react-styles 6.0.0-alpha.20 → 6.0.0-alpha.21

Sign up to get free protection for your applications and to get access to all the features.
Files changed (205) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +64 -64
  3. package/css/components/Accordion/accordion.css +40 -40
  4. package/css/components/ActionList/action-list.css +1 -1
  5. package/css/components/Alert/alert-group.css +15 -15
  6. package/css/components/Alert/alert.css +47 -47
  7. package/css/components/Avatar/avatar.css +1 -1
  8. package/css/components/BackToTop/back-to-top.css +16 -16
  9. package/css/components/Backdrop/backdrop.css +1 -2
  10. package/css/components/BackgroundImage/background-image.css +1 -2
  11. package/css/components/Badge/badge.css +7 -7
  12. package/css/components/Banner/banner.css +14 -14
  13. package/css/components/Breadcrumb/breadcrumb.css +16 -17
  14. package/css/components/Breadcrumb/breadcrumb.d.ts +1 -1
  15. package/css/components/Breadcrumb/breadcrumb.js +1 -1
  16. package/css/components/Breadcrumb/breadcrumb.mjs +1 -1
  17. package/css/components/Button/button.css +94 -95
  18. package/css/components/CalendarMonth/calendar-month.css +43 -44
  19. package/css/components/Card/card.css +60 -61
  20. package/css/components/Check/check.css +3 -4
  21. package/css/components/ClipboardCopy/clipboard-copy.css +37 -38
  22. package/css/components/CodeBlock/code-block.css +20 -20
  23. package/css/components/CodeEditor/code-editor.css +34 -34
  24. package/css/components/Content/content.css +155 -130
  25. package/css/components/Content/content.d.ts +19 -0
  26. package/css/components/Content/content.js +19 -0
  27. package/css/components/Content/content.mjs +19 -0
  28. package/css/components/DataList/data-list-grid.css +98 -98
  29. package/css/components/DataList/data-list.css +282 -285
  30. package/css/components/DataList/data-list.d.ts +11 -11
  31. package/css/components/DataList/data-list.js +11 -11
  32. package/css/components/DataList/data-list.mjs +11 -11
  33. package/css/components/DatePicker/date-picker.css +15 -16
  34. package/css/components/DescriptionList/description-list.css +13 -13
  35. package/css/components/Divider/divider.css +27 -31
  36. package/css/components/DragDrop/drag-drop.css +2 -2
  37. package/css/components/Drawer/drawer.css +87 -90
  38. package/css/components/DualListSelector/dual-list-selector.css +60 -59
  39. package/css/components/EmptyState/empty-state.css +33 -33
  40. package/css/components/ExpandableSection/expandable-section.css +49 -49
  41. package/css/components/FileUpload/file-upload.css +1 -2
  42. package/css/components/Form/form.css +107 -108
  43. package/css/components/FormControl/form-control.css +45 -46
  44. package/css/components/HelperText/helper-text.css +3 -3
  45. package/css/components/Hint/hint.css +19 -18
  46. package/css/components/Hint/hint.d.ts +1 -2
  47. package/css/components/Hint/hint.js +1 -2
  48. package/css/components/Hint/hint.mjs +1 -2
  49. package/css/components/Icon/icon.css +1 -2
  50. package/css/components/InlineEdit/inline-edit.css +11 -12
  51. package/css/components/InputGroup/input-group.css +17 -18
  52. package/css/components/JumpLinks/jump-links.css +76 -77
  53. package/css/components/Label/label-group.css +27 -28
  54. package/css/components/Label/label.css +31 -32
  55. package/css/components/List/list.css +27 -27
  56. package/css/components/LogViewer/log-viewer.css +53 -77
  57. package/css/components/LogViewer/log-viewer.d.ts +0 -2
  58. package/css/components/LogViewer/log-viewer.js +0 -2
  59. package/css/components/LogViewer/log-viewer.mjs +0 -2
  60. package/css/components/Login/login.css +99 -104
  61. package/css/components/Login/login.d.ts +1 -1
  62. package/css/components/Login/login.js +1 -1
  63. package/css/components/Login/login.mjs +1 -1
  64. package/css/components/Masthead/masthead.css +1 -2
  65. package/css/components/Menu/menu.css +128 -84
  66. package/css/components/MenuToggle/menu-toggle.css +59 -60
  67. package/css/components/ModalBox/modal-box.css +41 -41
  68. package/css/components/MultipleFileUpload/multiple-file-upload.css +33 -34
  69. package/css/components/Nav/nav.css +1 -2
  70. package/css/components/NotificationBadge/notification-badge.css +17 -17
  71. package/css/components/NotificationDrawer/notification-drawer.css +42 -43
  72. package/css/components/NumberInput/number-input.css +8 -12
  73. package/css/components/OverflowMenu/overflow-menu.css +1 -1
  74. package/css/components/Page/page.css +146 -365
  75. package/css/components/Page/page.d.ts +0 -25
  76. package/css/components/Page/page.js +0 -25
  77. package/css/components/Page/page.mjs +0 -25
  78. package/css/components/Pagination/pagination.css +35 -38
  79. package/css/components/Panel/panel.css +25 -26
  80. package/css/components/Popover/popover.css +48 -48
  81. package/css/components/Progress/progress.css +5 -6
  82. package/css/components/ProgressStepper/progress-stepper.css +227 -229
  83. package/css/components/Radio/radio.css +7 -8
  84. package/css/components/Sidebar/sidebar.css +45 -46
  85. package/css/components/SimpleList/simple-list.css +19 -19
  86. package/css/components/Skeleton/skeleton.css +5 -6
  87. package/css/components/SkipToContent/skip-to-content.css +5 -5
  88. package/css/components/Slider/slider.css +26 -27
  89. package/css/components/Spinner/spinner.css +1 -2
  90. package/css/components/Switch/switch.css +5 -6
  91. package/css/components/TabContent/tab-content.css +25 -26
  92. package/css/components/Table/table-grid.css +404 -404
  93. package/css/components/Table/table-scrollable.css +17 -18
  94. package/css/components/Table/table-tree-view.css +257 -258
  95. package/css/components/Table/table-tree-view.d.ts +1 -1
  96. package/css/components/Table/table-tree-view.js +1 -1
  97. package/css/components/Table/table-tree-view.mjs +1 -1
  98. package/css/components/Table/table.css +169 -173
  99. package/css/components/Table/table.d.ts +7 -7
  100. package/css/components/Table/table.js +7 -7
  101. package/css/components/Table/table.mjs +7 -7
  102. package/css/components/Tabs/tabs.css +119 -120
  103. package/css/components/TextInputGroup/text-input-group.css +28 -29
  104. package/css/components/TextInputGroup/text-input-group.d.ts +1 -1
  105. package/css/components/TextInputGroup/text-input-group.js +1 -1
  106. package/css/components/TextInputGroup/text-input-group.mjs +1 -1
  107. package/css/components/Tile/tile.css +14 -15
  108. package/css/components/Timestamp/timestamp.css +1 -1
  109. package/css/components/Title/title.css +1 -1
  110. package/css/components/ToggleGroup/toggle-group.css +29 -30
  111. package/css/components/Toolbar/toolbar.css +94 -80
  112. package/css/components/Toolbar/toolbar.d.ts +2 -2
  113. package/css/components/Toolbar/toolbar.js +2 -2
  114. package/css/components/Toolbar/toolbar.mjs +2 -2
  115. package/css/components/Tooltip/tooltip.css +27 -27
  116. package/css/components/TreeView/tree-view.css +182 -183
  117. package/css/components/Truncate/truncate.css +1 -2
  118. package/css/components/Wizard/wizard.css +158 -140
  119. package/css/components/Wizard/wizard.d.ts +5 -2
  120. package/css/components/Wizard/wizard.js +5 -2
  121. package/css/components/Wizard/wizard.mjs +5 -2
  122. package/css/components/_index.css +23396 -0
  123. package/css/components/_index.d.ts +1497 -0
  124. package/css/components/_index.js +1498 -0
  125. package/css/components/_index.mjs +1496 -0
  126. package/css/docs/components/LogViewer/examples/LogViewer.css +9 -2
  127. package/css/docs/components/LogViewer/examples/LogViewer.d.ts +2 -0
  128. package/css/docs/components/LogViewer/examples/LogViewer.js +2 -0
  129. package/css/docs/components/LogViewer/examples/LogViewer.mjs +2 -0
  130. package/css/docs/components/Nav/examples/Navigation.css +0 -5
  131. package/css/docs/components/Nav/examples/Navigation.d.ts +0 -1
  132. package/css/docs/components/Nav/examples/Navigation.js +0 -1
  133. package/css/docs/components/Nav/examples/Navigation.mjs +0 -1
  134. package/css/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  135. package/css/docs/components/Table/examples/Table.css +7 -0
  136. package/css/docs/components/Table/examples/Table.d.ts +2 -0
  137. package/css/docs/components/Table/examples/Table.js +2 -0
  138. package/css/docs/components/Table/examples/Table.mjs +2 -0
  139. package/css/docs/demos/Card/examples/Card.css +2 -2
  140. package/css/docs/demos/Toolbar/examples/Toolbar.css +1 -17
  141. package/css/docs/utilities/Alignment/examples/Alignment.css +2 -2
  142. package/css/docs/utilities/Display/examples/Display.css +3 -10
  143. package/css/docs/utilities/Display/examples/Display.d.ts +0 -8
  144. package/css/docs/utilities/Display/examples/Display.js +0 -8
  145. package/css/docs/utilities/Display/examples/Display.mjs +0 -8
  146. package/css/docs/utilities/Flex/examples/Flex.css +2 -2
  147. package/css/docs/utilities/Float/examples/Float.css +3 -3
  148. package/css/docs/utilities/Sizing/examples/Sizing.css +2 -2
  149. package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
  150. package/css/layouts/Bullseye/bullseye.css +1 -2
  151. package/css/layouts/Flex/flex.css +1 -2
  152. package/css/layouts/Gallery/gallery.css +1 -2
  153. package/css/layouts/Grid/grid.css +1 -2
  154. package/css/layouts/Level/level.css +1 -2
  155. package/css/layouts/Split/split.css +1 -2
  156. package/css/layouts/Stack/stack.css +1 -2
  157. package/css/layouts/_index.css +3454 -0
  158. package/css/layouts/_index.d.ts +846 -0
  159. package/css/layouts/_index.js +847 -0
  160. package/css/layouts/_index.mjs +845 -0
  161. package/css/utilities/BackgroundColor/{BackgroundColor.d.ts → background-color.d.ts} +1 -1
  162. package/css/utilities/BackgroundColor/{BackgroundColor.js → background-color.js} +1 -1
  163. package/css/utilities/BackgroundColor/{BackgroundColor.mjs → background-color.mjs} +1 -1
  164. package/css/utilities/Display/display.css +38 -0
  165. package/css/utilities/Display/display.d.ts +12 -0
  166. package/css/utilities/Display/display.js +12 -0
  167. package/css/utilities/Display/display.mjs +12 -0
  168. package/css/utilities/_index.css +7815 -0
  169. package/css/utilities/_index.d.ts +1671 -0
  170. package/css/utilities/_index.js +1672 -0
  171. package/css/utilities/_index.mjs +1670 -0
  172. package/package.json +3 -3
  173. package/css/components/AppLauncher/app-launcher.css +0 -244
  174. package/css/components/AppLauncher/app-launcher.d.ts +0 -29
  175. package/css/components/AppLauncher/app-launcher.js +0 -30
  176. package/css/components/AppLauncher/app-launcher.mjs +0 -28
  177. package/css/components/Chip/chip-group.css +0 -93
  178. package/css/components/Chip/chip-group.d.ts +0 -13
  179. package/css/components/Chip/chip-group.js +0 -14
  180. package/css/components/Chip/chip-group.mjs +0 -12
  181. package/css/components/Chip/chip.css +0 -122
  182. package/css/components/Chip/chip.d.ts +0 -16
  183. package/css/components/Chip/chip.js +0 -17
  184. package/css/components/Chip/chip.mjs +0 -15
  185. package/css/components/ContextSelector/context-selector.css +0 -336
  186. package/css/components/ContextSelector/context-selector.d.ts +0 -25
  187. package/css/components/ContextSelector/context-selector.js +0 -26
  188. package/css/components/ContextSelector/context-selector.mjs +0 -24
  189. package/css/components/Dropdown/dropdown.css +0 -686
  190. package/css/components/Dropdown/dropdown.d.ts +0 -55
  191. package/css/components/Dropdown/dropdown.js +0 -56
  192. package/css/components/Dropdown/dropdown.mjs +0 -54
  193. package/css/components/OptionsMenu/options-menu.css +0 -279
  194. package/css/components/OptionsMenu/options-menu.d.ts +0 -27
  195. package/css/components/OptionsMenu/options-menu.js +0 -28
  196. package/css/components/OptionsMenu/options-menu.mjs +0 -26
  197. package/css/components/Select/select.css +0 -599
  198. package/css/components/Select/select.d.ts +0 -61
  199. package/css/components/Select/select.js +0 -62
  200. package/css/components/Select/select.mjs +0 -60
  201. package/css/docs/components/Page/deprecated/PageHeader.css +0 -17
  202. package/css/docs/components/Page/deprecated/PageHeader.d.ts +0 -12
  203. package/css/docs/components/Page/deprecated/PageHeader.js +0 -13
  204. package/css/docs/components/Page/deprecated/PageHeader.mjs +0 -11
  205. /package/css/utilities/BackgroundColor/{BackgroundColor.css → background-color.css} +0 -0
package/css/components/DataList/data-list.css CHANGED
@@ -1,70 +1,21 @@
1
- .pf-v6-c-data-list__item-action {
2
- --pf-v6-hidden-visible--hidden--Display: none;
3
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4
- display: var(--pf-v6-hidden-visible--Display);
5
- }
6
- .pf-m-hidden.pf-v6-c-data-list__item-action {
7
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
8
- }
9
- @media screen and (min-width: 576px) {
10
- .pf-m-hidden-on-sm.pf-v6-c-data-list__item-action {
11
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
12
- }
13
- .pf-m-visible-on-sm.pf-v6-c-data-list__item-action {
14
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
15
- }
16
- }
17
- @media screen and (min-width: 768px) {
18
- .pf-m-hidden-on-md.pf-v6-c-data-list__item-action {
19
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
20
- }
21
- .pf-m-visible-on-md.pf-v6-c-data-list__item-action {
22
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
23
- }
24
- }
25
- @media screen and (min-width: 992px) {
26
- .pf-m-hidden-on-lg.pf-v6-c-data-list__item-action {
27
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
28
- }
29
- .pf-m-visible-on-lg.pf-v6-c-data-list__item-action {
30
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
31
- }
32
- }
33
- @media screen and (min-width: 1200px) {
34
- .pf-m-hidden-on-xl.pf-v6-c-data-list__item-action {
35
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
36
- }
37
- .pf-m-visible-on-xl.pf-v6-c-data-list__item-action {
38
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
- }
40
- }
41
- @media screen and (min-width: 1450px) {
42
- .pf-m-hidden-on-2xl.pf-v6-c-data-list__item-action {
43
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
44
- }
45
- .pf-m-visible-on-2xl.pf-v6-c-data-list__item-action {
46
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
47
- }
48
- }
49
-
50
1
  @media screen and (min-width: 768px) {
51
2
  .pf-v6-c-data-list:not([class*=pf-m-grid]) {
52
- --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list__cell--cell--md--PaddingTop);
53
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-v6-c-data-list__cell--md--PaddingBottom);
54
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-v6-c-data-list__item-control--md--MarginRight);
55
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-v6-c-data-list__item-action--md--MarginLeft);
56
- --pf-v6-c-data-list__expandable-content-body--PaddingTop: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingTop);
57
- --pf-v6-c-data-list__expandable-content-body--PaddingBottom: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBottom);
58
- --pf-v6-c-data-list--m-compact__cell--PaddingBottom: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBottom);
59
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingTop);
3
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
4
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
5
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
6
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
7
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
8
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
9
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
10
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
60
11
  }
61
12
  }
62
13
  @media screen and (min-width: 768px) and (min-width: 1200px) {
63
14
  .pf-v6-c-data-list:not([class*=pf-m-grid]) {
64
- --pf-v6-c-data-list__item-row--PaddingRight: var(--pf-v6-c-data-list__item-row--xl--PaddingRight);
65
- --pf-v6-c-data-list__item-row--PaddingLeft: var(--pf-v6-c-data-list__item-row--xl--PaddingLeft);
66
- --pf-v6-c-data-list__expandable-content-body--PaddingRight: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingRight);
67
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingLeft);
15
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
16
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
17
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
18
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
68
19
  }
69
20
  }
70
21
  @media screen and (min-width: 768px) {
@@ -72,10 +23,10 @@
72
23
  display: flex;
73
24
  flex-grow: 1;
74
25
  flex-wrap: wrap;
75
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBottom);
26
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
76
27
  }
77
28
  .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
78
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginRight);
29
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
79
30
  }
80
31
  .pf-v6-c-data-list:not([class*=pf-m-grid]) .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
81
32
  flex: 1;
@@ -107,22 +58,22 @@
107
58
 
108
59
  @media screen and (min-width: 0) {
109
60
  .pf-v6-c-data-list.pf-m-grid-none {
110
- --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list__cell--cell--md--PaddingTop);
111
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-v6-c-data-list__cell--md--PaddingBottom);
112
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-v6-c-data-list__item-control--md--MarginRight);
113
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-v6-c-data-list__item-action--md--MarginLeft);
114
- --pf-v6-c-data-list__expandable-content-body--PaddingTop: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingTop);
115
- --pf-v6-c-data-list__expandable-content-body--PaddingBottom: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBottom);
116
- --pf-v6-c-data-list--m-compact__cell--PaddingBottom: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBottom);
117
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingTop);
61
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
62
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
63
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
64
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
65
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
66
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
67
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
68
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
118
69
  }
119
70
  }
120
71
  @media screen and (min-width: 0) and (min-width: 1200px) {
121
72
  .pf-v6-c-data-list.pf-m-grid-none {
122
- --pf-v6-c-data-list__item-row--PaddingRight: var(--pf-v6-c-data-list__item-row--xl--PaddingRight);
123
- --pf-v6-c-data-list__item-row--PaddingLeft: var(--pf-v6-c-data-list__item-row--xl--PaddingLeft);
124
- --pf-v6-c-data-list__expandable-content-body--PaddingRight: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingRight);
125
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingLeft);
73
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
74
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
75
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
76
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
126
77
  }
127
78
  }
128
79
  @media screen and (min-width: 0) {
@@ -130,10 +81,10 @@
130
81
  display: flex;
131
82
  flex-grow: 1;
132
83
  flex-wrap: wrap;
133
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBottom);
84
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
134
85
  }
135
86
  .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
136
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginRight);
87
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
137
88
  }
138
89
  .pf-v6-c-data-list.pf-m-grid-none .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
139
90
  flex: 1;
@@ -165,22 +116,22 @@
165
116
 
166
117
  @media screen and (min-width: 576px) {
167
118
  .pf-v6-c-data-list.pf-m-grid-sm {
168
- --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list__cell--cell--md--PaddingTop);
169
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-v6-c-data-list__cell--md--PaddingBottom);
170
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-v6-c-data-list__item-control--md--MarginRight);
171
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-v6-c-data-list__item-action--md--MarginLeft);
172
- --pf-v6-c-data-list__expandable-content-body--PaddingTop: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingTop);
173
- --pf-v6-c-data-list__expandable-content-body--PaddingBottom: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBottom);
174
- --pf-v6-c-data-list--m-compact__cell--PaddingBottom: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBottom);
175
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingTop);
119
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
120
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
121
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
122
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
123
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
124
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
125
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
126
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
176
127
  }
177
128
  }
178
129
  @media screen and (min-width: 576px) and (min-width: 1200px) {
179
130
  .pf-v6-c-data-list.pf-m-grid-sm {
180
- --pf-v6-c-data-list__item-row--PaddingRight: var(--pf-v6-c-data-list__item-row--xl--PaddingRight);
181
- --pf-v6-c-data-list__item-row--PaddingLeft: var(--pf-v6-c-data-list__item-row--xl--PaddingLeft);
182
- --pf-v6-c-data-list__expandable-content-body--PaddingRight: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingRight);
183
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingLeft);
131
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
132
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
133
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
134
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
184
135
  }
185
136
  }
186
137
  @media screen and (min-width: 576px) {
@@ -188,10 +139,10 @@
188
139
  display: flex;
189
140
  flex-grow: 1;
190
141
  flex-wrap: wrap;
191
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBottom);
142
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
192
143
  }
193
144
  .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
194
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginRight);
145
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
195
146
  }
196
147
  .pf-v6-c-data-list.pf-m-grid-sm .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
197
148
  flex: 1;
@@ -223,22 +174,22 @@
223
174
 
224
175
  @media screen and (min-width: 768px) {
225
176
  .pf-v6-c-data-list.pf-m-grid-md {
226
- --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list__cell--cell--md--PaddingTop);
227
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-v6-c-data-list__cell--md--PaddingBottom);
228
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-v6-c-data-list__item-control--md--MarginRight);
229
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-v6-c-data-list__item-action--md--MarginLeft);
230
- --pf-v6-c-data-list__expandable-content-body--PaddingTop: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingTop);
231
- --pf-v6-c-data-list__expandable-content-body--PaddingBottom: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBottom);
232
- --pf-v6-c-data-list--m-compact__cell--PaddingBottom: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBottom);
233
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingTop);
177
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
178
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
179
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
180
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
181
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
182
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
183
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
184
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
234
185
  }
235
186
  }
236
187
  @media screen and (min-width: 768px) and (min-width: 1200px) {
237
188
  .pf-v6-c-data-list.pf-m-grid-md {
238
- --pf-v6-c-data-list__item-row--PaddingRight: var(--pf-v6-c-data-list__item-row--xl--PaddingRight);
239
- --pf-v6-c-data-list__item-row--PaddingLeft: var(--pf-v6-c-data-list__item-row--xl--PaddingLeft);
240
- --pf-v6-c-data-list__expandable-content-body--PaddingRight: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingRight);
241
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingLeft);
189
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
190
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
191
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
192
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
242
193
  }
243
194
  }
244
195
  @media screen and (min-width: 768px) {
@@ -246,10 +197,10 @@
246
197
  display: flex;
247
198
  flex-grow: 1;
248
199
  flex-wrap: wrap;
249
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBottom);
200
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
250
201
  }
251
202
  .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
252
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginRight);
203
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
253
204
  }
254
205
  .pf-v6-c-data-list.pf-m-grid-md .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
255
206
  flex: 1;
@@ -281,22 +232,22 @@
281
232
 
282
233
  @media screen and (min-width: 992px) {
283
234
  .pf-v6-c-data-list.pf-m-grid-lg {
284
- --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list__cell--cell--md--PaddingTop);
285
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-v6-c-data-list__cell--md--PaddingBottom);
286
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-v6-c-data-list__item-control--md--MarginRight);
287
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-v6-c-data-list__item-action--md--MarginLeft);
288
- --pf-v6-c-data-list__expandable-content-body--PaddingTop: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingTop);
289
- --pf-v6-c-data-list__expandable-content-body--PaddingBottom: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBottom);
290
- --pf-v6-c-data-list--m-compact__cell--PaddingBottom: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBottom);
291
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingTop);
235
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
236
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
237
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
238
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
239
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
240
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
241
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
242
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
292
243
  }
293
244
  }
294
245
  @media screen and (min-width: 992px) and (min-width: 1200px) {
295
246
  .pf-v6-c-data-list.pf-m-grid-lg {
296
- --pf-v6-c-data-list__item-row--PaddingRight: var(--pf-v6-c-data-list__item-row--xl--PaddingRight);
297
- --pf-v6-c-data-list__item-row--PaddingLeft: var(--pf-v6-c-data-list__item-row--xl--PaddingLeft);
298
- --pf-v6-c-data-list__expandable-content-body--PaddingRight: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingRight);
299
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingLeft);
247
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
248
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
249
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
250
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
300
251
  }
301
252
  }
302
253
  @media screen and (min-width: 992px) {
@@ -304,10 +255,10 @@
304
255
  display: flex;
305
256
  flex-grow: 1;
306
257
  flex-wrap: wrap;
307
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBottom);
258
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
308
259
  }
309
260
  .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
310
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginRight);
261
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
311
262
  }
312
263
  .pf-v6-c-data-list.pf-m-grid-lg .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
313
264
  flex: 1;
@@ -339,22 +290,22 @@
339
290
 
340
291
  @media screen and (min-width: 1200px) {
341
292
  .pf-v6-c-data-list.pf-m-grid-xl {
342
- --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list__cell--cell--md--PaddingTop);
343
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-v6-c-data-list__cell--md--PaddingBottom);
344
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-v6-c-data-list__item-control--md--MarginRight);
345
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-v6-c-data-list__item-action--md--MarginLeft);
346
- --pf-v6-c-data-list__expandable-content-body--PaddingTop: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingTop);
347
- --pf-v6-c-data-list__expandable-content-body--PaddingBottom: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBottom);
348
- --pf-v6-c-data-list--m-compact__cell--PaddingBottom: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBottom);
349
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingTop);
293
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
294
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
295
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
296
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
297
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
298
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
299
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
300
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
350
301
  }
351
302
  }
352
303
  @media screen and (min-width: 1200px) and (min-width: 1200px) {
353
304
  .pf-v6-c-data-list.pf-m-grid-xl {
354
- --pf-v6-c-data-list__item-row--PaddingRight: var(--pf-v6-c-data-list__item-row--xl--PaddingRight);
355
- --pf-v6-c-data-list__item-row--PaddingLeft: var(--pf-v6-c-data-list__item-row--xl--PaddingLeft);
356
- --pf-v6-c-data-list__expandable-content-body--PaddingRight: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingRight);
357
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingLeft);
305
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
306
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
307
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
308
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
358
309
  }
359
310
  }
360
311
  @media screen and (min-width: 1200px) {
@@ -362,10 +313,10 @@
362
313
  display: flex;
363
314
  flex-grow: 1;
364
315
  flex-wrap: wrap;
365
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBottom);
316
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
366
317
  }
367
318
  .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
368
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginRight);
319
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
369
320
  }
370
321
  .pf-v6-c-data-list.pf-m-grid-xl .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
371
322
  flex: 1;
@@ -397,22 +348,22 @@
397
348
 
398
349
  @media screen and (min-width: 1450px) {
399
350
  .pf-v6-c-data-list.pf-m-grid-2xl {
400
- --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list__cell--cell--md--PaddingTop);
401
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-v6-c-data-list__cell--md--PaddingBottom);
402
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-v6-c-data-list__item-control--md--MarginRight);
403
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-v6-c-data-list__item-action--md--MarginLeft);
404
- --pf-v6-c-data-list__expandable-content-body--PaddingTop: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingTop);
405
- --pf-v6-c-data-list__expandable-content-body--PaddingBottom: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBottom);
406
- --pf-v6-c-data-list--m-compact__cell--PaddingBottom: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBottom);
407
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingTop);
351
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
352
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list__cell--md--PaddingBlockEnd);
353
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list__item-control--md--MarginInlineEnd);
354
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list__item-action--md--MarginInlineStart);
355
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart);
356
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd);
357
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd);
358
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart);
408
359
  }
409
360
  }
410
361
  @media screen and (min-width: 1450px) and (min-width: 1200px) {
411
362
  .pf-v6-c-data-list.pf-m-grid-2xl {
412
- --pf-v6-c-data-list__item-row--PaddingRight: var(--pf-v6-c-data-list__item-row--xl--PaddingRight);
413
- --pf-v6-c-data-list__item-row--PaddingLeft: var(--pf-v6-c-data-list__item-row--xl--PaddingLeft);
414
- --pf-v6-c-data-list__expandable-content-body--PaddingRight: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingRight);
415
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingLeft);
363
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd);
364
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-v6-c-data-list__item-row--xl--PaddingInlineStart);
365
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd);
366
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart);
416
367
  }
417
368
  }
418
369
  @media screen and (min-width: 1450px) {
@@ -420,10 +371,10 @@
420
371
  display: flex;
421
372
  flex-grow: 1;
422
373
  flex-wrap: wrap;
423
- padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBottom);
374
+ padding-block-end: var(--pf-v6-c-data-list__item-content--md--PaddingBlockEnd);
424
375
  }
425
376
  .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
426
- margin-inline-end: var(--pf-v6-c-data-list__cell--MarginRight);
377
+ margin-inline-end: var(--pf-v6-c-data-list__cell--MarginInlineEnd);
427
378
  }
428
379
  .pf-v6-c-data-list.pf-m-grid-2xl .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
429
380
  flex: 1;
@@ -453,127 +404,127 @@
453
404
  }
454
405
  }
455
406
 
456
- :root, .pf-v6-c-data-list {
407
+ :where(:root, .pf-v6-c-data-list) {
457
408
  --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body);
458
409
  --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body);
459
- --pf-v6-c-data-list--BorderTopColor: var(--pf-t--global--border--color--default);
460
- --pf-v6-c-data-list--BorderTopWidth: var(--pf-t--global--spacer--sm);
461
- --pf-v6-c-data-list--sm--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
462
- --pf-v6-c-data-list--sm--BorderTopColor: var(--pf-t--global--border--color--default);
463
- --pf-v6-c-data-list--MarginLeft: var(--pf-t--global--spacer--md);
410
+ --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-t--global--border--color--default);
411
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
412
+ --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
413
+ --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
414
+ --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
464
415
  --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
465
416
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
466
417
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
467
418
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
468
- --pf-v6-c-data-list__item--BorderBottomColor: var(--pf-t--global--border--color--default);
469
- --pf-v6-c-data-list__item--BorderBottomWidth: var(--pf-t--global--spacer--sm);
470
- --pf-v6-c-data-list__item--sm--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
471
- --pf-v6-c-data-list__item--sm--BorderBottomColor: var(--pf-t--global--border--color--default);
472
- --pf-v6-c-data-list__item-row--PaddingRight: var(--pf-t--global--spacer--md);
473
- --pf-v6-c-data-list__item-row--PaddingLeft: var(--pf-t--global--spacer--md);
474
- --pf-v6-c-data-list__item-row--xl--PaddingRight: var(--pf-t--global--spacer--lg);
475
- --pf-v6-c-data-list__item-row--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
476
- --pf-v6-c-data-list__item-content--md--PaddingBottom: var(--pf-t--global--spacer--lg);
477
- --pf-v6-c-data-list__cell--PaddingTop: var(--pf-t--global--spacer--lg);
478
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-t--global--spacer--lg);
479
- --pf-v6-c-data-list__cell--MarginRight: var(--pf-t--global--spacer--xl);
480
- --pf-v6-c-data-list__cell--md--PaddingBottom: 0;
481
- --pf-v6-c-data-list__cell--m-icon--MarginRight: var(--pf-t--global--spacer--md);
482
- --pf-v6-c-data-list__cell--cell--PaddingTop: 0;
483
- --pf-v6-c-data-list__cell--cell--md--PaddingTop: var(--pf-t--global--spacer--lg);
484
- --pf-v6-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-t--global--spacer--lg);
419
+ --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
420
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
421
+ --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
422
+ --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
423
+ --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
424
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-t--global--spacer--md);
425
+ --pf-v6-c-data-list__item-row--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
426
+ --pf-v6-c-data-list__item-row--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
427
+ --pf-v6-c-data-list__item-content--md--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
428
+ --pf-v6-c-data-list__cell--PaddingBlockStart: var(--pf-t--global--spacer--lg);
429
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
430
+ --pf-v6-c-data-list__cell--MarginInlineEnd: var(--pf-t--global--spacer--xl);
431
+ --pf-v6-c-data-list__cell--md--PaddingBlockEnd: 0;
432
+ --pf-v6-c-data-list__cell--m-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
433
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: 0;
434
+ --pf-v6-c-data-list__cell--cell--md--PaddingBlockStart: var(--pf-t--global--spacer--lg);
435
+ --pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--lg);
485
436
  --pf-v6-c-data-list--cell--MinWidth: initial;
486
437
  --pf-v6-c-data-list--cell--Overflow: visible;
487
438
  --pf-v6-c-data-list--cell--TextOverflow: clip;
488
439
  --pf-v6-c-data-list--cell--WhiteSpace: normal;
489
440
  --pf-v6-c-data-list--cell--WordBreak: normal;
490
441
  --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
491
- --pf-v6-c-data-list__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
492
- --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
493
- --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
442
+ --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--sm) * -1);
443
+ --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
444
+ --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
494
445
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
495
446
  --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
496
447
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
497
448
  --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
498
449
  --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;
499
- --pf-v6-c-data-list__item-draggable-button--PaddingLeft: var(--pf-t--global--spacer--md);
500
- --pf-v6-c-data-list__item-draggable-button--PaddingRight: var(--pf-t--global--spacer--md);
501
- --pf-v6-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-t--global--spacer--lg) * -1);
502
- --pf-v6-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-t--global--spacer--lg) * -1);
503
- --pf-v6-c-data-list__item-draggable-button--PaddingTop: var(--pf-t--global--spacer--lg);
504
- --pf-v6-c-data-list__item-draggable-button--PaddingBottom: var(--pf-t--global--spacer--lg);
505
- --pf-v6-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
450
+ --pf-v6-c-data-list__item-draggable-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
451
+ --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
452
+ --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1);
453
+ --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1);
454
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg);
455
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
456
+ --pf-v6-c-data-list__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
506
457
  --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
507
458
  --pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-t--global--icon--color--disabled);
508
459
  --pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-t--global--icon--color--regular);
509
460
  --pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-t--global--icon--color--regular);
510
461
  --pf-v6-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
511
462
  --pf-v6-c-data-list__item--m-ghost-row--after--Opacity: .6;
512
- --pf-v6-c-data-list__item-control--PaddingTop: var(--pf-t--global--spacer--lg);
513
- --pf-v6-c-data-list__item-control--PaddingBottom: var(--pf-t--global--spacer--lg);
514
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-t--global--spacer--md);
515
- --pf-v6-c-data-list__item-control--md--MarginRight: var(--pf-t--global--spacer--xl);
516
- --pf-v6-c-data-list__item-control--not-last-child--MarginRight: var(--pf-t--global--spacer--md);
463
+ --pf-v6-c-data-list__item-control--PaddingBlockStart: var(--pf-t--global--spacer--lg);
464
+ --pf-v6-c-data-list__item-control--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
465
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
466
+ --pf-v6-c-data-list__item-control--md--MarginInlineEnd: var(--pf-t--global--spacer--xl);
467
+ --pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
517
468
  --pf-v6-c-data-list__check--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
518
- --pf-v6-c-data-list__check--MarginTop: -0.0625rem;
469
+ --pf-v6-c-data-list__check--MarginBlockStart: -0.0625rem;
519
470
  --pf-v6-c-data-list__item-action--Display: flex;
520
- --pf-v6-c-data-list__item-action--PaddingTop: var(--pf-t--global--spacer--lg);
521
- --pf-v6-c-data-list__item-action--PaddingBottom: var(--pf-t--global--spacer--lg);
522
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-t--global--spacer--md);
523
- --pf-v6-c-data-list__item-action--md--MarginLeft: var(--pf-t--global--spacer--xl);
524
- --pf-v6-c-data-list__item-action--not-last-child--MarginRight: var(--pf-t--global--spacer--md);
525
- --pf-v6-c-data-list__item-action__action--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
526
- --pf-v6-c-data-list__action--MarginTop: var(--pf-v6-c-data-list__item-action__action--MarginTop);
527
- --pf-v6-c-data-list__item-action__action--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
471
+ --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
472
+ --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
473
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
474
+ --pf-v6-c-data-list__item-action--md--MarginInlineStart: var(--pf-t--global--spacer--xl);
475
+ --pf-v6-c-data-list__item-action--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
476
+ --pf-v6-c-data-list__item-action__action--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
477
+ --pf-v6-c-data-list__action--MarginBlockStart: var(--pf-v6-c-data-list__item-action__action--MarginBlockStart);
478
+ --pf-v6-c-data-list__item-action__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
528
479
  --pf-v6-c-data-list__expandable-content--BackgroundColor: var( --pf-t--global--background--color--primary--default);
529
480
  --pf-v6-c-data-list__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
530
481
  --pf-v6-c-data-list__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
531
482
  --pf-v6-c-data-list__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
532
483
  --pf-v6-c-data-list__expandable-content--MaxHeight: 37.5rem;
533
- --pf-v6-c-data-list__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--md);
534
- --pf-v6-c-data-list__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--md);
535
- --pf-v6-c-data-list__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--md);
536
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--md);
537
- --pf-v6-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-t--global--spacer--lg);
538
- --pf-v6-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-t--global--spacer--lg);
539
- --pf-v6-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-t--global--spacer--lg);
540
- --pf-v6-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
484
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
485
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
486
+ --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
487
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
488
+ --pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart: var(--pf-t--global--spacer--lg);
489
+ --pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
490
+ --pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
491
+ --pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
541
492
  --pf-v6-c-data-list__expandable-content-body--BorderRadius: var(--pf-t--global--border--radius--small);
542
493
  --pf-v6-c-data-list--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
543
494
  --pf-v6-c-data-list--m-compact--LineHeight: var(--pf-t--global--font--line-height--body);
544
495
  --pf-v6-c-data-list--m-compact__check--FontSize: var(--pf-t--global--font--size--body--default);
545
- --pf-v6-c-data-list--m-compact__cell--PaddingTop: var(--pf-t--global--spacer--sm);
546
- --pf-v6-c-data-list--m-compact__cell--PaddingBottom: var(--pf-t--global--spacer--sm);
547
- --pf-v6-c-data-list--m-compact__cell--md--PaddingBottom: 0;
548
- --pf-v6-c-data-list--m-compact__cell-cell--PaddingTop: 0;
549
- --pf-v6-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-t--global--spacer--sm);
550
- --pf-v6-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-t--global--spacer--md);
551
- --pf-v6-c-data-list--m-compact__item-control--PaddingTop: var(--pf-t--global--spacer--sm);
552
- --pf-v6-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-t--global--spacer--sm);
553
- --pf-v6-c-data-list--m-compact__item-control--MarginRight: var(--pf-t--global--spacer--md);
554
- --pf-v6-c-data-list--m-compact__item-action--PaddingTop: var(--pf-t--global--spacer--sm);
555
- --pf-v6-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-t--global--spacer--sm);
556
- --pf-v6-c-data-list--m-compact__item-action--MarginLeft: var(--pf-t--global--spacer--md);
557
- --pf-v6-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingTop) * -1);
558
- --pf-v6-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBottom) * -1);
559
- --pf-v6-c-data-list--m-compact__action--MarginTop: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginTop);
560
- --pf-v6-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-t--global--spacer--sm);
561
- --pf-v6-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
562
- --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
563
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-t--global--spacer--sm);
564
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-t--global--spacer--sm);
565
- --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-t--global--spacer--sm);
496
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
497
+ --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
498
+ --pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd: 0;
499
+ --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart: 0;
500
+ --pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart: var(--pf-t--global--spacer--sm);
501
+ --pf-v6-c-data-list--m-compact__cell--cell--MarginInlineEnd: var(--pf-t--global--spacer--md);
502
+ --pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart: var(--pf-t--global--spacer--sm);
503
+ --pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
504
+ --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
505
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
506
+ --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
507
+ --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
508
+ --pf-v6-c-data-list--m-compact__item-action__action--MarginBlockStart: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart) * -1);
509
+ --pf-v6-c-data-list--m-compact__item-action__action--MarginBlockEnd: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd) * -1);
510
+ --pf-v6-c-data-list--m-compact__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginBlockStart);
511
+ --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
512
+ --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
513
+ --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
514
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
515
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
516
+ --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
566
517
  }
567
518
  @media screen and (min-width: 576px) {
568
- :root, .pf-v6-c-data-list {
569
- --pf-v6-c-data-list--BorderTopColor: var(--pf-v6-c-data-list--sm--BorderTopColor);
570
- --pf-v6-c-data-list--BorderTopWidth: var(--pf-v6-c-data-list--sm--BorderTopWidth);
519
+ :where(:root, .pf-v6-c-data-list) {
520
+ --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
521
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
571
522
  }
572
523
  }
573
524
  @media screen and (min-width: 576px) {
574
- :root, .pf-v6-c-data-list {
575
- --pf-v6-c-data-list__item--BorderBottomWidth: var(--pf-v6-c-data-list__item--sm--BorderBottomWidth);
576
- --pf-v6-c-data-list__item--BorderBottomColor: var(--pf-v6-c-data-list__item--sm--BorderBottomColor);
525
+ :where(:root, .pf-v6-c-data-list) {
526
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
527
+ --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
577
528
  }
578
529
  }
579
530
 
@@ -581,33 +532,33 @@
581
532
  font-size: var(--pf-v6-c-data-list--FontSize);
582
533
  line-height: var(--pf-v6-c-data-list--LineHeight);
583
534
  overflow-wrap: break-word;
584
- border-block-start: var(--pf-v6-c-data-list--BorderTopWidth) solid var(--pf-v6-c-data-list--BorderTopColor);
535
+ border-block-start: var(--pf-v6-c-data-list--BorderBlockStartWidth) solid var(--pf-v6-c-data-list--BorderBlockStartColor);
585
536
  }
586
537
  .pf-v6-c-data-list.pf-m-compact {
587
538
  --pf-v6-c-data-list__check--FontSize: var(--pf-v6-c-data-list--m-compact__check--FontSize);
588
- --pf-v6-c-data-list__action--MarginTop: var(--pf-v6-c-data-list--m-compact__action--MarginTop);
539
+ --pf-v6-c-data-list__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__action--MarginBlockStart);
589
540
  --pf-v6-c-data-list--FontSize: var(--pf-v6-c-data-list--m-compact--FontSize);
590
- --pf-v6-c-data-list__item-action--MarginLeft: var(--pf-v6-c-data-list--m-compact__item-action--MarginLeft);
591
- --pf-v6-c-data-list__item-action--PaddingTop: var(--pf-v6-c-data-list--m-compact__item-action--PaddingTop);
592
- --pf-v6-c-data-list__item-action--PaddingBottom: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBottom);
593
- --pf-v6-c-data-list__item-action__action--MarginTop: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginTop);
594
- --pf-v6-c-data-list__item-action__action--MarginBottom: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginBottom);
595
- --pf-v6-c-data-list__item-control--MarginRight: var(--pf-v6-c-data-list--m-compact__item-control--MarginRight);
596
- --pf-v6-c-data-list__item-control--PaddingTop: var(--pf-v6-c-data-list--m-compact__item-control--PaddingTop);
597
- --pf-v6-c-data-list__item-control--PaddingBottom: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBottom);
598
- --pf-v6-c-data-list__item-content--md--PaddingBottom: var(--pf-v6-c-data-list--m-compact__item-content--PaddingBottom);
599
- --pf-v6-c-data-list__item-draggable-button--MarginTop: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginTop);
600
- --pf-v6-c-data-list__item-draggable-button--MarginBottom: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBottom);
601
- --pf-v6-c-data-list__item-draggable-button--PaddingTop: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingTop);
602
- --pf-v6-c-data-list__item-draggable-button--PaddingBottom: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBottom);
603
- --pf-v6-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
541
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list--m-compact__item-action--MarginInlineStart);
542
+ --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart);
543
+ --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd);
544
+ --pf-v6-c-data-list__item-action__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginBlockStart);
545
+ --pf-v6-c-data-list__item-action__action--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__item-action__action--MarginBlockEnd);
546
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd);
547
+ --pf-v6-c-data-list__item-control--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart);
548
+ --pf-v6-c-data-list__item-control--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd);
549
+ --pf-v6-c-data-list__item-content--md--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd);
550
+ --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart);
551
+ --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd);
552
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart);
553
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd);
554
+ --pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart);
604
555
  font-size: var(--pf-v6-c-data-list--m-compact--FontSize);
605
556
  }
606
557
  .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell {
607
- --pf-v6-c-data-list__cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell--PaddingTop);
608
- --pf-v6-c-data-list__cell--PaddingBottom: var(--pf-v6-c-data-list--m-compact__cell--PaddingBottom);
609
- --pf-v6-c-data-list__cell--MarginRight: var(--pf-v6-c-data-list--m-compact__cell--cell--MarginRight);
610
- --pf-v6-c-data-list__cell--cell--PaddingTop: var(--pf-v6-c-data-list--m-compact__cell-cell--PaddingTop);
558
+ --pf-v6-c-data-list__cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart);
559
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd);
560
+ --pf-v6-c-data-list__cell--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__cell--cell--MarginInlineEnd);
561
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart);
611
562
  }
612
563
  .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
613
564
  font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
@@ -643,7 +594,7 @@
643
594
  display: flex;
644
595
  flex-direction: column;
645
596
  background-color: var(--pf-v6-c-data-list__item--BackgroundColor);
646
- border-block-end: var(--pf-v6-c-data-list__item--BorderBottomWidth) solid var(--pf-v6-c-data-list__item--BorderBottomColor);
597
+ border-block-end: var(--pf-v6-c-data-list__item--BorderBlockEndWidth) solid var(--pf-v6-c-data-list__item--BorderBlockEndColor);
647
598
  }
648
599
  .pf-v6-c-data-list__item.pf-m-clickable {
649
600
  cursor: pointer;
@@ -672,19 +623,19 @@
672
623
  .pf-v6-c-data-list__item-row {
673
624
  display: flex;
674
625
  flex-wrap: nowrap;
675
- padding-inline-start: var(--pf-v6-c-data-list__item-row--PaddingLeft);
676
- padding-inline-end: var(--pf-v6-c-data-list__item-row--PaddingRight);
626
+ padding-inline-start: var(--pf-v6-c-data-list__item-row--PaddingInlineStart);
627
+ padding-inline-end: var(--pf-v6-c-data-list__item-row--PaddingInlineEnd);
677
628
  }
678
629
 
679
630
  .pf-v6-c-data-list__item-control {
680
631
  display: flex;
681
632
  flex-wrap: nowrap;
682
- padding-block-start: var(--pf-v6-c-data-list__item-control--PaddingTop);
683
- padding-block-end: var(--pf-v6-c-data-list__item-control--PaddingBottom);
684
- margin-inline-end: var(--pf-v6-c-data-list__item-control--MarginRight);
633
+ padding-block-start: var(--pf-v6-c-data-list__item-control--PaddingBlockStart);
634
+ padding-block-end: var(--pf-v6-c-data-list__item-control--PaddingBlockEnd);
635
+ margin-inline-end: var(--pf-v6-c-data-list__item-control--MarginInlineEnd);
685
636
  }
686
637
  .pf-v6-c-data-list__item-control > *:not(:last-child) {
687
- margin-inline-end: var(--pf-v6-c-data-list__item-control--not-last-child--MarginRight);
638
+ margin-inline-end: var(--pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd);
688
639
  }
689
640
 
690
641
  .pf-v6-c-data-list__check {
@@ -692,7 +643,7 @@
692
643
  align-items: center;
693
644
  align-self: flex-start;
694
645
  height: var(--pf-v6-c-data-list__check--Height);
695
- margin-block-start: var(--pf-v6-c-data-list__check--MarginTop);
646
+ margin-block-start: var(--pf-v6-c-data-list__check--MarginBlockStart);
696
647
  }
697
648
  .pf-v6-c-data-list__check > input {
698
649
  cursor: pointer;
@@ -701,13 +652,13 @@
701
652
  .pf-v6-c-data-list__item-draggable-button {
702
653
  display: flex;
703
654
  flex-direction: column;
704
- padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingTop);
705
- padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBottom);
706
- padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingLeft);
707
- padding-inline-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingRight);
708
- margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginTop);
709
- margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBottom);
710
- margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginLeft);
655
+ padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart);
656
+ padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd);
657
+ padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart);
658
+ padding-inline-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd);
659
+ margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart);
660
+ margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd);
661
+ margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart);
711
662
  background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor);
712
663
  border: 0;
713
664
  }
@@ -731,24 +682,70 @@
731
682
 
732
683
  .pf-v6-c-data-list__item-action {
733
684
  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
685
+ --pf-v6-hidden-visible--hidden--Display: none;
686
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
687
+ display: var(--pf-v6-hidden-visible--Display);
734
688
  align-content: flex-start;
735
689
  align-items: flex-start;
736
- padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingTop);
737
- padding-block-end: var(--pf-v6-c-data-list__item-action--PaddingBottom);
738
- margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginLeft);
690
+ padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingBlockStart);
691
+ padding-block-end: var(--pf-v6-c-data-list__item-action--PaddingBlockEnd);
692
+ margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
693
+ }
694
+ .pf-v6-c-data-list__item-action.pf-m-hidden {
695
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
696
+ }
697
+ @media screen and (min-width: 576px) {
698
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-sm {
699
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
700
+ }
701
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-sm {
702
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
703
+ }
704
+ }
705
+ @media screen and (min-width: 768px) {
706
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-md {
707
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
708
+ }
709
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-md {
710
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
711
+ }
712
+ }
713
+ @media screen and (min-width: 992px) {
714
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-lg {
715
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
716
+ }
717
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-lg {
718
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
719
+ }
720
+ }
721
+ @media screen and (min-width: 1200px) {
722
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-xl {
723
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
724
+ }
725
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-xl {
726
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
727
+ }
728
+ }
729
+ @media screen and (min-width: 1450px) {
730
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-2xl {
731
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
732
+ }
733
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-2xl {
734
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
735
+ }
739
736
  }
740
737
  .pf-v6-c-data-list__item-action > *:not(:last-child) {
741
- margin-inline-end: var(--pf-v6-c-data-list__item-action--not-last-child--MarginRight);
738
+ margin-inline-end: var(--pf-v6-c-data-list__item-action--not-last-child--MarginInlineEnd);
742
739
  }
743
740
  .pf-v6-c-data-list__item-action .pf-v6-c-data-list__action {
744
- margin-block-start: var(--pf-v6-c-data-list__action--MarginTop);
745
- margin-block-end: var(--pf-v6-c-data-list__item-action__action--MarginBottom);
741
+ margin-block-start: var(--pf-v6-c-data-list__action--MarginBlockStart);
742
+ margin-block-end: var(--pf-v6-c-data-list__item-action__action--MarginBlockEnd);
746
743
  }
747
744
 
748
745
  .pf-v6-c-data-list__toggle {
749
- margin-block-start: var(--pf-v6-c-data-list__toggle--MarginTop);
750
- margin-block-end: var(--pf-v6-c-data-list__toggle--MarginBottom);
751
- margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginLeft);
746
+ margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
747
+ margin-block-end: var(--pf-v6-c-data-list__toggle--MarginBlockEnd);
748
+ margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
752
749
  }
753
750
 
754
751
  .pf-v6-c-data-list__toggle-icon {
@@ -770,22 +767,22 @@
770
767
  .pf-v6-c-data-list__cell {
771
768
  flex: 1;
772
769
  grid-column: 1/-1;
773
- padding-block-start: var(--pf-v6-c-data-list__cell--PaddingTop);
774
- padding-block-end: var(--pf-v6-c-data-list__cell--PaddingBottom);
770
+ padding-block-start: var(--pf-v6-c-data-list__cell--PaddingBlockStart);
771
+ padding-block-end: var(--pf-v6-c-data-list__cell--PaddingBlockEnd);
775
772
  }
776
773
  .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
777
774
  flex: 1 0 100%;
778
775
  order: 1;
779
- padding-block-start: var(--pf-v6-c-data-list__cell--cell--PaddingTop);
776
+ padding-block-start: var(--pf-v6-c-data-list__cell--cell--PaddingBlockStart);
780
777
  }
781
778
  .pf-v6-c-data-list__cell.pf-m-icon {
782
779
  flex-grow: 0;
783
780
  grid-column: 1/2;
784
- margin-inline-end: var(--pf-v6-c-data-list__cell--m-icon--MarginRight);
781
+ margin-inline-end: var(--pf-v6-c-data-list__cell--m-icon--MarginInlineEnd);
785
782
  }
786
783
  .pf-v6-c-data-list__cell.pf-m-icon + .pf-v6-c-data-list__cell {
787
784
  grid-column: 2/3;
788
- padding-block-start: var(--pf-v6-c-data-list__cell--m-icon--cell--PaddingTop);
785
+ padding-block-start: var(--pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart);
789
786
  }
790
787
  .pf-v6-c-data-list__cell.pf-m-align-right {
791
788
  margin-inline-start: 0;
@@ -815,22 +812,22 @@
815
812
  border-radius: var(--pf-v6-c-data-list__expandable-content-body--BorderRadius);
816
813
  }
817
814
  .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body {
818
- padding-block-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingTop);
819
- padding-block-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingBottom);
820
- padding-inline-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingLeft);
821
- padding-inline-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingRight);
815
+ padding-block-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingBlockStart);
816
+ padding-block-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd);
817
+ padding-inline-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingInlineStart);
818
+ padding-inline-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd);
822
819
  }
823
820
  .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body > .pf-v6-c-data-list {
824
- margin-inline-start: var(--pf-v6-c-data-list--MarginLeft);
821
+ margin-inline-start: var(--pf-v6-c-data-list--MarginInlineStart);
825
822
  }
826
823
  .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item:last-child {
827
824
  border-block-end: 0;
828
825
  }
829
826
  .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item-row {
830
- --pf-v6-c-data-list__item-row--PaddingLeft: 0;
827
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: 0;
831
828
  }
832
829
  .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__expandable-content-body {
833
- --pf-v6-c-data-list__expandable-content-body--PaddingLeft: 0;
830
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: 0;
834
831
  }
835
832
  .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body.pf-m-no-padding {
836
833
  padding: 0;