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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (205) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +64 -64
  3. package/css/components/Accordion/accordion.css +40 -40
  4. package/css/components/ActionList/action-list.css +1 -1
  5. package/css/components/Alert/alert-group.css +15 -15
  6. package/css/components/Alert/alert.css +47 -47
  7. package/css/components/Avatar/avatar.css +1 -1
  8. package/css/components/BackToTop/back-to-top.css +16 -16
  9. package/css/components/Backdrop/backdrop.css +1 -2
  10. package/css/components/BackgroundImage/background-image.css +1 -2
  11. package/css/components/Badge/badge.css +7 -7
  12. package/css/components/Banner/banner.css +14 -14
  13. package/css/components/Breadcrumb/breadcrumb.css +16 -17
  14. package/css/components/Breadcrumb/breadcrumb.d.ts +1 -1
  15. package/css/components/Breadcrumb/breadcrumb.js +1 -1
  16. package/css/components/Breadcrumb/breadcrumb.mjs +1 -1
  17. package/css/components/Button/button.css +94 -95
  18. package/css/components/CalendarMonth/calendar-month.css +43 -44
  19. package/css/components/Card/card.css +60 -61
  20. package/css/components/Check/check.css +3 -4
  21. package/css/components/ClipboardCopy/clipboard-copy.css +37 -38
  22. package/css/components/CodeBlock/code-block.css +20 -20
  23. package/css/components/CodeEditor/code-editor.css +34 -34
  24. package/css/components/Content/content.css +155 -130
  25. package/css/components/Content/content.d.ts +19 -0
  26. package/css/components/Content/content.js +19 -0
  27. package/css/components/Content/content.mjs +19 -0
  28. package/css/components/DataList/data-list-grid.css +98 -98
  29. package/css/components/DataList/data-list.css +282 -285
  30. package/css/components/DataList/data-list.d.ts +11 -11
  31. package/css/components/DataList/data-list.js +11 -11
  32. package/css/components/DataList/data-list.mjs +11 -11
  33. package/css/components/DatePicker/date-picker.css +15 -16
  34. package/css/components/DescriptionList/description-list.css +13 -13
  35. package/css/components/Divider/divider.css +27 -31
  36. package/css/components/DragDrop/drag-drop.css +2 -2
  37. package/css/components/Drawer/drawer.css +87 -90
  38. package/css/components/DualListSelector/dual-list-selector.css +60 -59
  39. package/css/components/EmptyState/empty-state.css +33 -33
  40. package/css/components/ExpandableSection/expandable-section.css +49 -49
  41. package/css/components/FileUpload/file-upload.css +1 -2
  42. package/css/components/Form/form.css +107 -108
  43. package/css/components/FormControl/form-control.css +45 -46
  44. package/css/components/HelperText/helper-text.css +3 -3
  45. package/css/components/Hint/hint.css +19 -18
  46. package/css/components/Hint/hint.d.ts +1 -2
  47. package/css/components/Hint/hint.js +1 -2
  48. package/css/components/Hint/hint.mjs +1 -2
  49. package/css/components/Icon/icon.css +1 -2
  50. package/css/components/InlineEdit/inline-edit.css +11 -12
  51. package/css/components/InputGroup/input-group.css +17 -18
  52. package/css/components/JumpLinks/jump-links.css +76 -77
  53. package/css/components/Label/label-group.css +27 -28
  54. package/css/components/Label/label.css +31 -32
  55. package/css/components/List/list.css +27 -27
  56. package/css/components/LogViewer/log-viewer.css +53 -77
  57. package/css/components/LogViewer/log-viewer.d.ts +0 -2
  58. package/css/components/LogViewer/log-viewer.js +0 -2
  59. package/css/components/LogViewer/log-viewer.mjs +0 -2
  60. package/css/components/Login/login.css +99 -104
  61. package/css/components/Login/login.d.ts +1 -1
  62. package/css/components/Login/login.js +1 -1
  63. package/css/components/Login/login.mjs +1 -1
  64. package/css/components/Masthead/masthead.css +1 -2
  65. package/css/components/Menu/menu.css +128 -84
  66. package/css/components/MenuToggle/menu-toggle.css +59 -60
  67. package/css/components/ModalBox/modal-box.css +41 -41
  68. package/css/components/MultipleFileUpload/multiple-file-upload.css +33 -34
  69. package/css/components/Nav/nav.css +1 -2
  70. package/css/components/NotificationBadge/notification-badge.css +17 -17
  71. package/css/components/NotificationDrawer/notification-drawer.css +42 -43
  72. package/css/components/NumberInput/number-input.css +8 -12
  73. package/css/components/OverflowMenu/overflow-menu.css +1 -1
  74. package/css/components/Page/page.css +146 -365
  75. package/css/components/Page/page.d.ts +0 -25
  76. package/css/components/Page/page.js +0 -25
  77. package/css/components/Page/page.mjs +0 -25
  78. package/css/components/Pagination/pagination.css +35 -38
  79. package/css/components/Panel/panel.css +25 -26
  80. package/css/components/Popover/popover.css +48 -48
  81. package/css/components/Progress/progress.css +5 -6
  82. package/css/components/ProgressStepper/progress-stepper.css +227 -229
  83. package/css/components/Radio/radio.css +7 -8
  84. package/css/components/Sidebar/sidebar.css +45 -46
  85. package/css/components/SimpleList/simple-list.css +19 -19
  86. package/css/components/Skeleton/skeleton.css +5 -6
  87. package/css/components/SkipToContent/skip-to-content.css +5 -5
  88. package/css/components/Slider/slider.css +26 -27
  89. package/css/components/Spinner/spinner.css +1 -2
  90. package/css/components/Switch/switch.css +5 -6
  91. package/css/components/TabContent/tab-content.css +25 -26
  92. package/css/components/Table/table-grid.css +404 -404
  93. package/css/components/Table/table-scrollable.css +17 -18
  94. package/css/components/Table/table-tree-view.css +257 -258
  95. package/css/components/Table/table-tree-view.d.ts +1 -1
  96. package/css/components/Table/table-tree-view.js +1 -1
  97. package/css/components/Table/table-tree-view.mjs +1 -1
  98. package/css/components/Table/table.css +169 -173
  99. package/css/components/Table/table.d.ts +7 -7
  100. package/css/components/Table/table.js +7 -7
  101. package/css/components/Table/table.mjs +7 -7
  102. package/css/components/Tabs/tabs.css +119 -120
  103. package/css/components/TextInputGroup/text-input-group.css +28 -29
  104. package/css/components/TextInputGroup/text-input-group.d.ts +1 -1
  105. package/css/components/TextInputGroup/text-input-group.js +1 -1
  106. package/css/components/TextInputGroup/text-input-group.mjs +1 -1
  107. package/css/components/Tile/tile.css +14 -15
  108. package/css/components/Timestamp/timestamp.css +1 -1
  109. package/css/components/Title/title.css +1 -1
  110. package/css/components/ToggleGroup/toggle-group.css +29 -30
  111. package/css/components/Toolbar/toolbar.css +94 -80
  112. package/css/components/Toolbar/toolbar.d.ts +2 -2
  113. package/css/components/Toolbar/toolbar.js +2 -2
  114. package/css/components/Toolbar/toolbar.mjs +2 -2
  115. package/css/components/Tooltip/tooltip.css +27 -27
  116. package/css/components/TreeView/tree-view.css +182 -183
  117. package/css/components/Truncate/truncate.css +1 -2
  118. package/css/components/Wizard/wizard.css +158 -140
  119. package/css/components/Wizard/wizard.d.ts +5 -2
  120. package/css/components/Wizard/wizard.js +5 -2
  121. package/css/components/Wizard/wizard.mjs +5 -2
  122. package/css/components/_index.css +23396 -0
  123. package/css/components/_index.d.ts +1497 -0
  124. package/css/components/_index.js +1498 -0
  125. package/css/components/_index.mjs +1496 -0
  126. package/css/docs/components/LogViewer/examples/LogViewer.css +9 -2
  127. package/css/docs/components/LogViewer/examples/LogViewer.d.ts +2 -0
  128. package/css/docs/components/LogViewer/examples/LogViewer.js +2 -0
  129. package/css/docs/components/LogViewer/examples/LogViewer.mjs +2 -0
  130. package/css/docs/components/Nav/examples/Navigation.css +0 -5
  131. package/css/docs/components/Nav/examples/Navigation.d.ts +0 -1
  132. package/css/docs/components/Nav/examples/Navigation.js +0 -1
  133. package/css/docs/components/Nav/examples/Navigation.mjs +0 -1
  134. package/css/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  135. package/css/docs/components/Table/examples/Table.css +7 -0
  136. package/css/docs/components/Table/examples/Table.d.ts +2 -0
  137. package/css/docs/components/Table/examples/Table.js +2 -0
  138. package/css/docs/components/Table/examples/Table.mjs +2 -0
  139. package/css/docs/demos/Card/examples/Card.css +2 -2
  140. package/css/docs/demos/Toolbar/examples/Toolbar.css +1 -17
  141. package/css/docs/utilities/Alignment/examples/Alignment.css +2 -2
  142. package/css/docs/utilities/Display/examples/Display.css +3 -10
  143. package/css/docs/utilities/Display/examples/Display.d.ts +0 -8
  144. package/css/docs/utilities/Display/examples/Display.js +0 -8
  145. package/css/docs/utilities/Display/examples/Display.mjs +0 -8
  146. package/css/docs/utilities/Flex/examples/Flex.css +2 -2
  147. package/css/docs/utilities/Float/examples/Float.css +3 -3
  148. package/css/docs/utilities/Sizing/examples/Sizing.css +2 -2
  149. package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
  150. package/css/layouts/Bullseye/bullseye.css +1 -2
  151. package/css/layouts/Flex/flex.css +1 -2
  152. package/css/layouts/Gallery/gallery.css +1 -2
  153. package/css/layouts/Grid/grid.css +1 -2
  154. package/css/layouts/Level/level.css +1 -2
  155. package/css/layouts/Split/split.css +1 -2
  156. package/css/layouts/Stack/stack.css +1 -2
  157. package/css/layouts/_index.css +3454 -0
  158. package/css/layouts/_index.d.ts +846 -0
  159. package/css/layouts/_index.js +847 -0
  160. package/css/layouts/_index.mjs +845 -0
  161. package/css/utilities/BackgroundColor/{BackgroundColor.d.ts → background-color.d.ts} +1 -1
  162. package/css/utilities/BackgroundColor/{BackgroundColor.js → background-color.js} +1 -1
  163. package/css/utilities/BackgroundColor/{BackgroundColor.mjs → background-color.mjs} +1 -1
  164. package/css/utilities/Display/display.css +38 -0
  165. package/css/utilities/Display/display.d.ts +12 -0
  166. package/css/utilities/Display/display.js +12 -0
  167. package/css/utilities/Display/display.mjs +12 -0
  168. package/css/utilities/_index.css +7815 -0
  169. package/css/utilities/_index.d.ts +1671 -0
  170. package/css/utilities/_index.js +1672 -0
  171. package/css/utilities/_index.mjs +1670 -0
  172. package/package.json +3 -3
  173. package/css/components/AppLauncher/app-launcher.css +0 -244
  174. package/css/components/AppLauncher/app-launcher.d.ts +0 -29
  175. package/css/components/AppLauncher/app-launcher.js +0 -30
  176. package/css/components/AppLauncher/app-launcher.mjs +0 -28
  177. package/css/components/Chip/chip-group.css +0 -93
  178. package/css/components/Chip/chip-group.d.ts +0 -13
  179. package/css/components/Chip/chip-group.js +0 -14
  180. package/css/components/Chip/chip-group.mjs +0 -12
  181. package/css/components/Chip/chip.css +0 -122
  182. package/css/components/Chip/chip.d.ts +0 -16
  183. package/css/components/Chip/chip.js +0 -17
  184. package/css/components/Chip/chip.mjs +0 -15
  185. package/css/components/ContextSelector/context-selector.css +0 -336
  186. package/css/components/ContextSelector/context-selector.d.ts +0 -25
  187. package/css/components/ContextSelector/context-selector.js +0 -26
  188. package/css/components/ContextSelector/context-selector.mjs +0 -24
  189. package/css/components/Dropdown/dropdown.css +0 -686
  190. package/css/components/Dropdown/dropdown.d.ts +0 -55
  191. package/css/components/Dropdown/dropdown.js +0 -56
  192. package/css/components/Dropdown/dropdown.mjs +0 -54
  193. package/css/components/OptionsMenu/options-menu.css +0 -279
  194. package/css/components/OptionsMenu/options-menu.d.ts +0 -27
  195. package/css/components/OptionsMenu/options-menu.js +0 -28
  196. package/css/components/OptionsMenu/options-menu.mjs +0 -26
  197. package/css/components/Select/select.css +0 -599
  198. package/css/components/Select/select.d.ts +0 -61
  199. package/css/components/Select/select.js +0 -62
  200. package/css/components/Select/select.mjs +0 -60
  201. package/css/docs/components/Page/deprecated/PageHeader.css +0 -17
  202. package/css/docs/components/Page/deprecated/PageHeader.d.ts +0 -12
  203. package/css/docs/components/Page/deprecated/PageHeader.js +0 -13
  204. package/css/docs/components/Page/deprecated/PageHeader.mjs +0 -11
  205. /package/css/utilities/BackgroundColor/{BackgroundColor.css → background-color.css} +0 -0
