@patternfly/patternfly 6.0.0-alpha.121 → 6.0.0-alpha.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (175) hide show
  1. package/base/patternfly-variables.css +9 -22
  2. package/base/patternfly-variables.scss +11 -5
  3. package/base/tokens/_index.scss +1 -0
  4. package/base/tokens/tokens-charts-dark.scss +169 -0
  5. package/base/tokens/tokens-charts.scss +75 -65
  6. package/base/tokens/tokens-dark.scss +4 -5
  7. package/base/tokens/tokens-default.scss +10 -11
  8. package/base/tokens/tokens-font.scss +1 -1
  9. package/base/tokens/tokens-palette.scss +4 -5
  10. package/components/AboutModalBox/about-modal-box.css +54 -54
  11. package/components/AboutModalBox/about-modal-box.scss +54 -54
  12. package/components/Accordion/accordion.css +39 -39
  13. package/components/Accordion/accordion.scss +39 -39
  14. package/components/Alert/alert-group.css +15 -15
  15. package/components/Alert/alert-group.scss +15 -15
  16. package/components/Alert/alert.css +46 -46
  17. package/components/Alert/alert.scss +46 -46
  18. package/components/AppLauncher/app-launcher.css +58 -58
  19. package/components/AppLauncher/app-launcher.scss +58 -58
  20. package/components/BackToTop/back-to-top.css +14 -14
  21. package/components/BackToTop/back-to-top.scss +14 -14
  22. package/components/Badge/badge.css +6 -6
  23. package/components/Badge/badge.scss +6 -6
  24. package/components/Banner/banner.css +12 -12
  25. package/components/Banner/banner.scss +12 -12
  26. package/components/Breadcrumb/breadcrumb.css +12 -12
  27. package/components/Breadcrumb/breadcrumb.scss +12 -12
  28. package/components/Button/button.css +93 -93
  29. package/components/Button/button.scss +93 -93
  30. package/components/CalendarMonth/calendar-month.css +42 -42
  31. package/components/CalendarMonth/calendar-month.scss +42 -42
  32. package/components/Card/card.css +59 -59
  33. package/components/Card/card.scss +59 -59
  34. package/components/Check/check.css +2 -2
  35. package/components/Check/check.scss +2 -2
  36. package/components/Chip/chip-group.css +20 -20
  37. package/components/Chip/chip-group.scss +20 -20
  38. package/components/Chip/chip.css +26 -26
  39. package/components/Chip/chip.scss +26 -26
  40. package/components/ClipboardCopy/clipboard-copy.css +36 -36
  41. package/components/ClipboardCopy/clipboard-copy.scss +36 -36
  42. package/components/CodeBlock/code-block.css +19 -19
  43. package/components/CodeBlock/code-block.scss +19 -19
  44. package/components/CodeEditor/code-editor.css +33 -33
  45. package/components/CodeEditor/code-editor.scss +33 -33
  46. package/components/Content/content.css +65 -65
  47. package/components/Content/content.scss +65 -65
  48. package/components/ContextSelector/context-selector.css +145 -145
  49. package/components/ContextSelector/context-selector.scss +145 -145
  50. package/components/DataList/data-list-grid.css +98 -98
  51. package/components/DataList/data-list-grid.scss +14 -14
  52. package/components/DataList/data-list.css +233 -233
  53. package/components/DataList/data-list.scss +135 -135
  54. package/components/DatePicker/date-picker.css +14 -14
  55. package/components/DatePicker/date-picker.scss +14 -14
  56. package/components/DescriptionList/description-list.css +6 -6
  57. package/components/DescriptionList/description-list.scss +6 -6
  58. package/components/Drawer/drawer.css +84 -84
  59. package/components/Drawer/drawer.scss +84 -84
  60. package/components/Dropdown/dropdown.css +126 -126
  61. package/components/Dropdown/dropdown.scss +126 -126
  62. package/components/DualListSelector/dual-list-selector.css +59 -58
  63. package/components/DualListSelector/dual-list-selector.scss +41 -40
  64. package/components/EmptyState/empty-state.css +32 -32
  65. package/components/EmptyState/empty-state.scss +32 -32
  66. package/components/ExpandableSection/expandable-section.css +48 -48
  67. package/components/ExpandableSection/expandable-section.scss +48 -48
  68. package/components/Form/form.css +106 -106
  69. package/components/Form/form.scss +88 -88
  70. package/components/FormControl/form-control.css +44 -44
  71. package/components/FormControl/form-control.scss +44 -44
  72. package/components/HelperText/helper-text.css +2 -2
  73. package/components/HelperText/helper-text.scss +2 -2
  74. package/components/Hint/hint.css +16 -16
  75. package/components/Hint/hint.scss +16 -16
  76. package/components/InlineEdit/inline-edit.css +10 -10
  77. package/components/InlineEdit/inline-edit.scss +10 -10
  78. package/components/InputGroup/input-group.css +16 -16
  79. package/components/InputGroup/input-group.scss +16 -16
  80. package/components/JumpLinks/jump-links.css +75 -75
  81. package/components/JumpLinks/jump-links.scss +75 -75
  82. package/components/Label/label-group.css +26 -26
  83. package/components/Label/label-group.scss +26 -26
  84. package/components/Label/label.css +30 -30
  85. package/components/Label/label.scss +30 -30
  86. package/components/List/list.css +27 -27
  87. package/components/List/list.scss +27 -27
  88. package/components/LogViewer/log-viewer.css +36 -36
  89. package/components/LogViewer/log-viewer.scss +37 -37
  90. package/components/Login/login.css +88 -88
  91. package/components/Login/login.scss +88 -88
  92. package/components/Menu/menu.css +20 -20
  93. package/components/Menu/menu.scss +20 -20
  94. package/components/MenuToggle/menu-toggle.css +58 -58
  95. package/components/MenuToggle/menu-toggle.scss +58 -58
  96. package/components/ModalBox/modal-box.css +39 -39
  97. package/components/ModalBox/modal-box.scss +39 -39
  98. package/components/MultipleFileUpload/multiple-file-upload.css +32 -32
  99. package/components/MultipleFileUpload/multiple-file-upload.scss +32 -32
  100. package/components/NotificationBadge/notification-badge.css +16 -16
  101. package/components/NotificationBadge/notification-badge.scss +16 -16
  102. package/components/NotificationDrawer/notification-drawer.css +41 -41
  103. package/components/NotificationDrawer/notification-drawer.scss +41 -41
  104. package/components/NumberInput/number-input.css +2 -2
  105. package/components/NumberInput/number-input.scss +2 -2
  106. package/components/OptionsMenu/options-menu.css +79 -79
  107. package/components/OptionsMenu/options-menu.scss +79 -79
  108. package/components/Page/page.css +181 -181
  109. package/components/Page/page.scss +131 -131
  110. package/components/Pagination/pagination.css +24 -24
  111. package/components/Pagination/pagination.scss +24 -24
  112. package/components/Panel/panel.css +24 -24
  113. package/components/Panel/panel.scss +24 -24
  114. package/components/Popover/popover.css +48 -48
  115. package/components/Popover/popover.scss +48 -48
  116. package/components/Progress/progress.css +4 -4
  117. package/components/Progress/progress.scss +4 -4
  118. package/components/ProgressStepper/progress-stepper.css +225 -225
  119. package/components/ProgressStepper/progress-stepper.scss +93 -93
  120. package/components/Radio/radio.css +6 -6
  121. package/components/Radio/radio.scss +6 -6
  122. package/components/Select/select.css +171 -171
  123. package/components/Select/select.scss +171 -171
  124. package/components/Sidebar/sidebar.css +44 -44
  125. package/components/Sidebar/sidebar.scss +44 -44
  126. package/components/SimpleList/simple-list.css +18 -18
  127. package/components/SimpleList/simple-list.scss +18 -18
  128. package/components/Skeleton/skeleton.css +4 -4
  129. package/components/Skeleton/skeleton.scss +4 -4
  130. package/components/SkipToContent/skip-to-content.css +4 -4
  131. package/components/SkipToContent/skip-to-content.scss +4 -4
  132. package/components/Slider/slider.css +25 -25
  133. package/components/Slider/slider.scss +25 -25
  134. package/components/Switch/switch.css +4 -4
  135. package/components/Switch/switch.scss +4 -4
  136. package/components/TabContent/tab-content.css +24 -24
  137. package/components/TabContent/tab-content.scss +24 -24
  138. package/components/Table/table-grid.css +404 -404
  139. package/components/Table/table-grid.scss +116 -116
  140. package/components/Table/table-scrollable.css +16 -16
  141. package/components/Table/table-scrollable.scss +16 -16
  142. package/components/Table/table-tree-view.css +251 -251
  143. package/components/Table/table-tree-view.scss +59 -59
  144. package/components/Table/table.css +122 -122
  145. package/components/Table/table.scss +122 -122
  146. package/components/Tabs/tabs.css +118 -118
  147. package/components/Tabs/tabs.scss +118 -118
  148. package/components/TextInputGroup/text-input-group.css +26 -26
  149. package/components/TextInputGroup/text-input-group.scss +26 -26
  150. package/components/Tile/tile.css +13 -13
  151. package/components/Tile/tile.scss +13 -13
  152. package/components/ToggleGroup/toggle-group.css +28 -28
  153. package/components/ToggleGroup/toggle-group.scss +28 -28
  154. package/components/Tooltip/tooltip.css +26 -26
  155. package/components/Tooltip/tooltip.scss +26 -26
  156. package/components/TreeView/tree-view.css +181 -181
  157. package/components/TreeView/tree-view.scss +122 -122
  158. package/components/Wizard/wizard.css +158 -119
  159. package/components/Wizard/wizard.scss +176 -126
  160. package/components/_index.css +4310 -4270
  161. package/docs/components/Drawer/examples/Drawer.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +39 -39
  163. package/docs/components/Table/examples/Table.md +20 -20
  164. package/docs/components/Wizard/examples/Wizard.md +827 -91
  165. package/docs/demos/Card/examples/Card.css +2 -2
  166. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -44
  167. package/docs/demos/Table/examples/Table.md +20 -20
  168. package/docs/demos/Wizard/examples/Wizard.md +356 -198
  169. package/package.json +1 -1
  170. package/patternfly-base-no-globals.css +9 -22
  171. package/patternfly-base.css +9 -22
  172. package/patternfly-no-globals.css +4319 -4292
  173. package/patternfly.css +4319 -4292
  174. package/patternfly.min.css +1 -1
  175. package/patternfly.min.css.map +1 -1
