@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/FormControl/form-control.css CHANGED
@@ -1,5 +1,4 @@
1
- :root,
2
- .pf-v6-c-form-control {
1
+ :where(:root, .pf-v6-c-form-control) {
3
2
  --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--sm);
4
3
  --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
5
4
  --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
@@ -16,10 +15,10 @@
16
15
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17
16
  --pf-v6-c-form-control--Width: 100%;
18
17
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
19
- --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
20
- --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
21
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--inset--base);
22
- --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control--inset--base);
18
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
19
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
20
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
21
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
23
22
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
24
23
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
25
24
  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
@@ -41,37 +40,37 @@
41
40
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
42
41
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
43
42
  --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
44
- --pf-v6-c-form-control--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
43
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
45
44
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
46
45
  --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
47
- --pf-v6-c-form-control--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
46
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
48
47
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
49
48
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
50
- --pf-v6-c-form-control--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
49
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
51
50
  --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
52
- --pf-v6-c-form-control--m-icon--PaddingRight: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
51
+ --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
53
52
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
54
53
  --pf-v6-c-form-control--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
55
- --pf-v6-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
56
- --pf-v6-c-form-control__select--PaddingRight: var(--pf-t--global--spacer--md);
57
- --pf-v6-c-form-control__select--PaddingLeft: var(--pf-t--global--spacer--md);
58
- --pf-v6-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
59
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
60
- --pf-v6-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
54
+ --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
55
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-t--global--spacer--md);
56
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-t--global--spacer--md);
57
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
58
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
59
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
61
60
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
62
61
  --pf-v6-c-form-control--textarea--Height: auto;
63
- --pf-v6-c-form-control__icon--PaddingTop: var(--pf-t--global--spacer--sm);
62
+ --pf-v6-c-form-control__icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
64
63
  --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
65
64
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
66
65
  --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
67
66
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
68
67
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
69
68
  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--sm);
70
- --pf-v6-c-form-control__utilities--PaddingTop: var(--pf-v6-c-form-control--inset--base);
71
- --pf-v6-c-form-control__utilities--PaddingRight: var(--pf-v6-c-form-control--inset--base);
72
- --pf-v6-c-form-control__toggle-icon--PaddingTop: var(--pf-t--global--spacer--sm);
73
- --pf-v6-c-form-control__toggle-icon--PaddingRight: var(--pf-v6-c-form-control--inset--base);
74
- --pf-v6-c-form-control__toggle-icon--PaddingLeft: var(--pf-v6-c-form-control--inset--base);
69
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--inset--base);
70
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
71
+ --pf-v6-c-form-control__toggle-icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
72
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
73
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
75
74
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
76
75
  --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
77
76
  }
@@ -108,10 +107,10 @@
108
107
  .pf-v6-c-form-control > :is(input, select, textarea) {
109
108
  grid-row: 1/2;
110
109
  grid-column: 1/-1;
111
- padding-block-start: var(--pf-v6-c-form-control--PaddingTop);
112
- padding-block-end: var(--pf-v6-c-form-control--PaddingBottom);
113
- padding-inline-start: var(--pf-v6-c-form-control--PaddingLeft);
114
- padding-inline-end: var(--pf-v6-c-form-control--PaddingRight);
110
+ padding-block-start: var(--pf-v6-c-form-control--PaddingBlockStart);
111
+ padding-block-end: var(--pf-v6-c-form-control--PaddingBlockEnd);
112
+ padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
113
+ padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
115
114
  color: var(--pf-v6-c-form-control--Color);
116
115
  background-color: transparent;
117
116
  border: none;
@@ -165,47 +164,47 @@
165
164
  cursor: not-allowed;
166
165
  }
167
166
  .pf-v6-c-form-control.pf-m-error {
168
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-error--PaddingRight);
167
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
169
168
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
170
169
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
171
- --pf-v6-c-form-control__select--PaddingRight: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingRight);
170
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
172
171
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
173
172
  }
174
173
  .pf-v6-c-form-control.pf-m-error.pf-m-icon {
175
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-icon--icon--PaddingRight);
174
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
176
175
  }
177
176
  .pf-v6-c-form-control.pf-m-success {
178
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-success--PaddingRight);
177
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
179
178
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
180
179
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
181
- --pf-v6-c-form-control__select--PaddingRight: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingRight);
180
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
182
181
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
183
182
  }
184
183
  .pf-v6-c-form-control.pf-m-success.pf-m-icon {
185
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-icon--icon--PaddingRight);
184
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
186
185
  }
187
186
  .pf-v6-c-form-control.pf-m-warning {
188
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-warning--PaddingRight);
187
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
189
188
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
190
189
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
191
- --pf-v6-c-form-control__select--PaddingRight: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingRight);
190
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
192
191
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
193
192
  }