@@ -1,33 +1,33 @@
1
- :root {
2
- --pf-v6-c-back-to-top--Right: var(--pf-t--global--spacer--2xl);
3
- --pf-v6-c-back-to-top--Bottom: var(--pf-t--global--spacer--lg);
4
- --pf-v6-c-back-to-top--md--Bottom: var(--pf-t--global--spacer--2xl);
1
+ :where(:root, .pf-v6-c-back-to-top) {
2
+ --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
3
+ --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-t--global--spacer--lg);
4
+ --pf-v6-c-back-to-top--md--InsetBlockEnd: var(--pf-t--global--spacer--2xl);
5
5
  --pf-v6-c-back-to-top--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
6
- --pf-v6-c-back-to-top--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
7
- --pf-v6-c-back-to-top--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
8
- --pf-v6-c-back-to-top--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
9
- --pf-v6-c-back-to-top--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
6
+ --pf-v6-c-back-to-top--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7
+ --pf-v6-c-back-to-top--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
8
+ --pf-v6-c-back-to-top--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
9
+ --pf-v6-c-back-to-top--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
11
11
  }
12
12
  @media (min-width: 768px) {
13
- :root {
14
- --pf-v6-c-back-to-top--Bottom: var(--pf-v6-c-back-to-top--md--Bottom);
13
+ :where(:root, .pf-v6-c-back-to-top) {
14
+ --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-v6-c-back-to-top--md--InsetBlockEnd);
15
15
  }
16
16
  }
