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

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 +12 -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 +174 -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 +250 -132
  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 +23505 -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/EmptyState/empty-state.css CHANGED
@@ -1,21 +1,21 @@
1
- :root {
2
- --pf-v6-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
3
- --pf-v6-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
4
- --pf-v6-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
5
- --pf-v6-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
6
- --pf-v6-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
7
- --pf-v6-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
8
- --pf-v6-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
9
- --pf-v6-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
1
+ :where(:root, .pf-v6-c-empty-state) {
2
+ --pf-v6-c-empty-state--PaddingBlockStart: var(--pf-t--global--spacer--xl);
3
+ --pf-v6-c-empty-state--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
4
+ --pf-v6-c-empty-state--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
5
+ --pf-v6-c-empty-state--PaddingInlineStart: var(--pf-t--global--spacer--xl);
6
+ --pf-v6-c-empty-state--m-xs--PaddingBlockStart: var(--pf-t--global--spacer--md);
7
+ --pf-v6-c-empty-state--m-xs--PaddingInlineEnd: var(--pf-t--global--spacer--md);
8
+ --pf-v6-c-empty-state--m-xs--PaddingBlockEnd: var(--pf-t--global--spacer--md);
9
+ --pf-v6-c-empty-state--m-xs--PaddingInlineStart: var(--pf-t--global--spacer--md);
10
10
  --pf-v6-c-empty-state__content--MaxWidth: none;
11
11
  --pf-v6-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
12
12
  --pf-v6-c-empty-state--m-sm__content--MaxWidth: 25rem;
13
13
  --pf-v6-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14
- --pf-v6-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
14
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-t--global--spacer--lg);
15
15
  --pf-v6-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
16
16
  --pf-v6-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
17
- --pf-v6-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
18
- --pf-v6-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
17
+ --pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd: var(--pf-t--global--spacer--lg);
18
+ --pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd: var(--pf-t--global--spacer--xl);
19
19
  --pf-v6-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
20
20
  --pf-v6-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
21
21
  --pf-v6-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -29,16 +29,16 @@
29
29
  --pf-v6-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
30
30
  --pf-v6-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
31
31
  --pf-v6-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
32
- --pf-v6-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
32
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-t--global--spacer--md);
33
33
  --pf-v6-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
34
34
  --pf-v6-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
35
35
  --pf-v6-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
36
- --pf-v6-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
36
+ --pf-v6-c-empty-state--m-xs__body--MarginBlockStart: var(--pf-t--global--spacer--md);
37
37
  --pf-v6-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
38
- --pf-v6-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
38
+ --pf-v6-c-empty-state--m-xl__body--MarginBlockStart: var(--pf-t--global--spacer--xl);
39
39
  --pf-v6-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
40
- --pf-v6-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
41
- --pf-v6-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
40
+ --pf-v6-c-empty-state__footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
41
+ --pf-v6-c-empty-state--m-xs__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
42
42
  --pf-v6-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
43
43
  --pf-v6-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
44
44
  }
@@ -47,23 +47,23 @@
47
47
  display: flex;
48
48
  align-items: center;
49
49
  justify-content: center;
50
- padding-block-start: var(--pf-v6-c-empty-state--PaddingTop);
51
- padding-block-end: var(--pf-v6-c-empty-state--PaddingBottom);
52
- padding-inline-start: var(--pf-v6-c-empty-state--PaddingLeft);
53
- padding-inline-end: var(--pf-v6-c-empty-state--PaddingRight);
50
+ padding-block-start: var(--pf-v6-c-empty-state--PaddingBlockStart);
51
+ padding-block-end: var(--pf-v6-c-empty-state--PaddingBlockEnd);
52
+ padding-inline-start: var(--pf-v6-c-empty-state--PaddingInlineStart);
53
+ padding-inline-end: var(--pf-v6-c-empty-state--PaddingInlineEnd);
54
54
  text-align: center;
55
55
  }
