@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/AboutModalBox/about-modal-box.css CHANGED
@@ -12,38 +12,38 @@
12
12
  --pf-v6-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
13
13
  --pf-v6-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
14
14
  --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
15
- --pf-v6-c-about-modal-box__brand--PaddingTop: var(--pf-t--global--spacer--2xl);
16
- --pf-v6-c-about-modal-box__brand--PaddingRight: var(--pf-t--global--spacer--xl);
17
- --pf-v6-c-about-modal-box__brand--PaddingLeft: var(--pf-t--global--spacer--xl);
18
- --pf-v6-c-about-modal-box__brand--PaddingBottom: var(--pf-t--global--spacer--xl);
19
- --pf-v6-c-about-modal-box__brand--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
20
- --pf-v6-c-about-modal-box__brand--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
21
- --pf-v6-c-about-modal-box__brand--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
15
+ --pf-v6-c-about-modal-box__brand--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
16
+ --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
17
+ --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-t--global--spacer--xl);
18
+ --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
19
+ --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
20
+ --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
21
+ --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
22
22
  --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
23
- --pf-v6-c-about-modal-box__close--PaddingTop: var(--pf-t--global--spacer--2xl);
24
- --pf-v6-c-about-modal-box__close--PaddingRight: var(--pf-t--global--spacer--xl);
25
- --pf-v6-c-about-modal-box__close--PaddingBottom: var(--pf-t--global--spacer--xl);
26
- --pf-v6-c-about-modal-box__close--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
27
- --pf-v6-c-about-modal-box__close--lg--PaddingRight: var(--pf-t--global--spacer--3xl);
23
+ --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
24
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
25
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
26
+ --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
27
+ --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
28
28
  --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
29
29
  --pf-v6-c-about-modal-box__brand-image--Height: 2.5rem;
30
- --pf-v6-c-about-modal-box__header--PaddingRight: var(--pf-t--global--spacer--xl);
31
- --pf-v6-c-about-modal-box__header--PaddingBottom: var(--pf-t--global--spacer--sm);
32
- --pf-v6-c-about-modal-box__header--PaddingLeft: var(--pf-t--global--spacer--xl);
33
- --pf-v6-c-about-modal-box__header--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
34
- --pf-v6-c-about-modal-box__header--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
35
- --pf-v6-c-about-modal-box__strapline--PaddingTop: var(--pf-t--global--spacer--xl);
30
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
31
+ --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
32
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
33
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
34
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
35
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
36
36
  --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
37
37
  --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
38
- --pf-v6-c-about-modal-box__strapline--sm--PaddingTop: var(--pf-t--global--spacer--2xl);
39
- --pf-v6-c-about-modal-box__content--MarginTop: var(--pf-t--global--spacer--xl);
40
- --pf-v6-c-about-modal-box__content--MarginRight: var(--pf-t--global--spacer--xl);
41
- --pf-v6-c-about-modal-box__content--MarginBottom: var(--pf-t--global--spacer--xl);
42
- --pf-v6-c-about-modal-box__content--MarginLeft: var(--pf-t--global--spacer--xl);
43
- --pf-v6-c-about-modal-box__content--sm--MarginTop: var(--pf-t--global--spacer--2xl);
44
- --pf-v6-c-about-modal-box__content--sm--MarginRight: var(--pf-t--global--spacer--3xl);
45
- --pf-v6-c-about-modal-box__content--sm--MarginBottom: var(--pf-t--global--spacer--2xl);
46
- --pf-v6-c-about-modal-box__content--sm--MarginLeft: var(--pf-t--global--spacer--3xl);
38
+ --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
39
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
40
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
41
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
42
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
43
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
44
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
45
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
46
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
47
47
  }
48
48
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) :where(:root, .pf-v6-c-about-modal-box) {
49
49
  --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
@@ -51,38 +51,38 @@
51
51
 
52
52
  @media screen and (min-width: 576px) {
53
53
  :where(:root, .pf-v6-c-about-modal-box) {
54
- --pf-v6-c-about-modal-box__brand--PaddingRight: var(--pf-v6-c-about-modal-box__brand--sm--PaddingRight);
55
- --pf-v6-c-about-modal-box__brand--PaddingLeft: var(--pf-v6-c-about-modal-box__brand--sm--PaddingLeft);
56
- --pf-v6-c-about-modal-box__brand--PaddingBottom: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBottom);
54
+ --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd);
55
+ --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart);
56
+ --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
57
57
  }