17
17
 
18
18
  .pf-v6-c-back-to-top {
19
19
  position: absolute;
20
- inset-block-end: var(--pf-v6-c-back-to-top--Bottom);
21
- inset-inline-end: var(--pf-v6-c-back-to-top--Right);
20
+ inset-block-end: var(--pf-v6-c-back-to-top--InsetBlockEnd);
21
+ inset-inline-end: var(--pf-v6-c-back-to-top--InsetInlineEnd);
22
22
  }
23
23
  .pf-v6-c-back-to-top.pf-m-hidden {
24
24
  display: none;
25
25
  }
26
26
  .pf-v6-c-back-to-top .pf-v6-c-button {
27
27
  --pf-v6-c-button--FontSize: var(--pf-v6-c-back-to-top--c-button--FontSize);
28
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-back-to-top--c-button--PaddingTop);
29
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-back-to-top--c-button--PaddingRight);
30
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-back-to-top--c-button--PaddingBottom);
31
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-back-to-top--c-button--PaddingLeft);
28
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-back-to-top--c-button--PaddingBlockStart);
29
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-back-to-top--c-button--PaddingInlineEnd);
30
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-back-to-top--c-button--PaddingBlockEnd);
31
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-back-to-top--c-button--PaddingInlineStart);
32
32
  box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow);
