@patternfly/react-styles 5.2.0-prerelease.6 → 6.0.0-alpha.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (239) hide show
  1. package/CHANGELOG.md +70 -0
  2. package/css/assets/images/PF-Backdrop.svg +1 -0
  3. package/css/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/css/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/css/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/css/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/css/assets/images/PF-IconLogo.svg +17 -0
  8. package/css/assets/images/pf-background.svg +22 -0
  9. package/css/components/AboutModalBox/about-modal-box.css +57 -94
  10. package/css/components/AboutModalBox/about-modal-box.d.ts +1 -2
  11. package/css/components/AboutModalBox/about-modal-box.js +1 -2
  12. package/css/components/AboutModalBox/about-modal-box.mjs +1 -2
  13. package/css/components/Accordion/accordion.css +81 -182
  14. package/css/components/Accordion/accordion.d.ts +2 -2
  15. package/css/components/Accordion/accordion.js +2 -2
  16. package/css/components/Accordion/accordion.mjs +2 -2
  17. package/css/components/ActionList/action-list.css +18 -17
  18. package/css/components/Alert/alert-group.css +20 -16
  19. package/css/components/Alert/alert.css +57 -84
  20. package/css/components/Alert/alert.d.ts +1 -2
  21. package/css/components/Alert/alert.js +1 -2
  22. package/css/components/Alert/alert.mjs +1 -2
  23. package/css/components/Avatar/avatar.css +10 -13
  24. package/css/components/Avatar/avatar.d.ts +1 -2
  25. package/css/components/Avatar/avatar.js +1 -2
  26. package/css/components/Avatar/avatar.mjs +1 -2
  27. package/css/components/BackToTop/back-to-top.css +17 -16
  28. package/css/components/Backdrop/backdrop.css +6 -2
  29. package/css/components/BackgroundImage/background-image.css +5 -1
  30. package/css/components/Badge/badge.css +23 -15
  31. package/css/components/Badge/badge.d.ts +2 -2
  32. package/css/components/Badge/badge.js +2 -2
  33. package/css/components/Badge/badge.mjs +2 -2
  34. package/css/components/Banner/banner.css +90 -64
  35. package/css/components/Banner/banner.d.ts +12 -4
  36. package/css/components/Banner/banner.js +12 -4
  37. package/css/components/Banner/banner.mjs +12 -4
  38. package/css/components/Breadcrumb/breadcrumb.css +19 -16
  39. package/css/components/Button/button.css +444 -435
  40. package/css/components/Button/button.d.ts +10 -9
  41. package/css/components/Button/button.js +10 -9
  42. package/css/components/Button/button.mjs +10 -9
  43. package/css/components/Card/card.css +97 -194
  44. package/css/components/Card/card.d.ts +3 -9
  45. package/css/components/Card/card.js +3 -9
  46. package/css/components/Card/card.mjs +3 -9
  47. package/css/components/Check/check.css +17 -16
  48. package/css/components/ClipboardCopy/clipboard-copy.css +30 -33
  49. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -2
  50. package/css/components/ClipboardCopy/clipboard-copy.js +1 -2
  51. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -2
  52. package/css/components/CodeBlock/code-block.css +18 -9
  53. package/css/components/Content/content.css +67 -67
  54. package/css/components/DataList/data-list.css +101 -158
  55. package/css/components/DataList/data-list.d.ts +1 -2
  56. package/css/components/DataList/data-list.js +1 -2
  57. package/css/components/DataList/data-list.mjs +1 -2
  58. package/css/components/DescriptionList/description-list.css +39 -34
  59. package/css/components/Divider/divider.css +97 -177
  60. package/css/components/Divider/divider.d.ts +1 -0
  61. package/css/components/Divider/divider.js +1 -0
  62. package/css/components/Divider/divider.mjs +1 -0
  63. package/css/components/DragDrop/drag-drop.css +18 -14
  64. package/css/components/DragDrop/drag-drop.d.ts +1 -2
  65. package/css/components/DragDrop/drag-drop.js +1 -2
  66. package/css/components/DragDrop/drag-drop.mjs +1 -2
  67. package/css/components/Drawer/drawer.css +112 -113
  68. package/css/components/Drawer/drawer.d.ts +3 -3
  69. package/css/components/Drawer/drawer.js +3 -3
  70. package/css/components/Drawer/drawer.mjs +3 -3
  71. package/css/components/EmptyState/empty-state.css +57 -34
  72. package/css/components/EmptyState/empty-state.d.ts +6 -1
  73. package/css/components/EmptyState/empty-state.js +6 -1
  74. package/css/components/EmptyState/empty-state.mjs +6 -1
  75. package/css/components/ExpandableSection/expandable-section.css +64 -62
  76. package/css/components/ExpandableSection/expandable-section.d.ts +1 -3
  77. package/css/components/ExpandableSection/expandable-section.js +1 -3
  78. package/css/components/ExpandableSection/expandable-section.mjs +1 -3
  79. package/css/components/FileUpload/file-upload.css +28 -34
  80. package/css/components/Form/form.css +62 -114
  81. package/css/components/Form/form.d.ts +2 -6
  82. package/css/components/Form/form.js +2 -6
  83. package/css/components/Form/form.mjs +2 -6
  84. package/css/components/FormControl/form-control.css +86 -111
  85. package/css/components/FormControl/form-control.d.ts +1 -2
  86. package/css/components/FormControl/form-control.js +1 -2
  87. package/css/components/FormControl/form-control.mjs +1 -2
  88. package/css/components/HelperText/helper-text.css +28 -34
  89. package/css/components/HelperText/helper-text.d.ts +1 -2
  90. package/css/components/HelperText/helper-text.js +1 -2
  91. package/css/components/HelperText/helper-text.mjs +1 -2
  92. package/css/components/Hint/hint.css +28 -21
  93. package/css/components/Hint/hint.d.ts +1 -2
  94. package/css/components/Hint/hint.js +1 -2
  95. package/css/components/Hint/hint.mjs +1 -2
  96. package/css/components/Icon/icon.css +154 -18
  97. package/css/components/Icon/icon.d.ts +11 -0
  98. package/css/components/Icon/icon.js +11 -0
  99. package/css/components/Icon/icon.mjs +11 -0
  100. package/css/components/InlineEdit/inline-edit.css +8 -7
  101. package/css/components/InputGroup/input-group.css +22 -38
  102. package/css/components/InputGroup/input-group.d.ts +1 -2
  103. package/css/components/InputGroup/input-group.js +1 -2
  104. package/css/components/InputGroup/input-group.mjs +1 -2
  105. package/css/components/JumpLinks/jump-links.css +34 -34
  106. package/css/components/Label/label-group.css +39 -44
  107. package/css/components/Label/label.css +258 -355
  108. package/css/components/Label/label.d.ts +11 -10
  109. package/css/components/Label/label.js +11 -10
  110. package/css/components/Label/label.mjs +11 -10
  111. package/css/components/List/list.css +16 -16
  112. package/css/components/Login/login.css +70 -97
  113. package/css/components/Login/login.d.ts +0 -2
  114. package/css/components/Login/login.js +0 -2
  115. package/css/components/Login/login.mjs +0 -2
  116. package/css/components/Masthead/masthead.css +262 -498
  117. package/css/components/Masthead/masthead.d.ts +3 -45
  118. package/css/components/Masthead/masthead.js +3 -45
  119. package/css/components/Masthead/masthead.mjs +3 -45
  120. package/css/components/MenuToggle/menu-toggle.css +56 -78
  121. package/css/components/ModalBox/modal-box.css +59 -52
  122. package/css/components/ModalBox/modal-box.d.ts +1 -2
  123. package/css/components/ModalBox/modal-box.js +1 -2
  124. package/css/components/ModalBox/modal-box.mjs +1 -2
  125. package/css/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  126. package/css/components/MultipleFileUpload/multiple-file-upload.d.ts +0 -1
  127. package/css/components/MultipleFileUpload/multiple-file-upload.js +0 -1
  128. package/css/components/MultipleFileUpload/multiple-file-upload.mjs +0 -1
  129. package/css/components/Nav/nav.css +241 -917
  130. package/css/components/Nav/nav.d.ts +9 -20
  131. package/css/components/Nav/nav.js +9 -20
  132. package/css/components/Nav/nav.mjs +9 -20
  133. package/css/components/NotificationBadge/notification-badge.css +56 -81
  134. package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
  135. package/css/components/NotificationBadge/notification-badge.js +1 -5
  136. package/css/components/NotificationBadge/notification-badge.mjs +1 -5
  137. package/css/components/NotificationDrawer/notification-drawer.css +104 -115
  138. package/css/components/NotificationDrawer/notification-drawer.d.ts +3 -3
  139. package/css/components/NotificationDrawer/notification-drawer.js +3 -3
  140. package/css/components/NotificationDrawer/notification-drawer.mjs +3 -3
  141. package/css/components/NumberInput/number-input.css +8 -8
  142. package/css/components/NumberInput/number-input.d.ts +0 -3
  143. package/css/components/NumberInput/number-input.js +0 -3
  144. package/css/components/NumberInput/number-input.mjs +0 -3
  145. package/css/components/OverflowMenu/overflow-menu.css +17 -47
  146. package/css/components/OverflowMenu/overflow-menu.d.ts +1 -3
  147. package/css/components/OverflowMenu/overflow-menu.js +1 -3
  148. package/css/components/OverflowMenu/overflow-menu.mjs +1 -3
  149. package/css/components/Page/page.css +112 -209
  150. package/css/components/Page/page.d.ts +5 -12
  151. package/css/components/Page/page.js +5 -12
  152. package/css/components/Page/page.mjs +5 -12
  153. package/css/components/Pagination/pagination.css +64 -121
  154. package/css/components/Pagination/pagination.d.ts +2 -5
  155. package/css/components/Pagination/pagination.js +2 -5
  156. package/css/components/Pagination/pagination.mjs +2 -5
  157. package/css/components/Panel/panel.css +27 -23
  158. package/css/components/Panel/panel.d.ts +2 -2
  159. package/css/components/Panel/panel.js +2 -2
  160. package/css/components/Panel/panel.mjs +2 -2
  161. package/css/components/Popover/popover.css +42 -51
  162. package/css/components/Popover/popover.d.ts +1 -2
  163. package/css/components/Popover/popover.js +1 -2
  164. package/css/components/Popover/popover.mjs +1 -2
  165. package/css/components/Progress/progress.css +31 -45
  166. package/css/components/Progress/progress.d.ts +1 -2
  167. package/css/components/Progress/progress.js +1 -2
  168. package/css/components/Progress/progress.mjs +1 -2
  169. package/css/components/Radio/radio.css +15 -11
  170. package/css/components/Sidebar/sidebar.css +20 -9
  171. package/css/components/Sidebar/sidebar.d.ts +1 -0
  172. package/css/components/Sidebar/sidebar.js +1 -0
  173. package/css/components/Sidebar/sidebar.mjs +1 -0
  174. package/css/components/SimpleList/simple-list.css +35 -52
  175. package/css/components/SimpleList/simple-list.d.ts +2 -2
  176. package/css/components/SimpleList/simple-list.js +2 -2
  177. package/css/components/SimpleList/simple-list.mjs +2 -2
  178. package/css/components/Skeleton/skeleton.css +18 -20
  179. package/css/components/Skeleton/skeleton.d.ts +1 -2
  180. package/css/components/Skeleton/skeleton.js +1 -2
  181. package/css/components/Skeleton/skeleton.mjs +1 -2
  182. package/css/components/SkipToContent/skip-to-content.css +6 -3
  183. package/css/components/Slider/slider.css +34 -30
  184. package/css/components/Spinner/spinner.css +17 -34
  185. package/css/components/Switch/switch.css +41 -37
  186. package/css/components/Switch/switch.d.ts +1 -2
  187. package/css/components/Switch/switch.js +1 -2
  188. package/css/components/Switch/switch.mjs +1 -2
  189. package/css/components/TabContent/tab-content.css +17 -11
  190. package/css/components/TabContent/tab-content.d.ts +1 -1
  191. package/css/components/TabContent/tab-content.js +1 -1
  192. package/css/components/TabContent/tab-content.mjs +1 -1
  193. package/css/components/Table/table-grid.css +8 -8
  194. package/css/components/Table/table.css +79 -88
  195. package/css/components/Tile/tile.css +40 -81
  196. package/css/components/Tile/tile.d.ts +0 -1
  197. package/css/components/Tile/tile.js +0 -1
  198. package/css/components/Tile/tile.mjs +0 -1
  199. package/css/components/Timestamp/timestamp.css +12 -9
  200. package/css/components/Title/title.css +70 -19
  201. package/css/components/Title/title.d.ts +7 -1
  202. package/css/components/Title/title.js +7 -1
  203. package/css/components/Title/title.mjs +7 -1
  204. package/css/components/ToggleGroup/toggle-group.css +34 -47
  205. package/css/components/ToggleGroup/toggle-group.d.ts +0 -1
  206. package/css/components/ToggleGroup/toggle-group.js +0 -1
  207. package/css/components/ToggleGroup/toggle-group.mjs +0 -1
  208. package/css/components/Toolbar/toolbar.css +2527 -1040
  209. package/css/components/Toolbar/toolbar.d.ts +406 -103
  210. package/css/components/Toolbar/toolbar.js +406 -103
  211. package/css/components/Toolbar/toolbar.mjs +406 -103
  212. package/css/components/Tooltip/tooltip.css +16 -16
  213. package/css/components/Tooltip/tooltip.d.ts +0 -1
  214. package/css/components/Tooltip/tooltip.js +0 -1
  215. package/css/components/Tooltip/tooltip.mjs +0 -1
  216. package/css/components/Truncate/truncate.css +4 -0
  217. package/css/docs/components/Button/examples/Button.css +4 -0
  218. package/css/docs/components/Divider/examples/Divider.css +3 -1
  219. package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
  220. package/css/docs/components/Label/examples/Label.css +4 -0
  221. package/css/docs/components/Nav/examples/Navigation.css +1 -22
  222. package/css/docs/components/Nav/examples/Navigation.d.ts +0 -3
  223. package/css/docs/components/Nav/examples/Navigation.js +0 -3
  224. package/css/docs/components/Nav/examples/Navigation.mjs +0 -3
  225. package/css/docs/components/Page/examples/Page.css +0 -8
  226. package/css/docs/components/Page/examples/Page.d.ts +0 -7
  227. package/css/docs/components/Page/examples/Page.js +0 -7
  228. package/css/docs/components/Page/examples/Page.mjs +0 -7
  229. package/css/docs/components/Toolbar/examples/Toolbar.css +20 -15
  230. package/css/docs/components/Truncate/examples/Truncate.css +2 -2
  231. package/package.json +5 -4
  232. package/css/docs/components/Avatar/examples/Avatar.css +0 -3
  233. package/css/docs/components/Avatar/examples/Avatar.d.ts +0 -3
  234. package/css/docs/components/Avatar/examples/Avatar.js +0 -4
  235. package/css/docs/components/Avatar/examples/Avatar.mjs +0 -2
  236. package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
  237. package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
  238. package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
  239. package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