56
56
  .pf-v6-c-empty-state.pf-m-xs {
57
- --pf-v6-c-empty-state--PaddingTop: var(--pf-v6-c-empty-state--m-xs--PaddingTop);
58
- --pf-v6-c-empty-state--PaddingRight: var(--pf-v6-c-empty-state--m-xs--PaddingRight);
59
- --pf-v6-c-empty-state--PaddingBottom: var(--pf-v6-c-empty-state--m-xs--PaddingBottom);
60
- --pf-v6-c-empty-state--PaddingLeft: var(--pf-v6-c-empty-state--m-xs--PaddingLeft);
57
+ --pf-v6-c-empty-state--PaddingBlockStart: var(--pf-v6-c-empty-state--m-xs--PaddingBlockStart);
58
+ --pf-v6-c-empty-state--PaddingInlineEnd: var(--pf-v6-c-empty-state--m-xs--PaddingInlineEnd);
59
+ --pf-v6-c-empty-state--PaddingBlockEnd: var(--pf-v6-c-empty-state--m-xs--PaddingBlockEnd);
60
+ --pf-v6-c-empty-state--PaddingInlineStart: var(--pf-v6-c-empty-state--m-xs--PaddingInlineStart);
61
61
  --pf-v6-c-empty-state__title-text--FontSize: var(--pf-v6-c-empty-state--m-xs__title-text--FontSize);
62
62
  --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-xs__content--MaxWidth);
63
- --pf-v6-c-empty-state__icon--MarginBottom: var(--pf-v6-c-empty-state--m-xs__icon--MarginBottom);
64
- --pf-v6-c-empty-state__body--MarginTop: var(--pf-v6-c-empty-state--m-xs__body--MarginTop);
63
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-v6-c-empty-state--m-xs__icon--MarginBlockEnd);
64
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-v6-c-empty-state--m-xs__body--MarginBlockStart);
65
65
  --pf-v6-c-empty-state--body--FontSize: var(--pf-v6-c-empty-state--m-xs__body--FontSize);
66
- --pf-v6-c-empty-state__footer--MarginTop: var(--pf-v6-c-empty-state--m-xs__footer--MarginTop);
66
+ --pf-v6-c-empty-state__footer--MarginBlockStart: var(--pf-v6-c-empty-state--m-xs__footer--MarginBlockStart);
67
67
  }
68
68
  .pf-v6-c-empty-state.pf-m-sm {
69
69
  --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-sm__content--MaxWidth);
@@ -72,9 +72,9 @@
72
72
  --pf-v6-c-empty-state__content--MaxWidth: var(--pf-v6-c-empty-state--m-lg__content--MaxWidth);
73
73
  }
74
74
  .pf-v6-c-empty-state.pf-m-xl {
75
- --pf-v6-c-empty-state__body--MarginTop: var(--pf-v6-c-empty-state--m-xl__body--MarginTop);
75
+ --pf-v6-c-empty-state__body--MarginBlockStart: var(--pf-v6-c-empty-state--m-xl__body--MarginBlockStart);
76
76
  --pf-v6-c-empty-state--body--FontSize: var(--pf-v6-c-empty-state--m-xl__body--FontSize);
77
- --pf-v6-c-empty-state__icon--MarginBottom: var(--pf-v6-c-empty-state--m-xl__icon--MarginBottom);
77
+ --pf-v6-c-empty-state__icon--MarginBlockEnd: var(--pf-v6-c-empty-state--m-xl__icon--MarginBlockEnd);
78
78
  --pf-v6-c-empty-state__icon--FontSize: var(--pf-v6-c-empty-state--m-xl__icon--FontSize);
79
79
  --pf-v6-c-empty-state__title-text--FontSize: var(--pf-v6-c-empty-state--m-xl__title-text--FontSize);
80
80
  --pf-v6-c-empty-state__title-text--LineHeight: var(--pf-v6-c-empty-state--m-xl__title-text--LineHeight);
@@ -103,7 +103,7 @@
103
103
  }
104
104
 
105
105
  .pf-v6-c-empty-state__icon {
106
- margin-block-end: var(--pf-v6-c-empty-state__icon--MarginBottom);
106
+ margin-block-end: var(--pf-v6-c-empty-state__icon--MarginBlockEnd);
107
107
  font-size: var(--pf-v6-c-empty-state__icon--FontSize);
108
108
  line-height: 1;
109
109
  color: var(--pf-v6-c-empty-state__icon--Color);
@@ -117,7 +117,7 @@
117
117
  }
118
118
 
