@patternfly/patternfly 6.0.0-alpha.120 → 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 +53 -53
  80. package/components/LogViewer/log-viewer.scss +55 -55
  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 +4257 -4256
  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 +4257 -4256
  160. package/patternfly.css +4257 -4256
  161. package/patternfly.min.css +1 -1
  162. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -1,9 +1,9 @@
1
1
  :where(:root, .pf-v6-c-button) {
2
2
  --pf-v6-c-button--Display: inline-block;
3
- --pf-v6-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
4
- --pf-v6-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
5
- --pf-v6-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-button--PaddingLeft: var(--pf-t--global--spacer--lg);
3
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
5
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--lg);
7
7
  --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
8
8
  --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
9
9
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body);
@@ -57,8 +57,8 @@
57
57
  --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
58
58
  --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
59
59
  --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
60
- --pf-v6-c-button--m-link--PaddingRight: var(--pf-t--global--spacer--md);
61
- --pf-v6-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
60
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
61
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
62
62
  --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
63
63
  --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
64
64
  --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
@@ -80,45 +80,45 @@
80
80
  --pf-v6-c-button--m-link--m-inline--FontSize: initial;
81
81
  --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
82
82
  --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
83
- --pf-v6-c-button--m-link--m-inline--PaddingTop: 0;
84
- --pf-v6-c-button--m-link--m-inline--PaddingRight: 0;
85
- --pf-v6-c-button--m-link--m-inline--PaddingBottom: 0;
86
- --pf-v6-c-button--m-link--m-inline--PaddingLeft: 0;
83
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
84
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
85
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
86
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
87
87
  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
88
- --pf-v6-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
89
- --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v6-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
88
+ --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
89
+ --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
90
90
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
91
91
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
92
92
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
93
- --pf-v6-c-button--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
94
- --pf-v6-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
95
- --pf-v6-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
96
- --pf-v6-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
93
+ --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
94
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
95
+ --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
96
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--sm);
97
97
  --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
98
98
  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
99
- --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--m-plain--PaddingTop) + var(--pf-v6-c-button--m-plain--PaddingBottom));
99
+ --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--m-plain--PaddingBlockStart) + var(--pf-v6-c-button--m-plain--PaddingBlockEnd));
100
100
  --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
101
101
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
102
102
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
103
103
  --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
104
104
  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
105
105
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
106
- --pf-v6-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
107
- --pf-v6-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
108
- --pf-v6-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
109
- --pf-v6-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
106
+ --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
107
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
108
+ --pf-v6-c-button--m-plain--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
109
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--xs);
110
110
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
111
- --pf-v6-c-button--m-plain--m-no-padding--PaddingTop: 0;
112
- --pf-v6-c-button--m-plain--m-no-padding--PaddingRight: 0;
113
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBottom: 0;
114
- --pf-v6-c-button--m-plain--m-no-padding--PaddingLeft: 0;
111
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
112
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
113
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
114
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
115
115
  --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
116
116
  --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
117
117
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
118
118
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
119
119
  --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
120
- --pf-v6-c-button--m-control--PaddingLeft: var(--pf-t--global--spacer--md);
121
- --pf-v6-c-button--m-control--PaddingRight: var(--pf-t--global--spacer--md);
120
+ --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--md);
121
+ --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--md);
122
122
  --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
123
123
  --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
124
124
  --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
@@ -135,8 +135,8 @@
135
135
  --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
136
136
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
137
137
  --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
138
- --pf-v6-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
139
- --pf-v6-c-button--m-stateful--PaddingRight: var(--pf-t--global--spacer--md);
138
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--md);
139
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--md);
140
140
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
141
141
  --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
142
142
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -179,16 +179,16 @@
179
179
  --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
180
180
  --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
181
181
  --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
182
- --pf-v6-c-button--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
183
- --pf-v6-c-button--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
184
- --pf-v6-c-button--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
185
- --pf-v6-c-button--m-display-lg--PaddingLeft: var(--pf-t--global--spacer--xl);
182
+ --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--md);
183
+ --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
184
+ --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--md);
185
+ --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--xl);
186
186
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
187
187
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
188
- --pf-v6-c-button--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
189
- --pf-v6-c-button--m-small--PaddingRight: var(--pf-t--global--spacer--md);
190
- --pf-v6-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
191
- --pf-v6-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
188
+ --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
189
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--md);
190
+ --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
191
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--md);
192
192
  --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