194
193
  .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
195
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-icon--icon--PaddingRight);
194
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
196
195
  }
197
196
  .pf-v6-c-form-control.pf-m-icon {
198
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--m-icon--PaddingRight);
197
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
199
198
  }
200
199
  .pf-v6-c-form-control > select {
201
- --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control__select--PaddingRight);
202
- --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control__select--PaddingLeft);
200
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
201
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
203
202
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
204
203
  }
205
204
  @-moz-document url-prefix() {
206
205
  .pf-v6-c-form-control > select {
207
- --pf-v6-c-form-control--PaddingRight: calc(var(--pf-v6-c-form-control__select--PaddingRight) - 1px);
208
- --pf-v6-c-form-control--PaddingLeft: calc(var(--pf-v6-c-form-control__select--PaddingLeft) - 4px);
206
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
207
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
209
208
  }
210
209
  }
211
210
  .pf-v6-c-form-control.pf-m-placeholder > select {
@@ -237,7 +236,7 @@
237
236
  }
238
237
 
239
238
  .pf-v6-c-form-control__icon {
240
- padding-block-start: var(--pf-v6-c-form-control__icon--PaddingTop);
239
+ padding-block-start: var(--pf-v6-c-form-control__icon--PaddingBlockStart);
241
240
  color: var(--pf-v6-c-form-control__icon--Color);
242
241
  }
243
242
  .pf-v6-c-form-control__icon.pf-m-status {
@@ -247,9 +246,9 @@
247
246
  .pf-v6-c-form-control__toggle-icon {
248
247
  grid-row: 1/2;
249
248
  grid-column: 3;
250
- padding-block-start: var(--pf-v6-c-form-control__toggle-icon--PaddingTop);
251
- padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingLeft);
252
- padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingRight);
249
+ padding-block-start: var(--pf-v6-c-form-control__toggle-icon--PaddingBlockStart);
250
+ padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
251
+ padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
253
252
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
254
253
  pointer-events: none;
255
254
  }
@@ -260,10 +259,10 @@
260
259
  grid-row: 1/2;
261
260
  grid-column: 2;
262
261
  gap: var(--pf-v6-c-form-control__utilities--Gap);
263
- padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingRight);
262
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
264
263
  pointer-events: none;
265
264
  }
266
265
 
267
266
  select ~ .pf-v6-c-form-control__utilities {
268
- --pf-v6-c-form-control__utilities--PaddingRight: 0;
267
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
269
268
  }
package/css/components/HelperText/helper-text.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ :where(:root, .pf-v6-c-helper-text) {
2
2
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
3
3
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
4
4
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -19,7 +19,7 @@
19
19
  --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
20
20
  --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
21
21
  --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
22
- --pf-v6-c-helper-text__item-icon--MarginRight: var(--pf-t--global--spacer--xs);
22
+ --pf-v6-c-helper-text__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
23
23
  }
24
24
 
25
25
  .pf-v6-c-helper-text {
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  .pf-v6-c-helper-text__item-icon {
65
- margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginRight);
65
+ margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginInlineEnd);
66
66
  color: var(--pf-v6-c-helper-text__item-icon--Color);
67
67
  }
68
68
 
package/css/components/Hint/hint.css CHANGED
@@ -1,9 +1,9 @@
1
- :root {
1
+ :where(:root, .pf-v6-c-hint) {
2
2
  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
4
- --pf-v6-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
5
- --pf-v6-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
6
- --pf-v6-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
3
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
4
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
5
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
6
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
7
7
  --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8
8
  --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
9
9
  --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
@@ -14,20 +14,20 @@
14
14
  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
15
15
  --pf-v6-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16
16
  --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
17
- --pf-v6-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
18
- --pf-v6-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
19
- --pf-v6-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
20
- --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
17
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
18
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
19
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
20
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
21
21
  }
22
22
 
23
23
  .pf-v6-c-hint {
24
24
  display: grid;
25
25
  grid-template-columns: 1fr auto;
26
26
  grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
27
- padding-block-start: var(--pf-v6-c-hint--PaddingTop);
28
- padding-block-end: var(--pf-v6-c-hint--PaddingBottom);
29
- padding-inline-start: var(--pf-v6-c-hint--PaddingLeft);
30
- padding-inline-end: var(--pf-v6-c-hint--PaddingRight);
27
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
28
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
29
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
30
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
31
31
  color: var(--pf-v6-c-hint--Color);
32
32
  background-color: var(--pf-v6-c-hint--BackgroundColor);
33
33
  border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
@@ -43,11 +43,12 @@
43
43
  grid-row: 1;
44
44
  grid-column: 2;
45
45
  grid-auto-flow: column;
46
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginLeft);
46
+ align-self: start;
47
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
47
48
  text-align: end;
48
49
  }
