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

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 +6 -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 +169 -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 +94 -80
  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 +23396 -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
@@ -1,4 +1,4 @@
1
- :root {
1
+ :where(:root, .pf-v6-c-modal-box) {
2
2
  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
3
3
  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
4
4
  --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
@@ -11,7 +11,7 @@
11
11
  --pf-v6-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl));
12
12
  --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm);
13
13
  --pf-v6-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
14
- --pf-v6-c-modal-box--m-align-top--Top: var(--pf-v6-c-modal-box--m-align-top--spacer);
14
+ --pf-v6-c-modal-box--m-align-top--InsetBlockStart: var(--pf-v6-c-modal-box--m-align-top--spacer);
15
15
  --pf-v6-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v6-c-modal-box--m-align-top--spacer));
16
16
  --pf-v6-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
17
17
  --pf-v6-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
@@ -19,36 +19,36 @@
19
19
  --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
20
20
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
21
21
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
22
- --pf-v6-c-modal-box__header--PaddingTop: var(--pf-t--global--spacer--lg);
23
- --pf-v6-c-modal-box__header--PaddingRight: var(--pf-t--global--spacer--lg);
24
- --pf-v6-c-modal-box__header--PaddingLeft: var(--pf-t--global--spacer--lg);
22
+ --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
23
+ --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
24
+ --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25
25
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
26
26
  --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
27
27
  --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
28
28
  --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
29
29
  --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
30
- --pf-v6-c-modal-box__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
30
+ --pf-v6-c-modal-box__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
31
31
  --pf-v6-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
32
32
  --pf-v6-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
33
33
  --pf-v6-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
34
34
  --pf-v6-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body));
35
- --pf-v6-c-modal-box__body--PaddingTop: var(--pf-t--global--spacer--lg);
36
- --pf-v6-c-modal-box__body--PaddingRight: var(--pf-t--global--spacer--lg);
37
- --pf-v6-c-modal-box__body--PaddingLeft: var(--pf-t--global--spacer--lg);
38
- --pf-v6-c-modal-box__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
39
- --pf-v6-c-modal-box__header--body--PaddingTop: var(--pf-t--global--spacer--md);
40
- --pf-v6-c-modal-box__close--Top: var(--pf-v6-c-modal-box__header--PaddingTop);
41
- --pf-v6-c-modal-box__close--Right: var(--pf-v6-c-modal-box__header--PaddingRight);
42
- --pf-v6-c-modal-box__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
43
- --pf-v6-c-modal-box__footer--PaddingTop: var(--pf-t--global--spacer--lg);
44
- --pf-v6-c-modal-box__footer--PaddingRight: var(--pf-t--global--spacer--lg);
45
- --pf-v6-c-modal-box__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
46
- --pf-v6-c-modal-box__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
47
- --pf-v6-c-modal-box__footer--c-button--MarginRight: var(--pf-t--global--spacer--md);
48
- --pf-v6-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginRight) / 2);
35
+ --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
36
+ --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
37
+ --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
38
+ --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
39
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
40
+ --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
41
+ --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
42
+ --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
43
+ --pf-v6-c-modal-box__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
44
+ --pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
45
+ --pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
46
+ --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
47
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
48
+ --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
49
49
  }
50
50
  @media (min-width: 1200px) {
51
- :root {
51
+ :where(:root, .pf-v6-c-modal-box) {
52
52
  --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
53
53
  }
54
54
  }
@@ -76,7 +76,7 @@
76
76
  --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-lg--lg--MaxWidth);
77
77
  }
78
78
  .pf-v6-c-modal-box.pf-m-align-top {
79
- inset-block-start: var(--pf-v6-c-modal-box--m-align-top--Top);
79
+ inset-block-start: var(--pf-v6-c-modal-box--m-align-top--InsetBlockStart);
80
80
  align-self: flex-start;
81
81
  max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth);
82
82
  max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight);
@@ -103,11 +103,11 @@
103
103
 