package/components/ModalBox/modal-box.css CHANGED
@@ -11,7 +11,7 @@
11
11
  --pf-v6-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl));
12
12
  --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm);
13
13
  --pf-v6-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
14
- --pf-v6-c-modal-box--m-align-top--Top: var(--pf-v6-c-modal-box--m-align-top--spacer);
14
+ --pf-v6-c-modal-box--m-align-top--InsetBlockStart: var(--pf-v6-c-modal-box--m-align-top--spacer);
15
15
  --pf-v6-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v6-c-modal-box--m-align-top--spacer));
16
16
  --pf-v6-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
17
17
  --pf-v6-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
@@ -19,33 +19,33 @@
19
19
  --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
20
20
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
21
21
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
22
- --pf-v6-c-modal-box__header--PaddingTop: var(--pf-t--global--spacer--lg);
23
- --pf-v6-c-modal-box__header--PaddingRight: var(--pf-t--global--spacer--lg);
24
- --pf-v6-c-modal-box__header--PaddingLeft: var(--pf-t--global--spacer--lg);
22
+ --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
23
+ --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
24
+ --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25
25
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
26
26
  --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
27
27
  --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
28
28
  --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
29
29
  --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
30
- --pf-v6-c-modal-box__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
30
+ --pf-v6-c-modal-box__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
31
31
  --pf-v6-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