58
58
  }
59
59
  @media only screen and (min-width: 576px) {
60
60
  :where(:root, .pf-v6-c-about-modal-box) {
61
- --pf-v6-c-about-modal-box__close--PaddingBottom: var(--pf-v6-c-about-modal-box__close--sm--PaddingBottom);
61
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
62
62
  }
63
63
  }
64
64
  @media only screen and (min-width: 992px) {
65
65
  :where(:root, .pf-v6-c-about-modal-box) {
66
- --pf-v6-c-about-modal-box__close--PaddingRight: var(--pf-v6-c-about-modal-box__close--lg--PaddingRight);
66
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
67
67
  }
68
68
  }
69
69
  @media only screen and (min-width: 576px) {
70
70
  :where(:root, .pf-v6-c-about-modal-box) {
71
- --pf-v6-c-about-modal-box__header--PaddingRight: var(--pf-v6-c-about-modal-box__header--sm--PaddingRight);
72
- --pf-v6-c-about-modal-box__header--PaddingLeft: var(--pf-v6-c-about-modal-box__header--sm--PaddingLeft);
71
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
72
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
73
73
  }
74
74
  }
75
75
  @media only screen and (min-width: 576px) {
76
76
  :where(:root, .pf-v6-c-about-modal-box) {
77
- --pf-v6-c-about-modal-box__strapline--PaddingTop: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingTop);
77
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
78
78
  }
79
79
  }
80
80
  @media only screen and (min-width: 576px) {
81
81
  :where(:root, .pf-v6-c-about-modal-box) {
82
- --pf-v6-c-about-modal-box__content--MarginTop: var(--pf-v6-c-about-modal-box__content--sm--MarginTop);
83
- --pf-v6-c-about-modal-box__content--MarginRight: var(--pf-v6-c-about-modal-box__content--sm--MarginRight);
84
- --pf-v6-c-about-modal-box__content--MarginBottom: var(--pf-v6-c-about-modal-box__content--sm--MarginBottom);
85
- --pf-v6-c-about-modal-box__content--MarginLeft: var(--pf-v6-c-about-modal-box__content--sm--MarginLeft);
82
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
83
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd);
84
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd);
85
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineStart);
86
86
  }
87
87
  }
88
88
 
@@ -119,10 +119,10 @@
119
119
  .pf-v6-c-about-modal-box__brand {
120
120
  display: flex;
121
121
  grid-area: brand;
122
- padding-block-start: var(--pf-v6-c-about-modal-box__brand--PaddingTop);
123
- padding-block-end: var(--pf-v6-c-about-modal-box__brand--PaddingBottom);
124
- padding-inline-start: var(--pf-v6-c-about-modal-box__brand--PaddingLeft);
125
- padding-inline-end: var(--pf-v6-c-about-modal-box__brand--PaddingRight);
122
+ padding-block-start: var(--pf-v6-c-about-modal-box__brand--PaddingBlockStart);
123
+ padding-block-end: var(--pf-v6-c-about-modal-box__brand--PaddingBlockEnd);
124
+ padding-inline-start: var(--pf-v6-c-about-modal-box__brand--PaddingInlineStart);
125
+ padding-inline-end: var(--pf-v6-c-about-modal-box__brand--PaddingInlineEnd);
126
126
  }
127
127
 
128
128
  .pf-v6-c-about-modal-box__brand-image {
@@ -133,13 +133,13 @@
133
133
  display: flex;
134
134
  flex-direction: column;
135
135
  grid-area: header;
136
- padding-block-end: var(--pf-v6-c-about-modal-box__header--PaddingBottom);
137
- padding-inline-start: var(--pf-v6-c-about-modal-box__header--PaddingLeft);
138
- padding-inline-end: var(--pf-v6-c-about-modal-box__header--PaddingRight);
136
+ padding-block-end: var(--pf-v6-c-about-modal-box__header--PaddingBlockEnd);
137
+ padding-inline-start: var(--pf-v6-c-about-modal-box__header--PaddingInlineStart);
138
+ padding-inline-end: var(--pf-v6-c-about-modal-box__header--PaddingInlineEnd);
139
139
  }