104
104
  .pf-v6-c-modal-box__close {
105
105
  position: absolute;
106
- inset-block-start: var(--pf-v6-c-modal-box__close--Top);
107
- inset-inline-end: var(--pf-v6-c-modal-box__close--Right);
106
+ inset-block-start: var(--pf-v6-c-modal-box__close--InsetBlockStart);
107
+ inset-inline-end: var(--pf-v6-c-modal-box__close--InsetInlineEnd);
108
108
  }
109
109
  .pf-v6-c-modal-box__close + * {
110
- margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginRight);
110
+ margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginInlineEnd);
111
111
  }
112
112
 
113
113
  .pf-v6-c-modal-box__header {
@@ -115,16 +115,16 @@
115
115
  flex-direction: column;
116
116
  flex-shrink: 0;
117
117
  gap: var(--pf-v6-c-modal-box__header--Gap);
118
- padding-block-start: var(--pf-v6-c-modal-box__header--PaddingTop);
119
- padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingLeft);
120
- padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingRight);
118
+ padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
119
+ padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
120
+ padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
121
121
  }
122
122
  .pf-v6-c-modal-box__header.pf-m-help {
123
123
  display: flex;
124
124
  flex-direction: row;
125
125
  }
126
126
  .pf-v6-c-modal-box__header + .pf-v6-c-modal-box__body {
127
- --pf-v6-c-modal-box__body--PaddingTop: var(--pf-v6-c-modal-box__header--body--PaddingTop);
127
+ --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-v6-c-modal-box__header--body--PaddingBlockStart);
128
128
  }
129
129
 
130
130
  .pf-v6-c-modal-box__header-main {
@@ -153,12 +153,12 @@
153
153
  }
154
154
 
155
155
  .pf-v6-c-modal-box__title-icon {
156
- margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginRight);
156
+ margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginInlineEnd);
157
157
  color: var(--pf-v6-c-modal-box__title-icon--Color);
158
158
  }
159
159
 
160
160
  .pf-v6-c-modal-box__description {
161
- padding-block-start: var(--pf-v6-c-modal-box__description--PaddingTop);
161
+ padding-block-start: var(--pf-v6-c-modal-box__description--PaddingBlockStart);
162
162
  font-size: var(--pf-v6-c-modal-box__description--FontSize);
163
163
  color: var(--pf-v6-c-modal-box__description--Color);
164
164
  }
@@ -166,9 +166,9 @@
166
166
  .pf-v6-c-modal-box__body {
167
167
  flex: 1 1 auto;
168
168
  min-height: var(--pf-v6-c-modal-box__body--MinHeight);
169
- padding-block-start: var(--pf-v6-c-modal-box__body--PaddingTop);
170
- padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingLeft);
171
- padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingRight);
169
+ padding-block-start: var(--pf-v6-c-modal-box__body--PaddingBlockStart);
170
+ padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingInlineStart);
171
+ padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingInlineEnd);
172
172
  overflow-x: hidden;
173
173
  overflow-y: auto;
174
174
  overscroll-behavior: contain;
@@ -176,23 +176,23 @@
176
176
  -webkit-overflow-scrolling: touch;
177
177
  }
178
178
  .pf-v6-c-modal-box__body:last-child {
179
- padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBottom);
179
+ padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd);
180
180
  }
181
181
 
182
182
  .pf-v6-c-modal-box__footer {
183
183
  display: flex;
184
184
  flex: 0 0 auto;
185
185
  align-items: center;
186
- padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingTop);
187
- padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBottom);
188
- padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingLeft);
189
- padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingRight);
186
+ padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingBlockStart);
187
+ padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBlockEnd);
188
+ padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingInlineStart);
189
+ padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingInlineEnd);
190
190
  }
191
191
  .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
192
- margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginRight);
192
+ margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
193
193
  }
194
194
  @media screen and (min-width: 576px) {
195
195
  .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
196
- --pf-v6-c-modal-box__footer--c-button--MarginRight: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginRight);
196
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
197
197
  }
198
198
  }