193
193
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
194
194
  --pf-v6-c-button--disabled--BorderColor: transparent;
@@ -196,25 +196,25 @@
196
196
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
197
197
  --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
198
198
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
199
- --pf-v6-c-button__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
200
- --pf-v6-c-button__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
199
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
200
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
201
201
  --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
202
202
  --pf-v6-c-button__progress--Opacity: 0;
203
203
  --pf-v6-c-button__progress--TranslateY: -50%;
204
204
  --pf-v6-c-button__progress--TranslateX: 0;
205
- --pf-v6-c-button__progress--Top: 50%;
206
- --pf-v6-c-button__progress--Left: var(--pf-t--global--spacer--md);
205
+ --pf-v6-c-button__progress--InsetBlockStart: 50%;
206
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
207
207
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
208
208
  --pf-v6-c-button--m-progress--TransitionProperty: padding;
209
209
  --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
210
- --pf-v6-c-button--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
211
- --pf-v6-c-button--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
212
- --pf-v6-c-button--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
213
- --pf-v6-c-button--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width));
210
+ --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
211
+ --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
212
+ --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
213
+ --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width));
214
214
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
215
- --pf-v6-c-button--m-in-progress--m-plain__progress--Left: 50%;
215
+ --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
216
216
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
217
- --pf-v6-c-button__count--MarginLeft: var(--pf-t--global--spacer--sm);
217
+ --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
218
218
  --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
219
219
  --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
220
220
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
@@ -227,10 +227,10 @@
227
227
  flex: var(--pf-v6-c-button--Flex, initial);
228
228
  align-items: var(--pf-v6-c-button--AlignItems, initial);
229
229
  justify-content: var(--pf-v6-c-button--JustifyContent, initial);
230
- padding-block-start: var(--pf-v6-c-button--PaddingTop);
231
- padding-block-end: var(--pf-v6-c-button--PaddingBottom);
232
- padding-inline-start: var(--pf-v6-c-button--PaddingLeft);
233
- padding-inline-end: var(--pf-v6-c-button--PaddingRight);
230
+ padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
231
+ padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
232
+ padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
233
+ padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd);
234
234
  font-size: var(--pf-v6-c-button--FontSize, inherit);
235
235
  font-weight: var(--pf-v6-c-button--FontWeight, inherit);
236
236
  line-height: var(--pf-v6-c-button--LineHeight, inherit);
@@ -307,8 +307,8 @@
307
307
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color);
308
308
  }
309
309
  .pf-v6-c-button.pf-m-link {
310
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-link--PaddingRight);
311
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-link--PaddingLeft);
310
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
311
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
312
312
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
313
313
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
314
314
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
@@ -324,12 +324,12 @@
324
324
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
325
325
  --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
326
326
  --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
327
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-button--m-link--m-inline--PaddingTop);
328
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-link--m-inline--PaddingRight);
329
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-button--m-link--m-inline--PaddingBottom);
330
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-link--m-inline--PaddingLeft);
327
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart);
328
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
329
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
330
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
331
331
  --pf-v6-c-button--BackgroundColor: transparent;
332
- --pf-v6-c-button__progress--Left: var(--pf-v6-c-button--m-link--m-inline__progress--Left);
332
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
333
333
  --pf-v6-c-button--hover--TextDecoration: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecoration);
334
334
  --pf-v6-c-button--hover--BackgroundColor: transparent;
335
335
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
@@ -379,8 +379,8 @@
379
379
  }
380
380
  .pf-v6-c-button.pf-m-control {
381
381
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
382
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-control--PaddingLeft);
383
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-control--PaddingRight);
382
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart);
383
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd);
384
384
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
385
385
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
386
386
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
@@ -399,8 +399,8 @@
399
399
  }
400
400
  .pf-v6-c-button.pf-m-stateful {
401
401
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
402
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-stateful--PaddingLeft);
403
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-stateful--PaddingRight);
402
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
403
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
404
404
  }
