@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/JumpLinks/jump-links.css CHANGED
@@ -1,59 +1,58 @@
1
- :where(:root),
2
- :where(.pf-v6-c-jump-links) {
1
+ :where(:root, .pf-v6-c-jump-links) {
3
2
  --pf-v6-c-jump-links__list--Display: flex;
4
- --pf-v6-c-jump-links__list--PaddingTop: 0;
5
- --pf-v6-c-jump-links__list--PaddingRight: var(--pf-t--global--spacer--md);
6
- --pf-v6-c-jump-links__list--PaddingBottom: 0;
7
- --pf-v6-c-jump-links__list--PaddingLeft: var(--pf-t--global--spacer--md);
8
- --pf-v6-c-jump-links--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
9
- --pf-v6-c-jump-links--m-vertical__list--PaddingRight: 0;
10
- --pf-v6-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
11
- --pf-v6-c-jump-links--m-vertical__list--PaddingLeft: 0;
3
+ --pf-v6-c-jump-links__list--PaddingBlockStart: 0;
4
+ --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
5
+ --pf-v6-c-jump-links__list--PaddingBlockEnd: 0;
6
+ --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
7
+ --pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart: var(--pf-t--global--spacer--md);
8
+ --pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd: 0;
9
+ --pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10
+ --pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart: 0;
12
11
  --pf-v6-c-jump-links__list--FlexDirection: row;
13
12
  --pf-v6-c-jump-links--m-vertical__list--FlexDirection: column;
14
13
  --pf-v6-c-jump-links__list--before--BorderColor: var(--pf-t--global--border--color--default);
15
- --pf-v6-c-jump-links__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
16
- --pf-v6-c-jump-links__list--before--BorderRightWidth: 0;
17
- --pf-v6-c-jump-links__list--before--BorderBottomWidth: 0;
18
- --pf-v6-c-jump-links__list--before--BorderLeftWidth: 0;
19
- --pf-v6-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
20
- --pf-v6-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
21
- --pf-v6-c-jump-links__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
22
- --pf-v6-c-jump-links__link--PaddingTop: var(--pf-t--global--spacer--sm);
23
- --pf-v6-c-jump-links__link--PaddingRight: var(--pf-t--global--spacer--sm);
24
- --pf-v6-c-jump-links__link--PaddingBottom: var(--pf-t--global--spacer--sm);
25
- --pf-v6-c-jump-links__link--PaddingLeft: var(--pf-t--global--spacer--sm);
26
- --pf-v6-c-jump-links__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
27
- --pf-v6-c-jump-links__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
28
- --pf-v6-c-jump-links__list__list__link--PaddingBottom: var(--pf-t--global--spacer--sm);
14
+ --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default);
15
+ --pf-v6-c-jump-links__list--before--BorderInlineEndWidth: 0;
16
+ --pf-v6-c-jump-links__list--before--BorderBlockEndWidth: 0;
17
+ --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: 0;
18
+ --pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default);
19
+ --pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth: 0;
20
+ --pf-v6-c-jump-links__list__list--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
21
+ --pf-v6-c-jump-links__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
22
+ --pf-v6-c-jump-links__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
23
+ --pf-v6-c-jump-links__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24
+ --pf-v6-c-jump-links__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
25
+ --pf-v6-c-jump-links__list__list__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26
+ --pf-v6-c-jump-links__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg);
27
+ --pf-v6-c-jump-links__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
29
28
  --pf-v6-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
30
- --pf-v6-c-jump-links__link--before--BorderTopWidth: 0;
31
- --pf-v6-c-jump-links__link--before--BorderRightWidth: 0;
32
- --pf-v6-c-jump-links__link--before--BorderBottomWidth: 0;
33
- --pf-v6-c-jump-links__link--before--BorderLeftWidth: 0;
29
+ --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: 0;
30
+ --pf-v6-c-jump-links__link--before--BorderInlineEndWidth: 0;
31
+ --pf-v6-c-jump-links__link--before--BorderBlockEndWidth: 0;
32
+ --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: 0;
34
33
  --pf-v6-c-jump-links__link--before--BorderColor: transparent;
35
- --pf-v6-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
36
- --pf-v6-c-jump-links__item--m-current__link--before--BorderLeftWidth: 0;
34
+ --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
35
+ --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: 0;
37
36
  --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
