@patternfly/patternfly 6.0.0-alpha.121 → 6.0.0-alpha.122

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/components/AboutModalBox/about-modal-box.css +54 -54
  2. package/components/AboutModalBox/about-modal-box.scss +54 -54
  3. package/components/Accordion/accordion.css +39 -39
  4. package/components/Accordion/accordion.scss +39 -39
  5. package/components/Alert/alert-group.css +15 -15
  6. package/components/Alert/alert-group.scss +15 -15
  7. package/components/Alert/alert.css +46 -46
  8. package/components/Alert/alert.scss +46 -46
  9. package/components/AppLauncher/app-launcher.css +58 -58
  10. package/components/AppLauncher/app-launcher.scss +58 -58
  11. package/components/BackToTop/back-to-top.css +14 -14
  12. package/components/BackToTop/back-to-top.scss +14 -14
  13. package/components/Badge/badge.css +6 -6
  14. package/components/Badge/badge.scss +6 -6
  15. package/components/Banner/banner.css +12 -12
  16. package/components/Banner/banner.scss +12 -12
  17. package/components/Breadcrumb/breadcrumb.css +12 -12
  18. package/components/Breadcrumb/breadcrumb.scss +12 -12
  19. package/components/Button/button.css +93 -93
  20. package/components/Button/button.scss +93 -93
  21. package/components/CalendarMonth/calendar-month.css +42 -42
  22. package/components/CalendarMonth/calendar-month.scss +42 -42
  23. package/components/Card/card.css +59 -59
  24. package/components/Card/card.scss +59 -59
  25. package/components/Check/check.css +2 -2
  26. package/components/Check/check.scss +2 -2
  27. package/components/Chip/chip-group.css +20 -20
  28. package/components/Chip/chip-group.scss +20 -20
  29. package/components/Chip/chip.css +26 -26
  30. package/components/Chip/chip.scss +26 -26
  31. package/components/ClipboardCopy/clipboard-copy.css +36 -36
  32. package/components/ClipboardCopy/clipboard-copy.scss +36 -36
  33. package/components/CodeBlock/code-block.css +19 -19
  34. package/components/CodeBlock/code-block.scss +19 -19
  35. package/components/CodeEditor/code-editor.css +33 -33
  36. package/components/CodeEditor/code-editor.scss +33 -33
  37. package/components/Content/content.css +65 -65
  38. package/components/Content/content.scss +65 -65
  39. package/components/ContextSelector/context-selector.css +145 -145
  40. package/components/ContextSelector/context-selector.scss +145 -145
  41. package/components/DataList/data-list-grid.css +98 -98
  42. package/components/DataList/data-list-grid.scss +14 -14
  43. package/components/DataList/data-list.css +233 -233
  44. package/components/DataList/data-list.scss +135 -135
  45. package/components/DatePicker/date-picker.css +14 -14
  46. package/components/DatePicker/date-picker.scss +14 -14
  47. package/components/DescriptionList/description-list.css +6 -6
  48. package/components/DescriptionList/description-list.scss +6 -6
  49. package/components/Drawer/drawer.css +84 -84
  50. package/components/Drawer/drawer.scss +84 -84
  51. package/components/Dropdown/dropdown.css +126 -126
  52. package/components/Dropdown/dropdown.scss +126 -126
  53. package/components/DualListSelector/dual-list-selector.css +59 -58
  54. package/components/DualListSelector/dual-list-selector.scss +41 -40
  55. package/components/EmptyState/empty-state.css +32 -32
  56. package/components/EmptyState/empty-state.scss +32 -32
  57. package/components/ExpandableSection/expandable-section.css +48 -48
  58. package/components/ExpandableSection/expandable-section.scss +48 -48
  59. package/components/Form/form.css +106 -106
  60. package/components/Form/form.scss +88 -88
  61. package/components/FormControl/form-control.css +44 -44
  62. package/components/FormControl/form-control.scss +44 -44
  63. package/components/HelperText/helper-text.css +2 -2
  64. package/components/HelperText/helper-text.scss +2 -2
  65. package/components/Hint/hint.css +16 -16
  66. package/components/Hint/hint.scss +16 -16
  67. package/components/InlineEdit/inline-edit.css +10 -10
  68. package/components/InlineEdit/inline-edit.scss +10 -10
  69. package/components/InputGroup/input-group.css +16 -16
  70. package/components/InputGroup/input-group.scss +16 -16
  71. package/components/JumpLinks/jump-links.css +75 -75
  72. package/components/JumpLinks/jump-links.scss +75 -75
  73. package/components/Label/label-group.css +26 -26
  74. package/components/Label/label-group.scss +26 -26
  75. package/components/Label/label.css +30 -30
  76. package/components/Label/label.scss +30 -30
  77. package/components/List/list.css +27 -27
  78. package/components/List/list.scss +27 -27
  79. package/components/LogViewer/log-viewer.css +36 -36
  80. package/components/LogViewer/log-viewer.scss +37 -37
  81. package/components/Login/login.css +88 -88
  82. package/components/Login/login.scss +88 -88
  83. package/components/Menu/menu.css +20 -20
  84. package/components/Menu/menu.scss +20 -20
  85. package/components/MenuToggle/menu-toggle.css +58 -58
  86. package/components/MenuToggle/menu-toggle.scss +58 -58
  87. package/components/ModalBox/modal-box.css +39 -39
  88. package/components/ModalBox/modal-box.scss +39 -39
  89. package/components/MultipleFileUpload/multiple-file-upload.css +32 -32
  90. package/components/MultipleFileUpload/multiple-file-upload.scss +32 -32
  91. package/components/NotificationBadge/notification-badge.css +16 -16
  92. package/components/NotificationBadge/notification-badge.scss +16 -16
  93. package/components/NotificationDrawer/notification-drawer.css +41 -41
  94. package/components/NotificationDrawer/notification-drawer.scss +41 -41
  95. package/components/NumberInput/number-input.css +2 -2
  96. package/components/NumberInput/number-input.scss +2 -2
  97. package/components/OptionsMenu/options-menu.css +79 -79
  98. package/components/OptionsMenu/options-menu.scss +79 -79
  99. package/components/Page/page.css +181 -181
  100. package/components/Page/page.scss +131 -131
  101. package/components/Pagination/pagination.css +24 -24
  102. package/components/Pagination/pagination.scss +24 -24
  103. package/components/Panel/panel.css +24 -24
  104. package/components/Panel/panel.scss +24 -24
  105. package/components/Popover/popover.css +48 -48
  106. package/components/Popover/popover.scss +48 -48
  107. package/components/Progress/progress.css +4 -4
  108. package/components/Progress/progress.scss +4 -4
  109. package/components/ProgressStepper/progress-stepper.css +225 -225
  110. package/components/ProgressStepper/progress-stepper.scss +93 -93
  111. package/components/Radio/radio.css +6 -6
  112. package/components/Radio/radio.scss +6 -6
  113. package/components/Select/select.css +171 -171
  114. package/components/Select/select.scss +171 -171
  115. package/components/Sidebar/sidebar.css +44 -44
  116. package/components/Sidebar/sidebar.scss +44 -44
  117. package/components/SimpleList/simple-list.css +18 -18
  118. package/components/SimpleList/simple-list.scss +18 -18
  119. package/components/Skeleton/skeleton.css +4 -4
  120. package/components/Skeleton/skeleton.scss +4 -4
  121. package/components/SkipToContent/skip-to-content.css +4 -4
  122. package/components/SkipToContent/skip-to-content.scss +4 -4
  123. package/components/Slider/slider.css +25 -25
  124. package/components/Slider/slider.scss +25 -25
  125. package/components/Switch/switch.css +4 -4
  126. package/components/Switch/switch.scss +4 -4
  127. package/components/TabContent/tab-content.css +24 -24
  128. package/components/TabContent/tab-content.scss +24 -24
  129. package/components/Table/table-grid.css +404 -404
  130. package/components/Table/table-grid.scss +116 -116
  131. package/components/Table/table-scrollable.css +16 -16
  132. package/components/Table/table-scrollable.scss +16 -16
  133. package/components/Table/table-tree-view.css +251 -251
  134. package/components/Table/table-tree-view.scss +59 -59
  135. package/components/Table/table.css +122 -122
  136. package/components/Table/table.scss +122 -122
  137. package/components/Tabs/tabs.css +118 -118
  138. package/components/Tabs/tabs.scss +118 -118
  139. package/components/TextInputGroup/text-input-group.css +26 -26
  140. package/components/TextInputGroup/text-input-group.scss +26 -26
  141. package/components/Tile/tile.css +13 -13
  142. package/components/Tile/tile.scss +13 -13
  143. package/components/ToggleGroup/toggle-group.css +28 -28
  144. package/components/ToggleGroup/toggle-group.scss +28 -28
  145. package/components/Tooltip/tooltip.css +26 -26
  146. package/components/Tooltip/tooltip.scss +26 -26
  147. package/components/TreeView/tree-view.css +181 -181
  148. package/components/TreeView/tree-view.scss +122 -122
  149. package/components/Wizard/wizard.css +88 -88
  150. package/components/Wizard/wizard.scss +88 -88
  151. package/components/_index.css +4240 -4239
  152. package/docs/components/Drawer/examples/Drawer.md +1 -1
  153. package/docs/components/Slider/examples/Slider.md +39 -39
  154. package/docs/components/Table/examples/Table.md +20 -20
  155. package/docs/demos/Card/examples/Card.css +2 -2
  156. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -44
  157. package/docs/demos/Table/examples/Table.md +20 -20
  158. package/package.json +1 -1
  159. package/patternfly-no-globals.css +4240 -4239
  160. package/patternfly.css +4240 -4239
  161. package/patternfly.min.css +1 -1
  162. package/patternfly.min.css.map +1 -1