package/css/components/ModalBox/modal-box.mjs CHANGED
@@ -23,6 +23,5 @@ export default {
23
23
  "info": "pf-m-info",
24
24
  "help": "pf-m-help",
25
25
  "icon": "pf-m-icon"
26
- },
27
- "themeDark": "pf-v5-theme-dark"
26
+ }
28
27
  };
package/css/components/MultipleFileUpload/multiple-file-upload.css CHANGED
@@ -1,6 +1,7 @@
1
- .pf-v5-c-multiple-file-upload {
1
+ :root,
2
+ :where(.pf-v5-c-multiple-file-upload) {
2
3
  --pf-v5-c-multiple-file-upload--GridTemplateColumns: 1fr;
3
- --pf-v5-c-multiple-file-upload--Gap: var(--pf-v5-global--spacer--lg);
4
+ --pf-v5-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
4
5
  --pf-v5-c-multiple-file-upload__main--TextAlign: center;
5
6
  --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: auto;
6
7
  --pf-v5-c-multiple-file-upload__main--GridTemplateRows: auto;
@@ -8,59 +9,74 @@
8
9
  "title"
9
10
  "upload"
10
11
  "info";
11
- --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-global--spacer--md);
12
- --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-v5-global--spacer--lg);
13
- --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-v5-global--spacer--lg);
14
- --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-global--spacer--xl);
15
- --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-v5-global--spacer--lg);
16
- --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
12
+ --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-t--global--spacer--xl);
13
+ --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-t--global--spacer--xl);
14
+ --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-t--global--spacer--xl);
15
+ --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-t--global--spacer--xl);
16
+ --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
17
17
  --pf-v5-c-multiple-file-upload__main--BorderStyle: dashed;