@@ -1,5 +1,4 @@
1
- :root,
2
- :where(.pf-v6-c-multiple-file-upload) {
1
+ :where(:root, .pf-v6-c-multiple-file-upload) {
3
2
  --pf-v6-c-multiple-file-upload--GridTemplateColumns: 1fr;
4
3
  --pf-v6-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
5
4
  --pf-v6-c-multiple-file-upload__main--TextAlign: center;
@@ -9,10 +8,10 @@
9
8
  "title"
10
9
  "upload"
11
10
  "info";
12
- --pf-v6-c-multiple-file-upload__main--PaddingTop: var(--pf-t--global--spacer--xl);
13
- --pf-v6-c-multiple-file-upload__main--PaddingRight: var(--pf-t--global--spacer--xl);
14
- --pf-v6-c-multiple-file-upload__main--PaddingBottom: var(--pf-t--global--spacer--xl);
15
- --pf-v6-c-multiple-file-upload__main--PaddingLeft: var(--pf-t--global--spacer--xl);
11
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockStart: var(--pf-t--global--spacer--xl);
12
+ --pf-v6-c-multiple-file-upload__main--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
13
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
14
+ --pf-v6-c-multiple-file-upload__main--PaddingInlineStart: var(--pf-t--global--spacer--xl);
16
15
  --pf-v6-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
17
16
  --pf-v6-c-multiple-file-upload__main--BorderStyle: dashed;
18
17
  --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
@@ -27,15 +26,15 @@
27
26
  --pf-v6-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
28
27
  --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
29
28
  --pf-v6-c-multiple-file-upload__title-text-separator--Display: block;
30
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-t--global--spacer--sm);
31
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginBottom: var(--pf-t--global--spacer--sm);
29
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-t--global--spacer--sm);
30
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd: var(--pf-t--global--spacer--sm);
32
31
  --pf-v6-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
33
32
  --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
34
33
  --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
35
34
  --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
36
35
  --pf-v6-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
37
36
  --pf-v6-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
38
- --pf-v6-c-multiple-file-upload__info--MarginTop: var(--pf-t--global--spacer--lg);
37
+ --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-t--global--spacer--lg);
39
38
  --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
40
39
  --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
41
40
  --pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
@@ -45,26 +44,26 @@
45
44
  "title upload"
46
45
  "info upload";
47
46
  --pf-v6-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
48
- --pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-t--global--spacer--lg);
47
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
49
48
  --pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
50
49
  --pf-v6-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
51
50
  --pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
52
51
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
53
52
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
54
- --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
53
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart: 0;
55
54
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
56
55
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
57
56
  --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
58
- --pf-v6-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
59
- --pf-v6-c-multiple-file-upload__status--PaddingTop: var(--pf-t--global--spacer--sm);
60
- --pf-v6-c-multiple-file-upload__status--PaddingBottom: var(--pf-t--global--spacer--sm);
61
- --pf-v6-c-multiple-file-upload__status--PaddingLeft: var(--pf-t--global--spacer--md);
62
- --pf-v6-c-multiple-file-upload__status--PaddingRight: var(--pf-t--global--spacer--md);
57
+ --pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart: 0;
58
+ --pf-v6-c-multiple-file-upload__status--PaddingBlockStart: var(--pf-t--global--spacer--sm);
59
+ --pf-v6-c-multiple-file-upload__status--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
60
+ --pf-v6-c-multiple-file-upload__status--PaddingInlineStart: var(--pf-t--global--spacer--md);
61
+ --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
63
62
  --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
64
63
  --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
65
64
  --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
66
- --pf-v6-c-multiple-file-upload__status-item--PaddingTop: var(--pf-t--global--spacer--md);
67
- --pf-v6-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-t--global--spacer--md);
65
+ --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
66
+ --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
68
67
  --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
69
68
  --pf-v6-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
70
69
  --pf-v6-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -87,17 +86,17 @@
87
86
  --pf-v6-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
88
87
  --pf-v6-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
89
88
  --pf-v6-c-multiple-file-upload__main--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--Gap);
90
- --pf-v6-c-multiple-file-upload__main--PaddingBottom: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
89
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd);
91
90
  --pf-v6-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
92
91
  --pf-v6-c-multiple-file-upload__title--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--Gap);
93
92
  --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
94
93
  --pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize);
95
94
  --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
96
95
  --pf-v6-c-multiple-file-upload__title-text-separator--Display: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