38
- --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
39
- --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-t--global--border--width--extra-strong);
37
+ --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
38
+ --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
40
39
  --pf-v6-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
41
40
  --pf-v6-c-jump-links__link--hover__link-text--Color: var(--pf-t--global--text--color--subtle);
42
41
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
43
- --pf-v6-c-jump-links__label--MarginBottom: var(--pf-t--global--spacer--md);
42
+ --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
44
43
  --pf-v6-c-jump-links__label--Display: block;
45
- --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
46
- --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
47
- --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links__toggle--MarginBottom--base);
48
- --pf-v6-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v6-c-jump-links__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
49
- --pf-v6-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
44
+ --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
45
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
46
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
47
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: calc(var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
48
+ --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
50
49
  --pf-v6-c-jump-links__toggle--Display: none;
51
50
  --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
52
51
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
53
52
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
54
53
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
55
54
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
56
- --pf-v6-c-jump-links__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
55
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
57
56
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
58
57
  }
59
58
 
@@ -67,14 +66,14 @@
67
66
  align-items: center;
68
67
  }
69
68
  .pf-v6-c-jump-links.pf-m-vertical, .pf-v6-c-jump-links.pf-m-expandable {
70
- --pf-v6-c-jump-links__list--PaddingTop: var(--pf-v6-c-jump-links--m-vertical__list--PaddingTop);
71
- --pf-v6-c-jump-links__list--PaddingRight: var(--pf-v6-c-jump-links--m-vertical__list--PaddingRight);
72
- --pf-v6-c-jump-links__list--PaddingBottom: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBottom);
73
- --pf-v6-c-jump-links__list--PaddingLeft: var(--pf-v6-c-jump-links--m-vertical__list--PaddingLeft);
74
- --pf-v6-c-jump-links__list--before--BorderTopWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderTopWidth);
75
- --pf-v6-c-jump-links__list--before--BorderLeftWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderLeftWidth);
76
- --pf-v6-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth);
77
- --pf-v6-c-jump-links__item--m-current__link--before--BorderLeftWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth);
69
+ --pf-v6-c-jump-links__list--PaddingBlockStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockStart);
70
+ --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd);
71
+ --pf-v6-c-jump-links__list--PaddingBlockEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd);
72
+ --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart);
73
+ --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth);
74
+ --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth);
75
+ --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
76
+ --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth);
78
77
  --pf-v6-c-jump-links__list--FlexDirection: var(--pf-v6-c-jump-links--m-vertical__list--FlexDirection);
79
78
  flex-direction: column;
80
79
  }
@@ -150,7 +149,7 @@
150
149
  }
151
150
  .pf-v6-c-jump-links.pf-m-expanded {
152
151
  --pf-v6-c-jump-links__list--Display: flex;
153
- --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links--m-expanded__toggle--MarginBottom);
152
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd);
154
153
  --pf-v6-c-jump-links__toggle-icon--Rotate: var(--pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate);
155
154
  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-v6-c-jump-links--m-expanded__toggle-icon--Color);
156
155
  }
@@ -159,10 +158,10 @@
159
158
  position: relative;
160
159
  display: var(--pf-v6-c-jump-links__list--Display);
161
160
  flex-direction: var(--pf-v6-c-jump-links__list--FlexDirection);
162
- padding-block-start: var(--pf-v6-c-jump-links__list--PaddingTop);
163
- padding-block-end: var(--pf-v6-c-jump-links__list--PaddingBottom);
164
- padding-inline-start: var(--pf-v6-c-jump-links__list--PaddingLeft);
165
- padding-inline-end: var(--pf-v6-c-jump-links__list--PaddingRight);
161
+ padding-block-start: var(--pf-v6-c-jump-links__list--PaddingBlockStart);
162
+ padding-block-end: var(--pf-v6-c-jump-links__list--PaddingBlockEnd);
163
+ padding-inline-start: var(--pf-v6-c-jump-links__list--PaddingInlineStart);
164
+ padding-inline-end: var(--pf-v6-c-jump-links__list--PaddingInlineEnd);
166
165
  }