package/components/JumpLinks/jump-links.css CHANGED
@@ -1,58 +1,58 @@
1
1
  :where(:root, .pf-v6-c-jump-links) {
2
2
  --pf-v6-c-jump-links__list--Display: flex;
3
- --pf-v6-c-jump-links__list--PaddingTop: 0;
4
- --pf-v6-c-jump-links__list--PaddingRight: var(--pf-t--global--spacer--md);
5
- --pf-v6-c-jump-links__list--PaddingBottom: 0;
6
- --pf-v6-c-jump-links__list--PaddingLeft: var(--pf-t--global--spacer--md);
7
- --pf-v6-c-jump-links--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
8
- --pf-v6-c-jump-links--m-vertical__list--PaddingRight: 0;
9
- --pf-v6-c-jump-links--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
10
- --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;
11
11
  --pf-v6-c-jump-links__list--FlexDirection: row;
12
12
  --pf-v6-c-jump-links--m-vertical__list--FlexDirection: column;
13
13
  --pf-v6-c-jump-links__list--before--BorderColor: var(--pf-t--global--border--color--default);
14
- --pf-v6-c-jump-links__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
15
- --pf-v6-c-jump-links__list--before--BorderRightWidth: 0;
16
- --pf-v6-c-jump-links__list--before--BorderBottomWidth: 0;
17
- --pf-v6-c-jump-links__list--before--BorderLeftWidth: 0;
18
- --pf-v6-c-jump-links--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
19
- --pf-v6-c-jump-links--m-vertical__list--before--BorderTopWidth: 0;
20
- --pf-v6-c-jump-links__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
21
- --pf-v6-c-jump-links__link--PaddingTop: var(--pf-t--global--spacer--sm);
22
- --pf-v6-c-jump-links__link--PaddingRight: var(--pf-t--global--spacer--sm);
23
- --pf-v6-c-jump-links__link--PaddingBottom: var(--pf-t--global--spacer--sm);
24
- --pf-v6-c-jump-links__link--PaddingLeft: var(--pf-t--global--spacer--sm);
25
- --pf-v6-c-jump-links__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
26
- --pf-v6-c-jump-links__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
27
- --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);
28
28
  --pf-v6-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