33
33
  }
@@ -1,5 +1,4 @@
1
- :root,
2
- .pf-v6-c-backdrop {
1
+ :where(:root, .pf-v6-c-backdrop) {
3
2
  --pf-v6-c-backdrop--Position: fixed;
4
3
  --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
5
4
  --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
@@ -1,5 +1,4 @@
1
- :root,
2
- .pf-v6-c-background-image {
1
+ :where(:root, .pf-v6-c-background-image) {
3
2
  --pf-v6-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4
3
  --pf-v6-c-background-image--BackgroundImage: none;
5
4
  --pf-v6-c-background-image--BackgroundSize--min-width: 200px;
@@ -1,12 +1,12 @@
1
- :root {
1
+ :where(:root, .pf-v6-c-badge) {
2
2
  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
3
3
  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
4
4
  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
5
- --pf-v6-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
5
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
6
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7
7
  --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
8
8
  --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
9
- --pf-v6-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
9
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
10
10
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
11
11
  --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12
12
  --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
@@ -19,8 +19,8 @@
19
19
  .pf-v6-c-badge {
20
20
  display: inline-block;
21
21
  min-width: var(--pf-v6-c-badge--MinWidth);
22
- padding-inline-start: var(--pf-v6-c-badge--PaddingLeft);
23
- padding-inline-end: var(--pf-v6-c-badge--PaddingRight);
22
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
23
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
24
24
  font-size: var(--pf-v6-c-badge--FontSize);
25
25
  font-weight: var(--pf-v6-c-badge--FontWeight);
26
26
  color: var(--pf-v6-c-badge--Color);
@@ -41,6 +41,6 @@
41
41
  }
42
42
 
43
43
  .pf-v6-c-badge__toggle-icon {
44
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginLeft);
44
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
45
45
  color: var(--pf-v6-c-badge__toggle-icon--Color);
46
46
  }
@@ -1,10 +1,10 @@
1
- :root {
2
- --pf-v6-c-banner--PaddingTop: var(--pf-t--global--spacer--xs);
3
- --pf-v6-c-banner--PaddingRight: var(--pf-t--global--spacer--md);
4
- --pf-v6-c-banner--md--PaddingRight: var(--pf-t--global--spacer--lg);
5
- --pf-v6-c-banner--PaddingBottom: var(--pf-t--global--spacer--xs);
6
- --pf-v6-c-banner--PaddingLeft: var(--pf-t--global--spacer--md);
7
- --pf-v6-c-banner--md--PaddingLeft: var(--pf-t--global--spacer--lg);
1
+ :where(:root, .pf-v6-c-banner) {
2
+ --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs);
3
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4
+ --pf-v6-c-banner--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
5
+ --pf-v6-c-banner--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
6
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-t--global--spacer--md);
7
+ --pf-v6-c-banner--md--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8
8
  --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
9
9
  --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
10
10
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
@@ -44,18 +44,18 @@
44
44
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
45
45
  }
46
46
  @media (min-width: 768px) {
47
- :root {
48
- --pf-v6-c-banner--PaddingRight: var(--pf-v6-c-banner--md--PaddingRight);
49
- --pf-v6-c-banner--PaddingLeft: var(--pf-v6-c-banner--md--PaddingLeft);
47
+ :where(:root, .pf-v6-c-banner) {
48
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
49
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
50
50
  }
51
51
  }
52
52
 
53
53
  .pf-v6-c-banner {
54
54
  flex-shrink: 0;
55
- padding-block-start: var(--pf-v6-c-banner--PaddingTop);
56
- padding-block-end: var(--pf-v6-c-banner--PaddingBottom);
57
- padding-inline-start: var(--pf-v6-c-banner--PaddingLeft);
58
- padding-inline-end: var(--pf-v6-c-banner--PaddingRight);
55
+ padding-block-start: var(--pf-v6-c-banner--PaddingBlockStart);
56
+ padding-block-end: var(--pf-v6-c-banner--PaddingBlockEnd);
57
+ padding-inline-start: var(--pf-v6-c-banner--PaddingInlineStart);
58
+ padding-inline-end: var(--pf-v6-c-banner--PaddingInlineEnd);
59
59
  font-size: var(--pf-v6-c-banner--FontSize);
60
60
  color: var(--pf-v6-c-banner--Color);
61
61
  white-space: nowrap;
@@ -1,10 +1,9 @@
1
- :where(:root),
2
- :where(.pf-v6-c-breadcrumb) {
1
+ :where(:root, .pf-v6-c-breadcrumb) {
3
2
  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
4
3
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
5
- --pf-v6-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);
4
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
6
5
  --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
7
- --pf-v6-c-breadcrumb__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
6
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
8
7
  --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
9
8
  --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10
9
  --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -15,11 +14,11 @@
15
14
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
16
15
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
17
16
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
18
- --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
19
- --pf-v6-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v6-c-breadcrumb__item--MarginRight) * -1);
20
- --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
21
- --pf-v6-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginRight) * -1);
22
- --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
17
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
19
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
21
+ --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
23
22
  }
24
23
 
25
24
  .pf-v6-c-breadcrumb {
@@ -45,11 +44,11 @@
45
44
  --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
46
45
  }
47
46
  .pf-v6-c-breadcrumb__item:not(:last-child) {
48
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginRight);
47
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
49
48
  }
50
49
 
51
50
  .pf-v6-c-breadcrumb__item-divider {
52
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginRight);
51
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
53
52
  font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
54
53
  line-height: 1;
55
54
  color: var(--pf-v6-c-breadcrumb__item-divider--Color);
@@ -85,13 +84,13 @@ button.pf-v6-c-breadcrumb__link {
85
84
  }
86
85
 
87
86
  .pf-v6-c-breadcrumb__dropdown {
88
- margin-block-start: var(--pf-v6-c-breadcrumb__dropdown--MarginTop);
89
- margin-block-end: var(--pf-v6-c-breadcrumb__dropdown--MarginBottom);
90
- margin-inline-start: var(--pf-v6-c-breadcrumb__dropdown--MarginLeft);
91
- margin-inline-end: var(--pf-v6-c-breadcrumb__dropdown--MarginRight);
87
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
88
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
89
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
90
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
92
91
  }
93
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-dropdown__toggle {
94
- line-height: var(--pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
92
+ .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
93
+ line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
95
94
  }
96
95
 
97
96
  .pf-v6-c-breadcrumb__heading {
@@ -8,7 +8,7 @@ declare const _default: {
8
8
  "breadcrumbLink": "pf-v6-c-breadcrumb__link",
9
9
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
10
10
  "dirRtl": "pf-v6-m-dir-rtl",
11
- "dropdownToggle": "pf-v6-c-dropdown__toggle",
11
+ "menuToggle": "pf-v6-c-menu-toggle",
12
12
  "modifiers": {
13
13
  "current": "pf-m-current"
14
14
  }
@@ -10,7 +10,7 @@ exports.default = {
10
10
  "breadcrumbLink": "pf-v6-c-breadcrumb__link",
11
11
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
12
12
  "dirRtl": "pf-v6-m-dir-rtl",
13
- "dropdownToggle": "pf-v6-c-dropdown__toggle",
13
+ "menuToggle": "pf-v6-c-menu-toggle",
14
14
  "modifiers": {
15
15
  "current": "pf-m-current"
16
16
  }
@@ -8,7 +8,7 @@ export default {
8
8
  "breadcrumbLink": "pf-v6-c-breadcrumb__link",
9
9
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
10
10
  "dirRtl": "pf-v6-m-dir-rtl",
11
- "dropdownToggle": "pf-v6-c-dropdown__toggle",
11
+ "menuToggle": "pf-v6-c-menu-toggle",
12
12
  "modifiers": {
13
13
  "current": "pf-m-current"
14
14
  }
@@ -1,10 +1,9 @@
1
- :where(:root),
2
- :where(.pf-v6-c-button) {
1
+ :where(:root, .pf-v6-c-button) {
3
2
  --pf-v6-c-button--Display: inline-block;
4
- --pf-v6-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
5
- --pf-v6-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
6
- --pf-v6-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
7
- --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);
8
7
  --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
9
8
  --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
10
9
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body);
@@ -58,8 +57,8 @@
58
57
  --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
59
58
  --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
60
59
  --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
61
- --pf-v6-c-button--m-link--PaddingRight: var(--pf-t--global--spacer--md);
62
- --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);
63
62
  --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
64
63
  --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
65
64
  --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
@@ -81,45 +80,45 @@
81
80
  --pf-v6-c-button--m-link--m-inline--FontSize: initial;
82
81
  --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
83
82
  --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
84
- --pf-v6-c-button--m-link--m-inline--PaddingTop: 0;
85
- --pf-v6-c-button--m-link--m-inline--PaddingRight: 0;
86
- --pf-v6-c-button--m-link--m-inline--PaddingBottom: 0;
87
- --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;
88
87
  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
89
- --pf-v6-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
90
- --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));
91
90
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
92
91
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
93
92
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
94
- --pf-v6-c-button--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
95
- --pf-v6-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
96
- --pf-v6-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
97
- --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);
98
97
  --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
99
98
  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
100
- --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));
101
100
  --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