167
166
  .pf-v6-c-jump-links__list::before {
168
167
  position: absolute;
@@ -170,28 +169,28 @@
170
169
  pointer-events: none;
171
170
  content: "";
172
171
  border: solid var(--pf-v6-c-jump-links__list--before--BorderColor);
173
- border-block-start-width: var(--pf-v6-c-jump-links__list--before--BorderTopWidth);
174
- border-block-end-width: var(--pf-v6-c-jump-links__list--before--BorderBottomWidth);
175
- border-inline-start-width: var(--pf-v6-c-jump-links__list--before--BorderLeftWidth);
176
- border-inline-end-width: var(--pf-v6-c-jump-links__list--before--BorderRightWidth);
172
+ border-block-start-width: var(--pf-v6-c-jump-links__list--before--BorderBlockStartWidth);
173
+ border-block-end-width: var(--pf-v6-c-jump-links__list--before--BorderBlockEndWidth);
174
+ border-inline-start-width: var(--pf-v6-c-jump-links__list--before--BorderInlineStartWidth);
175
+ border-inline-end-width: var(--pf-v6-c-jump-links__list--before--BorderInlineEndWidth);
177
176
  }
178
177
  .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list {
179
- --pf-v6-c-jump-links__list--PaddingTop: 0;
180
- --pf-v6-c-jump-links__list--PaddingBottom: 0;
181
- --pf-v6-c-jump-links__link--PaddingTop: var(--pf-v6-c-jump-links__list__list__link--PaddingTop);
182
- --pf-v6-c-jump-links__link--PaddingBottom: var(--pf-v6-c-jump-links__list__list__link--PaddingBottom);
183
- --pf-v6-c-jump-links__link--PaddingLeft: var(--pf-v6-c-jump-links__list__list__link--PaddingLeft);
184
- margin-block-start: var(--pf-v6-c-jump-links__list__list--MarginTop);
178
+ --pf-v6-c-jump-links__list--PaddingBlockStart: 0;
179
+ --pf-v6-c-jump-links__list--PaddingBlockEnd: 0;
180
+ --pf-v6-c-jump-links__link--PaddingBlockStart: var(--pf-v6-c-jump-links__list__list__link--PaddingBlockStart);
181
+ --pf-v6-c-jump-links__link--PaddingBlockEnd: var(--pf-v6-c-jump-links__list__list__link--PaddingBlockEnd);
182
+ --pf-v6-c-jump-links__link--PaddingInlineStart: var(--pf-v6-c-jump-links__list__list__link--PaddingInlineStart);
183
+ margin-block-start: var(--pf-v6-c-jump-links__list__list--MarginBlockStart);
185
184
  }
186
185
 
187
186
  .pf-v6-c-jump-links__link {
188
187
  position: relative;
189
188
  display: flex;
190
189
  flex: 1;
191
- padding-block-start: var(--pf-v6-c-jump-links__link--PaddingTop);
192
- padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBottom);
193
- padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingLeft);
194
- padding-inline-end: var(--pf-v6-c-jump-links__link--PaddingRight);
190
+ padding-block-start: var(--pf-v6-c-jump-links__link--PaddingBlockStart);
191
+ padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBlockEnd);
192
+ padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingInlineStart);
193
+ padding-inline-end: var(--pf-v6-c-jump-links__link--PaddingInlineEnd);
195
194
  text-decoration: none;
196
195
  outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
197
196
  }
@@ -205,18 +204,18 @@
205
204
  content: "";
206
205
  border-color: var(--pf-v6-c-jump-links__link--before--BorderColor);
207
206
  border-style: solid;
208
- border-block-start-width: var(--pf-v6-c-jump-links__link--before--BorderTopWidth);
209
- border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBottomWidth);
210
- border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderLeftWidth);
211
- border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderRightWidth);
207
+ border-block-start-width: var(--pf-v6-c-jump-links__link--before--BorderBlockStartWidth);
208
+ border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBlockEndWidth);
209
+ border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderInlineStartWidth);
210
+ border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderInlineEndWidth);
212
211
  }
213
212
 
214
213
  .pf-v6-c-jump-links__item {
215
214
  --pf-v6-c-jump-links__list--before--BorderColor: transparent;
216
215
  }