119
119
  .pf-v6-c-empty-state__body {
120
- margin-block-start: var(--pf-v6-c-empty-state__body--MarginTop);
120
+ margin-block-start: var(--pf-v6-c-empty-state__body--MarginBlockStart);
121
121
  font-size: var(--pf-v6-c-empty-state--body--FontSize);
122
122
  color: var(--pf-v6-c-empty-state__body--Color);
123
123
  }
@@ -127,7 +127,7 @@
127
127
  flex-direction: column;
128
128
  row-gap: var(--pf-v6-c-empty-state__footer--RowGap);
129
129
  align-items: center;
130
- margin-block-start: var(--pf-v6-c-empty-state__footer--MarginTop);
130
+ margin-block-start: var(--pf-v6-c-empty-state__footer--MarginBlockStart);
131
131
  }
132
132
 
133
133
  .pf-v6-c-empty-state__actions {
package/css/components/ExpandableSection/expandable-section.css CHANGED
@@ -1,8 +1,8 @@
1
- :root {
2
- --pf-v6-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
4
- --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
5
- --pf-v6-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
1
+ :where(:root, .pf-v6-c-expandable-section) {
2
+ --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3
+ --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4
+ --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
+ --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6
6
  --pf-v6-c-expandable-section__toggle--BackgroundColor: transparent;
7
7
  --pf-v6-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
8
8
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -15,36 +15,36 @@
15
15
  --pf-v6-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
16
16
  --pf-v6-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
17
17
  --pf-v6-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
18
- --pf-v6-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
19
- --pf-v6-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
20
- --pf-v6-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
21
- --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
18
+ --pf-v6-c-expandable-section__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19
+ --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
20
+ --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
21
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22
22
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
23
23
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
24
24
  --pf-v6-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25
25
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
26
26
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
27
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
28
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
29
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
30
- --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
27
+ --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
28
+ --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
29
+ --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
30
+ --pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31
31
  --pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
32
32
  --pf-v6-c-expandable-section--m-display-lg__toggle--Width: 100%;
33
33
  --pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
34
34
  --pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
35
35
  --pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
36
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
37
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
38
- --pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
36
+ --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
37
+ --pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
38
+ --pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart: var(--pf-t--global--spacer--lg);
39
39
  --pf-v6-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
40
- --pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v6-c-expandable-section__toggle--ColumnGap) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
41
- --pf-v6-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v6-c-expandable-section__toggle--PaddingLeft));
42
- --pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft));
43
- --pf-v6-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
44
- --pf-v6-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
45
- --pf-v6-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
46
- --pf-v6-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
47
- --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
40
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base: calc(var(--pf-v6-c-expandable-section__toggle--ColumnGap) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
41
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart));
42
+ --pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart: calc(var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart--base) + var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart));
43
+ --pf-v6-c-expandable-section--m-truncate--PaddingBlockStart: var(--pf-t--global--spacer--sm);
44
+ --pf-v6-c-expandable-section--m-truncate--PaddingInlineEnd: var(--pf-t--global--spacer--md);
45
+ --pf-v6-c-expandable-section--m-truncate--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
46
+ --pf-v6-c-expandable-section--m-truncate--PaddingInlineStart: var(--pf-t--global--spacer--md);
47
+ --pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
48
48
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
49
49
  }
50
50
 
@@ -59,35 +59,35 @@
59
59
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
60
60
  }
61
61
  .pf-v6-c-expandable-section.pf-m-display-lg {
62
- --pf-v6-c-expandable-section__toggle--PaddingTop: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingTop);
63
- --pf-v6-c-expandable-section__toggle--PaddingRight: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingRight);
64
- --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBottom);
65
- --pf-v6-c-expandable-section__toggle--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingLeft);
62
+ --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockStart);
63
+ --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineEnd);
64
+ --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingBlockEnd);
65
+ --pf-v6-c-expandable-section__toggle--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__toggle--PaddingInlineStart);
66
66
  --pf-v6-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
67
67
  --pf-v6-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
68
68
  --pf-v6-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v6-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
69
69
  --pf-v6-c-expandable-section__toggle--BorderRadius: var(--pf-v6-c-expandable-section--m-display-lg__toggle--BorderRadius);