140
140
 
141
141
  .pf-v6-c-about-modal-box__strapline {
142
- padding-block-start: var(--pf-v6-c-about-modal-box__strapline--PaddingTop);
142
+ padding-block-start: var(--pf-v6-c-about-modal-box__strapline--PaddingBlockStart);
143
143
  margin-block-start: auto;
144
144
  font-size: var(--pf-v6-c-about-modal-box__strapline--FontSize);
145
145
  color: var(--pf-v6-c-about-modal-box__strapline--Color);
@@ -149,10 +149,10 @@
149
149
  display: flex;
150
150
  flex-direction: column;
151
151
  grid-area: content;
152
- margin-block-start: var(--pf-v6-c-about-modal-box__content--MarginTop);
153
- margin-block-end: var(--pf-v6-c-about-modal-box__content--MarginBottom);
154
- margin-inline-start: var(--pf-v6-c-about-modal-box__content--MarginLeft);
155
- margin-inline-end: var(--pf-v6-c-about-modal-box__content--MarginRight);
152
+ margin-block-start: var(--pf-v6-c-about-modal-box__content--MarginBlockStart);
153
+ margin-block-end: var(--pf-v6-c-about-modal-box__content--MarginBlockEnd);
154
+ margin-inline-start: var(--pf-v6-c-about-modal-box__content--MarginInlineStart);
155
+ margin-inline-end: var(--pf-v6-c-about-modal-box__content--MarginInlineEnd);
156
156
  overflow-x: hidden;
157
157
  overflow-y: auto;
158
158
  overscroll-behavior: contain;
@@ -173,9 +173,9 @@
173
173
  grid-area: close;
174
174
  align-items: flex-start;
175
175
  justify-content: flex-end;
176
- padding-block-start: var(--pf-v6-c-about-modal-box__close--PaddingTop);
177
- padding-block-end: var(--pf-v6-c-about-modal-box__close--PaddingBottom);
178
- padding-inline-end: var(--pf-v6-c-about-modal-box__close--PaddingRight);
176
+ padding-block-start: var(--pf-v6-c-about-modal-box__close--PaddingBlockStart);
177
+ padding-block-end: var(--pf-v6-c-about-modal-box__close--PaddingBlockEnd);
178
+ padding-inline-end: var(--pf-v6-c-about-modal-box__close--PaddingInlineEnd);
179
179
  }
180
180
  @media only screen and (min-width: 576px) {
181
181
  .pf-v6-c-about-modal-box__close {
package/components/AboutModalBox/about-modal-box.scss CHANGED
@@ -22,34 +22,34 @@
22
22
  );
23
23
 
24
24
  // Brand
25
- --#{$about-modal-box}__brand--PaddingTop: var(--pf-t--global--spacer--2xl);
26
- --#{$about-modal-box}__brand--PaddingRight: var(--pf-t--global--spacer--xl);
27
- --#{$about-modal-box}__brand--PaddingLeft: var(--pf-t--global--spacer--xl);
28
- --#{$about-modal-box}__brand--PaddingBottom: var(--pf-t--global--spacer--xl);
29
- --#{$about-modal-box}__brand--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
30
- --#{$about-modal-box}__brand--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
31
- --#{$about-modal-box}__brand--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
25
+ --#{$about-modal-box}__brand--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
26
+ --#{$about-modal-box}__brand--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
27
+ --#{$about-modal-box}__brand--PaddingInlineStart: var(--pf-t--global--spacer--xl);
28
+ --#{$about-modal-box}__brand--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
29
+ --#{$about-modal-box}__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
30
+ --#{$about-modal-box}__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
31
+ --#{$about-modal-box}__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
32
32
 
33
33
  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
34
- --#{$about-modal-box}__brand--PaddingRight: var(--#{$about-modal-box}__brand--sm--PaddingRight);
35
- --#{$about-modal-box}__brand--PaddingLeft: var(--#{$about-modal-box}__brand--sm--PaddingLeft);
36
- --#{$about-modal-box}__brand--PaddingBottom: var(--#{$about-modal-box}__brand--sm--PaddingBottom);
34
+ --#{$about-modal-box}__brand--PaddingInlineEnd: var(--#{$about-modal-box}__brand--sm--PaddingInlineEnd);
35
+ --#{$about-modal-box}__brand--PaddingInlineStart: var(--#{$about-modal-box}__brand--sm--PaddingInlineStart);
36
+ --#{$about-modal-box}__brand--PaddingBlockEnd: var(--#{$about-modal-box}__brand--sm--PaddingBlockEnd);
37
37
  }