29
- --pf-v6-c-jump-links__link--before--BorderTopWidth: 0;
30
- --pf-v6-c-jump-links__link--before--BorderRightWidth: 0;
31
- --pf-v6-c-jump-links__link--before--BorderBottomWidth: 0;
32
- --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;
33
33
  --pf-v6-c-jump-links__link--before--BorderColor: transparent;
34
- --pf-v6-c-jump-links__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
35
- --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;
36
36
  --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
37
- --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
38
- --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);
39
39
  --pf-v6-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
40
40
  --pf-v6-c-jump-links__link--hover__link-text--Color: var(--pf-t--global--text--color--subtle);
41
41
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
42
- --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);
43
43
  --pf-v6-c-jump-links__label--Display: block;
44
- --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
45
- --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
46
- --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links__toggle--MarginBottom--base);
47
- --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));
48
- --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));
49
49
  --pf-v6-c-jump-links__toggle--Display: none;
50
50
  --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
51
51
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
52
52
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
53
53
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
54
54
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
55
- --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);
56
56
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
57
57
  }
58
58
 
@@ -66,14 +66,14 @@
66
66
  align-items: center;
67
67
  }
68
68
  .pf-v6-c-jump-links.pf-m-vertical, .pf-v6-c-jump-links.pf-m-expandable {
69
- --pf-v6-c-jump-links__list--PaddingTop: var(--pf-v6-c-jump-links--m-vertical__list--PaddingTop);
70
- --pf-v6-c-jump-links__list--PaddingRight: var(--pf-v6-c-jump-links--m-vertical__list--PaddingRight);
71
- --pf-v6-c-jump-links__list--PaddingBottom: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBottom);
72
- --pf-v6-c-jump-links__list--PaddingLeft: var(--pf-v6-c-jump-links--m-vertical__list--PaddingLeft);
73
- --pf-v6-c-jump-links__list--before--BorderTopWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderTopWidth);
74
- --pf-v6-c-jump-links__list--before--BorderLeftWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderLeftWidth);
75
- --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);
76
- --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);
77
77
  --pf-v6-c-jump-links__list--FlexDirection: var(--pf-v6-c-jump-links--m-vertical__list--FlexDirection);
78
78
  flex-direction: column;
79
79
  }
@@ -149,7 +149,7 @@
149
149
  }
150
150
  .pf-v6-c-jump-links.pf-m-expanded {
151
151
  --pf-v6-c-jump-links__list--Display: flex;
152
- --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);
153
153
  --pf-v6-c-jump-links__toggle-icon--Rotate: var(--pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate);
154
154
  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-v6-c-jump-links--m-expanded__toggle-icon--Color);
155
155
  }
@@ -158,10 +158,10 @@
158
158
  position: relative;
159
159
  display: var(--pf-v6-c-jump-links__list--Display);
160
160
  flex-direction: var(--pf-v6-c-jump-links__list--FlexDirection);