18
- --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-global--BorderColor--100);
19
- --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
18
+ --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
19
+ --pf-v5-c-multiple-file-upload__main--BorderRadius: var(--pf-t--global--border--radius--medium);
20
20
  --pf-v5-c-multiple-file-upload__title--Display: grid;
21
21
  --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: auto;
22
- --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-global--spacer--sm);
23
- --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-global--icon--Color--dark);
22
+ --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-t--global--spacer--lg);
23
+ --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-t--global--text--color--regular);
24
+ --pf-v5-c-multiple-file-upload__title-text--FontFamily: var(--pf-t--global--font--family--heading);
25
+ --pf-v5-c-multiple-file-upload__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
26
+ --pf-v5-c-multiple-file-upload__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
27
+ --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
28
+ --pf-v5-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
24
29
  --pf-v5-c-multiple-file-upload__title-text-separator--Display: block;
25
- --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-global--spacer--sm);
26
- --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-v5-global--FontSize--sm);
27
- --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-global--Color--200);
28
- --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-global--spacer--sm);
29
- --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
30
- --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-v5-global--active-color--100);
31
- --pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-v5-global--palette--blue-50);
32
- --pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-v5-global--active-color--100);
33
- --pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-v5-global--active-color--100);
34
- --pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-v5-global--active-color--100);
30
+ --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-t--global--spacer--sm);
31
+ --pf-v5-c-multiple-file-upload__title-text-separator--MarginBottom: var(--pf-t--global--spacer--sm);
32
+ --pf-v5-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
33
+ --pf-v5-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
34
+ --pf-v5-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
35
+ --pf-v5-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
36
+ --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
37
+ --pf-v5-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
38
+ --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-t--global--spacer--lg);
39
+ --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
40
+ --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
35
41
  --pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
