@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.9

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 (260) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  4. package/assets/pficon/pficon.scss +6 -129
  5. package/base/_common.scss +21 -0
  6. package/base/_globals.scss +1 -1
  7. package/base/_variables.scss +7 -0
  8. package/base/patternfly-common.css +16 -2
  9. package/base/patternfly-globals.css +1 -1
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +16 -0
  13. package/base/tokens/_tokens-font.scss +16 -14
  14. package/components/AboutModalBox/about-modal-box.css +23 -12
  15. package/components/AboutModalBox/about-modal-box.scss +25 -12
  16. package/components/Accordion/accordion.css +33 -20
  17. package/components/Accordion/accordion.scss +32 -20
  18. package/components/ActionList/action-list.css +2 -2
  19. package/components/ActionList/action-list.scss +2 -2
  20. package/components/Alert/alert-group.css +7 -4
  21. package/components/Alert/alert-group.scss +7 -4
  22. package/components/Alert/alert.css +19 -13
  23. package/components/Alert/alert.scss +18 -13
  24. package/components/AppLauncher/app-launcher.css +32 -23
  25. package/components/AppLauncher/app-launcher.scss +32 -23
  26. package/components/BackToTop/back-to-top.css +2 -2
  27. package/components/BackToTop/back-to-top.scss +2 -2
  28. package/components/Backdrop/backdrop.css +2 -2
  29. package/components/Backdrop/backdrop.scss +2 -2
  30. package/components/BackgroundImage/background-image.css +6 -3
  31. package/components/BackgroundImage/background-image.scss +8 -3
  32. package/components/Badge/badge.css +2 -2
  33. package/components/Badge/badge.scss +2 -2
  34. package/components/Banner/banner.css +5 -5
  35. package/components/Banner/banner.scss +5 -2
  36. package/components/Breadcrumb/breadcrumb.css +9 -3
  37. package/components/Breadcrumb/breadcrumb.scss +8 -3
  38. package/components/Button/button.css +33 -21
  39. package/components/Button/button.scss +35 -23
  40. package/components/Button/themes/dark/button.scss +1 -1
  41. package/components/CalendarMonth/calendar-month.css +25 -15
  42. package/components/CalendarMonth/calendar-month.scss +23 -15
  43. package/components/Card/card.css +25 -17
  44. package/components/Card/card.scss +24 -17
  45. package/components/Check/check.css +2 -2
  46. package/components/Check/check.scss +2 -2
  47. package/components/Chip/chip-group.css +6 -6
  48. package/components/Chip/chip-group.scss +6 -6
  49. package/components/Chip/chip.css +16 -9
  50. package/components/Chip/chip.scss +17 -9
  51. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  52. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  53. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  54. package/components/CodeBlock/code-block.css +6 -3
  55. package/components/CodeBlock/code-block.scss +6 -3
  56. package/components/CodeEditor/code-editor.css +31 -22
  57. package/components/CodeEditor/code-editor.scss +30 -21
  58. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  59. package/components/Content/content.css +33 -30
  60. package/components/Content/content.scss +33 -30
  61. package/components/ContextSelector/context-selector.css +41 -26
  62. package/components/ContextSelector/context-selector.scss +40 -25
  63. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  64. package/components/DataList/data-list-grid.css +21 -21
  65. package/components/DataList/data-list-grid.scss +3 -3
  66. package/components/DataList/data-list.css +69 -56
  67. package/components/DataList/data-list.scss +47 -35
  68. package/components/DatePicker/date-picker.css +8 -8
  69. package/components/DatePicker/date-picker.scss +8 -8
  70. package/components/DescriptionList/description-list.css +8 -5
  71. package/components/DescriptionList/description-list.scss +8 -5
  72. package/components/DragDrop/drag-drop.css +8 -8
  73. package/components/DragDrop/drag-drop.scss +8 -8
  74. package/components/Drawer/drawer.css +120 -61
  75. package/components/Drawer/drawer.scss +92 -43
  76. package/components/Dropdown/dropdown.css +75 -66
  77. package/components/Dropdown/dropdown.scss +65 -56
  78. package/components/DualListSelector/dual-list-selector.css +29 -15
  79. package/components/DualListSelector/dual-list-selector.scss +30 -15
  80. package/components/EmptyState/empty-state.css +7 -4
  81. package/components/EmptyState/empty-state.scss +7 -4
  82. package/components/ExpandableSection/expandable-section.css +17 -10
  83. package/components/ExpandableSection/expandable-section.scss +15 -10
  84. package/components/FileUpload/file-upload.css +9 -15
  85. package/components/FileUpload/file-upload.scss +9 -15
  86. package/components/Form/form.css +53 -50
  87. package/components/Form/form.scss +46 -44
  88. package/components/FormControl/form-control.css +18 -9
  89. package/components/FormControl/form-control.scss +18 -9
  90. package/components/HelperText/helper-text.css +1 -1
  91. package/components/HelperText/helper-text.scss +1 -1
  92. package/components/Hint/hint.css +9 -6
  93. package/components/Hint/hint.scss +9 -6
  94. package/components/Icon/icon.css +1 -1
  95. package/components/Icon/icon.scss +1 -1
  96. package/components/InlineEdit/inline-edit.css +4 -4
  97. package/components/InlineEdit/inline-edit.scss +4 -4
  98. package/components/InputGroup/input-group.css +12 -6
  99. package/components/InputGroup/input-group.scss +11 -5
  100. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  101. package/components/JumpLinks/jump-links.css +27 -24
  102. package/components/JumpLinks/jump-links.scss +26 -24
  103. package/components/Label/label-group.css +13 -10
  104. package/components/Label/label-group.scss +13 -10
  105. package/components/Label/label.css +9 -9
  106. package/components/Label/label.scss +9 -9
  107. package/components/List/list.css +9 -9
  108. package/components/List/list.scss +9 -9
  109. package/components/LogViewer/log-viewer.css +14 -14
  110. package/components/LogViewer/log-viewer.scss +14 -14
  111. package/components/Login/login.css +36 -27
  112. package/components/Login/login.scss +36 -27
  113. package/components/Masthead/masthead.css +19 -22
  114. package/components/Masthead/masthead.scss +19 -22
  115. package/components/Menu/menu.css +79 -65
  116. package/components/Menu/menu.scss +80 -68
  117. package/components/MenuToggle/menu-toggle.css +33 -27
  118. package/components/MenuToggle/menu-toggle.scss +33 -27
  119. package/components/ModalBox/modal-box.css +19 -19
  120. package/components/ModalBox/modal-box.scss +20 -20
  121. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  122. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  123. package/components/Nav/nav.css +120 -93
  124. package/components/Nav/nav.scss +120 -93
  125. package/components/Nav/themes/dark/nav.scss +2 -2
  126. package/components/NotificationBadge/notification-badge.css +66 -85
  127. package/components/NotificationBadge/notification-badge.scss +72 -103
  128. package/components/NotificationDrawer/notification-drawer.css +32 -19
  129. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  130. package/components/NumberInput/number-input.css +2 -2
  131. package/components/NumberInput/number-input.scss +2 -2
  132. package/components/OptionsMenu/options-menu.css +43 -31
  133. package/components/OptionsMenu/options-menu.scss +43 -31
  134. package/components/OverflowMenu/overflow-menu.css +2 -2
  135. package/components/OverflowMenu/overflow-menu.scss +2 -2
  136. package/components/Page/page.css +135 -77
  137. package/components/Page/page.scss +81 -52
  138. package/components/Page/themes/dark/page.scss +1 -1
  139. package/components/Pagination/pagination.css +27 -17
  140. package/components/Pagination/pagination.scss +25 -17
  141. package/components/Panel/panel.css +13 -7
  142. package/components/Panel/panel.scss +13 -7
  143. package/components/Popover/popover.css +72 -40
  144. package/components/Popover/popover.scss +95 -75
  145. package/components/Progress/progress.css +9 -7
  146. package/components/Progress/progress.scss +12 -7
  147. package/components/ProgressStepper/progress-stepper.css +26 -20
  148. package/components/ProgressStepper/progress-stepper.scss +25 -19
  149. package/components/Radio/radio.css +3 -3
  150. package/components/Radio/radio.scss +3 -3
  151. package/components/Select/select.css +56 -47
  152. package/components/Select/select.scss +56 -47
  153. package/components/Sidebar/sidebar.css +11 -5
  154. package/components/Sidebar/sidebar.scss +11 -5
  155. package/components/SimpleList/simple-list.css +10 -4
  156. package/components/SimpleList/simple-list.scss +10 -4
  157. package/components/Skeleton/skeleton.css +6 -5
  158. package/components/Skeleton/skeleton.scss +4 -5
  159. package/components/SkipToContent/skip-to-content.css +3 -3
  160. package/components/SkipToContent/skip-to-content.scss +3 -3
  161. package/components/Slider/slider.css +47 -26
  162. package/components/Slider/slider.scss +56 -28
  163. package/components/Switch/switch.css +9 -5
  164. package/components/Switch/switch.scss +10 -6
  165. package/components/TabContent/tab-content.css +4 -1
  166. package/components/TabContent/tab-content.scss +4 -1
  167. package/components/Table/table-grid.css +256 -195
  168. package/components/Table/table-grid.scss +53 -39
  169. package/components/Table/table-scrollable.css +4 -4
  170. package/components/Table/table-scrollable.scss +6 -4
  171. package/components/Table/table-tree-view.css +112 -105
  172. package/components/Table/table-tree-view.scss +38 -33
  173. package/components/Table/table.css +92 -70
  174. package/components/Table/table.scss +90 -70
  175. package/components/Tabs/tabs.css +76 -48
  176. package/components/Tabs/tabs.scss +74 -48
  177. package/components/TextInputGroup/text-input-group.css +15 -15
  178. package/components/TextInputGroup/text-input-group.scss +15 -15
  179. package/components/Tile/tile.css +10 -10
  180. package/components/Tile/tile.scss +10 -10
  181. package/components/ToggleGroup/toggle-group.css +14 -11
  182. package/components/ToggleGroup/toggle-group.scss +14 -11
  183. package/components/Toolbar/toolbar.css +44 -41
  184. package/components/Toolbar/toolbar.scss +26 -21
  185. package/components/Tooltip/tooltip.css +60 -28
  186. package/components/Tooltip/tooltip.scss +76 -56
  187. package/components/TreeView/tree-view.css +48 -27
  188. package/components/TreeView/tree-view.scss +50 -28
  189. package/components/Truncate/truncate.css +9 -0
  190. package/components/Truncate/truncate.scss +16 -3
  191. package/components/Wizard/wizard.css +57 -36
  192. package/components/Wizard/wizard.scss +57 -36
  193. package/docs/components/Button/examples/Button.css +2 -2
  194. package/docs/components/Button/examples/Button.md +15 -3
  195. package/docs/components/Card/examples/Card.md +15 -15
  196. package/docs/components/Check/examples/Check.md +71 -59
  197. package/docs/components/Chip/examples/Chip.md +1 -1
  198. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  199. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  200. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  201. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  202. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  203. package/docs/components/Label/examples/Label.md +1 -1
  204. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  205. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  206. package/docs/components/Menu/examples/Menu.css +8 -0
  207. package/docs/components/Menu/examples/Menu.md +90 -73
  208. package/docs/components/MenuToggle/examples/MenuToggle.md +60 -39
  209. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  210. package/docs/components/Nav/examples/Navigation.css +4 -21
  211. package/docs/components/Nav/examples/Navigation.md +99 -0
  212. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  213. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  214. package/docs/components/Popover/examples/Popover.css +4 -9
  215. package/docs/components/Radio/examples/Radio.md +63 -55
  216. package/docs/components/Select/deprecated/Select.md +184 -177
  217. package/docs/components/Table/examples/Table.css +2 -2
  218. package/docs/components/Table/examples/Table.md +2 -2
  219. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  220. package/docs/components/Tile/examples/Tile.css +1 -1
  221. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  222. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  223. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  224. package/docs/components/Truncate/examples/Truncate.md +2 -2
  225. package/docs/demos/Card/examples/Card.css +3 -3
  226. package/docs/demos/Card/examples/Card.md +26 -10
  227. package/docs/demos/CardView/examples/CardView.md +24 -20
  228. package/docs/demos/Dashboard/examples/Dashboard.md +3 -3
  229. package/docs/demos/DataList/examples/DataList.md +8 -2
  230. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -124
  231. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  232. package/docs/demos/Table/examples/Table.md +336 -252
  233. package/docs/demos/Tabs/examples/Tabs.md +28 -21
  234. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  235. package/docs/demos/Toolbar/examples/Toolbar.md +44 -44
  236. package/docs/layouts/Flex/examples/Flex.md +5 -5
  237. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  238. package/icons/pficons.mjs +1 -0
  239. package/layouts/Flex/flex.css +115 -43
  240. package/layouts/Flex/flex.scss +20 -8
  241. package/package.json +9 -5
  242. package/patternfly-addons.css +732 -972
  243. package/patternfly-base-no-globals-theme-dark-unversioned.css +37 -3
  244. package/patternfly-base-no-globals.css +37 -3
  245. package/patternfly-base-theme-dark-unversioned.css +38 -4
  246. package/patternfly-base.css +38 -4
  247. package/patternfly-no-globals.css +2748 -1960
  248. package/patternfly-theme-dark-unversioned.css +2749 -1961
  249. package/patternfly.css +2749 -1961
  250. package/patternfly.min.css +1 -1
  251. package/patternfly.min.css.map +1 -1
  252. package/sass-utilities/functions.scss +6 -0
  253. package/sass-utilities/mixins.scss +62 -2
  254. package/sass-utilities/scss-variables.scss +8 -8
  255. package/sass-utilities/themes/dark/mixins.scss +3 -1
  256. package/utilities/Accessibility/accessibility.css +12 -12
  257. package/utilities/Spacing/spacing.css +720 -960
  258. package/utilities/Spacing/spacing.scss +4 -8
  259. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  260. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -86,9 +86,9 @@