97
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
96
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart);
98
97
  --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
99
98
  --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
100
- --pf-v6-c-multiple-file-upload__info--MarginTop: var(--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginTop);
99
+ --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart);
101
100
  }
102
101
  .pf-v6-c-multiple-file-upload.pf-m-drag-over {
103
102
  --pf-v6-c-multiple-file-upload__main--BorderStyle: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle);
@@ -111,10 +110,10 @@
111
110
  grid-template-columns: var(--pf-v6-c-multiple-file-upload__main--GridTemplateColumns);
112
111
  gap: var(--pf-v6-c-multiple-file-upload__main--Gap);
113
112
  align-items: center;
114
- padding-block-start: var(--pf-v6-c-multiple-file-upload__main--PaddingTop);
115
- padding-block-end: var(--pf-v6-c-multiple-file-upload__main--PaddingBottom);
116
- padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--PaddingLeft);
117
- padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--PaddingRight);
113
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockStart);
114
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockEnd);
115
+ padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineStart);
116
+ padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineEnd);
118
117
  text-align: var(--pf-v6-c-multiple-file-upload__main--TextAlign);
119
118
  border: var(--pf-v6-c-multiple-file-upload__main--BorderWidth) var(--pf-v6-c-multiple-file-upload__main--BorderStyle) var(--pf-v6-c-multiple-file-upload__main--BorderColor);
120
119
  border-radius: var(--pf-v6-c-multiple-file-upload__main--BorderRadius);
@@ -141,8 +140,8 @@
141
140
 
142
141
  .pf-v6-c-multiple-file-upload__title-text-separator {
143
142
  display: var(--pf-v6-c-multiple-file-upload__title-text-separator--Display);
144
- margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginTop);
145
- margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBottom);
143
+ margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart);
144
+ margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd);
146
145
  font-family: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontFamily);
147
146
  font-size: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontSize);
148
147
  font-weight: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontWeight);
@@ -155,16 +154,16 @@
155
154
 
156
155
  .pf-v6-c-multiple-file-upload__info {
157
156
  grid-area: info;
158
- margin-block-start: var(--pf-v6-c-multiple-file-upload__info--MarginTop);
157
+ margin-block-start: var(--pf-v6-c-multiple-file-upload__info--MarginBlockStart);
159
158
  font-size: var(--pf-v6-c-multiple-file-upload__info--FontSize);
160
159
  color: var(--pf-v6-c-multiple-file-upload__info--Color);
161
160
  }
162
161
 
163
162
  .pf-v6-c-multiple-file-upload__status {
164
- padding-block-start: var(--pf-v6-c-multiple-file-upload__status--PaddingTop);
165
- padding-block-end: var(--pf-v6-c-multiple-file-upload__status--PaddingBottom);
166
- padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--PaddingLeft);
167
- padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--PaddingRight);
163
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockStart);
164
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockEnd);
165
+ padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineStart);
166
+ padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineEnd);
168
167
  }
169
168
 
170
169
  .pf-v6-c-multiple-file-upload__status,
@@ -186,8 +185,8 @@
186
185
  display: grid;
187
186
  grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns);
188
187
  gap: var(--pf-v6-c-multiple-file-upload__status-item--Gap);
189
- padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--PaddingTop);
190
- padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBottom);
188
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart);
189
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd);
191
190
  border-block-end: var(--pf-v6-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v6-c-multiple-file-upload__status-item--BorderColor);
192
191
  }
193
192
 