36
42
  --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
37
43
  --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
38
44
  --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
39
45
  "title upload"
40
46
  "info upload";
41
- --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--2xl);
42
- --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-v5-global--spacer--lg);
47
+ --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
48
+ --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-t--global--spacer--lg);
43
49
  --pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
44
- --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-v5-global--spacer--xs);
50
+ --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
51
+ --pf-v5-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
52
+ --pf-v5-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
45
53
  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
46
54
  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
55
+ --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
56
+ --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
57
+ --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
47
58
  --pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
59
+ --pf-v5-c-multiple-file-upload__status--PaddingTop: var(--pf-t--global--spacer--sm);
60
+ --pf-v5-c-multiple-file-upload__status--PaddingBottom: var(--pf-t--global--spacer--sm);
61
+ --pf-v5-c-multiple-file-upload__status--PaddingLeft: var(--pf-t--global--spacer--md);
62
+ --pf-v5-c-multiple-file-upload__status--PaddingRight: var(--pf-t--global--spacer--md);
48
63
  --pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
49
- --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-v5-global--spacer--sm);
50
- --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-v5-global--icon--Color--dark);
51
- --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-global--spacer--md);
52
- --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-v5-global--spacer--md);
53
- --pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
64
+ --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
65
+ --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
66
+ --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-t--global--spacer--md);
67
+ --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-t--global--spacer--md);
54
68
  --pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