32
32
  --pf-v6-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
33
33
  --pf-v6-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
34
34
  --pf-v6-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body));
35
- --pf-v6-c-modal-box__body--PaddingTop: var(--pf-t--global--spacer--lg);
36
- --pf-v6-c-modal-box__body--PaddingRight: var(--pf-t--global--spacer--lg);
37
- --pf-v6-c-modal-box__body--PaddingLeft: var(--pf-t--global--spacer--lg);
38
- --pf-v6-c-modal-box__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
39
- --pf-v6-c-modal-box__header--body--PaddingTop: var(--pf-t--global--spacer--md);
40
- --pf-v6-c-modal-box__close--Top: var(--pf-v6-c-modal-box__header--PaddingTop);
41
- --pf-v6-c-modal-box__close--Right: var(--pf-v6-c-modal-box__header--PaddingRight);
42
- --pf-v6-c-modal-box__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
43
- --pf-v6-c-modal-box__footer--PaddingTop: var(--pf-t--global--spacer--lg);
44
- --pf-v6-c-modal-box__footer--PaddingRight: var(--pf-t--global--spacer--lg);
45
- --pf-v6-c-modal-box__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
46
- --pf-v6-c-modal-box__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
47
- --pf-v6-c-modal-box__footer--c-button--MarginRight: var(--pf-t--global--spacer--md);
48
- --pf-v6-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginRight) / 2);
35
+ --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
36
+ --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
37
+ --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
38
+ --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
39
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
40
+ --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
41
+ --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
42
+ --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
43
+ --pf-v6-c-modal-box__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
44
+ --pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
45
+ --pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
46
+ --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
47
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
48
+ --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
49
49
  }