38
38
 
39
39
  // Close
40
40
  --#{$about-modal-box}__close--ZIndex: var(--pf-t--global--z-index--2xl);
41
- --#{$about-modal-box}__close--PaddingTop: var(--pf-t--global--spacer--2xl);
42
- --#{$about-modal-box}__close--PaddingRight: var(--pf-t--global--spacer--xl);
43
- --#{$about-modal-box}__close--PaddingBottom: var(--pf-t--global--spacer--xl);
44
- --#{$about-modal-box}__close--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
45
- --#{$about-modal-box}__close--lg--PaddingRight: var(--pf-t--global--spacer--3xl);
41
+ --#{$about-modal-box}__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
42
+ --#{$about-modal-box}__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
43
+ --#{$about-modal-box}__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
44
+ --#{$about-modal-box}__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
45
+ --#{$about-modal-box}__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
46
46
 
47
47
  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
48
- --#{$about-modal-box}__close--PaddingBottom: var(--#{$about-modal-box}__close--sm--PaddingBottom);
48
+ --#{$about-modal-box}__close--PaddingBlockEnd: var(--#{$about-modal-box}__close--sm--PaddingBlockEnd);
49
49
  }
50
50
 
51
51
  @media only screen and (min-width: $pf-v6-global--breakpoint--lg) {
52
- --#{$about-modal-box}__close--PaddingRight: var(--#{$about-modal-box}__close--lg--PaddingRight);
52
+ --#{$about-modal-box}__close--PaddingInlineEnd: var(--#{$about-modal-box}__close--lg--PaddingInlineEnd);
53
53
  }
54
54
 
55
55
  // Close Button
@@ -59,42 +59,42 @@
59
59
  --#{$about-modal-box}__brand-image--Height: #{pf-size-prem(40px)};
60
60
 
61
61
  // Header
62
- --#{$about-modal-box}__header--PaddingRight: var(--pf-t--global--spacer--xl);
63
- --#{$about-modal-box}__header--PaddingBottom: var(--pf-t--global--spacer--sm);
64
- --#{$about-modal-box}__header--PaddingLeft: var(--pf-t--global--spacer--xl);
65
- --#{$about-modal-box}__header--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
66
- --#{$about-modal-box}__header--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
62
+ --#{$about-modal-box}__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
63
+ --#{$about-modal-box}__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
64
+ --#{$about-modal-box}__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
65
+ --#{$about-modal-box}__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
66
+ --#{$about-modal-box}__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
67
67
 
68
68
  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
69
- --#{$about-modal-box}__header--PaddingRight: var(--#{$about-modal-box}__header--sm--PaddingRight);
70
- --#{$about-modal-box}__header--PaddingLeft: var(--#{$about-modal-box}__header--sm--PaddingLeft);
69
+ --#{$about-modal-box}__header--PaddingInlineEnd: var(--#{$about-modal-box}__header--sm--PaddingInlineEnd);
70
+ --#{$about-modal-box}__header--PaddingInlineStart: var(--#{$about-modal-box}__header--sm--PaddingInlineStart);
71
71
  }
72
72
 
73
73
  // Strapline
74
- --#{$about-modal-box}__strapline--PaddingTop: var(--pf-t--global--spacer--xl);
74
+ --#{$about-modal-box}__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
75
75
  --#{$about-modal-box}__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
76
76
  --#{$about-modal-box}__strapline--Color: var(--pf-t--global--text--color--subtle);
77
- --#{$about-modal-box}__strapline--sm--PaddingTop: var(--pf-t--global--spacer--2xl);
77
+ --#{$about-modal-box}__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
78
78
 
79
79
  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
80
- --#{$about-modal-box}__strapline--PaddingTop: var(--#{$about-modal-box}__strapline--sm--PaddingTop);
80
+ --#{$about-modal-box}__strapline--PaddingBlockStart: var(--#{$about-modal-box}__strapline--sm--PaddingBlockStart);
81
81
  }
82
82
 
83
83
  // Content