55
- --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-v5-global--spacer--sm);
56
- --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
57
- --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-v5-global--BorderColor--100);
58
- --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-v5-global--icon--Color--dark);
59
- --pf-v5-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
69
+ --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
70
+ --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
71
+ --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-t--global--border--color--default);
72
+ --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-t--global--icon--color--regular);
60
73
  --pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
61
- --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-v5-global--spacer--sm);
62
- --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-v5-global--primary-color--100);
63
- --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-v5-global--Color--200);
74
+ --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-t--global--spacer--sm);
75
+ --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-t--global--text--color--regular);
76
+ --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-t--global--text--color--subtle);
77
+ }
78
+
79
+ .pf-v5-c-multiple-file-upload {
64
80
  display: grid;
65
81
  grid-template-columns: var(--pf-v5-c-multiple-file-upload--GridTemplateColumns);
66
82
  gap: var(--pf-v5-c-multiple-file-upload--Gap);
@@ -74,17 +90,18 @@
74
90
  --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
75
91
  --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
76
92
  --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--Gap);
93
+ --pf-v5-c-multiple-file-upload__title-icon--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
94
+ --pf-v5-c-multiple-file-upload__title-text--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text--FontSize);
95
+ --pf-v5-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
77
96
  --pf-v5-c-multiple-file-upload__title-text-separator--Display: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