217
216
  .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link {
218
- --pf-v6-c-jump-links__link--before--BorderTopWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderTopWidth);
219
- --pf-v6-c-jump-links__link--before--BorderLeftWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderLeftWidth);
217
+ --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth);
218
+ --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth);
220
219
  --pf-v6-c-jump-links__link--before--BorderColor: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderColor);
221
220
  --pf-v6-c-jump-links__link-text--Color: var(--pf-v6-c-jump-links__item--m-current__link-text--Color);
222
221
  }
@@ -227,7 +226,7 @@
227
226
 
228
227
  .pf-v6-c-jump-links__label {
229
228
  display: var(--pf-v6-c-jump-links__label--Display);
230
- margin-block-end: var(--pf-v6-c-jump-links__label--MarginBottom);
229
+ margin-block-end: var(--pf-v6-c-jump-links__label--MarginBlockEnd);
231
230
  }
232
231
 
233
232
  .pf-v6-c-jump-links__main {
@@ -237,9 +236,9 @@
237
236
 
238
237
  .pf-v6-c-jump-links__toggle {
239
238
  display: var(--pf-v6-c-jump-links__toggle--Display);
240
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginTop);
241
- margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBottom);
242
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginLeft);
239
+ margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
240
+ margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
241
+ margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
243
242
  }
244
243
  .pf-v6-c-jump-links__toggle .pf-v6-c-button {
245
244
  display: flex;
@@ -257,6 +256,6 @@
257
256
  }
258
257
 
259
258
  .pf-v6-c-jump-links__toggle-text {
260
- margin-inline-start: var(--pf-v6-c-jump-links__toggle-text--MarginLeft);
259
+ margin-inline-start: var(--pf-v6-c-jump-links__toggle-text--MarginInlineStart);
261
260
  color: var(--pf-v6-c-jump-links__toggle-text--Color);
262
261
  }
package/css/components/Label/label-group.css CHANGED
@@ -1,5 +1,4 @@
1
- :where(:root),
2
- :where(.pf-v6-c-label-group) {
1
+ :where(:root, .pf-v6-c-label-group) {
3
2
  --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
4
3
  --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
5
4
  --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
@@ -12,25 +11,25 @@
12
11
  --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
13
12
  --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
14
13
  --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
15
- --pf-v6-c-label-group--m-category--PaddingTop: var(--pf-t--global--spacer--xs);
16
- --pf-v6-c-label-group--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
17
- --pf-v6-c-label-group--m-category--PaddingBottom: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-label-group--m-category--PaddingLeft: var(--pf-t--global--spacer--sm);
14
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
15
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19
18
  --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
20
19
  --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
21
20
  --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
22
- --pf-v6-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
21
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
23
22
  --pf-v6-c-label-group__label--MaxWidth: 18ch;
24
23
  --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
25
- --pf-v6-c-label-group__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
26
- --pf-v6-c-label-group__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
27
- --pf-v6-c-label-group__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
28
- --pf-v6-c-label-group__close--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
24
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
26
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
27
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
29
28
  --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
30
- --pf-v6-c-label-group__textarea--PaddingTop: 0.125rem;
31
- --pf-v6-c-label-group__textarea--PaddingRight: var(--pf-t--global--spacer--xs);
32
- --pf-v6-c-label-group__textarea--PaddingBottom: 0;
33
- --pf-v6-c-label-group__textarea--PaddingLeft: var(--pf-t--global--spacer--xs);
29
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
30
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
31
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
32
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
34
33
  }
35
34
 
36
35
  .pf-v6-c-label-group {
@@ -40,10 +39,10 @@
40
39
  align-items: center;
41
40
  }
42
41
  .pf-v6-c-label-group.pf-m-category {
43
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingTop);
44
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBottom);
45
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingLeft);
46
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingRight);
42
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
43
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
44
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
45
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
47
46
  background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
48
47
  border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
49
48
  border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
@@ -55,7 +54,7 @@
55
54
  --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
56
55
  --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
57
56
  --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
58
- --pf-v6-c-label-group--m-category--PaddingRight: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingRight);
57
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
59
58
  }
60
59
  .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
61
60
  align-items: flex-start;
@@ -112,18 +111,18 @@
112
111
  }