102
101
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
103
102
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
104
103
  --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
105
104
  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
106
105
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
107
- --pf-v6-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
108
- --pf-v6-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
109
- --pf-v6-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
110
- --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);
111
110
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
112
- --pf-v6-c-button--m-plain--m-no-padding--PaddingTop: 0;
113
- --pf-v6-c-button--m-plain--m-no-padding--PaddingRight: 0;
114
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBottom: 0;
115
- --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;
116
115
  --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
117
116
  --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
118
117
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
119
118
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
120
119
  --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
121
- --pf-v6-c-button--m-control--PaddingLeft: var(--pf-t--global--spacer--md);
122
- --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);
123
122
  --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
124
123
  --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
125
124
  --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
@@ -136,8 +135,8 @@
136
135
  --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
137
136
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
138
137
  --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
139
- --pf-v6-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
140
- --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);
141
140
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
142
141
  --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
143
142
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -180,16 +179,16 @@
180
179
  --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
181
180
  --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
182
181
  --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
183
- --pf-v6-c-button--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
184
- --pf-v6-c-button--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
185
- --pf-v6-c-button--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
186
- --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);
187
186
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
188
187
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
189
- --pf-v6-c-button--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
190
- --pf-v6-c-button--m-small--PaddingRight: var(--pf-t--global--spacer--md);
191
- --pf-v6-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
192
- --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);
193
192
  --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