161
- padding-block-start: var(--pf-v6-c-jump-links__list--PaddingTop);
162
- padding-block-end: var(--pf-v6-c-jump-links__list--PaddingBottom);
163
- padding-inline-start: var(--pf-v6-c-jump-links__list--PaddingLeft);
164
- 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);
165
165
  }
166
166
  .pf-v6-c-jump-links__list::before {
167
167
  position: absolute;
@@ -169,28 +169,28 @@
169
169
  pointer-events: none;
170
170
  content: "";
171
171
  border: solid var(--pf-v6-c-jump-links__list--before--BorderColor);
172
- border-block-start-width: var(--pf-v6-c-jump-links__list--before--BorderTopWidth);
173
- border-block-end-width: var(--pf-v6-c-jump-links__list--before--BorderBottomWidth);
174
- border-inline-start-width: var(--pf-v6-c-jump-links__list--before--BorderLeftWidth);
175
- 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);
176
176
  }
177
177
  .pf-v6-c-jump-links__list .pf-v6-c-jump-links__list {
178
- --pf-v6-c-jump-links__list--PaddingTop: 0;
179
- --pf-v6-c-jump-links__list--PaddingBottom: 0;
180
- --pf-v6-c-jump-links__link--PaddingTop: var(--pf-v6-c-jump-links__list__list__link--PaddingTop);
181
- --pf-v6-c-jump-links__link--PaddingBottom: var(--pf-v6-c-jump-links__list__list__link--PaddingBottom);
182
- --pf-v6-c-jump-links__link--PaddingLeft: var(--pf-v6-c-jump-links__list__list__link--PaddingLeft);
183
- 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);
184
184
  }
185
185
 
186
186
  .pf-v6-c-jump-links__link {
187
187
  position: relative;
188
188
  display: flex;
189
189
  flex: 1;
190
- padding-block-start: var(--pf-v6-c-jump-links__link--PaddingTop);
191
- padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBottom);
192
- padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingLeft);
193
- 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);
194
194
  text-decoration: none;
195
195
  outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
196
196
  }
@@ -204,18 +204,18 @@
204
204
  content: "";
205
205
  border-color: var(--pf-v6-c-jump-links__link--before--BorderColor);
206
206
  border-style: solid;
207
- border-block-start-width: var(--pf-v6-c-jump-links__link--before--BorderTopWidth);
208
- border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBottomWidth);
209
- border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderLeftWidth);
210
- 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);
211
211
  }
212
212
 
213
213
  .pf-v6-c-jump-links__item {
214
214
  --pf-v6-c-jump-links__list--before--BorderColor: transparent;
215
215
  }
216
216
  .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link {
217
- --pf-v6-c-jump-links__link--before--BorderTopWidth: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderTopWidth);
218
- --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);
219
219
  --pf-v6-c-jump-links__link--before--BorderColor: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderColor);
220
220
  --pf-v6-c-jump-links__link-text--Color: var(--pf-v6-c-jump-links__item--m-current__link-text--Color);
221
221
  }
@@ -226,7 +226,7 @@
226
226
 
227
227
  .pf-v6-c-jump-links__label {
228
228
  display: var(--pf-v6-c-jump-links__label--Display);
229
- margin-block-end: var(--pf-v6-c-jump-links__label--MarginBottom);
229
+ margin-block-end: var(--pf-v6-c-jump-links__label--MarginBlockEnd);
230
230
  }
231
231
 
232
232
  .pf-v6-c-jump-links__main {
@@ -236,9 +236,9 @@
236
236
 
237
237
  .pf-v6-c-jump-links__toggle {
238
238
  display: var(--pf-v6-c-jump-links__toggle--Display);
239
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginTop);
240
- margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBottom);
241
- 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);
242
242
  }
243
243
  .pf-v6-c-jump-links__toggle .pf-v6-c-button {
244
244
  display: flex;
@@ -256,6 +256,6 @@
256
256
  }
257
257
 
258
258
  .pf-v6-c-jump-links__toggle-text {
259
- 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);
260
260
  color: var(--pf-v6-c-jump-links__toggle-text--Color);
261
261
  }