50
50
  @media (min-width: 1200px) {
51
51
  :where(:root, .pf-v6-c-modal-box) {
@@ -76,7 +76,7 @@
76
76
  --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-lg--lg--MaxWidth);
77
77
  }
78
78
  .pf-v6-c-modal-box.pf-m-align-top {
79
- inset-block-start: var(--pf-v6-c-modal-box--m-align-top--Top);
79
+ inset-block-start: var(--pf-v6-c-modal-box--m-align-top--InsetBlockStart);
80
80
  align-self: flex-start;
81
81
  max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth);
82
82
  max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight);
@@ -103,11 +103,11 @@
103
103
 
104
104
  .pf-v6-c-modal-box__close {
105
105
  position: absolute;
106
- inset-block-start: var(--pf-v6-c-modal-box__close--Top);
107
- inset-inline-end: var(--pf-v6-c-modal-box__close--Right);
106
+ inset-block-start: var(--pf-v6-c-modal-box__close--InsetBlockStart);
107
+ inset-inline-end: var(--pf-v6-c-modal-box__close--InsetInlineEnd);
108
108
  }
109
109
  .pf-v6-c-modal-box__close + * {
110
- margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginRight);
110
+ margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginInlineEnd);
111
111
  }
112
112
 
113
113
  .pf-v6-c-modal-box__header {
@@ -115,16 +115,16 @@
115
115
  flex-direction: column;
116
116
  flex-shrink: 0;
117
117
  gap: var(--pf-v6-c-modal-box__header--Gap);
118
- padding-block-start: var(--pf-v6-c-modal-box__header--PaddingTop);
119
- padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingLeft);
120
- padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingRight);
118
+ padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
119
+ padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
120
+ padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
121
121
  }
122
122
  .pf-v6-c-modal-box__header.pf-m-help {
123
123
  display: flex;
124
124
  flex-direction: row;
125
125
  }
126
126
  .pf-v6-c-modal-box__header + .pf-v6-c-modal-box__body {
127
- --pf-v6-c-modal-box__body--PaddingTop: var(--pf-v6-c-modal-box__header--body--PaddingTop);
127
+ --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-v6-c-modal-box__header--body--PaddingBlockStart);
128
128
  }
129
129
 
130
130
  .pf-v6-c-modal-box__header-main {
@@ -153,12 +153,12 @@
153
153
  }
154
154
 
155
155
  .pf-v6-c-modal-box__title-icon {
156
- margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginRight);
156
+ margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginInlineEnd);
157
157
  color: var(--pf-v6-c-modal-box__title-icon--Color);
158
158
  }
159
159
 
160
160
  .pf-v6-c-modal-box__description {
161
- padding-block-start: var(--pf-v6-c-modal-box__description--PaddingTop);
161
+ padding-block-start: var(--pf-v6-c-modal-box__description--PaddingBlockStart);
162
162
  font-size: var(--pf-v6-c-modal-box__description--FontSize);
163
163
  color: var(--pf-v6-c-modal-box__description--Color);
164
164
  }
@@ -166,9 +166,9 @@
166
166
  .pf-v6-c-modal-box__body {
167
167
  flex: 1 1 auto;
168
168
  min-height: var(--pf-v6-c-modal-box__body--MinHeight);
169
- padding-block-start: var(--pf-v6-c-modal-box__body--PaddingTop);
170
- padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingLeft);
171
- padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingRight);
169
+ padding-block-start: var(--pf-v6-c-modal-box__body--PaddingBlockStart);
170
+ padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingInlineStart);
171
+ padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingInlineEnd);
172
172
  overflow-x: hidden;
173
173
  overflow-y: auto;
174
174
  overscroll-behavior: contain;
@@ -176,23 +176,23 @@
176
176
  -webkit-overflow-scrolling: touch;
177
177
  }
178
178
  .pf-v6-c-modal-box__body:last-child {
179
- padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBottom);
179
+ padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd);
180
180
  }
181
181
 
182
182
  .pf-v6-c-modal-box__footer {
183
183
  display: flex;
184
184
  flex: 0 0 auto;
185
185
  align-items: center;
186
- padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingTop);
187
- padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBottom);
188
- padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingLeft);
189
- padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingRight);
186
+ padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingBlockStart);
187
+ padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBlockEnd);
188
+ padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingInlineStart);
189
+ padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingInlineEnd);
190
190
  }