194
193
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
195
194
  --pf-v6-c-button--disabled--BorderColor: transparent;
@@ -197,25 +196,25 @@
197
196
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
198
197
  --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
199
198
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
200
- --pf-v6-c-button__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
201
- --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);
202
201
  --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
203
202
  --pf-v6-c-button__progress--Opacity: 0;
204
203
  --pf-v6-c-button__progress--TranslateY: -50%;
205
204
  --pf-v6-c-button__progress--TranslateX: 0;
206
- --pf-v6-c-button__progress--Top: 50%;
207
- --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);
208
207
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
209
208
  --pf-v6-c-button--m-progress--TransitionProperty: padding;
210
209
  --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
211
- --pf-v6-c-button--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
212
- --pf-v6-c-button--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
213
- --pf-v6-c-button--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
214
- --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));
215
214
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
216
- --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%;
217
216
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
218
- --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);
219
218
  --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
220
219
  --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
221
220
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
@@ -228,10 +227,10 @@
228
227
  flex: var(--pf-v6-c-button--Flex, initial);
229
228
  align-items: var(--pf-v6-c-button--AlignItems, initial);
230
229
  justify-content: var(--pf-v6-c-button--JustifyContent, initial);
231
- padding-block-start: var(--pf-v6-c-button--PaddingTop);
232
- padding-block-end: var(--pf-v6-c-button--PaddingBottom);
233
- padding-inline-start: var(--pf-v6-c-button--PaddingLeft);
234
- 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);
235
234
  font-size: var(--pf-v6-c-button--FontSize, inherit);