113
112
  .pf-v6-c-label-group__close .pf-v6-c-button {
114
113
  --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
115
- --pf-v6-c-button--m-plain--m-no-padding--PaddingTop: var(--pf-v6-c-label-group__close--c-button--PaddingTop);
116
- --pf-v6-c-button--m-plain--m-no-padding--PaddingRight: var(--pf-v6-c-label-group__close--c-button--PaddingRight);
117
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBottom: var(--pf-v6-c-label-group__close--c-button--PaddingBottom);
118
- --pf-v6-c-button--m-plain--m-no-padding--PaddingLeft: var(--pf-v6-c-label-group__close--c-button--PaddingLeft);
114
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
115
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
116
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
117
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
119
118
  }
120
119
 
121
120
  .pf-v6-c-label-group__textarea {
122
121
  min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
123
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingTop);
124
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBottom);
125
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingLeft);
126
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingRight);
122
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
123
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
124
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
125
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
127
126
  white-space: nowrap;
128
127
  resize: none;
129
128
  border: 0;
package/css/components/Label/label.css CHANGED
@@ -1,9 +1,8 @@
1
- :where(:root),
2
- :where(.pf-v6-c-label) {
3
- --pf-v6-c-label--PaddingTop: var(--pf-t--global--spacer--xs);
4
- --pf-v6-c-label--PaddingRight: var(--pf-t--global--spacer--sm);
5
- --pf-v6-c-label--PaddingBottom: var(--pf-t--global--spacer--xs);
6
- --pf-v6-c-label--PaddingLeft: var(--pf-t--global--spacer--sm);
1
+ :where(:root, .pf-v6-c-label) {
2
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
3
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
4
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
5
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7
6
  --pf-v6-c-label--MaxWidth: 100%;
8
7
  --pf-v6-c-label--BorderWidth: 0;
9
8
  --pf-v6-c-label--BorderColor: transparent;
@@ -155,10 +154,10 @@
155
154
  --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
156
155
  --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
157
156
  --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
158
- --pf-v6-c-label--m-compact--PaddingTop: 0;
159
- --pf-v6-c-label--m-compact--PaddingRight: var(--pf-t--global--spacer--sm);
160
- --pf-v6-c-label--m-compact--PaddingBottom: 0;
161
- --pf-v6-c-label--m-compact--PaddingLeft: var(--pf-t--global--spacer--sm);
157
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
158
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
159
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
160
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
162
161
  --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
163
162
  --pf-v6-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
164
163
  --pf-v6-c-label__content--MaxWidth: 100%;
@@ -166,15 +165,15 @@
166
165
  --pf-v6-c-label__content--Cursor: initial;
167
166
  --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
168
167
  --pf-v6-c-label__text--MaxWidth: 100%;
169
- --pf-v6-c-label__actions--MarginRight: calc(var(--pf-v6-c-label__actions--c-button--PaddingRight) * -1);
168
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
170
169
  --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
171
170
  --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
172
- --pf-v6-c-label__actions--c-button--MarginTop: calc(var(--pf-v6-c-label__actions--c-button--PaddingTop) * -1);
173
- --pf-v6-c-label__actions--c-button--MarginBottom: calc(var(--pf-v6-c-label__actions--c-button--PaddingBottom) * -1);
174
- --pf-v6-c-label__actions--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
175
- --pf-v6-c-label__actions--c-button--PaddingRight: var(--pf-t--global--spacer--xs);
176
- --pf-v6-c-label__actions--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
177
- --pf-v6-c-label__actions--c-button--PaddingLeft: var(--pf-t--global--spacer--xs);
171
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
172
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
173
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
174
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
175
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
176
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
178
177
  --pf-v6-c-label--m-editable--TextDecoration: underline;
179
178
  --pf-v6-c-label--m-editable--TextDecorationStyle: dashed;
180
179
  --pf-v6-c-label--m-editable--TextDecorationThickness: var(--pf-t--global--border--width--regular);
@@ -195,10 +194,10 @@
195
194
  .pf-v6-c-label {
196
195
  position: relative;
197
196
  max-width: var(--pf-v6-c-label--MaxWidth);
198
- padding-block-start: var(--pf-v6-c-label--PaddingTop);
199
- padding-block-end: var(--pf-v6-c-label--PaddingBottom);
200
- padding-inline-start: var(--pf-v6-c-label--PaddingLeft);
201
- padding-inline-end: var(--pf-v6-c-label--PaddingRight);
197
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
198
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
199
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
200
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
202
201
  font-size: var(--pf-v6-c-label--FontSize);
203
202
  white-space: nowrap;
204
203
  background: transparent;
@@ -347,10 +346,10 @@
347
346
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
348
347
  }
349
348
  .pf-v6-c-label.pf-m-compact {
350
- --pf-v6-c-label--PaddingTop: var(--pf-v6-c-label--m-compact--PaddingTop);
351
- --pf-v6-c-label--PaddingRight: var(--pf-v6-c-label--m-compact--PaddingRight);
352
- --pf-v6-c-label--PaddingBottom: var(--pf-v6-c-label--m-compact--PaddingBottom);
353
- --pf-v6-c-label--PaddingLeft: var(--pf-v6-c-label--m-compact--PaddingLeft);
349
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
350
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
351
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
352
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
354
353
  --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
355
354
  --pf-v6-c-label--m-editable--TextDecorationOffset: var(--pf-v6-c-label--m-compact--m-editable--TextDecorationOffset);
356
355
  }
@@ -479,15 +478,15 @@ input.pf-v6-c-label__content {
479
478
  }
480
479
 
481
480
  .pf-v6-c-label__actions {
482
- margin-inline-end: var(--pf-v6-c-label__actions--MarginRight);
481
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
483
482
  }
484
483
  .pf-v6-c-label__actions .pf-v6-c-button {
485
484
  --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
486
- --pf-v6-c-button--m-plain--m-no-padding--PaddingTop: var(--pf-v6-c-label__actions--c-button--PaddingTop);
487
- --pf-v6-c-button--m-plain--m-no-padding--PaddingRight: var(--pf-v6-c-label__actions--c-button--PaddingRight);
488
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBottom: var(--pf-v6-c-label__actions--c-button--PaddingBottom);
489
- --pf-v6-c-button--m-plain--m-no-padding--PaddingLeft: var(--pf-v6-c-label__actions--c-button--PaddingLeft);
490
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginTop);
491
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBottom);
485
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
486
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
487
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
488
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
489
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
490
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
492
491
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
493
492
  }