191
191
  .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
192
- margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginRight);
192
+ margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
193
193
  }
194
194
  @media screen and (min-width: 576px) {
195
195
  .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
196
- --pf-v6-c-modal-box__footer--c-button--MarginRight: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginRight);
196
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
197
197
  }
198
198
  }
package/components/ModalBox/modal-box.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  --#{$modal-box}--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl)); // MaxHeight ensures that the modal will not go off the screen and instead the body will scroll
14
14
  --#{$modal-box}--m-align-top--spacer: var(--pf-t--global--spacer--sm);
15
15
  --#{$modal-box}--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
16
- --#{$modal-box}--m-align-top--Top: var(--#{$modal-box}--m-align-top--spacer);
16
+ --#{$modal-box}--m-align-top--InsetBlockStart: var(--#{$modal-box}--m-align-top--spacer);
17
17
  --#{$modal-box}--m-align-top--MaxHeight: calc(100% - min(var(--#{$modal-box}--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--#{$modal-box}--m-align-top--spacer));
18
18
  --#{$modal-box}--m-align-top--MaxWidth: calc(100% - min(var(--#{$modal-box}--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
19
19
 
@@ -29,9 +29,9 @@
29
29
  }
30
30
 
31
31
  // Header
32
- --#{$modal-box}__header--PaddingTop: var(--pf-t--global--spacer--lg);
33
- --#{$modal-box}__header--PaddingRight: var(--pf-t--global--spacer--lg);
34
- --#{$modal-box}__header--PaddingLeft: var(--pf-t--global--spacer--lg);
32
+ --#{$modal-box}__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33
+ --#{$modal-box}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
34
+ --#{$modal-box}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
35
35
  --#{$modal-box}__header--Gap: var(--pf-t--global--spacer--md);
36
36
 
37
37
  // Header main
@@ -43,7 +43,7 @@
43
43
  --#{$modal-box}__title--FontSize: var(--pf-t--global--font--size--heading--md);
44
44
 
45
45
  // Title icon
46
- --#{$modal-box}__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
46
+ --#{$modal-box}__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
47
47
  --#{$modal-box}__title-icon--Color: var(--pf-t--global--icon--color--regular);
48
48
 
49
49
  // Description
@@ -52,26 +52,26 @@
52
52
 
53
53
  // Body
54
54
  --#{$modal-box}__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)); // Allow for at least 1 line of content in the body
55
- --#{$modal-box}__body--PaddingTop: var(--pf-t--global--spacer--lg);
56
- --#{$modal-box}__body--PaddingRight: var(--pf-t--global--spacer--lg);
57
- --#{$modal-box}__body--PaddingLeft: var(--pf-t--global--spacer--lg);
58
- --#{$modal-box}__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
59
- --#{$modal-box}__header--body--PaddingTop: var(--pf-t--global--spacer--md);
55
+ --#{$modal-box}__body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
56
+ --#{$modal-box}__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
57
+ --#{$modal-box}__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
58
+ --#{$modal-box}__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
59
+ --#{$modal-box}__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
60
60
 
61
61
  // Close
62
- --#{$modal-box}__close--Top: var(--#{$modal-box}__header--PaddingTop);
63
- --#{$modal-box}__close--Right: var(--#{$modal-box}__header--PaddingRight);
64
- --#{$modal-box}__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
62
+ --#{$modal-box}__close--InsetBlockStart: var(--#{$modal-box}__header--PaddingBlockStart);
63
+ --#{$modal-box}__close--InsetInlineEnd: var(--#{$modal-box}__header--PaddingInlineEnd);
64
+ --#{$modal-box}__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
65
65
 
66
66
  // Footer
67
- --#{$modal-box}__footer--PaddingTop: var(--pf-t--global--spacer--lg);
68
- --#{$modal-box}__footer--PaddingRight: var(--pf-t--global--spacer--lg);
69
- --#{$modal-box}__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
70
- --#{$modal-box}__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
67
+ --#{$modal-box}__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
68
+ --#{$modal-box}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
69
+ --#{$modal-box}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
70
+ --#{$modal-box}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
71
71
 
72
72
  // Footer buttons
73
- --#{$modal-box}__footer--c-button--MarginRight: var(--pf-t--global--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
74
- --#{$modal-box}__footer--c-button--sm--MarginRight: calc(var(--#{$modal-box}__footer--c-button--MarginRight) / 2);
73
+ --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
74
+ --#{$modal-box}__footer--c-button--sm--MarginInlineEnd: calc(var(--#{$modal-box}__footer--c-button--MarginInlineEnd) / 2);
75
75
  }