236
235
  font-weight: var(--pf-v6-c-button--FontWeight, inherit);
237
236
  line-height: var(--pf-v6-c-button--LineHeight, inherit);
@@ -308,8 +307,8 @@
308
307
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color);
309
308
  }
310
309
  .pf-v6-c-button.pf-m-link {
311
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-link--PaddingRight);
312
- --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);
313
312
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
314
313
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
315
314
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
@@ -325,12 +324,12 @@
325
324
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
326
325
  --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
327
326
  --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
328
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-button--m-link--m-inline--PaddingTop);
329
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-link--m-inline--PaddingRight);
330
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-button--m-link--m-inline--PaddingBottom);
331
- --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);
332
331
  --pf-v6-c-button--BackgroundColor: transparent;
333
- --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);
334
333
  --pf-v6-c-button--hover--TextDecoration: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecoration);
335
334
  --pf-v6-c-button--hover--BackgroundColor: transparent;
336
335
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
@@ -380,8 +379,8 @@
380
379
  }
381
380
  .pf-v6-c-button.pf-m-control {
382
381
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
383
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-control--PaddingLeft);
384
- --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);
385
384
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
386
385
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
387
386
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
@@ -400,8 +399,8 @@
400
399
  }
401
400
  .pf-v6-c-button.pf-m-stateful {
402
401
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
403
- --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-button--m-stateful--PaddingLeft);
404
- --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);
405
404
  }