78
97
  --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
98
+ --pf-v5-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
99
+ --pf-v5-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
79
100
  --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop);
80
101
  }
81
102
  .pf-v5-c-multiple-file-upload.pf-m-drag-over {
82
103
  --pf-v5-c-multiple-file-upload__main--BorderStyle: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle);
83
104
  --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor);
84
- --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
85
- --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
86
- --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color);
87
- --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color);
88
105
  }
89
106
 
90
107
  .pf-v5-c-multiple-file-upload__main {
@@ -93,13 +110,14 @@
93
110
  grid-template-rows: var(--pf-v5-c-multiple-file-upload__main--GridTemplateRows);
94
111
  grid-template-columns: var(--pf-v5-c-multiple-file-upload__main--GridTemplateColumns);
95
112
  gap: var(--pf-v5-c-multiple-file-upload__main--Gap);
113
+ align-items: center;
96
114
  padding-block-start: var(--pf-v5-c-multiple-file-upload__main--PaddingTop);
97
115
  padding-block-end: var(--pf-v5-c-multiple-file-upload__main--PaddingBottom);
98
116
  padding-inline-start: var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
99
117
  padding-inline-end: var(--pf-v5-c-multiple-file-upload__main--PaddingRight);
100
118
  text-align: var(--pf-v5-c-multiple-file-upload__main--TextAlign);
101
- background-color: var(--pf-v5-c-multiple-file-upload__main--BackgroundColor);
102
119
  border: var(--pf-v5-c-multiple-file-upload__main--BorderWidth) var(--pf-v5-c-multiple-file-upload__main--BorderStyle) var(--pf-v5-c-multiple-file-upload__main--BorderColor);
120
+ border-radius: var(--pf-v5-c-multiple-file-upload__main--BorderRadius);
103
121
  }