package/components/JumpLinks/jump-links.scss CHANGED
@@ -5,46 +5,46 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
5
5
  :where(:root, .#{$jump-links}) {
6
6
  // list
7
7
  --#{$jump-links}__list--Display: flex;
8
- --#{$jump-links}__list--PaddingTop: 0;
9
- --#{$jump-links}__list--PaddingRight: var(--pf-t--global--spacer--md);
10
- --#{$jump-links}__list--PaddingBottom: 0;
11
- --#{$jump-links}__list--PaddingLeft: var(--pf-t--global--spacer--md);
12
- --#{$jump-links}--m-vertical__list--PaddingTop: var(--pf-t--global--spacer--md);
13
- --#{$jump-links}--m-vertical__list--PaddingRight: 0;
14
- --#{$jump-links}--m-vertical__list--PaddingBottom: var(--pf-t--global--spacer--md);
15
- --#{$jump-links}--m-vertical__list--PaddingLeft: 0;
8
+ --#{$jump-links}__list--PaddingBlockStart: 0;
9
+ --#{$jump-links}__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10
+ --#{$jump-links}__list--PaddingBlockEnd: 0;
11
+ --#{$jump-links}__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
12
+ --#{$jump-links}--m-vertical__list--PaddingBlockStart: var(--pf-t--global--spacer--md);
13
+ --#{$jump-links}--m-vertical__list--PaddingInlineEnd: 0;
14
+ --#{$jump-links}--m-vertical__list--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15
+ --#{$jump-links}--m-vertical__list--PaddingInlineStart: 0;
16
16
  --#{$jump-links}__list--FlexDirection: row;
17
17
  --#{$jump-links}--m-vertical__list--FlexDirection: column;
18
18
  --#{$jump-links}__list--before--BorderColor: var(--pf-t--global--border--color--default);
19
- --#{$jump-links}__list--before--BorderTopWidth: var(--pf-t--global--border--width--box--default);
20
- --#{$jump-links}__list--before--BorderRightWidth: 0;
21
- --#{$jump-links}__list--before--BorderBottomWidth: 0;
22
- --#{$jump-links}__list--before--BorderLeftWidth: 0;
23
- --#{$jump-links}--m-vertical__list--before--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
24
- --#{$jump-links}--m-vertical__list--before--BorderTopWidth: 0;
25
- --#{$jump-links}__list__list--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
19
+ --#{$jump-links}__list--before--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default);
20
+ --#{$jump-links}__list--before--BorderInlineEndWidth: 0;
21
+ --#{$jump-links}__list--before--BorderBlockEndWidth: 0;
22
+ --#{$jump-links}__list--before--BorderInlineStartWidth: 0;
23
+ --#{$jump-links}--m-vertical__list--before--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default);
24
+ --#{$jump-links}--m-vertical__list--before--BorderBlockStartWidth: 0;
25
+ --#{$jump-links}__list__list--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
26
26
 
27
27
  // link
28
- --#{$jump-links}__link--PaddingTop: var(--pf-t--global--spacer--sm);
29
- --#{$jump-links}__link--PaddingRight: var(--pf-t--global--spacer--sm);
30
- --#{$jump-links}__link--PaddingBottom: var(--pf-t--global--spacer--sm);
31
- --#{$jump-links}__link--PaddingLeft: var(--pf-t--global--spacer--sm);
32
- --#{$jump-links}__list__list__link--PaddingTop: var(--pf-t--global--spacer--sm);
33
- --#{$jump-links}__list__list__link--PaddingLeft: var(--pf-t--global--spacer--lg);
34
- --#{$jump-links}__list__list__link--PaddingBottom: var(--pf-t--global--spacer--sm);
28
+ --#{$jump-links}__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
29
+ --#{$jump-links}__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
30
+ --#{$jump-links}__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
31
+ --#{$jump-links}__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
32
+ --#{$jump-links}__list__list__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
33
+ --#{$jump-links}__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg);
34
+ --#{$jump-links}__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
35
35
  --#{$jump-links}__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
36
36
 
37
37
  // before
38
- --#{$jump-links}__link--before--BorderTopWidth: 0;
39
- --#{$jump-links}__link--before--BorderRightWidth: 0;
40
- --#{$jump-links}__link--before--BorderBottomWidth: 0;
41
- --#{$jump-links}__link--before--BorderLeftWidth: 0;
38
+ --#{$jump-links}__link--before--BorderBlockStartWidth: 0;
39
+ --#{$jump-links}__link--before--BorderInlineEndWidth: 0;
40
+ --#{$jump-links}__link--before--BorderBlockEndWidth: 0;
41
+ --#{$jump-links}__link--before--BorderInlineStartWidth: 0;
42
42
  --#{$jump-links}__link--before--BorderColor: transparent;
43
- --#{$jump-links}__item--m-current__link--before--BorderTopWidth: var(--pf-t--global--border--width--extra-strong);
44
- --#{$jump-links}__item--m-current__link--before--BorderLeftWidth: 0;
43
+ --#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
44
+ --#{$jump-links}__item--m-current__link--before--BorderInlineStartWidth: 0;
45
45
  --#{$jump-links}__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
46
- --#{$jump-links}--m-vertical__item--m-current__link--before--BorderTopWidth: 0;
47
- --#{$jump-links}--m-vertical__item--m-current__link--before--BorderLeftWidth: var(--pf-t--global--border--width--extra-strong);
46
+ --#{$jump-links}--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
47
+ --#{$jump-links}--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
48
48
 
49
49
  // text
50
50
  --#{$jump-links}__link-text--Color: var(--pf-t--global--text--color--subtle);
@@ -52,15 +52,15 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
52
52
  --#{$jump-links}__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
53
53
 
54
54
  // label
55
- --#{$jump-links}__label--MarginBottom: var(--pf-t--global--spacer--md);
55
+ --#{$jump-links}__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
56
56
  --#{$jump-links}__label--Display: block;
57
57
 
58
58
  // toggle
59
- --#{$jump-links}__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
60
- --#{$jump-links}__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
61
- --#{$jump-links}__toggle--MarginBottom: var(--#{$jump-links}__toggle--MarginBottom--base);
62
- --#{$jump-links}--m-expanded__toggle--MarginBottom: calc(var(--#{$jump-links}__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
63
- --#{$jump-links}__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
59
+ --#{$jump-links}__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
60
+ --#{$jump-links}__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
61
+ --#{$jump-links}__toggle--MarginBlockEnd: var(--#{$jump-links}__toggle--MarginBlockEnd--base);
62
+ --#{$jump-links}--m-expanded__toggle--MarginBlockEnd: calc(var(--#{$jump-links}__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
63
+ --#{$jump-links}__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
64
64
  --#{$jump-links}__toggle--Display: none;
65
65
 
66
66
  // toggle icon
@@ -71,7 +71,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
71
71
  --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
72
72
 
73
73
  // toggle text
74
- --#{$jump-links}__toggle-text--MarginLeft: var(--pf-t--global--spacer--md);
74
+ --#{$jump-links}__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
75
75
  --#{$jump-links}__toggle-text--Color: var(--pf-t--global--text--color--regular);
76
76
  }