@@ -1,5 +1,4 @@
1
- :where(:root),
2
- :where(.pf-v6-c-nav) {
1
+ :where(:root, .pf-v6-c-nav) {
3
2
  --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4
3
  --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
4
  --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -1,15 +1,15 @@
1
- :root {
1
+ :where(:root, .pf-v6-c-notification-badge) {
2
2
  --pf-v6-c-notification-badge--BackgroundColor: transparent;
3
3
  --pf-v6-c-notification-badge--MinWidth: 40px;
4
4
  --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
5
- --pf-v6-c-notification-badge--PaddingTop: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-notification-badge--PaddingRight: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-notification-badge--PaddingBottom: var(--pf-t--global--spacer--sm);
8
- --pf-v6-c-notification-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
9
- --pf-v6-c-notification-badge--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
10
- --pf-v6-c-notification-badge--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
11
- --pf-v6-c-notification-badge--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
12
- --pf-v6-c-notification-badge--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
5
+ --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6
+ --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7
+ --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
8
+ --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9
+ --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
10
+ --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
11
+ --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
12
+ --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
13
13
  --pf-v6-c-notification-badge--before--BorderColor: transparent;
14
14
  --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
15
15
  --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -35,14 +35,14 @@
35
35
  gap: var(--pf-v6-c-notification-badge--Gap);
36
36
  align-items: center;
37
37
  justify-content: center;
38
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingTop);
39
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBottom);
40
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingLeft);
41
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingRight);
42
- margin-block-start: var(--pf-v6-c-notification-badge--MarginTop);
43
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBottom);
44
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginLeft);
45
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginRight);
38
+ padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
39
+ padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
40
+ padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
41
+ padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
42
+ margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
43
+ margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
44
+ margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
45
+ margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
46
46
  background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
47
47
  border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
48
48
  }
@@ -1,17 +1,16 @@
1
- :root,
2
- .pf-v6-c-notification-drawer {
1
+ :where(:root, .pf-v6-c-notification-drawer) {
3
2
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
4
- --pf-v6-c-notification-drawer__header--PaddingTop: var(--pf-t--global--spacer--md);
5
- --pf-v6-c-notification-drawer__header--PaddingRight: var(--pf-t--global--spacer--lg);
6
- --pf-v6-c-notification-drawer__header--PaddingBottom: var(--pf-t--global--spacer--md);
7
- --pf-v6-c-notification-drawer__header--PaddingLeft: var(--pf-t--global--spacer--lg);
3
+ --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
4
+ --pf-v6-c-notification-drawer__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
5
+ --pf-v6-c-notification-drawer__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6
+ --pf-v6-c-notification-drawer__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8
7
  --pf-v6-c-notification-drawer__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
9
8
  --pf-v6-c-notification-drawer__header--ZIndex: var(--pf-t--global--z-index--sm);
10
9
  --pf-v6-c-notification-drawer__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
11
10
  --pf-v6-c-notification-drawer__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
12
11
  --pf-v6-c-notification-drawer__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
13
12
  --pf-v6-c-notification-drawer__header-title--FontFamily: var(--pf-t--global--font--family--heading);
14
- --pf-v6-c-notification-drawer__header-status--MarginLeft: var(--pf-t--global--spacer--md);
13
+ --pf-v6-c-notification-drawer__header-status--MarginInlineStart: var(--pf-t--global--spacer--md);
15
14
  --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
16
15
  --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
17
16
  --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
@@ -21,10 +20,10 @@
21
20
  --pf-v6-c-notification-drawer__list--Gap: var(--pf-t--global--spacer--sm);
22
21
  --pf-v6-c-notification-drawer__list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
23
22
  --pf-v6-c-notification-drawer__list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
24
- --pf-v6-c-notification-drawer__list-item--PaddingTop: var(--pf-t--global--spacer--md);
25
- --pf-v6-c-notification-drawer__list-item--PaddingRight: var(--pf-t--global--spacer--md);
26
- --pf-v6-c-notification-drawer__list-item--PaddingBottom: var(--pf-t--global--spacer--md);
27
- --pf-v6-c-notification-drawer__list-item--PaddingLeft: var(--pf-t--global--spacer--md);
23
+ --pf-v6-c-notification-drawer__list-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
24
+ --pf-v6-c-notification-drawer__list-item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
25
+ --pf-v6-c-notification-drawer__list-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
26
+ --pf-v6-c-notification-drawer__list-item--PaddingInlineStart: var(--pf-t--global--spacer--md);
28
27
  --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29
28
  --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
30
29
  --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -42,32 +41,32 @@
42
41
  --pf-v6-c-notification-drawer__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
43
42
  --pf-v6-c-notification-drawer__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
44
43
  --pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
45
- --pf-v6-c-notification-drawer__list-item-header--MarginBottom: var(--pf-t--global--spacer--xs);
44
+ --pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
46
45
  --pf-v6-c-notification-drawer__list-item-header-icon--Color: inherit;
47
- --pf-v6-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-t--global--spacer--sm);
46
+ --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
48
47
  --pf-v6-c-notification-drawer__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
49
48
  --pf-v6-c-notification-drawer__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
50
49
  --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
51
50
  --pf-v6-c-notification-drawer__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
52
51
  --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
53
- --pf-v6-c-notification-drawer__list-item-description--MarginBottom: var(--pf-t--global--spacer--sm);
52
+ --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
54
53
  --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
55
54
  --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
56
- --pf-v6-c-notification-drawer__group--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
57
- --pf-v6-c-notification-drawer__group--m-expanded--group--BorderBottomColor: var(--pf-t--global--border--color--default);
55
+ --pf-v6-c-notification-drawer__group--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
56
+ --pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
58
57
  --pf-v6-c-notification-drawer__group--m-expanded--MinHeight: 0;
59
58
  --pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
60
- --pf-v6-c-notification-drawer__group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
61
- --pf-v6-c-notification-drawer__group-toggle--PaddingRight: var(--pf-t--global--spacer--lg);
62
- --pf-v6-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-t--global--spacer--md);
63
- --pf-v6-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
59
+ --pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
60
+ --pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
61
+ --pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
62
+ --pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
64
63
  --pf-v6-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