70
70
  --pf-v6-c-expandable-section__toggle--Width: var(--pf-v6-c-expandable-section--m-display-lg__toggle--Width);
71
- --pf-v6-c-expandable-section__content--PaddingRight: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingRight);
72
- --pf-v6-c-expandable-section__content--PaddingBottom: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBottom);
73
- --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingLeft);
74
- --pf-v6-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
71
+ --pf-v6-c-expandable-section__content--PaddingInlineEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineEnd);
72
+ --pf-v6-c-expandable-section__content--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingBlockEnd);
73
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg__content--PaddingInlineStart);
74
+ --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-display-lg--m-indented__content--PaddingInlineStart);
75
75
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
76
76
  border: solid 1px var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
77
77
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
78
78
  }
79
79
  .pf-v6-c-expandable-section.pf-m-indented {
80
- --pf-v6-c-expandable-section__content--PaddingLeft: var(--pf-v6-c-expandable-section--m-indented__content--PaddingLeft);
80
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
81
81
  }
82
82
  .pf-v6-c-expandable-section.pf-m-truncate {
83
- --pf-v6-c-expandable-section__toggle--PaddingTop: 0;
84
- --pf-v6-c-expandable-section__toggle--PaddingRight: 0;
85
- --pf-v6-c-expandable-section__toggle--PaddingBottom: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBottom);
86
- --pf-v6-c-expandable-section__toggle--PaddingLeft: 0;
87
- --pf-v6-c-expandable-section__content--PaddingTop: 0;
88
- --pf-v6-c-expandable-section__content--PaddingRight: 0;
89
- --pf-v6-c-expandable-section__content--PaddingBottom: 0;
90
- --pf-v6-c-expandable-section__content--PaddingLeft: 0;
83
+ --pf-v6-c-expandable-section__toggle--PaddingBlockStart: 0;
84
+ --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: 0;
85
+ --pf-v6-c-expandable-section__toggle--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-truncate__toggle--PaddingBlockEnd);
86
+ --pf-v6-c-expandable-section__toggle--PaddingInlineStart: 0;
87
+ --pf-v6-c-expandable-section__content--PaddingBlockStart: 0;
88
+ --pf-v6-c-expandable-section__content--PaddingInlineEnd: 0;
89
+ --pf-v6-c-expandable-section__content--PaddingBlockEnd: 0;
90
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
91
91
  }
92
92
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
93
93
  display: -webkit-box;
@@ -100,10 +100,10 @@
100
100
  display: flex;
101
101
  column-gap: var(--pf-v6-c-expandable-section__toggle--ColumnGap);
102
102
  width: var(--pf-v6-c-expandable-section__toggle--Width, initial);
103
- padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingTop);
104
- padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBottom);
105
- padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingLeft);
106
- padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingRight);
103
+ padding-block-start: var(--pf-v6-c-expandable-section__toggle--PaddingBlockStart);
104
+ padding-block-end: var(--pf-v6-c-expandable-section__toggle--PaddingBlockEnd);
105
+ padding-inline-start: var(--pf-v6-c-expandable-section__toggle--PaddingInlineStart);
106
+ padding-inline-end: var(--pf-v6-c-expandable-section__toggle--PaddingInlineEnd);
107
107
  background-color: var(--pf-v6-c-expandable-section__toggle--BackgroundColor);
108
108
  border: none;
109
109
  border-radius: var(--pf-v6-c-expandable-section__toggle--BorderRadius, 0);
@@ -133,8 +133,8 @@
133
133
 
134
134
  .pf-v6-c-expandable-section__content {
135
135
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
136
- padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingTop);
137
- padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBottom);
138
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingLeft);
139
- padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingRight);
136
+ padding-block-start: var(--pf-v6-c-expandable-section__content--PaddingBlockStart);
137
+ padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd);
138
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
139
+ padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingInlineEnd);
140
140
  }
package/css/components/FileUpload/file-upload.css CHANGED
@@ -1,5 +1,4 @@
1
- :where(:root),
2
- :where(.pf-v6-c-file-upload) {
1
+ :where(:root, .pf-v6-c-file-upload) {
3
2
  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--sm);
4
3
  --pf-v6-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5
4
  --pf-v6-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);