package/css/components/List/list.css CHANGED
@@ -1,30 +1,30 @@
1
1
  .pf-v6-c-list {
2
- --pf-v6-c-list--PaddingLeft: var(--pf-t--global--spacer--lg);
3
- --pf-v6-c-list--nested--MarginTop: var(--pf-t--global--spacer--sm);
4
- --pf-v6-c-list--nested--MarginLeft: var(--pf-t--global--spacer--sm);
2
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3
+ --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
4
+ --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
5
5
  --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
6
- --pf-v6-c-list--li--MarginTop: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-list--m-inline--li--MarginRight: var(--pf-t--global--spacer--lg);
8
- --pf-v6-c-list--m-bordered--li--PaddingBottom: var(--pf-t--global--spacer--sm);
9
- --pf-v6-c-list--m-bordered--li--BorderBottomColor: var(--pf-t--global--border--color--default);
10
- --pf-v6-c-list--m-bordered--li--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
6
+ --pf-v6-c-list--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
7
+ --pf-v6-c-list--m-inline--li--MarginInlineEnd: var(--pf-t--global--spacer--lg);
8
+ --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9
+ --pf-v6-c-list--m-bordered--li--BorderBlockEndColor: var(--pf-t--global--border--color--default);
10
+ --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
11
11
  --pf-v6-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
12
- --pf-v6-c-list__item-icon--MarginTop: var(--pf-t--global--spacer--xs);
13
- --pf-v6-c-list__item-icon--MarginRight: var(--pf-t--global--spacer--sm);
12
+ --pf-v6-c-list__item-icon--MarginBlockStart: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
14
14
  --pf-v6-c-list__item-icon--Color: var(--pf-t--global--icon--color--regular);
15
15
  --pf-v6-c-list__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
16
16
  --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
17
- --pf-v6-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-t--global--spacer--md);
17
+ --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
18
18
  --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
19
- padding-inline-start: var(--pf-v6-c-list--PaddingLeft);
19
+ padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
20
20
  }