65
64
  --pf-v6-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
66
- --pf-v6-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-t--global--spacer--md);
65
+ --pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd: var(--pf-t--global--spacer--md);
67
66
  --pf-v6-c-notification-drawer__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
68
67
  --pf-v6-c-notification-drawer__group-toggle-title--max-lines: 1;
69
- --pf-v6-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-t--global--spacer--md);
70
- --pf-v6-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-t--global--spacer--md);
68
+ --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
69
+ --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
71
70
  --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
72
71
  --pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
73
72
  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
@@ -86,10 +85,10 @@
86
85
  display: flex;
87
86
  flex-shrink: 0;
88
87
  align-items: baseline;
89
- padding-block-start: var(--pf-v6-c-notification-drawer__header--PaddingTop);
90
- padding-block-end: var(--pf-v6-c-notification-drawer__header--PaddingBottom);
91
- padding-inline-start: var(--pf-v6-c-notification-drawer__header--PaddingLeft);
92
- padding-inline-end: var(--pf-v6-c-notification-drawer__header--PaddingRight);
88
+ padding-block-start: var(--pf-v6-c-notification-drawer__header--PaddingBlockStart);
89
+ padding-block-end: var(--pf-v6-c-notification-drawer__header--PaddingBlockEnd);
90
+ padding-inline-start: var(--pf-v6-c-notification-drawer__header--PaddingInlineStart);
91
+ padding-inline-end: var(--pf-v6-c-notification-drawer__header--PaddingInlineEnd);
93
92
  background-color: var(--pf-v6-c-notification-drawer__header--BackgroundColor);
94
93
  }
95
94
 
@@ -101,7 +100,7 @@
101
100
  }
102
101
 
103
102
  .pf-v6-c-notification-drawer__header-status {
104
- margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--MarginLeft);
103
+ margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--MarginInlineStart);
105
104
  font-size: var(--pf-v6-c-notification-drawer__header-status--FontSize);
106
105
  font-weight: var(--pf-v6-c-notification-drawer__header-status--FontWeight);
107
106
  color: var(--pf-v6-c-notification-drawer__header-status--Color);
@@ -132,10 +131,10 @@
132
131
  position: relative;
133
132
  display: grid;
134
133
  grid-template-columns: 1fr auto;
135
- padding-block-start: var(--pf-v6-c-notification-drawer__list-item--PaddingTop);
136
- padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBottom);
137
- padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingLeft);
138
- padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingRight);
134
+ padding-block-start: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockStart);
135
+ padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd);
136
+ padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
137
+ padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
139
138
  background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
140
139
  border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
141
140
  border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
@@ -178,11 +177,11 @@
178
177
  grid-row: 1/2;