104
122
 
105
123
  .pf-v5-c-multiple-file-upload__title {
@@ -110,16 +128,25 @@
110
128
  }
111
129
 
112
130
  .pf-v5-c-multiple-file-upload__title-icon {
131
+ font-size: var(--pf-v5-c-multiple-file-upload__title-icon--FontSize);
113
132
  color: var(--pf-v5-c-multiple-file-upload__title-icon--Color);
114
133
  }
115
134
 
116
135
  .pf-v5-c-multiple-file-upload__title-text {
136
+ font-family: var(--pf-v5-c-multiple-file-upload__title-text--FontFamily);
137
+ font-size: var(--pf-v5-c-multiple-file-upload__title-text--FontSize);
138
+ font-weight: var(--pf-v5-c-multiple-file-upload__title-text--FontWeight);
117
139
  color: var(--pf-v5-c-multiple-file-upload__title-text--Color, inherit);
118
140
  }
119
141
 
120
142
  .pf-v5-c-multiple-file-upload__title-text-separator {
121
143
  display: var(--pf-v5-c-multiple-file-upload__title-text-separator--Display);
122
144
  margin-block-start: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
145
+ margin-block-end: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginBottom);
146
+ font-family: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontFamily);
147
+ font-size: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontSize);
148
+ font-weight: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontWeight);
149
+ color: var(--pf-v5-c-multiple-file-upload__title-text-separator--Color);
123
150
  }
124
151
 
125
152
  .pf-v5-c-multiple-file-upload__upload {
@@ -133,6 +160,13 @@
133
160
  color: var(--pf-v5-c-multiple-file-upload__info--Color);
134
161
  }
135
162
 
163
+ .pf-v5-c-multiple-file-upload__status {
164
+ padding-block-start: var(--pf-v5-c-multiple-file-upload__status--PaddingTop);
165
+ padding-block-end: var(--pf-v5-c-multiple-file-upload__status--PaddingBottom);
166
+ padding-inline-start: var(--pf-v5-c-multiple-file-upload__status--PaddingLeft);
167
+ padding-inline-end: var(--pf-v5-c-multiple-file-upload__status--PaddingRight);
168
+ }
169
+
136
170
  .pf-v5-c-multiple-file-upload__status,
137
171
  .pf-v5-c-multiple-file-upload__status-item-main {
138
172
  min-width: 0;
@@ -156,18 +190,11 @@
156
190
  padding-block-end: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
157
191
  border-block-end: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
158
192
  }
159
- .pf-v5-c-multiple-file-upload__status-item:first-child {
160
- --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
161
- }
162
193
 
163
194
  .pf-v5-c-multiple-file-upload__status-item-icon {
164
195
  color: var(--pf-v5-c-multiple-file-upload__status-item-icon--Color);
165
196
  }
166
197
 
167
- .pf-v5-c-multiple-file-upload__status-item-close {
168
- margin-block-start: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
169
- }
170
-
171
198
  .pf-v5-c-multiple-file-upload__status-item-progress {
172
199
  display: grid;
173
200
  grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
package/css/components/MultipleFileUpload/multiple-file-upload.d.ts CHANGED
@@ -9,7 +9,6 @@ declare const _default: {
9
9
  "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
10
10
  "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
11
11
  "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
12
- "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
13
12
  "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
14
13
  "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
15
14
  "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",
package/css/components/MultipleFileUpload/multiple-file-upload.js CHANGED
@@ -11,7 +11,6 @@ exports.default = {
11
11
  "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
12
12
  "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
13
13
  "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
14
- "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
15
14
  "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
16
15
  "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
17
16
  "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",
package/css/components/MultipleFileUpload/multiple-file-upload.mjs CHANGED
@@ -9,7 +9,6 @@ export default {
9
9
  "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
10
10
  "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
11
11
  "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
12
- "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
13
12
  "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
14
13
  "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
15
14
  "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",