406
405
  .pf-v6-c-button.pf-m-read {
407
406
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
@@ -437,10 +436,10 @@
437
436
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
438
437
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
439
438
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
440
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-button--m-plain--PaddingTop);
441
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-plain--PaddingRight);
442
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-button--m-plain--PaddingBottom);
443
- --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);
444
443
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
445
444
  --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
446
445
  --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
@@ -448,20 +447,20 @@
448
447
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
449
448
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
450
449
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
451
- --pf-v6-c-button--m-small--PaddingTop: var(--pf-v6-c-button--m-plain--m-small--PaddingTop);
452
- --pf-v6-c-button--m-small--PaddingRight: var(--pf-v6-c-button--m-plain--m-small--PaddingRight);
453
- --pf-v6-c-button--m-small--PaddingBottom: var(--pf-v6-c-button--m-plain--m-small--PaddingBottom);
454
- --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);
455
454
  min-width: var(--pf-v6-c-button--m-plain--MinWidth);
456
455
  }
457
456
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
458
457
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
459
458
  --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
460
459
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
461
- --pf-v6-c-button--m-plain--PaddingTop: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingTop);
462
- --pf-v6-c-button--m-plain--PaddingRight: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingRight);
463
- --pf-v6-c-button--m-plain--PaddingBottom: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBottom);
464
- --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);
465
464
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
466
465
  }
467
466
  .pf-v6-c-button.pf-m-block {
@@ -469,16 +468,16 @@
469
468
  width: 100%;
470
469
  }
471
470
  .pf-v6-c-button.pf-m-small {
472
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-button--m-small--PaddingTop);
473
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-small--PaddingRight);
474
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-button--m-small--PaddingBottom);
475
- --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);
476
475
  }
477
476
  .pf-v6-c-button.pf-m-display-lg {
478
- --pf-v6-c-button--PaddingTop: var(--pf-v6-c-button--m-display-lg--PaddingTop);
479
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-display-lg--PaddingRight);
480
- --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-button--m-display-lg--PaddingBottom);
481
- --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);
482
481
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
483
482
  }
484
483
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
@@ -517,19 +516,19 @@
517
516
  cursor: default;
518
517
  }
519
518
  .pf-v6-c-button.pf-m-progress {
520
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-progress--PaddingRight);
521
- --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);
522
521
  transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
523
522
  }
524
523
  .pf-v6-c-button.pf-m-in-progress {
525
- --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);
526
525
  }
527
526
  .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
528
- --pf-v6-c-button--PaddingRight: var(--pf-v6-c-button--m-in-progress--PaddingRight);
529
- --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);
530
529
  }
531
530
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
532
- --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);
533
532
  --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
534
533
  }
535
534
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
@@ -540,16 +539,16 @@
540
539
  color: var(--pf-v6-c-button__icon--Color);
541
540
  }
542
541
  .pf-v6-c-button__icon.pf-m-start {
543
- 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);
544
543
  }
545
544
  .pf-v6-c-button__icon.pf-m-end {
546
- 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);
547
546
  }
548
547
 
549
548
  .pf-v6-c-button__progress {
550
549
  position: absolute;
551
- inset-block-start: var(--pf-v6-c-button__progress--Top);
552
- 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);
553
552
  line-height: 1;
554
553
  color: var(--pf-v6-c-button__progress--Color);
555
554
  transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
@@ -561,5 +560,5 @@
561
560
  .pf-v6-c-button__count {
562
561
  display: inline-flex;
563
562
  align-items: center;
564
- margin-inline-start: var(--pf-v6-c-button__count--MarginLeft);
563
+ margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
565
564
  }