77
77
 
@@ -88,14 +88,14 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
88
88
 
89
89
  &.pf-m-vertical,
90
90
  &.pf-m-expandable {
91
- --#{$jump-links}__list--PaddingTop: var(--#{$jump-links}--m-vertical__list--PaddingTop);
92
- --#{$jump-links}__list--PaddingRight: var(--#{$jump-links}--m-vertical__list--PaddingRight);
93
- --#{$jump-links}__list--PaddingBottom: var(--#{$jump-links}--m-vertical__list--PaddingBottom);
94
- --#{$jump-links}__list--PaddingLeft: var(--#{$jump-links}--m-vertical__list--PaddingLeft);
95
- --#{$jump-links}__list--before--BorderTopWidth: var(--#{$jump-links}--m-vertical__list--before--BorderTopWidth);
96
- --#{$jump-links}__list--before--BorderLeftWidth: var(--#{$jump-links}--m-vertical__list--before--BorderLeftWidth);
97
- --#{$jump-links}__item--m-current__link--before--BorderTopWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderTopWidth);
98
- --#{$jump-links}__item--m-current__link--before--BorderLeftWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderLeftWidth);
91
+ --#{$jump-links}__list--PaddingBlockStart: var(--#{$jump-links}--m-vertical__list--PaddingBlockStart);
92
+ --#{$jump-links}__list--PaddingInlineEnd: var(--#{$jump-links}--m-vertical__list--PaddingInlineEnd);
93
+ --#{$jump-links}__list--PaddingBlockEnd: var(--#{$jump-links}--m-vertical__list--PaddingBlockEnd);
94
+ --#{$jump-links}__list--PaddingInlineStart: var(--#{$jump-links}--m-vertical__list--PaddingInlineStart);
95
+ --#{$jump-links}__list--before--BorderBlockStartWidth: var(--#{$jump-links}--m-vertical__list--before--BorderBlockStartWidth);
96
+ --#{$jump-links}__list--before--BorderInlineStartWidth: var(--#{$jump-links}--m-vertical__list--before--BorderInlineStartWidth);
97
+ --#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
98
+ --#{$jump-links}__item--m-current__link--before--BorderInlineStartWidth: var(--#{$jump-links}--m-vertical__item--m-current__link--before--BorderInlineStartWidth);
99
99
  --#{$jump-links}__list--FlexDirection: var(--#{$jump-links}--m-vertical__list--FlexDirection);
100
100
 
101
101
  flex-direction: column;
@@ -121,7 +121,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
121
121
 
122
122
  &.pf-m-expanded {
123
123
  --#{$jump-links}__list--Display: flex;
124
- --#{$jump-links}__toggle--MarginBottom: var(--#{$jump-links}--m-expanded__toggle--MarginBottom);
124
+ --#{$jump-links}__toggle--MarginBlockEnd: var(--#{$jump-links}--m-expanded__toggle--MarginBlockEnd);
125
125
  --#{$jump-links}__toggle-icon--Rotate: var(--#{$jump-links}--m-expanded__toggle-icon--Rotate);
126
126
  --#{$jump-links}__toggle-icon--Color: var(--#{$jump-links}--m-expanded__toggle-icon--Color);
127
127
  }
@@ -131,10 +131,10 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
131
131
  position: relative;
132
132
  display: var(--#{$jump-links}__list--Display);
133
133
  flex-direction: var(--#{$jump-links}__list--FlexDirection);
134
- padding-block-start: var(--#{$jump-links}__list--PaddingTop);
135
- padding-block-end: var(--#{$jump-links}__list--PaddingBottom);
136
- padding-inline-start: var(--#{$jump-links}__list--PaddingLeft);
137
- padding-inline-end: var(--#{$jump-links}__list--PaddingRight);
134
+ padding-block-start: var(--#{$jump-links}__list--PaddingBlockStart);
135
+ padding-block-end: var(--#{$jump-links}__list--PaddingBlockEnd);
136
+ padding-inline-start: var(--#{$jump-links}__list--PaddingInlineStart);
137
+ padding-inline-end: var(--#{$jump-links}__list--PaddingInlineEnd);
138
138
 
139
139
  &::before {
140
140
  position: absolute;
@@ -142,20 +142,20 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
142
142
  pointer-events: none;
143
143
  content: "";
144
144
  border: solid var(--#{$jump-links}__list--before--BorderColor);
145
- border-block-start-width: var(--#{$jump-links}__list--before--BorderTopWidth);
146
- border-block-end-width: var(--#{$jump-links}__list--before--BorderBottomWidth);
147
- border-inline-start-width: var(--#{$jump-links}__list--before--BorderLeftWidth);
148
- border-inline-end-width: var(--#{$jump-links}__list--before--BorderRightWidth);
145
+ border-block-start-width: var(--#{$jump-links}__list--before--BorderBlockStartWidth);
146
+ border-block-end-width: var(--#{$jump-links}__list--before--BorderBlockEndWidth);
147
+ border-inline-start-width: var(--#{$jump-links}__list--before--BorderInlineStartWidth);
148
+ border-inline-end-width: var(--#{$jump-links}__list--before--BorderInlineEndWidth);
149
149
  }
150
150
 
151
151
  .#{$jump-links}__list {
152
- --#{$jump-links}__list--PaddingTop: 0;
153
- --#{$jump-links}__list--PaddingBottom: 0;
154
- --#{$jump-links}__link--PaddingTop: var(--#{$jump-links}__list__list__link--PaddingTop);
155
- --#{$jump-links}__link--PaddingBottom: var(--#{$jump-links}__list__list__link--PaddingBottom);
156
- --#{$jump-links}__link--PaddingLeft: var(--#{$jump-links}__list__list__link--PaddingLeft);
152
+ --#{$jump-links}__list--PaddingBlockStart: 0;
153
+ --#{$jump-links}__list--PaddingBlockEnd: 0;
154
+ --#{$jump-links}__link--PaddingBlockStart: var(--#{$jump-links}__list__list__link--PaddingBlockStart);
155
+ --#{$jump-links}__link--PaddingBlockEnd: var(--#{$jump-links}__list__list__link--PaddingBlockEnd);
156
+ --#{$jump-links}__link--PaddingInlineStart: var(--#{$jump-links}__list__list__link--PaddingInlineStart);
157
157
 
158
- margin-block-start: var(--#{$jump-links}__list__list--MarginTop);
158
+ margin-block-start: var(--#{$jump-links}__list__list--MarginBlockStart);
159
159
  }
160
160
  }
161
161
 
@@ -163,10 +163,10 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
163
163
  position: relative;
164
164
  display: flex;
165
165
  flex: 1;
166
- padding-block-start: var(--#{$jump-links}__link--PaddingTop);
167
- padding-block-end: var(--#{$jump-links}__link--PaddingBottom);
168
- padding-inline-start: var(--#{$jump-links}__link--PaddingLeft);
169
- padding-inline-end: var(--#{$jump-links}__link--PaddingRight);
166
+ padding-block-start: var(--#{$jump-links}__link--PaddingBlockStart);
167
+ padding-block-end: var(--#{$jump-links}__link--PaddingBlockEnd);
168
+ padding-inline-start: var(--#{$jump-links}__link--PaddingInlineStart);
169
+ padding-inline-end: var(--#{$jump-links}__link--PaddingInlineEnd);
170
170
  text-decoration: none;
171
171
  outline-offset: var(--#{$jump-links}__link--OutlineOffset);
172
172
 
@@ -182,10 +182,10 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
182
182
  content: "";
183
183
  border-color: var(--#{$jump-links}__link--before--BorderColor);
184
184
  border-style: solid;
185
- border-block-start-width: var(--#{$jump-links}__link--before--BorderTopWidth);
186
- border-block-end-width: var(--#{$jump-links}__link--before--BorderBottomWidth);
187
- border-inline-start-width: var(--#{$jump-links}__link--before--BorderLeftWidth);
188
- border-inline-end-width: var(--#{$jump-links}__link--before--BorderRightWidth);
185
+ border-block-start-width: var(--#{$jump-links}__link--before--BorderBlockStartWidth);
186
+ border-block-end-width: var(--#{$jump-links}__link--before--BorderBlockEndWidth);
187
+ border-inline-start-width: var(--#{$jump-links}__link--before--BorderInlineStartWidth);
188
+ border-inline-end-width: var(--#{$jump-links}__link--before--BorderInlineEndWidth);
189
189
  }
190
190
  }
191
191
 
@@ -194,8 +194,8 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
194
194
  --#{$jump-links}__list--before--BorderColor: transparent;
195
195
 
196
196
  &.pf-m-current > .#{$jump-links}__link {
197
- --#{$jump-links}__link--before--BorderTopWidth: var(--#{$jump-links}__item--m-current__link--before--BorderTopWidth);
198
- --#{$jump-links}__link--before--BorderLeftWidth: var(--#{$jump-links}__item--m-current__link--before--BorderLeftWidth);
197
+ --#{$jump-links}__link--before--BorderBlockStartWidth: var(--#{$jump-links}__item--m-current__link--before--BorderBlockStartWidth);
198
+ --#{$jump-links}__link--before--BorderInlineStartWidth: var(--#{$jump-links}__item--m-current__link--before--BorderInlineStartWidth);
199
199
  --#{$jump-links}__link--before--BorderColor: var(--#{$jump-links}__item--m-current__link--before--BorderColor);
200
200
  --#{$jump-links}__link-text--Color: var(--#{$jump-links}__item--m-current__link-text--Color);
201
201
  }
@@ -208,7 +208,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
208
208
 
209
209
  .#{$jump-links}__label {
210
210
  display: var(--#{$jump-links}__label--Display);
211
- margin-block-end: var(--#{$jump-links}__label--MarginBottom);
211
+ margin-block-end: var(--#{$jump-links}__label--MarginBlockEnd);
212
212
  }
213
213
 
214
214
  .#{$jump-links}__main {
@@ -218,9 +218,9 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
218
218
 
219
219
  .#{$jump-links}__toggle {
220
220
  display: var(--#{$jump-links}__toggle--Display);
221
- margin-block-start: var(--#{$jump-links}__toggle--MarginTop);
222
- margin-block-end: var(--#{$jump-links}__toggle--MarginBottom);
223
- margin-inline-start: var(--#{$jump-links}__toggle--MarginLeft);
221
+ margin-block-start: var(--#{$jump-links}__toggle--MarginBlockStart);
222
+ margin-block-end: var(--#{$jump-links}__toggle--MarginBlockEnd);
223
+ margin-inline-start: var(--#{$jump-links}__toggle--MarginInlineStart);
224
224
 
225
225
  .#{$button} {
226
226
  display: flex;
@@ -238,6 +238,6 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
238
238
  }
239
239
 
240
240
  .#{$jump-links}__toggle-text {
241
- margin-inline-start: var(--#{$jump-links}__toggle-text--MarginLeft);
241
+ margin-inline-start: var(--#{$jump-links}__toggle-text--MarginInlineStart);
242
242
  color: var(--#{$jump-links}__toggle-text--Color);
243
243
  }
package/components/Label/label-group.css CHANGED
@@ -11,25 +11,25 @@
11
11
  --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
12
12
  --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
13
13
  --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
14
- --pf-v6-c-label-group--m-category--PaddingTop: var(--pf-t--global--spacer--xs);
15
- --pf-v6-c-label-group--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
16
- --pf-v6-c-label-group--m-category--PaddingBottom: var(--pf-t--global--spacer--xs);
17
- --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);
18
18
  --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
19
19
  --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
20
20
  --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
21
- --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);
22
22
  --pf-v6-c-label-group__label--MaxWidth: 18ch;
23
23
  --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
24
- --pf-v6-c-label-group__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
25
- --pf-v6-c-label-group__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
26
- --pf-v6-c-label-group__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
27
- --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);
28
28
  --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
29
- --pf-v6-c-label-group__textarea--PaddingTop: 0.125rem;
30
- --pf-v6-c-label-group__textarea--PaddingRight: var(--pf-t--global--spacer--xs);
31
- --pf-v6-c-label-group__textarea--PaddingBottom: 0;
32
- --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);
33
33
  }
34
34
 
35
35
  .pf-v6-c-label-group {
@@ -39,10 +39,10 @@
39
39
  align-items: center;
40
40
  }
41
41
  .pf-v6-c-label-group.pf-m-category {
42
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingTop);
43
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBottom);
44
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingLeft);
45
- 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);
46
46
  background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
47
47
  border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
48
48
  border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
@@ -54,7 +54,7 @@
54
54
  --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
55
55
  --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
56
56
  --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
57
- --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);
58
58
  }
59
59
  .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
60
60
  align-items: flex-start;
@@ -111,18 +111,18 @@
111
111
  }
112
112
  .pf-v6-c-label-group__close .pf-v6-c-button {
113
113
  --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
114
- --pf-v6-c-button--m-plain--m-no-padding--PaddingTop: var(--pf-v6-c-label-group__close--c-button--PaddingTop);
115
- --pf-v6-c-button--m-plain--m-no-padding--PaddingRight: var(--pf-v6-c-label-group__close--c-button--PaddingRight);
116
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBottom: var(--pf-v6-c-label-group__close--c-button--PaddingBottom);
117
- --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);
118
118
  }
119
119
 
120
120
  .pf-v6-c-label-group__textarea {
121
121
  min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
122
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingTop);
123
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBottom);
124
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingLeft);
125
- 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);
126
126
  white-space: nowrap;
127
127
  resize: none;
128
128
  border: 0;