84
- --#{$about-modal-box}__content--MarginTop: var(--pf-t--global--spacer--xl);
85
- --#{$about-modal-box}__content--MarginRight: var(--pf-t--global--spacer--xl);
86
- --#{$about-modal-box}__content--MarginBottom: var(--pf-t--global--spacer--xl);
87
- --#{$about-modal-box}__content--MarginLeft: var(--pf-t--global--spacer--xl);
88
- --#{$about-modal-box}__content--sm--MarginTop: var(--pf-t--global--spacer--2xl);
89
- --#{$about-modal-box}__content--sm--MarginRight: var(--pf-t--global--spacer--3xl);
90
- --#{$about-modal-box}__content--sm--MarginBottom: var(--pf-t--global--spacer--2xl);
91
- --#{$about-modal-box}__content--sm--MarginLeft: var(--pf-t--global--spacer--3xl);
84
+ --#{$about-modal-box}__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
85
+ --#{$about-modal-box}__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
86
+ --#{$about-modal-box}__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
87
+ --#{$about-modal-box}__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
88
+ --#{$about-modal-box}__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
89
+ --#{$about-modal-box}__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
90
+ --#{$about-modal-box}__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
91
+ --#{$about-modal-box}__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
92
92
 
93
93
  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
94
- --#{$about-modal-box}__content--MarginTop: var(--#{$about-modal-box}__content--sm--MarginTop);
95
- --#{$about-modal-box}__content--MarginRight: var(--#{$about-modal-box}__content--sm--MarginRight);
96
- --#{$about-modal-box}__content--MarginBottom: var(--#{$about-modal-box}__content--sm--MarginBottom);
97
- --#{$about-modal-box}__content--MarginLeft: var(--#{$about-modal-box}__content--sm--MarginLeft);
94
+ --#{$about-modal-box}__content--MarginBlockStart: var(--#{$about-modal-box}__content--sm--MarginBlockStart);
95
+ --#{$about-modal-box}__content--MarginInlineEnd: var(--#{$about-modal-box}__content--sm--MarginInlineEnd);
96
+ --#{$about-modal-box}__content--MarginBlockEnd: var(--#{$about-modal-box}__content--sm--MarginBlockEnd);
97
+ --#{$about-modal-box}__content--MarginInlineStart: var(--#{$about-modal-box}__content--sm--MarginInlineStart);
98
98
  }
99
99
  }
100
100
 
@@ -137,10 +137,10 @@
137
137
  .#{$about-modal-box}__brand {
138
138
  display: flex;
139
139
  grid-area: brand;