49
- .pf-v6-c-hint__actions .pf-v6-c-dropdown .pf-v6-c-dropdown__toggle.pf-m-plain {
50
- margin-block-start: var(--pf-v6-c-hint__actions--c-dropdown--MarginTop);
50
+ .pf-v6-c-hint__actions .pf-v6-c-menu-toggle.pf-m-plain {
51
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
51
52
  }
52
53
  .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
53
54
  grid-column: 1;
@@ -68,8 +69,8 @@
68
69
 
69
70
  .pf-v6-c-hint__footer {
70
71
  grid-column: 1/-1;
71
- margin-block-start: var(--pf-v6-c-hint__footer--MarginTop);
72
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
72
73
  }
73
74
  .pf-v6-c-hint__footer > :not(:last-child) {
74
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginRight);
75
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
75
76
  }
package/css/components/Hint/hint.d.ts CHANGED
@@ -1,13 +1,12 @@
1
1
  import './hint.css';
2
2
  declare const _default: {
3
3
  "button": "pf-v6-c-button",
4
- "dropdown": "pf-v6-c-dropdown",
5
- "dropdownToggle": "pf-v6-c-dropdown__toggle",
6
4
  "hint": "pf-v6-c-hint",
7
5
  "hintActions": "pf-v6-c-hint__actions",
8
6
  "hintBody": "pf-v6-c-hint__body",
9
7
  "hintFooter": "pf-v6-c-hint__footer",
10
8
  "hintTitle": "pf-v6-c-hint__title",
9
+ "menuToggle": "pf-v6-c-menu-toggle",
11
10
  "modifiers": {
12
11
  "link": "pf-m-link",
13
12
  "inline": "pf-m-inline",
package/css/components/Hint/hint.js CHANGED
@@ -3,13 +3,12 @@ exports.__esModule = true;
3
3
  require('./hint.css');
4
4
  exports.default = {
5
5
  "button": "pf-v6-c-button",
6
- "dropdown": "pf-v6-c-dropdown",
7
- "dropdownToggle": "pf-v6-c-dropdown__toggle",
8
6
  "hint": "pf-v6-c-hint",
9
7
  "hintActions": "pf-v6-c-hint__actions",
10
8
  "hintBody": "pf-v6-c-hint__body",
11
9
  "hintFooter": "pf-v6-c-hint__footer",
12
10
  "hintTitle": "pf-v6-c-hint__title",
11
+ "menuToggle": "pf-v6-c-menu-toggle",
13
12
  "modifiers": {
14
13
  "link": "pf-m-link",
15
14
  "inline": "pf-m-inline",
package/css/components/Hint/hint.mjs CHANGED
@@ -1,13 +1,12 @@
1
1
  import './hint.css';
2
2
  export default {
3
3
  "button": "pf-v6-c-button",
4
- "dropdown": "pf-v6-c-dropdown",
5
- "dropdownToggle": "pf-v6-c-dropdown__toggle",
6
4
  "hint": "pf-v6-c-hint",
7
5
  "hintActions": "pf-v6-c-hint__actions",
8
6
  "hintBody": "pf-v6-c-hint__body",
9
7
  "hintFooter": "pf-v6-c-hint__footer",
10
8
  "hintTitle": "pf-v6-c-hint__title",
9
+ "menuToggle": "pf-v6-c-menu-toggle",
11
10
  "modifiers": {
12
11
  "link": "pf-m-link",
13
12
  "inline": "pf-m-inline",
package/css/components/Icon/icon.css CHANGED
@@ -1,5 +1,4 @@
1
- :root,
2
- :where(.pf-v6-c-icon) {
1
+ :where(:root, .pf-v6-c-icon) {
3
2
  --pf-v6-c-icon--Width: 1em;
4
3
  --pf-v6-c-icon--Height: 1em;
5
4
  --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
package/css/components/InlineEdit/inline-edit.css CHANGED
@@ -1,10 +1,9 @@
1
- :where(:root),
2
- :where(.pf-v6-c-inline-edit) {
3
- --pf-v6-c-inline-edit__group--item--MarginRight: var(--pf-t--global--spacer--sm);
1
+ :where(:root, .pf-v6-c-inline-edit) {
2
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
4
3
  --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
5
4
  --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
6
- --pf-v6-c-inline-edit__action--m-icon-group--item--MarginRight: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-inline-edit__group--m-footer--MarginTop: var(--pf-t--global--spacer--xl);
5
+ --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
6
+ --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
8
7
  --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
9
8
  }
10
9
 
@@ -13,20 +12,20 @@
13
12
  align-items: baseline;
14
13
  }
15
14
  .pf-v6-c-inline-edit__group > * {
16
- margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginRight);
15
+ margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginInlineEnd);
17
16
  }
18
17
  .pf-v6-c-inline-edit__group.pf-m-icon-group {
19
- --pf-v6-c-inline-edit__group--item--MarginRight: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginRight);
18
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd);
20
19
  }
21
20
  .pf-v6-c-inline-edit__group.pf-m-footer {
22
- margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginTop);
21
+ margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart);
23
22
  }
24
23
  .pf-v6-c-inline-edit__group.pf-m-column {
25
- --pf-v6-c-inline-edit__group--item--MarginRight: 0;
24
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
26
25
  flex-direction: column;
27
26
  }
28
27
  .pf-v6-c-inline-edit__group > :last-child {
29
- --pf-v6-c-inline-edit__group--item--MarginRight: 0;
28
+ --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
30
29
  }
31
30
 
32
31
  .pf-v6-c-inline-edit__input {
@@ -70,8 +69,8 @@
70
69
  }
71
70
 
72
71
  .pf-v6-c-inline-edit__label + .pf-v6-c-inline-edit__action.pf-m-enable > .pf-v6-c-button {
73
- margin-block-start: calc(var(--pf-v6-c-button--PaddingTop) * -1);
74
- margin-block-end: calc(var(--pf-v6-c-button--PaddingBottom) * -1);
72
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
73
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
75
74
  }
76
75
 
77
76
  .pf-v6-c-inline-edit__label.pf-m-bold {
package/css/components/InputGroup/input-group.css CHANGED
@@ -1,20 +1,19 @@
1
- :root,
2
- .pf-v6-c-input-group {
1
+ :where(:root, .pf-v6-c-input-group) {
3
2
  --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--xs);
4
3
  --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
5
4
  --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
6
5
  --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
7
6
  --pf-v6-c-input-group__item--BackgroundColor: transparent;
8
7
  --pf-v6-c-input-group__item--AlignItems: start;
9
- --pf-v6-c-input-group__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
10
- --pf-v6-c-input-group__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
8
+ --pf-v6-c-input-group__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9
+ --pf-v6-c-input-group__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11
10
  --pf-v6-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12
11
  --pf-v6-c-input-group__item--m-box--BorderWidth: var(--pf-v6-c-input-group__item--BorderWidth--base);
13
12
  --pf-v6-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
14
- --pf-v6-c-input-group__item--m-box--BorderTopColor: var(--pf-v6-c-input-group__item--BorderColor--base);
15
- --pf-v6-c-input-group__item--m-box--BorderRightColor: var(--pf-v6-c-input-group__item--BorderColor--base);
16
- --pf-v6-c-input-group__item--m-box--BorderBottomColor: var(--pf-v6-c-input-group__item--BorderColor--base);
17
- --pf-v6-c-input-group__item--m-box--BorderLeftColor: var(--pf-v6-c-input-group__item--BorderColor--base);
13
+ --pf-v6-c-input-group__item--m-box--BorderBlockStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
14
+ --pf-v6-c-input-group__item--m-box--BorderInlineEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
15
+ --pf-v6-c-input-group__item--m-box--BorderBlockEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
16
+ --pf-v6-c-input-group__item--m-box--BorderInlineStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
18
17
  --pf-v6-c-input-group__item--m-plain--BackgroundColor: transparent;
19
18
  --pf-v6-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
20
19
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
@@ -35,20 +34,20 @@
35
34
  min-width: var(--pf-v6-c-input-group__item--MinWidth, revert);
36
35
  max-width: var(--pf-v6-c-input-group__item--MaxWidth, revert);
37
36
  background-color: var(--pf-v6-c-input-group__item--BackgroundColor);
38
- border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderTopColor);
39
- border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBottomColor);
40
- border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderLeftColor);
41
- border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderRightColor);
37
+ border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
38
+ border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
39
+ border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
40
+ border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
42
41
  }
43
42
  .pf-v6-c-input-group__item.pf-m-box {
44
43
  --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-box--BackgroundColor);
45
- padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingLeft);
46
- padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingRight);
44
+ padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingInlineStart);
45
+ padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingInlineEnd);
47
46
  border: var(--pf-v6-c-input-group__item--m-box--BorderWidth) solid;
48
- border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderTopColor);
49
- border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBottomColor);
50
- border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderLeftColor);
51
- border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderRightColor);
47
+ border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
48
+ border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
49
+ border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
50
+ border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
52
51
  border-radius: var(--pf-v6-c-input-group__item--m-box--BorderRadius);
53
52
  }
54
53
  .pf-v6-c-input-group__item.pf-m-plain {