76
76
 
77
77
  .#{$modal-box} {
@@ -100,7 +100,7 @@
100
100
  }
101
101
 
102
102
  &.pf-m-align-top {
103
- inset-block-start: var(--#{$modal-box}--m-align-top--Top);
103
+ inset-block-start: var(--#{$modal-box}--m-align-top--InsetBlockStart);
104
104
  align-self: flex-start;
105
105
  max-width: var(--#{$modal-box}--m-align-top--MaxWidth);
106
106
  max-height: var(--#{$modal-box}--m-align-top--MaxHeight);
@@ -145,11 +145,11 @@
145
145
  // Close button
146
146
  .#{$modal-box}__close {
147
147
  position: absolute;
148
- inset-block-start: var(--#{$modal-box}__close--Top);
149
- inset-inline-end: var(--#{$modal-box}__close--Right);
148
+ inset-block-start: var(--#{$modal-box}__close--InsetBlockStart);
149
+ inset-inline-end: var(--#{$modal-box}__close--InsetInlineEnd);
150
150
 
151
151
  + * {
152
- margin-inline-end: var(--#{$modal-box}__close--sibling--MarginRight); // Create room for the close button
152
+ margin-inline-end: var(--#{$modal-box}__close--sibling--MarginInlineEnd); // Create room for the close button
153
153
  }
154
154
  }
155
155
 
@@ -158,9 +158,9 @@
158
158
  flex-direction: column;
159
159
  flex-shrink: 0;
160
160
  gap: var(--#{$modal-box}__header--Gap);
161
- padding-block-start: var(--#{$modal-box}__header--PaddingTop);
162
- padding-inline-start: var(--#{$modal-box}__header--PaddingLeft);
163
- padding-inline-end: var(--#{$modal-box}__header--PaddingRight);
161
+ padding-block-start: var(--#{$modal-box}__header--PaddingBlockStart);
162
+ padding-inline-start: var(--#{$modal-box}__header--PaddingInlineStart);
163
+ padding-inline-end: var(--#{$modal-box}__header--PaddingInlineEnd);
164
164
 
165
165
  &.pf-m-help {
166
166
  display: flex;
@@ -168,7 +168,7 @@
168
168
  }
169
169
 
170
170
  + .#{$modal-box}__body {
171
- --#{$modal-box}__body--PaddingTop: var(--#{$modal-box}__header--body--PaddingTop);
171
+ --#{$modal-box}__body--PaddingBlockStart: var(--#{$modal-box}__header--body--PaddingBlockStart);
172
172
  }
173
173
  }
174
174
 
@@ -197,12 +197,12 @@
197
197
  }
198
198
 
199
199
  .#{$modal-box}__title-icon {
200
- margin-inline-end: var(--#{$modal-box}__title-icon--MarginRight);
200
+ margin-inline-end: var(--#{$modal-box}__title-icon--MarginInlineEnd);
201
201
  color: var(--#{$modal-box}__title-icon--Color);
202
202
  }
203
203
 
204
204
  .#{$modal-box}__description {
205
- padding-block-start: var(--#{$modal-box}__description--PaddingTop);
205
+ padding-block-start: var(--#{$modal-box}__description--PaddingBlockStart);
206
206
  font-size: var(--#{$modal-box}__description--FontSize);
207
207
  color: var(--#{$modal-box}__description--Color);
208
208
  }
@@ -211,9 +211,9 @@
211
211
  .#{$modal-box}__body {
212
212
  flex: 1 1 auto;
213
213
  min-height: var(--#{$modal-box}__body--MinHeight);
214
- padding-block-start: var(--#{$modal-box}__body--PaddingTop);
215
- padding-inline-start: var(--#{$modal-box}__body--PaddingLeft);
216
- padding-inline-end: var(--#{$modal-box}__body--PaddingRight);
214
+ padding-block-start: var(--#{$modal-box}__body--PaddingBlockStart);
215
+ padding-inline-start: var(--#{$modal-box}__body--PaddingInlineStart);
216
+ padding-inline-end: var(--#{$modal-box}__body--PaddingInlineEnd);
217
217
  overflow-x: hidden;
218
218
  overflow-y: auto;
219
219
  overscroll-behavior: contain;
@@ -221,7 +221,7 @@
221
221
  -webkit-overflow-scrolling: touch;
222
222
 
223
223
  &:last-child {
224
- padding-block-end: var(--#{$modal-box}__body--last-child--PaddingBottom);
224
+ padding-block-end: var(--#{$modal-box}__body--last-child--PaddingBlockEnd);
225
225
  }
226
226
  }
227
227
 
@@ -230,17 +230,17 @@
230
230
  display: flex;
231
231
  flex: 0 0 auto;
232
232
  align-items: center;
233
- padding-block-start: var(--#{$modal-box}__footer--PaddingTop);
234
- padding-block-end: var(--#{$modal-box}__footer--PaddingBottom);
235
- padding-inline-start: var(--#{$modal-box}__footer--PaddingLeft);
236
- padding-inline-end: var(--#{$modal-box}__footer--PaddingRight);
233
+ padding-block-start: var(--#{$modal-box}__footer--PaddingBlockStart);
234
+ padding-block-end: var(--#{$modal-box}__footer--PaddingBlockEnd);
235
+ padding-inline-start: var(--#{$modal-box}__footer--PaddingInlineStart);
236
+ padding-inline-end: var(--#{$modal-box}__footer--PaddingInlineEnd);
237
237
 
238
238
  // Base margin left and right equal for buttons when wrapped
239
239
  > .#{$button}:not(:last-child) {
240
- margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginRight);
240
+ margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginInlineEnd);
241
241
 
242
242
  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
243
- --#{$modal-box}__footer--c-button--MarginRight: var(--#{$modal-box}__footer--c-button--sm--MarginRight);
243
+ --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--#{$modal-box}__footer--c-button--sm--MarginInlineEnd);
244
244
  }
245
245
  }
246
246
  }
package/components/MultipleFileUpload/multiple-file-upload.css CHANGED
@@ -8,10 +8,10 @@
8
8
  "title"
9
9
  "upload"
10
10
  "info";
11
- --pf-v6-c-multiple-file-upload__main--PaddingTop: var(--pf-t--global--spacer--xl);
12
- --pf-v6-c-multiple-file-upload__main--PaddingRight: var(--pf-t--global--spacer--xl);
13
- --pf-v6-c-multiple-file-upload__main--PaddingBottom: var(--pf-t--global--spacer--xl);
14
- --pf-v6-c-multiple-file-upload__main--PaddingLeft: var(--pf-t--global--spacer--xl);
11
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockStart: var(--pf-t--global--spacer--xl);
12
+ --pf-v6-c-multiple-file-upload__main--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
13
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
14
+ --pf-v6-c-multiple-file-upload__main--PaddingInlineStart: var(--pf-t--global--spacer--xl);
15
15
  --pf-v6-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
16
16
  --pf-v6-c-multiple-file-upload__main--BorderStyle: dashed;
17
17
  --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
@@ -26,15 +26,15 @@
26
26
  --pf-v6-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
27
27
  --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
28
28
  --pf-v6-c-multiple-file-upload__title-text-separator--Display: block;
29
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-t--global--spacer--sm);
30
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginBottom: var(--pf-t--global--spacer--sm);
29
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-t--global--spacer--sm);
30
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd: var(--pf-t--global--spacer--sm);
31
31
  --pf-v6-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
32
32
  --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
33
33
  --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
34
34
  --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
35
35
  --pf-v6-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
36
36
  --pf-v6-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
37
- --pf-v6-c-multiple-file-upload__info--MarginTop: var(--pf-t--global--spacer--lg);
37
+ --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-t--global--spacer--lg);
38
38
  --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
39
39
  --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
40
40
  --pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
@@ -44,26 +44,26 @@
44
44
  "title upload"
45
45
  "info upload";
46
46
  --pf-v6-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
47
- --pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-t--global--spacer--lg);
47
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
48
48
  --pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
49
49
  --pf-v6-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
50
50
  --pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
51
51
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
52
52
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
53
- --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
53
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart: 0;
54
54
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
55
55
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
56
56
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
57
- --pf-v6-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
58
- --pf-v6-c-multiple-file-upload__status--PaddingTop: var(--pf-t--global--spacer--sm);
59
- --pf-v6-c-multiple-file-upload__status--PaddingBottom: var(--pf-t--global--spacer--sm);
60
- --pf-v6-c-multiple-file-upload__status--PaddingLeft: var(--pf-t--global--spacer--md);
61
- --pf-v6-c-multiple-file-upload__status--PaddingRight: var(--pf-t--global--spacer--md);
57
+ --pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart: 0;
58
+ --pf-v6-c-multiple-file-upload__status--PaddingBlockStart: var(--pf-t--global--spacer--sm);
59
+ --pf-v6-c-multiple-file-upload__status--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
60
+ --pf-v6-c-multiple-file-upload__status--PaddingInlineStart: var(--pf-t--global--spacer--md);
61
+ --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
62
62
  --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
63
63
  --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
64
64
  --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
65
- --pf-v6-c-multiple-file-upload__status-item--PaddingTop: var(--pf-t--global--spacer--md);
66
- --pf-v6-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-t--global--spacer--md);
65
+ --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
66
+ --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
67
67
  --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
68
68
  --pf-v6-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
69
69
  --pf-v6-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -86,17 +86,17 @@
86
86
  --pf-v6-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
87
87
  --pf-v6-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
88
88
  --pf-v6-c-multiple-file-upload__main--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--Gap);
89
- --pf-v6-c-multiple-file-upload__main--PaddingBottom: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
89
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd);
90
90
  --pf-v6-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
91
91
  --pf-v6-c-multiple-file-upload__title--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--Gap);
92
92
  --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
93
93
  --pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize);
94
94
  --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
95
95
  --pf-v6-c-multiple-file-upload__title-text-separator--Display: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
96
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
96
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart);
97
97
  --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
98
98
  --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
99
- --pf-v6-c-multiple-file-upload__info--MarginTop: var(--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginTop);
99
+ --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart);
100
100
  }
101
101
  .pf-v6-c-multiple-file-upload.pf-m-drag-over {
102
102
  --pf-v6-c-multiple-file-upload__main--BorderStyle: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle);
@@ -110,10 +110,10 @@
110
110
  grid-template-columns: var(--pf-v6-c-multiple-file-upload__main--GridTemplateColumns);
111
111
  gap: var(--pf-v6-c-multiple-file-upload__main--Gap);
112
112
  align-items: center;
113
- padding-block-start: var(--pf-v6-c-multiple-file-upload__main--PaddingTop);
114
- padding-block-end: var(--pf-v6-c-multiple-file-upload__main--PaddingBottom);
115
- padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--PaddingLeft);
116
- padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--PaddingRight);
113
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockStart);
114
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockEnd);
115
+ padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineStart);
116
+ padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineEnd);
117
117
  text-align: var(--pf-v6-c-multiple-file-upload__main--TextAlign);
118
118
  border: var(--pf-v6-c-multiple-file-upload__main--BorderWidth) var(--pf-v6-c-multiple-file-upload__main--BorderStyle) var(--pf-v6-c-multiple-file-upload__main--BorderColor);
119
119
  border-radius: var(--pf-v6-c-multiple-file-upload__main--BorderRadius);
@@ -140,8 +140,8 @@
140
140
 
141
141
  .pf-v6-c-multiple-file-upload__title-text-separator {
142
142
  display: var(--pf-v6-c-multiple-file-upload__title-text-separator--Display);
143
- margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginTop);
144
- margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBottom);
143
+ margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart);
144
+ margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd);
145
145
  font-family: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontFamily);
146
146
  font-size: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontSize);
147
147
  font-weight: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontWeight);
@@ -154,16 +154,16 @@
154
154
 
155
155
  .pf-v6-c-multiple-file-upload__info {
156
156
  grid-area: info;
157
- margin-block-start: var(--pf-v6-c-multiple-file-upload__info--MarginTop);
157
+ margin-block-start: var(--pf-v6-c-multiple-file-upload__info--MarginBlockStart);
158
158
  font-size: var(--pf-v6-c-multiple-file-upload__info--FontSize);
159
159
  color: var(--pf-v6-c-multiple-file-upload__info--Color);
160
160
  }
161
161
 
162
162
  .pf-v6-c-multiple-file-upload__status {
163
- padding-block-start: var(--pf-v6-c-multiple-file-upload__status--PaddingTop);
164
- padding-block-end: var(--pf-v6-c-multiple-file-upload__status--PaddingBottom);
165
- padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--PaddingLeft);
166
- padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--PaddingRight);
163
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockStart);
164
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockEnd);
165
+ padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineStart);
166
+ padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineEnd);
167
167
  }
168
168
 
169
169
  .pf-v6-c-multiple-file-upload__status,
@@ -185,8 +185,8 @@
185
185
  display: grid;
186
186
  grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns);
187
187
  gap: var(--pf-v6-c-multiple-file-upload__status-item--Gap);
188
- padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--PaddingTop);
189
- padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBottom);
188
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart);
189
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd);
190
190
  border-block-end: var(--pf-v6-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v6-c-multiple-file-upload__status-item--BorderColor);
191
191
  }
192
192