405
405
  .pf-v6-c-button.pf-m-read {
406
406
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
@@ -436,10 +436,10 @@
436
436
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
437
437
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
438
438
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
439
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-button--m-plain--PaddingTop);
440
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-plain--PaddingRight);
441
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-button--m-plain--PaddingBottom);
442
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-plain--PaddingLeft);
439
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--PaddingBlockStart);
440
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
441
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--PaddingBlockEnd);
442
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
443
443
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
444
444
  --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
445
445
  --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
@@ -447,20 +447,20 @@
447
447
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
448
448
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
449
449
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
450
- --pf-v6-c-button--m-small--PaddingTop: var(--pf-v6-c-button--m-plain--m-small--PaddingTop);
451
- --pf-v6-c-button--m-small--PaddingRight: var(--pf-v6-c-button--m-plain--m-small--PaddingRight);
452
- --pf-v6-c-button--m-small--PaddingBottom: var(--pf-v6-c-button--m-plain--m-small--PaddingBottom);
453
- --pf-v6-c-button--m-small--PaddingLeft: var(--pf-v6-c-button--m-plain--m-small--PaddingLeft);
450
+ --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
451
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
452
+ --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockEnd);
453
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
454
454
  min-width: var(--pf-v6-c-button--m-plain--MinWidth);
455
455
  }
456
456
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
457
457
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
458
458
  --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
459
459
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
460
- --pf-v6-c-button--m-plain--PaddingTop: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingTop);
461
- --pf-v6-c-button--m-plain--PaddingRight: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingRight);
462
- --pf-v6-c-button--m-plain--PaddingBottom: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBottom);
463
- --pf-v6-c-button--m-plain--PaddingLeft: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingLeft);
460
+ --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
461
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
462
+ --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
463
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
464
464
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
465
465
  }
466
466
  .pf-v6-c-button.pf-m-block {
@@ -468,16 +468,16 @@
468
468
  width: 100%;
469
469
  }
470
470
  .pf-v6-c-button.pf-m-small {
471
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-button--m-small--PaddingTop);
472
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-small--PaddingRight);
473
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-button--m-small--PaddingBottom);
474
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-small--PaddingLeft);
471
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
472
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
473
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
474
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
475
475
  }
476
476
  .pf-v6-c-button.pf-m-display-lg {
477
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-button--m-display-lg--PaddingTop);
478
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-display-lg--PaddingRight);
479
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-button--m-display-lg--PaddingBottom);
480
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-display-lg--PaddingLeft);
477
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
478
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
479
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
480
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
481
481
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
482
482
  }
483
483
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
@@ -516,19 +516,19 @@
516
516
  cursor: default;
517
517
  }
518
518
  .pf-v6-c-button.pf-m-progress {
519
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-progress--PaddingRight);
520
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-progress--PaddingLeft);
519
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
520
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
521
521
  transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
522
522
  }
523
523
  .pf-v6-c-button.pf-m-in-progress {
524
- --pf-v6-c-button--m-link--m-inline--PaddingLeft: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
524
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
525
525
  }
526
526
  .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
527
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-in-progress--PaddingRight);
528
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-in-progress--PaddingLeft);
527
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
528
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
529
529
  }
530
530
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
531
- --pf-v6-c-button__progress--Left: var(--pf-v6-c-button--m-in-progress--m-plain__progress--Left);
531
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
532
532
  --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
533
533
  }
534
534
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
@@ -539,16 +539,16 @@
539
539
  color: var(--pf-v6-c-button__icon--Color);
540
540
  }
541
541
  .pf-v6-c-button__icon.pf-m-start {
542
- margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginRight);
542
+ margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
543
543
  }
544
544
  .pf-v6-c-button__icon.pf-m-end {
545
- margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginLeft);
545
+ margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
546
546
  }
547
547
 
548
548
  .pf-v6-c-button__progress {
549
549
  position: absolute;
550
- inset-block-start: var(--pf-v6-c-button__progress--Top);
551
- inset-inline-start: var(--pf-v6-c-button__progress--Left);
550
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
551
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
552
552
  line-height: 1;
553
553
  color: var(--pf-v6-c-button__progress--Color);
554
554
  transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
@@ -560,5 +560,5 @@
560
560
  .pf-v6-c-button__count {
561
561
  display: inline-flex;
562
562
  align-items: center;
563
- margin-inline-start: var(--pf-v6-c-button__count--MarginLeft);
563
+ margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
564
564
  }