86
86
 
87
87
  &::after {
88
88
  position: absolute;
89
- top: 0;
90
- bottom: 0;
91
- left: 0;
89
+ inset-block-start: 0;
90
+ inset-block-end: 0;
91
+ inset-inline-start: 0;
92
92
  width: var(--#{$expandable-section}--m-display-lg--after--Width);
93
93
  content: "";
94
94
  background-color: var(--#{$expandable-section}--m-display-lg--after--BackgroundColor);
@@ -123,8 +123,11 @@
123
123
 
124
124
  .#{$expandable-section}__toggle {
125
125
  display: flex;
126
- padding: var(--#{$expandable-section}__toggle--PaddingTop) var(--#{$expandable-section}__toggle--PaddingRight) var(--#{$expandable-section}__toggle--PaddingBottom) var(--#{$expandable-section}__toggle--PaddingLeft);
127
- margin-top: var(--#{$expandable-section}__toggle--MarginTop);
126
+ padding-block-start: var(--#{$expandable-section}__toggle--PaddingTop);
127
+ padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
128
+ padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
129
+ padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
130
+ margin-block-start: var(--#{$expandable-section}__toggle--MarginTop);
128
131
  color: var(--#{$expandable-section}__toggle--Color);
129
132
  background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
130
133
  border: none;
@@ -144,6 +147,8 @@
144
147
  }
145
148
 
146
149
  .#{$expandable-section}__toggle-icon {
150
+ @include pf-v5-mirror-inline-on-rtl;
151
+
147
152
  min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
148
153
  color: var(--#{$expandable-section}__toggle-icon--Color);
149
154
  transition: var(--#{$expandable-section}__toggle-icon--Transition);
@@ -155,13 +160,13 @@
155
160
  }
156
161
 
157
162
  .#{$expandable-section}__toggle-text {
158
- margin-left: var(--#{$expandable-section}__toggle-text--MarginLeft);
163
+ margin-inline-start: var(--#{$expandable-section}__toggle-text--MarginLeft);
159
164
  }
160
165
 
161
166
  .#{$expandable-section}__content {
162
167
  max-width: var(--#{$expandable-section}__content--MaxWidth);
163
- padding-right: var(--#{$expandable-section}__content--PaddingRight);
164
- padding-bottom: var(--#{$expandable-section}__content--PaddingBottom);
165
- padding-left: var(--#{$expandable-section}__content--PaddingLeft);
166
- margin-top: var(--#{$expandable-section}__content--MarginTop);
168
+ padding-block-end: var(--#{$expandable-section}__content--PaddingBottom);
169
+ padding-inline-start: var(--#{$expandable-section}__content--PaddingLeft);
170
+ padding-inline-end: var(--#{$expandable-section}__content--PaddingRight);
171
+ margin-block-start: var(--#{$expandable-section}__content--MarginTop);
167
172
  }
package/components/FileUpload/file-upload.css CHANGED
@@ -16,20 +16,14 @@
16
16
  }
17
17
  .pf-v5-c-file-upload.pf-m-drag-hover::before {
18
18
  position: absolute;
19
- top: 0;
20
- right: 0;
21
- bottom: 0;
22
- left: 0;
19
+ inset: 0;
23
20
  z-index: var(--pf-v5-c-file-upload--m-drag-hover--before--ZIndex);
24
21
  content: "";
25
22
  border: var(--pf-v5-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-file-upload--m-drag-hover--before--BorderColor);
26
23
  }
27
24
  .pf-v5-c-file-upload.pf-m-drag-hover::after {
28
25
  position: absolute;
29
- top: 0;
30
- right: 0;
31
- bottom: 0;
32
- left: 0;
26
+ inset: 0;
33
27
  content: "";
34
28
  background-color: var(--pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor);
35
29
  opacity: var(--pf-v5-c-file-upload--m-drag-hover--after--Opacity);
@@ -39,10 +33,10 @@
39
33
  }
40
34
  .pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details::before {
41
35
  position: absolute;
42
- top: 0;
43
- right: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
44
- bottom: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
45
- left: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
36
+ inset-block-start: 0;
37
+ inset-block-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
38
+ inset-inline-start: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
39
+ inset-inline-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
46
40
  content: "";
47
41
  background-color: var(--pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor);
48
42
  }
@@ -58,12 +52,12 @@
58
52
  .pf-v5-c-file-upload__file-details .pf-v5-c-form-control {
59
53
  flex: 1 1 auto;
60
54
  min-height: var(--pf-v5-c-file-upload__file-details__c-form-control--MinHeight);
61
- border-top: 0;
55
+ border-block-start: 0;
62
56
  }
63
57
 
64
58
  .pf-v5-c-file-upload__file-details-spinner {
65
59
  position: absolute;
66
- top: 50%;
67
- left: 50%;
60
+ inset-block-start: 50%;
61
+ inset-inline-start: 50%;
68
62
  transform: translate(-50%, -50%);
69
63
  }
package/components/FileUpload/file-upload.scss CHANGED
@@ -27,10 +27,7 @@
27
27
  &.pf-m-drag-hover {
28
28
  &::before {
29
29
  position: absolute;
30
- top: 0;
31
- right: 0;
32
- bottom: 0;
33
- left: 0;
30
+ inset: 0;
34
31
  z-index: var(--#{$file-upload}--m-drag-hover--before--ZIndex);
35
32
  content: "";
36
33
  border: var(--#{$file-upload}--m-drag-hover--before--BorderWidth) solid var(--#{$file-upload}--m-drag-hover--before--BorderColor);
@@ -38,10 +35,7 @@
38
35
 
39
36
  &::after {
40
37
  position: absolute;
41
- top: 0;
42
- right: 0;
43
- bottom: 0;
44
- left: 0;
38
+ inset: 0;
45
39
  content: "";
46
40
  background-color: var(--#{$file-upload}--m-drag-hover--after--BackgroundColor);
47
41
  opacity: var(--#{$file-upload}--m-drag-hover--after--Opacity);
@@ -54,10 +48,10 @@
54
48
 
55
49
  &::before {
56
50
  position: absolute;
57
- top: 0;
58
- right: var(--#{$file-upload}--m-loading__file-details--before--Left);
59
- bottom: var(--#{$file-upload}--m-loading__file-details--before--Left);
60
- left: var(--#{$file-upload}--m-loading__file-details--before--Left);
51
+ inset-block-start: 0;
52
+ inset-block-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
53
+ inset-inline-start: var(--#{$file-upload}--m-loading__file-details--before--Left);
54
+ inset-inline-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
61
55
  content: "";
62
56
  background-color: var(--#{$file-upload}--m-loading__file-details--before--BackgroundColor);
63
57
  }
@@ -78,13 +72,13 @@
78
72
  .#{$form-control} {
79
73
  flex: 1 1 auto;
80
74
  min-height: var(--#{$file-upload}__file-details__c-form-control--MinHeight);
81
- border-top: 0;
75
+ border-block-start: 0;
82
76
  }
83
77
  }
84
78
 
85
79
  .#{$file-upload}__file-details-spinner {
86
80
  position: absolute;
87
- top: 50%;
88
- left: 50%;
81
+ inset-block-start: 50%;
82
+ inset-inline-start: 50%;
89
83
  transform: translate(-50%, -50%);
90
84
  }
package/components/Form/form.css CHANGED
@@ -101,7 +101,7 @@
101
101
  gap: var(--pf-v5-c-form--GridGap);
102
102
  }
103
103
  .pf-v5-c-form.pf-m-horizontal.pf-m-align-right .pf-v5-c-form__label {
104
- text-align: right;
104
+ text-align: end;
105
105
  }
106
106
  @media screen and (min-width: 768px) {
107
107
  .pf-v5-c-form.pf-m-horizontal {
@@ -113,7 +113,7 @@
113
113
  grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
114
114
  }
115
115
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label {
116
- padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
116
+ padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
117
117
  }
118
118
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-no-padding-top {
119
119
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -133,7 +133,7 @@
133
133
  grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
134
134
  }
135
135
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label {
136
- padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
136
+ padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
137
137
  }
138
138
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-no-padding-top {
139
139
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -153,7 +153,7 @@
153
153
  grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
154
154
  }
155
155
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label {
156
- padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
156
+ padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
157
157
  }
158
158
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-no-padding-top {
159
159
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -173,7 +173,7 @@
173
173
  grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
174
174
  }
175
175
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label {
176
- padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
176
+ padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
177
177
  }
178
178
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-no-padding-top {
179
179
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -193,7 +193,7 @@
193
193
  grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
194
194
  }
195
195
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label {
196
- padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
196
+ padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
197
197
  }
198
198
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-no-padding-top {
199
199
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -213,7 +213,7 @@
213
213
  grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
214
214
  }
215
215
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label {
216
- padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
216
+ padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
217
217
  }
218
218
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-no-padding-top {
219
219
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -233,7 +233,7 @@
233
233
  grid-column-gap: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnGap);
234
234
  }
235
235
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label {
236
- padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
236
+ padding-block-start: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
237
237
  }
238
238
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-no-padding-top {
239
239
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
@@ -248,7 +248,7 @@
248
248
  }
249
249
 
250
250
  .pf-v5-c-form__group.pf-m-action {
251
- margin-top: var(--pf-v5-c-form__group--m-action--MarginTop);
251
+ margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
252
252
  overflow: hidden;
253
253
  }
254
254
 
@@ -257,18 +257,18 @@
257
257
  gap: var(--pf-v5-c-form__section--Gap);
258
258
  }
259
259
  .pf-v5-c-form__section + .pf-v5-c-form__group:not(.pf-m-action), .pf-v5-c-form__section:not(:first-child) {
260
- margin-top: var(--pf-v5-c-form__section--MarginTop);
260
+ margin-block-start: var(--pf-v5-c-form__section--MarginTop);
261
261
  }
262
262
 
263
263
  .pf-v5-c-form__section-title {
264
- margin-bottom: var(--pf-v5-c-form__section-title--MarginBottom);
264
+ margin-block-end: var(--pf-v5-c-form__section-title--MarginBottom);
265
265
  font-size: var(--pf-v5-c-form__section-title--FontSize);
266
266
  font-weight: var(--pf-v5-c-form__section-title--FontWeight);
267
267
  }
268
268
 
269
269
  .pf-v5-c-form__group-label {
270
270
  --pf-v5-c-form__helper-text--MarginTop: 0;
271
- padding-bottom: var(--pf-v5-c-form__group-label--PaddingBottom);
271
+ padding-block-end: var(--pf-v5-c-form__group-label--PaddingBottom);
272
272
  }
273
273
  .pf-v5-c-form__group-label.pf-m-info {
274
274
  display: flex;
@@ -280,7 +280,7 @@
280
280
  }
281
281
 
282
282
  .pf-v5-c-form__group-label-info {
283
- margin-left: var(--pf-v5-c-form__group-label-info--MarginLeft);
283
+ margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
284
284
  font-size: var(--pf-v5-c-form__group-label-info--FontSize);
285
285
  }
286
286
 
@@ -306,20 +306,20 @@
306
306
  }
307
307
 
308
308
  .pf-v5-c-form__label-required {
309
- margin-left: var(--pf-v5-c-form__label-required--MarginLeft);
309
+ margin-inline-start: var(--pf-v5-c-form__label-required--MarginLeft);
310
310
  font-size: var(--pf-v5-c-form__label-required--FontSize);
311
311
  color: var(--pf-v5-c-form__label-required--Color);
312
312
  }
313
313
 
314
314
  .pf-v5-c-form__group-label-help {
315
- padding-top: var(--pf-v5-c-form__group-label-help--PaddingTop);
316
- padding-right: var(--pf-v5-c-form__group-label-help--PaddingRight);
317
- padding-bottom: var(--pf-v5-c-form__group-label-help--PaddingBottom);
318
- padding-left: var(--pf-v5-c-form__group-label-help--PaddingLeft);
319
- margin-top: var(--pf-v5-c-form__group-label-help--MarginTop);
320
- margin-right: var(--pf-v5-c-form__group-label-help--MarginRight);
321
- margin-bottom: var(--pf-v5-c-form__group-label-help--MarginBottom);
322
- margin-left: var(--pf-v5-c-form__group-label-help--MarginLeft);
315
+ padding-block-start: var(--pf-v5-c-form__group-label-help--PaddingTop);
316
+ padding-block-end: var(--pf-v5-c-form__group-label-help--PaddingBottom);
317
+ padding-inline-start: var(--pf-v5-c-form__group-label-help--PaddingLeft);
318
+ padding-inline-end: var(--pf-v5-c-form__group-label-help--PaddingRight);
319
+ margin-block-start: var(--pf-v5-c-form__group-label-help--MarginTop);
320
+ margin-block-end: var(--pf-v5-c-form__group-label-help--MarginBottom);
321
+ margin-inline-start: var(--pf-v5-c-form__group-label-help--MarginLeft);
322
+ margin-inline-end: var(--pf-v5-c-form__group-label-help--MarginRight);
323
323
  font-size: var(--pf-v5-c-form__group-label-help--FontSize);
324
324
  line-height: 1;
325
325
  color: var(--pf-v5-c-form__group-label-help--Color);
@@ -340,7 +340,7 @@
340
340
  flex-flow: row wrap;
341
341
  }
342
342
  .pf-v5-c-form__group-control.pf-m-inline > * {
343
- margin-right: var(--pf-v5-c-form__group-control--m-inline--child--MarginRight);
343
+ margin-inline-end: var(--pf-v5-c-form__group-control--m-inline--child--MarginRight);
344
344
  }
345
345
  .pf-v5-c-form__group-control.pf-m-inline > :last-child {
346
346
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: 0;
@@ -352,11 +352,11 @@
352
352
  }
353
353
  .pf-v5-c-form__group-control .pf-v5-c-form__helper-text:first-child {
354
354
  --pf-v5-c-form__helper-text--MarginTop: 0;
355
- margin-bottom: var(--pf-v5-c-form__group-control__helper-text--MarginBottom);
355
+ margin-block-end: var(--pf-v5-c-form__group-control__helper-text--MarginBottom);
356
356
  }
357
357
 
358
358
  .pf-v5-c-form__helper-text {
359
- margin-top: var(--pf-v5-c-form__helper-text--MarginTop);
359
+ margin-block-start: var(--pf-v5-c-form__helper-text--MarginTop);
360
360
  font-size: var(--pf-v5-c-form__helper-text--FontSize);
361
361
  color: var(--pf-v5-c-form__helper-text--Color);
362
362
  }
@@ -378,7 +378,7 @@
378
378
  }
379
379
 
380
380
  .pf-v5-c-form__helper-text-icon {
381
- margin-right: var(--pf-v5-c-form__helper-text-icon--MarginRight);
381
+ margin-inline-end: var(--pf-v5-c-form__helper-text-icon--MarginRight);
382
382
  font-size: var(--pf-v5-c-form__helper-text-icon--FontSize);
383
383
  }
384
384
 
@@ -389,24 +389,24 @@
389
389
  .pf-v5-c-form__actions {
390
390
  display: flex;
391
391
  flex-wrap: wrap;
392
- margin-top: var(--pf-v5-c-form__actions--MarginTop);
393
- margin-right: var(--pf-v5-c-form__actions--MarginRight);
394
- margin-bottom: var(--pf-v5-c-form__actions--MarginBottom);
395
- margin-left: var(--pf-v5-c-form__actions--MarginLeft);
392
+ margin-block-start: var(--pf-v5-c-form__actions--MarginTop);
393
+ margin-block-end: var(--pf-v5-c-form__actions--MarginBottom);
394
+ margin-inline-start: var(--pf-v5-c-form__actions--MarginLeft);
395
+ margin-inline-end: var(--pf-v5-c-form__actions--MarginRight);
396
396
  }
397
397
  .pf-v5-c-form__actions > * {
398
- margin-top: var(--pf-v5-c-form__actions--child--MarginTop);
399
- margin-right: var(--pf-v5-c-form__actions--child--MarginRight);
400
- margin-bottom: var(--pf-v5-c-form__actions--child--MarginBottom);
401
- margin-left: var(--pf-v5-c-form__actions--child--MarginLeft);
398
+ margin-block-start: var(--pf-v5-c-form__actions--child--MarginTop);
399
+ margin-block-end: var(--pf-v5-c-form__actions--child--MarginBottom);
400
+ margin-inline-start: var(--pf-v5-c-form__actions--child--MarginLeft);
401
+ margin-inline-end: var(--pf-v5-c-form__actions--child--MarginRight);
402
402
  }
403
403
 
404
404
  .pf-v5-c-form__field-group {
405
405
  --pf-v5-c-form__field-group--BorderTopWidth: var(--pf-v5-c-form__field-group--border-width-base);
406
406
  display: grid;
407
407
  grid-template-columns: minmax(var(--pf-v5-c-form__field-group--GridTemplateColumns--toggle), max-content) 1fr;
408
- border-top: var(--pf-v5-c-form__field-group--BorderTopWidth) solid var(--pf-v5-c-form__field-group--BorderTopColor);
409
- border-bottom: var(--pf-v5-c-form__field-group--BorderBottomWidth) solid var(--pf-v5-c-form__field-group--BorderBottomColor);
408
+ border-block-start: var(--pf-v5-c-form__field-group--BorderTopWidth) solid var(--pf-v5-c-form__field-group--BorderTopColor);
409
+ border-block-end: var(--pf-v5-c-form__field-group--BorderBottomWidth) solid var(--pf-v5-c-form__field-group--BorderBottomColor);
410
410
  }
411
411
  .pf-v5-c-form__field-group:last-child {
412
412
  --pf-v5-c-form__field-group--BorderBottomWidth: 0;
@@ -415,7 +415,7 @@
415
415
  --pf-v5-c-form__field-group--BorderTopWidth: 0;
416
416
  }
417
417
  .pf-v5-c-form__field-group + .pf-v5-c-form__field-group {
418
- margin-top: var(--pf-v5-c-form__field-group--field-group--MarginTop);
418
+ margin-block-start: var(--pf-v5-c-form__field-group--field-group--MarginTop);
419
419
  }
420
420
  .pf-v5-c-form__field-group .pf-v5-c-form__field-group {
421
421
  --pf-v5-c-form__field-group-body--GridColumn: var(--pf-v5-c-form__field-group__field-group__field-group-body--GridColumn);
@@ -434,16 +434,16 @@
434
434
  .pf-v5-c-form__field-group-toggle {
435
435
  grid-row: 1/2;
436
436
  grid-column: 1/2;
437
- padding-top: var(--pf-v5-c-form__field-group-toggle--PaddingTop);
438
- padding-right: var(--pf-v5-c-form__field-group-toggle--PaddingRight);
437
+ padding-block-start: var(--pf-v5-c-form__field-group-toggle--PaddingTop);
438
+ padding-inline-end: var(--pf-v5-c-form__field-group-toggle--PaddingRight);
439
439
  }
440
440
  .pf-v5-c-form__field-group-toggle + .pf-v5-c-form__field-group-header {
441
441
  --pf-v5-c-form__field-group-header--GridColumn: var(--pf-v5-c-form__field-group-toggle--field-group-header--GridColumn);
442
442
  }
443
443
 
444
444
  .pf-v5-c-form__field-group-toggle-button {
445
- margin-top: var(--pf-v5-c-form__field-group-toggle-button--MarginTop);
446
- margin-bottom: var(--pf-v5-c-form__field-group-toggle-button--MarginBottom);
445
+ margin-block-start: var(--pf-v5-c-form__field-group-toggle-button--MarginTop);
446
+ margin-block-end: var(--pf-v5-c-form__field-group-toggle-button--MarginBottom);
447
447
  }
448
448
 
449
449
  .pf-v5-c-form__field-group-toggle-icon {
@@ -453,14 +453,17 @@
453
453
  transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
454
454
  transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
455
455
  }
456
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
457
+ scale: -1 1;
458
+ }
456
459
 
457
460
  .pf-v5-c-form__field-group-header {
458
461
  display: flex;
459
462
  grid-row: 1/2;
460
463
  grid-column: var(--pf-v5-c-form__field-group-header--GridColumn);
461
464
  align-items: flex-start;
462
- padding-top: var(--pf-v5-c-form__field-group-header--PaddingTop);
463
- padding-bottom: var(--pf-v5-c-form__field-group-header--PaddingBottom);
465
+ padding-block-start: var(--pf-v5-c-form__field-group-header--PaddingTop);
466
+ padding-block-end: var(--pf-v5-c-form__field-group-header--PaddingBottom);
464
467
  }
465
468
 
466
469
  .pf-v5-c-form__field-group-header-main {
@@ -478,14 +481,14 @@
478
481
  }
479
482
 
480
483
  .pf-v5-c-form__field-group-header-description {
481
- margin-top: var(--pf-v5-c-form__field-group-header-description--MarginTop);
484
+ margin-block-start: var(--pf-v5-c-form__field-group-header-description--MarginTop);
482
485
  color: var(--pf-v5-c-form__field-group-header-description--Color);
483
486
  }
484
487
 
485
488
  .pf-v5-c-form__field-group-header-actions {
486
- margin-top: var(--pf-v5-c-form__field-group-header-actions--MarginTop);
487
- margin-bottom: var(--pf-v5-c-form__field-group-header-actions--MarginBottom);
488
- margin-left: var(--pf-v5-c-form__field-group-header-actions--MarginLeft);
489
+ margin-block-start: var(--pf-v5-c-form__field-group-header-actions--MarginTop);
490
+ margin-block-end: var(--pf-v5-c-form__field-group-header-actions--MarginBottom);
491
+ margin-inline-start: var(--pf-v5-c-form__field-group-header-actions--MarginLeft);
489
492
  white-space: nowrap;
490
493
  }
491
494
 
@@ -493,15 +496,15 @@
493
496
  display: grid;
494
497
  grid-column: var(--pf-v5-c-form__field-group-body--GridColumn);
495
498
  gap: var(--pf-v5-c-form__field-group-body--Gap);
496
- padding-top: var(--pf-v5-c-form__field-group-body--PaddingTop);
497
- padding-bottom: var(--pf-v5-c-form__field-group-body--PaddingBottom);
499
+ padding-block-start: var(--pf-v5-c-form__field-group-body--PaddingTop);
500
+ padding-block-end: var(--pf-v5-c-form__field-group-body--PaddingBottom);
498
501
  }
499
502
  .pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:first-child {
500
503
  --pf-v5-c-form__field-group-toggle--PaddingTop: 0;
501
504
  --pf-v5-c-form__field-group-header--PaddingTop: 0;
502
505
  }
503
506
  .pf-v5-c-form__field-group-body > .pf-v5-c-form__field-group:last-child {
504
- margin-bottom: var(--pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom);
507
+ margin-block-end: var(--pf-v5-c-form__field-group-body__field-group--last-child--MarginBottom);
505
508
  }
506
509
 
507
510
  :where(.pf-v5-theme-dark) .pf-v5-c-form {