140
- padding-block-start: var(--#{$about-modal-box}__brand--PaddingTop);
141
- padding-block-end: var(--#{$about-modal-box}__brand--PaddingBottom);
142
- padding-inline-start: var(--#{$about-modal-box}__brand--PaddingLeft);
143
- padding-inline-end: var(--#{$about-modal-box}__brand--PaddingRight);
140
+ padding-block-start: var(--#{$about-modal-box}__brand--PaddingBlockStart);
141
+ padding-block-end: var(--#{$about-modal-box}__brand--PaddingBlockEnd);
142
+ padding-inline-start: var(--#{$about-modal-box}__brand--PaddingInlineStart);
143
+ padding-inline-end: var(--#{$about-modal-box}__brand--PaddingInlineEnd);
144
144
  }
145
145
 
146
146
  .#{$about-modal-box}__brand-image {
@@ -152,14 +152,14 @@
152
152
  display: flex;
153
153
  flex-direction: column;
154
154
  grid-area: header;
155
- padding-block-end: var(--#{$about-modal-box}__header--PaddingBottom);
156
- padding-inline-start: var(--#{$about-modal-box}__header--PaddingLeft);
157
- padding-inline-end: var(--#{$about-modal-box}__header--PaddingRight);
155
+ padding-block-end: var(--#{$about-modal-box}__header--PaddingBlockEnd);
156
+ padding-inline-start: var(--#{$about-modal-box}__header--PaddingInlineStart);
157
+ padding-inline-end: var(--#{$about-modal-box}__header--PaddingInlineEnd);
158
158
  }
159
159
 
160
160
  // Strapline
161
161
  .#{$about-modal-box}__strapline {
162
- padding-block-start: var(--#{$about-modal-box}__strapline--PaddingTop);
162
+ padding-block-start: var(--#{$about-modal-box}__strapline--PaddingBlockStart);
163
163
  margin-block-start: auto;
164
164
  font-size: var(--#{$about-modal-box}__strapline--FontSize);
165
165
  color: var(--#{$about-modal-box}__strapline--Color);
@@ -170,10 +170,10 @@
170
170
  display: flex;
171
171
  flex-direction: column;
172
172
  grid-area: content;
173
- margin-block-start: var(--#{$about-modal-box}__content--MarginTop);
174
- margin-block-end: var(--#{$about-modal-box}__content--MarginBottom);
175
- margin-inline-start: var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
176
- margin-inline-end: var(--#{$about-modal-box}__content--MarginRight);
173
+ margin-block-start: var(--#{$about-modal-box}__content--MarginBlockStart);
174
+ margin-block-end: var(--#{$about-modal-box}__content--MarginBlockEnd);
175
+ margin-inline-start: var(--#{$about-modal-box}__content--MarginInlineStart); // Using margin instead of padding to prevent scrollbar extending to top of content block
176
+ margin-inline-end: var(--#{$about-modal-box}__content--MarginInlineEnd);
177
177
  overflow-x: hidden;
178
178
  overflow-y: auto;
179
179
  overscroll-behavior: contain;
@@ -194,9 +194,9 @@
194
194
  grid-area: close;
195
195
  align-items: flex-start;
196
196
  justify-content: flex-end;
197
- padding-block-start: var(--#{$about-modal-box}__close--PaddingTop);
198
- padding-block-end: var(--#{$about-modal-box}__close--PaddingBottom);
199
- padding-inline-end: var(--#{$about-modal-box}__close--PaddingRight);
197
+ padding-block-start: var(--#{$about-modal-box}__close--PaddingBlockStart);
198
+ padding-block-end: var(--#{$about-modal-box}__close--PaddingBlockEnd);
199
+ padding-inline-end: var(--#{$about-modal-box}__close--PaddingInlineEnd);
200
200
 
201
201
  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
202
202
  grid-area: 1 / 2;
package/components/Accordion/accordion.css CHANGED
@@ -4,11 +4,11 @@
4
4
  --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
5
5
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
6
6
  --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-accordion__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
8
- --pf-v6-c-accordion__toggle--PaddingRight: var(--pf-t--global--spacer--md);
9
- --pf-v6-c-accordion__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
10
- --pf-v6-c-accordion__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
11
- --pf-v6-c-accordion__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
7
+ --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
8
+ --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9
+ --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
10
+ --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11
+ --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
12
12
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
13
13
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
14
14
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -18,24 +18,24 @@
18
18
  --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
19
19
  --pf-v6-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
20
20
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
21
- --pf-v6-c-accordion__expandable-content--MarginRight: var(--pf-t--global--spacer--md);
22
- --pf-v6-c-accordion__expandable-content--MarginBottom: var(--pf-t--global--spacer--md);
23
- --pf-v6-c-accordion__expandable-content--MarginLeft: var(--pf-t--global--spacer--md);
21
+ --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
22
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
23
+ --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
24
24
  --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
25
25
  --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
26
26
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
27
27
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
28
28
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
29
- --pf-v6-c-accordion__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--sm);
30
- --pf-v6-c-accordion__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--sm);
31
- --pf-v6-c-accordion__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--sm);
32
- --pf-v6-c-accordion__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--sm);
33
- --pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
34
- --pf-v6-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
35
- --pf-v6-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--md);
36
- --pf-v6-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
37
- --pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
38
- --pf-v6-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
29
+ --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
30
+ --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31
+ --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
32
+ --pf-v6-c-accordion__expandable-content-body--PaddingInlineStart: var(--pf-t--global--spacer--sm);
33
+ --pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart: 0;
34
+ --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
35
+ --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
36
+ --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
37
+ --pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
38
+ --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading);
40
40
  --pf-v6-c-accordion--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm);
41
41
  --pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading);
@@ -43,8 +43,8 @@
43
43
  --pf-v6-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-t--global--font--size--body--lg);
44
44
  --pf-v6-c-accordion--m-display-lg__expandable-content--Color: var(--pf-t--global--text--color--regular);
45
45
  --pf-v6-c-accordion--m-bordered--RowGap: 0;
46
- --pf-v6-c-accordion__item--m-bordered--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
47
- --pf-v6-c-accordion__item--m-bordered--BorderBottomColor: var(--pf-t--global--border--color--default);
46
+ --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
47
+ --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
48
48
  }
49
49
 
50
50
  .pf-v6-c-accordion {
@@ -57,11 +57,11 @@
57
57
  --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap);
58
58
  }
59
59
  .pf-v6-c-accordion.pf-m-display-lg {
60
- --pf-v6-c-accordion__toggle--PaddingTop: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingTop);
61
- --pf-v6-c-accordion__toggle--PaddingRight: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingRight);
62
- --pf-v6-c-accordion__toggle--PaddingBottom: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBottom);
63
- --pf-v6-c-accordion__toggle--m-expanded--PaddingBottom: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBottom);
64
- --pf-v6-c-accordion__toggle--PaddingLeft: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingLeft);
60
+ --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart);
61
+ --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd);
62
+ --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd);
63
+ --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd);
64
+ --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart);
65
65
  --pf-v6-c-accordion__toggle--FontFamily: var(--pf-v6-c-accordion--m-display-lg__toggle--FontFamily);
66
66
  --pf-v6-c-accordion__toggle--FontSize: var(--pf-v6-c-accordion--m-display-lg__toggle--FontSize);
67
67
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight);
@@ -75,14 +75,14 @@
75
75
  --pf-v6-c-accordion__toggle--BorderRadius: 0;
76
76
  }
77
77
  .pf-v6-c-accordion.pf-m-bordered .pf-v6-c-accordion__item {
78
- border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBottomWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBottomColor);
78
+ border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor);
79
79
  }
80
80
 
81
81
  .pf-v6-c-accordion__item {
82
82
  border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
83
83
  }
84
84
  .pf-v6-c-accordion__item.pf-m-expanded {
85
- --pf-v6-c-accordion__toggle--PaddingBottom: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBottom);
85
+ --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
86
86
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
87
87
  background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
88
88
  }
@@ -95,10 +95,10 @@
95
95
  column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
96
96
  align-items: center;
97
97
  width: 100%;
98
- padding-block-start: var(--pf-v6-c-accordion__toggle--PaddingTop);
99
- padding-block-end: var(--pf-v6-c-accordion__toggle--PaddingBottom);
100
- padding-inline-start: var(--pf-v6-c-accordion__toggle--PaddingLeft);
101
- padding-inline-end: var(--pf-v6-c-accordion__toggle--PaddingRight);
98
+ padding-block-start: var(--pf-v6-c-accordion__toggle--PaddingBlockStart);
99
+ padding-block-end: var(--pf-v6-c-accordion__toggle--PaddingBlockEnd);
100
+ padding-inline-start: var(--pf-v6-c-accordion__toggle--PaddingInlineStart);
101
+ padding-inline-end: var(--pf-v6-c-accordion__toggle--PaddingInlineEnd);
102
102
  font-family: var(--pf-v6-c-accordion__toggle--FontFamily, inherit);
103
103
  font-size: var(--pf-v6-c-accordion__toggle--FontSize, inherit);
104
104
  text-align: start;
@@ -127,9 +127,9 @@
127
127
  }
128
128
 
129
129
  .pf-v6-c-accordion__expandable-content {
130
- margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBottom);
131
- margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginLeft);
132
- margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginRight);
130
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
131
+ margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
132
+ margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
133
133
  font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
134
134
  color: var(--pf-v6-c-accordion__expandable-content--Color);
135
135
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
@@ -141,11 +141,11 @@
141
141
  }
142
142
 
143
143
  .pf-v6-c-accordion__expandable-content-body {
144
- padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingTop);
145
- padding-block-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingBottom);
146
- padding-inline-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingLeft);
147
- padding-inline-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingRight);
144
+ padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);
145
+ padding-block-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd);
146
+ padding-inline-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart);
147
+ padding-inline-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd);
148
148
  }
149
149
  .pf-v6-c-accordion__expandable-content-body + .pf-v6-c-accordion__expandable-content-body {
150
- --pf-v6-c-accordion__expandable-content-body--PaddingTop: var(--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
150
+ --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart);
151
151
  }