179
178
  grid-column: 1/2;
180
179
  align-items: baseline;
181
- margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--MarginBottom);
180
+ margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd);
182
181
  }
183
182
 
184
183
  .pf-v6-c-notification-drawer__list-item-header-icon {
185
- margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--MarginRight);
184
+ margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd);
186
185
  color: var(--pf-v6-c-notification-drawer__list-item-header-icon--Color);
187
186
  }
188
187
 
@@ -208,7 +207,7 @@
208
207
  .pf-v6-c-notification-drawer__list-item-description {
209
208
  grid-row: 2/3;
210
209
  grid-column: 1/2;
211
- margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBottom);
210
+ margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
212
211
  word-break: break-word;
213
212
  }
214
213
 
@@ -225,7 +224,7 @@
225
224
  }
226
225
 
227
226
  .pf-v6-c-notification-drawer__group {
228
- border-block-end: var(--pf-v6-c-notification-drawer__group--BorderBottomWidth) solid var(--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBottomColor);
227
+ border-block-end: var(--pf-v6-c-notification-drawer__group--BorderBlockEndWidth) solid var(--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor);
229
228
  }
230
229
  .pf-v6-c-notification-drawer__group.pf-m-expanded {
231
230
  min-height: var(--pf-v6-c-notification-drawer__group--m-expanded--MinHeight);
@@ -236,10 +235,10 @@
236
235
  display: flex;
237
236
  align-items: baseline;
238
237
  width: 100%;
239
- padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingTop);
240
- padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBottom);
241
- padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingLeft);
242
- padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingRight);
238
+ padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart);
239
+ padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd);
240
+ padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart);
241
+ padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd);
243
242
  background-color: var(--pf-v6-c-notification-drawer__group-toggle--BackgroundColor);
244
243
  border: none;
245
244
  outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
@@ -251,7 +250,7 @@
251
250
  -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
252
251
  overflow: hidden;
253
252
  flex: 1;
254
- margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginRight);
253
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
255
254
  font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
256
255
  text-align: start;
257
256
  word-break: break-word;
@@ -259,11 +258,11 @@
259
258
 
260
259
  .pf-v6-c-notification-drawer__group-toggle-count {
261
260
  margin-inline-start: auto;
262
- margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginRight);
261
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
263
262
  }
264
263
 
265
264
  .pf-v6-c-notification-drawer__group-toggle-icon {
266
- margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginRight);
265
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
267
266
  color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
268
267
  transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
269
268
  }
@@ -1,14 +1,5 @@
1
- .pf-v6-c-number-input .pf-v6-c-form-control > :is(input) {
2
- appearance: textfield;
3
- }
4
- .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
5
- margin: 0;
6
- appearance: none;
7
- }
8
-
9
- :root,
10
- .pf-v6-c-number-input {
11
- --pf-v6-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
1
+ :where(:root, .pf-v6-c-number-input) {
2
+ --pf-v6-c-number-input__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
12
3
  --pf-v6-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
13
4
  --pf-v6-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
14
5
  --pf-v6-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
@@ -30,11 +21,16 @@
30
21
  }
31
22
  .pf-v6-c-number-input .pf-v6-c-form-control > :is(input) {
32
23
  text-align: end;
24
+ appearance: textfield;
25
+ }
26
+ .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-number-input .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
27
+ margin: 0;
28
+ appearance: none;
33
29
  }
34
30
 
35
31
  .pf-v6-c-input-group + .pf-v6-c-number-input__unit,
36
32
  .pf-v6-c-number-input__unit + .pf-v6-c-input-group {
37
- margin-inline-start: var(--pf-v6-c-number-input__unit--c-input-group--MarginLeft);
33
+ margin-inline-start: var(--pf-v6-c-number-input__unit--c-input-group--MarginInlineStart);
38
34
  }
39
35
 
40
36
  .pf-v6-c-number-input__icon {
@@ -1,4 +1,4 @@
1
- :root {
1
+ :where(:root, .pf-v6-c-overflow-menu) {
2
2
  --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
3
3
  --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
4
4
  --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);