21
21
  .pf-v6-c-list ol,
22
22
  .pf-v6-c-list ul {
23
- margin-block-start: var(--pf-v6-c-list--nested--MarginTop);
24
- margin-inline-start: var(--pf-v6-c-list--nested--MarginLeft);
23
+ margin-block-start: var(--pf-v6-c-list--nested--MarginBlockStart);
24
+ margin-inline-start: var(--pf-v6-c-list--nested--MarginInlineStart);
25
25
  }
26
26
  .pf-v6-c-list li + li {
27
- margin-block-start: var(--pf-v6-c-list--li--MarginTop);
27
+ margin-block-start: var(--pf-v6-c-list--li--MarginBlockStart);
28
28
  }
29
29
  ul.pf-v6-c-list {
30
30
  list-style: var(--pf-v6-c-list--ul--ListStyle);
@@ -36,39 +36,39 @@ ul.pf-v6-c-list {
36
36
  .pf-v6-c-list .pf-v6-c-list__item-icon {
37
37
  flex-shrink: 0;
38
38
  min-width: var(--pf-v6-c-list__item-icon--MinWidth);
39
- margin-block-start: var(--pf-v6-c-list__item-icon--MarginTop);
40
- margin-inline-end: var(--pf-v6-c-list__item-icon--MarginRight);
39
+ margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
40
+ margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
41
41
  font-size: var(--pf-v6-c-list__item-icon--FontSize);
42
42
  line-height: 1;
43
43
  color: var(--pf-v6-c-list__item-icon--Color);
44
44
  }
45
45
  .pf-v6-c-list.pf-m-icon-lg {
46
46
  --pf-v6-c-list__item-icon--MinWidth: var(--pf-v6-c-list--m-icon-lg__item-icon--MinWidth);
47
- --pf-v6-c-list__item-icon--MarginTop: 0;
48
- --pf-v6-c-list__item-icon--MarginRight: var(--pf-v6-c-list--m-icon-lg__item-icon--MarginRight);
47
+ --pf-v6-c-list__item-icon--MarginBlockStart: 0;
48
+ --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd);
49
49
  --pf-v6-c-list__item-icon--FontSize: var(--pf-v6-c-list--m-icon-lg__item-icon--FontSize);
50
50
  }
51
51
  .pf-v6-c-list.pf-m-plain {
52
- --pf-v6-c-list--PaddingLeft: 0;
52
+ --pf-v6-c-list--PaddingInlineStart: 0;
53
53
  list-style: none;
54
54
  }
55
55
  .pf-v6-c-list.pf-m-inline {
56
- --pf-v6-c-list--PaddingLeft: 0;
56
+ --pf-v6-c-list--PaddingInlineStart: 0;
57
57
  display: flex;
58
58
  flex-wrap: wrap;
59
59
  list-style: none;
60
60
  }
61
61
  .pf-v6-c-list.pf-m-inline li {
62
- --pf-v6-c-list--li--MarginTop: 0;
62
+ --pf-v6-c-list--li--MarginBlockStart: 0;
63
63
  }
64
64
  .pf-v6-c-list.pf-m-inline li:not(:last-child) {
65
- margin-inline-end: var(--pf-v6-c-list--m-inline--li--MarginRight);
65
+ margin-inline-end: var(--pf-v6-c-list--m-inline--li--MarginInlineEnd);
66
66
  }
67
67
  .pf-v6-c-list.pf-m-bordered > * {
68
- padding-block-end: var(--pf-v6-c-list--m-bordered--li--PaddingBottom);
69
- border-block-end: var(--pf-v6-c-list--m-bordered--li--BorderBottomWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBottomColor);
68
+ padding-block-end: var(--pf-v6-c-list--m-bordered--li--PaddingBlockEnd);
69
+ border-block-end: var(--pf-v6-c-list--m-bordered--li--BorderBlockEndWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockEndColor);
70
70
  }
71
71
  .pf-v6-c-list.pf-m-bordered > :last-child {
72
- --pf-v6-c-list--m-bordered--li--PaddingBottom: 0;
73
- --pf-v6-c-list--m-bordered--li--BorderBottomWidth: 0;
72
+ --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: 0;
73
+ --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
74
74
  }